diff --git a/frontend/src/styles/test.scss b/frontend/src/styles/test.scss index 409e8594b..e814057ac 100644 --- a/frontend/src/styles/test.scss +++ b/frontend/src/styles/test.scss @@ -948,10 +948,7 @@ display: none; height: max-content; margin-bottom: 1rem; - transition: 0.125s; - &.focus { - opacity: 0; - } + transition: opacity 0.125s; } #testConfig { @@ -1036,9 +1033,6 @@ .customText { display: grid; } - &.focus { - opacity: 0; - } } .pageTest { @@ -1192,6 +1186,12 @@ main.focus .pageTest { #testModesNotice { opacity: 0 !important; } + #testConfig { + opacity: 0 !important; + } + #mobileTestConfig { + opacity: 0 !important; + } } /* funbox nospace */ diff --git a/frontend/src/ts/pages/test.ts b/frontend/src/ts/pages/test.ts index 347961e65..6b25fe653 100644 --- a/frontend/src/ts/pages/test.ts +++ b/frontend/src/ts/pages/test.ts @@ -7,6 +7,7 @@ import Page from "./page"; import { updateFooterAndVerticalAds } from "../controllers/ad-controller"; import * as ModesNotice from "../elements/modes-notice"; import * as Keymap from "../elements/keymap"; +import * as TestConfig from "../test/test-config"; export const page = new Page( "test", @@ -29,6 +30,7 @@ export const page = new Page( TestLogic.restart({ noAnim: true, }); + TestConfig.instantUpdate(); Funbox.activate(); Keymap.refresh(); }, diff --git a/frontend/src/ts/test/focus.ts b/frontend/src/ts/test/focus.ts index ae986413d..3e9d7d44e 100644 --- a/frontend/src/ts/test/focus.ts +++ b/frontend/src/ts/test/focus.ts @@ -15,8 +15,6 @@ export function set(foc: boolean, withCursor = false): void { $("footer").addClass("focus"); if (!withCursor) $("body").css("cursor", "none"); $("main").addClass("focus"); - $("#testConfig").addClass("focus"); - $("#mobileTestConfig").addClass("focus"); $("#bannerCenter").addClass("focus"); $("#notificationCenter").addClass("focus"); $("#capsWarning").addClass("focus"); @@ -34,8 +32,6 @@ export function set(foc: boolean, withCursor = false): void { $("footer").removeClass("focus"); $("body").css("cursor", "default"); $("main").removeClass("focus"); - $("#testConfig").removeClass("focus"); - $("#mobileTestConfig").removeClass("focus"); $("#bannerCenter").removeClass("focus"); $("#notificationCenter").removeClass("focus"); $("#capsWarning").removeClass("focus"); diff --git a/frontend/src/ts/test/test-config.ts b/frontend/src/ts/test/test-config.ts index 7d9795f84..9e54ff496 100644 --- a/frontend/src/ts/test/test-config.ts +++ b/frontend/src/ts/test/test-config.ts @@ -1,13 +1,6 @@ +import Config from "../config"; import * as ConfigEvent from "../observables/config-event"; -// import * as Misc from "../utils/misc"; - -// export function show() { -// $("header .config").removeClass("hidden").css("opacity", 1); -// } - -// export function hide() { -// $("header .config").css("opacity", 0).addClass("hidden"); -// } +import * as ActivePage from "../states/active-page"; export function show(): void { $("#testConfig").removeClass("invisible"); @@ -19,6 +12,66 @@ export function hide(): void { $("#mobileTestConfig").addClass("invisible"); } +export async function instantUpdate(): Promise { + $("#testConfig .mode .textButton").removeClass("active"); + $("#testConfig .mode .textButton[mode='" + Config.mode + "']").addClass( + "active" + ); + + $("#testConfig .puncAndNum").css({ + maxWidth: 0, + opacity: 0, + }); + $("#testConfig .spacer").addClass("scrolled"); + $("#testConfig .time").addClass("hidden"); + $("#testConfig .wordCount").addClass("hidden"); + $("#testConfig .customText").addClass("hidden"); + $("#testConfig .quoteLength").addClass("hidden"); + $("#testConfig .zen").addClass("hidden"); + + if (Config.mode === "time") { + $("#testConfig .puncAndNum").css({ + maxWidth: "", + opacity: 1, + }); + $("#testConfig .leftSpacer").removeClass("scrolled"); + $("#testConfig .rightSpacer").removeClass("scrolled"); + $("#testConfig .time").removeClass("hidden"); + + updateExtras("time", Config.time); + } else if (Config.mode === "words") { + $("#testConfig .puncAndNum").css({ + maxWidth: "", + opacity: 1, + }); + + $("#testConfig .leftSpacer").removeClass("scrolled"); + $("#testConfig .rightSpacer").removeClass("scrolled"); + + $("#testConfig .wordCount").removeClass("hidden"); + + updateExtras("words", Config.words); + } else if (Config.mode === "quote") { + $("#testConfig .rightSpacer").removeClass("scrolled"); + $("#testConfig .quoteLength").removeClass("hidden"); + + updateExtras("quoteLength", Config.quoteLength); + } else if (Config.mode === "custom") { + $("#testConfig .puncAndNum").css({ + maxWidth: "", + opacity: 1, + }); + + $("#testConfig .leftSpacer").removeClass("scrolled"); + $("#testConfig .rightSpacer").removeClass("scrolled"); + + $("#testConfig .customText").removeClass("hidden"); + } + + updateExtras("numbers", Config.numbers); + updateExtras("punctuation", Config.punctuation); +} + export async function update( previous: MonkeyTypes.Mode, current: MonkeyTypes.Mode @@ -27,26 +80,6 @@ export async function update( $("#testConfig .mode .textButton").removeClass("active"); $("#testConfig .mode .textButton[mode='" + current + "']").addClass("active"); - // if (current === "time") { - // $("#testConfig .punctuationMode").removeClass("hidden"); - // $("#testConfig .numbersMode").removeClass("hidden"); - // $("#testConfig .leftSpacer").removeClass("hidden"); - // } else if (current === "words") { - // $("#testConfig .punctuationMode").removeClass("hidden"); - // $("#testConfig .numbersMode").removeClass("hidden"); - // $("#testConfig .leftSpacer").removeClass("hidden"); - // } else if (current === "custom") { - // $("#testConfig .punctuationMode").removeClass("hidden"); - // $("#testConfig .numbersMode").removeClass("hidden"); - // $("#testConfig .leftSpacer").removeClass("hidden"); - // } else if (current === "quote") { - // $("#testConfig .punctuationMode").addClass("hidden"); - // $("#testConfig .numbersMode").addClass("hidden"); - // $("#testConfig .leftSpacer").addClass("hidden"); - // } else if (current === "zen") { - // // - // } - const submenu = { time: "time", words: "wordCount", @@ -56,6 +89,16 @@ export async function update( }; const animTime = 250; + const easing = { + both: "easeInOutSine", + in: "easeInSine", + out: "easeOutSine", + }; + // const easing = { + // both: "linear", + // in: "linear", + // out: "linear", + // }; const puncAndNumVisible = { time: true, @@ -65,14 +108,22 @@ export async function update( zen: false, }; + const puncAndNumEl = $("#testConfig .puncAndNum"); + if ( puncAndNumVisible[previous] === false && puncAndNumVisible[current] === true ) { //show + puncAndNumEl.css("maxWidth", ""); + + const puncAndNumWidth = Math.round( + puncAndNumEl[0]?.getBoundingClientRect().width ?? 224 + ); + $("#testConfig .leftSpacer").removeClass("scrolled"); - $("#testConfig .puncAndNum") + puncAndNumEl .css({ opacity: 0, maxWidth: 0, @@ -80,10 +131,10 @@ export async function update( .animate( { opacity: 1, - maxWidth: "14rem", + maxWidth: puncAndNumWidth, }, animTime, - "easeInOutSine" + easing.both ); } else if ( puncAndNumVisible[previous] === true && @@ -91,10 +142,10 @@ export async function update( ) { //hide $("#testConfig .leftSpacer").addClass("scrolled"); - $("#testConfig .puncAndNum") + puncAndNumEl .css({ opacity: 1, - maxWidth: "14rem", + maxWidth: "", }) .animate( { @@ -102,7 +153,7 @@ export async function update( maxWidth: "0", }, animTime, - "easeInOutSine" + easing.both ); } @@ -112,52 +163,30 @@ export async function update( $("#testConfig .rightSpacer").removeClass("scrolled"); } - // const currentWidth = Math.round( - // document.querySelector("#testConfig .row")?.getBoundingClientRect().width ?? - // 0 - // ); - - // if (puncAndNumVisible[current]) { - // $("#testConfig .punctuationMode").removeClass("hidden"); - // $("#testConfig .numbersMode").removeClass("hidden"); - // $("#testConfig .leftSpacer").removeClass("hidden"); - // } else { - // $("#testConfig .punctuationMode").addClass("hidden"); - // $("#testConfig .numbersMode").addClass("hidden"); - // $("#testConfig .leftSpacer").addClass("hidden"); - // } - - // if (current === "zen") { - // $("#testConfig .rightSpacer").addClass("hidden"); - // } else { - // $("#testConfig .rightSpacer").removeClass("hidden"); - // } + const currentEl = $(`#testConfig .${submenu[current]}`); + const previousEl = $(`#testConfig .${submenu[previous]}`); const previousWidth = Math.round( - document - .querySelector(`#testConfig .${submenu[previous]}`) - ?.getBoundingClientRect().width ?? 0 + previousEl[0]?.getBoundingClientRect().width ?? 0 ); - $(`#testConfig .${submenu[previous]}`).addClass("hidden"); + previousEl.addClass("hidden"); - $(`#testConfig .${submenu[current]}`).removeClass("hidden"); + currentEl.removeClass("hidden"); const currentWidth = Math.round( - document - .querySelector(`#testConfig .${submenu[current]}`) - ?.getBoundingClientRect().width ?? 0 + currentEl[0]?.getBoundingClientRect().width ?? 0 ); - $(`#testConfig .${submenu[previous]}`).removeClass("hidden"); + previousEl.removeClass("hidden"); - $(`#testConfig .${submenu[current]}`).addClass("hidden"); + currentEl.addClass("hidden"); const widthDifference = currentWidth - previousWidth; const widthStep = widthDifference / 2; - $(`#testConfig .${submenu[previous]}`) + previousEl .css({ opacity: 1, width: previousWidth, @@ -168,15 +197,15 @@ export async function update( opacity: 0, }, animTime / 2, - "easeInSine", + easing.in, () => { - $(`#testConfig .${submenu[previous]}`) + previousEl .css({ opacity: 1, width: "unset", }) .addClass("hidden"); - $(`#testConfig .${submenu[current]}`) + currentEl .css({ opacity: 0, width: previousWidth + widthStep, @@ -188,92 +217,13 @@ export async function update( width: currentWidth, }, animTime / 2, - "easeOutSine", + easing.out, () => { - $(`#testConfig .${submenu[current]}`).css("width", "unset"); + currentEl.css("width", "unset"); } ); } ); - - // $(`#testConfig .${submenu[current]}`) - // .css({ - // opacity: 0, - // maxWidth: previousWidth, - // }) - // .removeClass("hidden") - // .animate( - // { - // maxWidth: currentWidth, - // opacity: 1, - // }, - // 250, - // () => { - // $(`#testConfig .${submenu[current]}`).css({ - // opacity: 1, - // maxWidth: "unset", - // }); - // } - // ); - - // const newWidth = Math.round( - // document.querySelector("#testConfig .row")?.getBoundingClientRect().width ?? - // 0 - // ); - - // console.log(submenu[current], animTime, newWidth, currentWidth); - - // if (current === "zen") { - // $(`#testConfig .${submenu[previous]}`).animate( - // { - // opacity: 0, - // }, - // animTime / 2, - // () => { - // $(`#testConfig .${submenu[previous]}`).addClass("hidden"); - // } - // ); - // $(`#testConfig .puncAndNum`).animate( - // { - // opacity: 0, - // }, - // animTime / 2, - // () => { - // $(`#testConfig .puncAndNum`).addClass("hidden"); - // } - // ); - // return; - // } - - // if (previous === "zen") { - // setTimeout(() => { - // $(`#testConfig .${submenu[current]}`).removeClass("hidden"); - // $(`#testConfig .${submenu[current]}`) - // .css({ opacity: 0 }) - // .animate( - // { - // opacity: 1, - // }, - // animTime / 2 - // ); - // $(`#testConfig .puncAndNum`).removeClass("hidden"); - // $(`#testConfig .puncAndNum`) - // .css({ opacity: 0 }) - // .animate( - // { - // opacity: 1, - // }, - // animTime / 2 - // ); - // }, animTime / 2); - // return; - // } - - // Misc.swapElements( - // $("#testConfig ." + submenu[previous]), - // $("#testConfig ." + submenu[current]), - // animTime - // ); } export function updateExtras( @@ -329,11 +279,24 @@ export function hideFavoriteQuoteLength(): void { } ConfigEvent.subscribe((eventKey, eventValue, _nosave, eventPreviousValue) => { + if (ActivePage.get() !== "test") return; if (eventKey === "mode") { update( eventPreviousValue as MonkeyTypes.Mode, eventValue as MonkeyTypes.Mode ); + + let m2; + + if (Config.mode === "time") { + m2 = Config.time; + } else if (Config.mode === "words") { + m2 = Config.words; + } else if (Config.mode === "quote") { + m2 = Config.quoteLength; + } + + updateExtras(Config.mode, m2); } else if ( ["time", "quoteLength", "words", "numbers", "punctuation"].includes( eventKey diff --git a/frontend/static/html/pages/test.html b/frontend/static/html/pages/test.html index fe8bbcff7..c9efe8933 100644 --- a/frontend/static/html/pages/test.html +++ b/frontend/static/html/pages/test.html @@ -15,7 +15,7 @@
-
+
time
@@ -41,7 +41,7 @@
15
-
30
+
30
60
120
@@ -49,20 +49,20 @@
-