From e5ac0ad56ad5573a24bc6484c0d029cc9e815344 Mon Sep 17 00:00:00 2001 From: MathisSinet Date: Tue, 23 Jun 2026 11:09:31 +0200 Subject: [PATCH 01/14] nav cleanups --- Styles/main.css | 4 ++++ Styles/narrow.css | 2 +- Styles/navbar.css | 27 ++++++++++++++++++++------- index.html | 18 +++++++++--------- src/UI/settings.ts | 4 ++-- 5 files changed, 36 insertions(+), 19 deletions(-) diff --git a/Styles/main.css b/Styles/main.css index dbc51752..ac9510db 100644 --- a/Styles/main.css +++ b/Styles/main.css @@ -36,6 +36,10 @@ button { transition: background-color 100ms ease-in-out, color 100ms ease-in-out, transform 0.1s; } +button:hover { + transform: scale(1.1); +} + button.buttongreen { background-color: var(--button-green-bg); } diff --git a/Styles/narrow.css b/Styles/narrow.css index 9dd9f766..296c529c 100644 --- a/Styles/narrow.css +++ b/Styles/narrow.css @@ -16,7 +16,7 @@ width: 95%; --inline-padding: 1.2rem; } - .settingsButtons { + .navBtns { font-size: 0.8rem; } .settings input[type="range"] { diff --git a/Styles/navbar.css b/Styles/navbar.css index 05fe5532..79d868e3 100644 --- a/Styles/navbar.css +++ b/Styles/navbar.css @@ -1,4 +1,4 @@ -.nav { +nav { background-color: var(--bg-accent-0); padding: 0.4em 1rem; display: grid; @@ -8,7 +8,21 @@ color: inherit; } -.settingsBtn { +nav div { + margin-top: auto; + margin-bottom: 0.2rem; + + display: flex; + flex-direction: row; + align-items: center; + gap: 1rem; +} + +#versionLabel { + font-size: 0.9rem; +} + +#settingsBtn { background: url(../settings.png); width: 2.25rem; aspect-ratio: 1; @@ -17,12 +31,10 @@ background-repeat: no-repeat; background-color: transparent; outline: 0; - cursor: pointer; border-radius: 50%; transition: scale 100ms, box-shadow 100ms; - translate: 0 20%; } -.settingsBtn:hover { +#settingsBtn:hover { box-shadow: 0 0 0.6rem 0.05rem var(--settings-btn-shadow-clr), inset 0 0 0.4rem 0.03rem var(--settings-btn-shadow-clr); scale: 1.1; } @@ -93,8 +105,9 @@ border-color: var(--btn-border-clr); } - -.nav-title { +#nav-title { + font-family: Computer Modern Concrete; + font-weight: 600; transition: color 100ms ease-in-out; color: var(--title-clr); } diff --git a/index.html b/index.html index e4d68e00..953ba9a8 100644 --- a/index.html +++ b/index.html @@ -23,15 +23,15 @@ -
-
- v3.0.0 (Alpha) - - - +
+

ex Theory simulator

+
@@ -124,7 +124,7 @@

Sim settings

e5ρ
- +
Theme:

Strats simmed in "all" mode: diff --git a/src/UI/settings.ts b/src/UI/settings.ts index d66536da..a0d74b85 100644 --- a/src/UI/settings.ts +++ b/src/UI/settings.ts @@ -4,7 +4,7 @@ import { setSimState } from "./simState"; // Settings menu -const settingsBtn = qs(".settingsBtn"); +const settingsBtn = qs("#settingsBtn"); const settingsCloseBtn = qs(".settingsCloseBtn"); const settingsModal = qs(".settings"); @@ -22,7 +22,7 @@ event(settingsModal, "close", () => { // Instructions menu -const instructionsBtn = qs(".instructionsBtn"); +const instructionsBtn = qs("#instructionsBtn"); const instructionsCloseBtn = qs(".instructionsCloseBtn"); const instructionsModal = qs(".instructions"); From e3d8575a51ef63d964981860041b9a3f84a18f3a Mon Sep 17 00:00:00 2001 From: MathisSinet Date: Tue, 23 Jun 2026 11:34:47 +0200 Subject: [PATCH 02/14] More cleanups / element renamings --- Styles/controls.css | 10 +++++----- Styles/narrow.css | 4 ++-- index.html | 11 +++++++---- src/Sim/parse.ts | 4 ++-- src/UI/buttonEvents.ts | 2 +- src/UI/render.ts | 10 +++++----- 6 files changed, 22 insertions(+), 19 deletions(-) diff --git a/Styles/controls.css b/Styles/controls.css index 0106830c..7b7008fd 100644 --- a/Styles/controls.css +++ b/Styles/controls.css @@ -1,21 +1,21 @@ -.controls { +.controlsWrapper { display: grid; grid-template-columns: repeat(5, auto); width: fit-content; gap: min(2vw, 2rem); } -.controls ~ .controls { +#extraControlsWrapper { margin-top: 1.5rem; } -.controls input, -.controls select { +.controlsWrapper input, +.controlsWrapper select { font-size: 0.75rem; background-color: var(--input-bg); color: var(--input-f-clr); border-color: var(--btn-border-clr); } -.controls input[type="text"] { +.controlsWrapper input[type="text"] { border: none; outline: 1px solid var(--btn-border-clr); } diff --git a/Styles/narrow.css b/Styles/narrow.css index 296c529c..4954986c 100644 --- a/Styles/narrow.css +++ b/Styles/narrow.css @@ -2,7 +2,7 @@ :root { font-size: calc(0.5vw + 0.8rem + 0.5vh); } - .controls:nth-of-type(1) { + #baseControlsWrapper { display: grid; grid-template-columns: repeat(3, auto); gap: 0.5rem 1rem; @@ -37,7 +37,7 @@ .content-wrapper { padding: 1rem; } - .controls:nth-of-type(2) { + #extraControlsWrapper { display: flex; flex-direction: column; gap: 1rem; diff --git a/index.html b/index.html index 953ba9a8..68236701 100644 --- a/index.html +++ b/index.html @@ -22,6 +22,7 @@ + +
-
+
Theory:
Strat: - @@ -49,7 +52,7 @@

ex Theory simulator

Sigma: - +
Input: @@ -60,7 +63,7 @@

ex Theory simulator

-
+
Mode: diff --git a/src/Sim/parse.ts b/src/Sim/parse.ts index 73d0f25b..fc51b403 100644 --- a/src/Sim/parse.ts +++ b/src/Sim/parse.ts @@ -5,8 +5,8 @@ import { qs } from "../Utils/DOMhelpers"; //Inputs const modeSelector = qs(".mode"); const theorySelector = qs(".theory"); -const stratSelector = qs(".strat"); -const sigmaInput = qs(".sigma"); +const stratSelector = qs("#stratSelector"); +const sigmaInput = qs("#sigmaInput"); const currencyInput = qs(".input"); const capInput = qs(".cap"); const simAllInputArea = qs(".simAllInputArea") diff --git a/src/UI/buttonEvents.ts b/src/UI/buttonEvents.ts index c3aa4fa3..b497fc2b 100644 --- a/src/UI/buttonEvents.ts +++ b/src/UI/buttonEvents.ts @@ -11,7 +11,7 @@ const clearInput = qs(".clearInput"); const saveDist = qs(".saveDist"); const getDist = qs(".getDist"); const loadSaveButton = qs(".loadSave"); -const sigmaInput = qs(".sigma"); +const sigmaInput = qs("#sigmaInput"); const currencyInput = qs(".input"); const capInput = qs(".cap"); const simAllInputArea = qs(".simAllInputArea"); diff --git a/src/UI/render.ts b/src/UI/render.ts index b2c1c4d4..0702c994 100644 --- a/src/UI/render.ts +++ b/src/UI/render.ts @@ -5,10 +5,10 @@ import { getSimState } from "./simState"; //Inputs const theorySelector = qs(".theory"); -const stratSelector = qs(".strat"); +const stratSelector = qs("#stratSelector"); const capInputWrapper = qs(".capWrapper"); const modeSelector = qs(".mode"); -const sigmaInput = qs(".sigma"); +const sigmaInput = qs("#sigmaInput"); const currencyInput = qs(".input"); const simAllInputArea = qs(".simAllInputArea") const modeInput = qs(".modeInput"); @@ -20,7 +20,7 @@ const showUnofficials = qs(".unofficials"); const stratSelectionWrapper = qs("#stratSelectionWrapper"); const extraInputs = qs(".extraInputs"); const timeDiffWrapper = qs(".timeDiffWrapper"); -const singleInput = qsa(".controls")[0]; +const baseControlsWrapper = qs("#baseControlsWrapper"); const simAllInputs = qs(".simAllInputs"); const modeInputDescription = qs(".extraInputDescription"); @@ -92,7 +92,7 @@ function modeUpdate(): void { const newMode = modeSelector.value; - singleInput.style.display = "none"; + baseControlsWrapper.style.display = "none"; capInputWrapper.style.display = "none"; hardCapWrapper.style.display = "none"; @@ -107,7 +107,7 @@ function modeUpdate(): void { // Displays the strat selector if (newMode !== "Comparison") stratSelectionWrapper.style.display = "block"; // Displays the single-theory inputs - if (newMode !== "All" && newMode !== "Time diff.") singleInput.style.display = "grid"; + if (newMode !== "All" && newMode !== "Time diff.") baseControlsWrapper.style.display = "grid"; // Displays the cap input for chain/steps mode if (newMode === "Chain" || newMode === "Steps" || newMode === "StepChain") capInputWrapper.style.display = "inline"; // Displays the hard cap input From 3ee6195bc579b905e8ab2787616b9a2ff738ec23 Mon Sep 17 00:00:00 2001 From: MathisSinet Date: Tue, 23 Jun 2026 14:05:06 +0200 Subject: [PATCH 03/14] Factored query selectors in a single file --- src/Sim/main.ts | 25 +++------ src/Sim/parse.ts | 119 ++++++++++++++++------------------------ src/Sim/simulate.ts | 16 +++--- src/Sim/write.ts | 63 +++++++++------------ src/UI/buttonEvents.ts | 116 ++++++++++++++------------------------- src/UI/elements.ts | 85 ++++++++++++++++++++++++++++ src/UI/render.ts | 112 +++++++++++++++---------------------- src/UI/settings.ts | 83 +++++++++++----------------- src/UI/simState.ts | 83 +++++++++++----------------- src/Utils/DOMhelpers.ts | 12 ++++ webpack.config.js | 3 +- 11 files changed, 336 insertions(+), 381 deletions(-) create mode 100644 src/UI/elements.ts diff --git a/src/Sim/main.ts b/src/Sim/main.ts index a1eb7d28..051e5f43 100644 --- a/src/Sim/main.ts +++ b/src/Sim/main.ts @@ -6,14 +6,7 @@ import { qs, event } from "../Utils/DOMhelpers"; import { cacheFilterQuery, cacheFilterResponse, setCache } from "./cache"; import { refreshDOMEventLoop } from "../Utils/helpers"; import { loadSave } from "../UI/buttonEvents"; - -const output = qs(".output"); - -// Inputs -const simAllInputArea = qs(".simAllInputArea"); - -//Buttons -const simulateButton = qs(".simulate"); +import UI from "../UI/elements"; export const global = { simulating: false, @@ -22,16 +15,16 @@ export const global = { async function simCall() { if (global.simulating) { global.simulating = false; - output.textContent = "Sim stopped."; + UI.outputs.log.textContent = "Sim stopped."; return; } global.simulating = true; - output.textContent = ""; - simulateButton.textContent = "Stop simulating"; + UI.outputs.log.textContent = ""; + UI.controls.simulateBtn.textContent = "Stop simulating"; // Auto-load save - if (/^[A-Za-z0-9+\/=]{20,}$/.test(simAllInputArea.value.trim())) { + if (/^[A-Za-z0-9+\/=]{20,}$/.test(UI.controls.simAllInputArea.value.trim())) { await loadSave(); await refreshDOMEventLoop(); } @@ -44,15 +37,15 @@ async function simCall() { await refreshDOMEventLoop(); if (global.simulating) setCache(query, filteredResponse); writeSimResponse(filteredResponse); - output.textContent = ""; + UI.outputs.log.textContent = ""; } catch (err) { - output.textContent = global.simulating ? String(err) : "Sim stopped."; + UI.outputs.log.textContent = global.simulating ? String(err) : "Sim stopped."; } global.simulating = false; - simulateButton.textContent = "Simulate"; + UI.controls.simulateBtn.textContent = "Simulate"; setSimState(); } -event(simulateButton, "click", simCall); \ No newline at end of file +event(UI.controls.simulateBtn, "click", simCall); \ No newline at end of file diff --git a/src/Sim/parse.ts b/src/Sim/parse.ts index fc51b403..4d1fc3cd 100644 --- a/src/Sim/parse.ts +++ b/src/Sim/parse.ts @@ -1,44 +1,19 @@ import jsonData from "../Data/data.json" with { type: "json" }; import { getTheoryFromIndex, isMainTheory, parseLog10String, reverseMulti } from "../Utils/helpers"; -import { qs } from "../Utils/DOMhelpers"; +import UI from "../UI/elements"; -//Inputs -const modeSelector = qs(".mode"); -const theorySelector = qs(".theory"); -const stratSelector = qs("#stratSelector"); -const sigmaInput = qs("#sigmaInput"); -const currencyInput = qs(".input"); -const capInput = qs(".cap"); -const simAllInputArea = qs(".simAllInputArea") -const modeInput = qs(".modeInput"); -const hardCap = qs(".hardCap"); -const semi_idle = qs(".semi-idle"); -const hard_active = qs(".hard-active"); - -//Setting Inputs -const dtOtp = qs(".dtOtp"); -const ddtOtp = qs(".ddtOtp"); -const mfDepthOtp = qs(".mfDepthOtp"); -const boughtVarsDeltaSlider = qs(".boughtVarsDelta"); -const themeSelector = qs(".themeSelector"); -const simAllStrats = qs(".simallstrats"); -const completedCTs = qs(".completedcts"); -const showA23 = qs(".a23"); -const showUnofficials = qs(".unofficials"); -const generateTotalPurchaseList = qs(".totalPurchaseList"); - -function parseSettings(): Settings { +export function parseSettings(): Settings { return { - dt: parseFloat(dtOtp.textContent ?? "1.5"), - ddt: parseFloat(ddtOtp.textContent ?? "1.0001"), - mfResetDepth: parseInt(mfDepthOtp.textContent ?? "0"), - boughtVarsDelta: parseInt(boughtVarsDeltaSlider.value), - theme: themeSelector.value, - simAllStrats: simAllStrats.value as SettingsSimAllStratsMode, - completedCTs: completedCTs.value as SettingsCompletedCTsMode, - showA23: showA23.checked, - showUnofficials: showUnofficials.checked, - totalPurchaseList: generateTotalPurchaseList.checked + dt: parseFloat(UI.settings.dtOtp.textContent ?? "1.5"), + ddt: parseFloat(UI.settings.ddtOtp.textContent ?? "1.0001"), + mfResetDepth: parseInt(UI.settings.mfDepthOtp.textContent ?? "0"), + boughtVarsDelta: parseInt(UI.settings.boughtVarsDeltaSlider.value), + theme: UI.settings.themeSelector.value, + simAllStrats: UI.settings.simAllStrats.value as SettingsSimAllStratsMode, + completedCTs: UI.settings.completedCTs.value as SettingsCompletedCTsMode, + showA23: UI.settings.showA23.checked, + showUnofficials: UI.settings.showUnofficials.checked, + totalPurchaseList: UI.settings.totalPurchaseList.checked } } @@ -77,7 +52,7 @@ function parseCurrency(str: string, theory: theoryType, sigma: number, defaultTy } function parseSigma(required: boolean): number { - const str = sigmaInput.value.replace(" ", ""); + const str = UI.controls.sigmaInput.value.replace(" ", ""); const match = str.match(/^\d+$/g); if (match) { return parseInt(match[0]); @@ -91,84 +66,84 @@ function parseSigma(required: boolean): number { } function parseSingleSim(): SingleSimQuery { - const theory = theorySelector.value as theoryType; + const theory = UI.controls.theorySelector.value as theoryType; const sigma = parseSigma(isMainTheory(theory)); return { queryType: "single", theory: theory, - strat: stratSelector.value, + strat: UI.controls.stratSelector.value, sigma: sigma, - rho: parseCurrency(currencyInput.value, theory, sigma), + rho: parseCurrency(UI.controls.currencyInput.value, theory, sigma), settings: parseSettings() } } function parseChainSim(): ChainSimQuery { - const theory = theorySelector.value as theoryType; + const theory = UI.controls.theorySelector.value as theoryType; const sigma = parseSigma(isMainTheory(theory)); return { queryType: "chain", theory: theory, - strat: stratSelector.value, + strat: UI.controls.stratSelector.value, sigma: sigma, - rho: parseCurrency(currencyInput.value, theory, sigma), - cap: parseCurrency(capInput.value, theory, sigma), - hardCap: hardCap.checked, + rho: parseCurrency(UI.controls.currencyInput.value, theory, sigma), + cap: parseCurrency(UI.controls.capInput.value, theory, sigma), + hardCap: UI.controls.hardCap.checked, settings: parseSettings() } } function parseStepSim(): StepSimQuery { - const theory = theorySelector.value as theoryType; + const theory = UI.controls.theorySelector.value as theoryType; const sigma = parseSigma(isMainTheory(theory)); return { queryType: "step", theory: theory, - strat: stratSelector.value, + strat: UI.controls.stratSelector.value, sigma: sigma, - rho: parseCurrency(currencyInput.value, theory, sigma), - cap: parseCurrency(capInput.value, theory, sigma), - step: parseExponentialValue(modeInput.value), + rho: parseCurrency(UI.controls.currencyInput.value, theory, sigma), + cap: parseCurrency(UI.controls.capInput.value, theory, sigma), + step: parseExponentialValue(UI.controls.extraInput.value), settings: parseSettings() } } function parseComparisonSim(): ComparisonSimQuery { - const theory = theorySelector.value as theoryType; + const theory = UI.controls.theorySelector.value as theoryType; const sigma = parseSigma(isMainTheory(theory)); return { queryType: "comparison", theory: theory, sigma: sigma, - rho: parseCurrency(currencyInput.value, theory, sigma), + rho: parseCurrency(UI.controls.currencyInput.value, theory, sigma), settings: parseSettings() } } function parseAmountSim(): AmountSimQuery { - const theory = theorySelector.value as theoryType; + const theory = UI.controls.theorySelector.value as theoryType; const sigma = parseSigma(isMainTheory(theory)); return { queryType: "amount", theory: theory, - strat: stratSelector.value, + strat: UI.controls.stratSelector.value, sigma: sigma, - rho: parseCurrency(currencyInput.value, theory, sigma), - amount: parseInt(modeInput.value), + rho: parseCurrency(UI.controls.currencyInput.value, theory, sigma), + amount: parseInt(UI.controls.extraInput.value), settings: parseSettings() } } function parseTimeSim(): TimeSimQuery { - const theory = theorySelector.value as theoryType; + const theory = UI.controls.theorySelector.value as theoryType; const sigma = parseSigma(isMainTheory(theory)); - const timeStr = modeInput.value; + const timeStr = UI.controls.extraInput.value; const timeComponents = timeStr.matchAll(/(\d+)([ydhm])/g); let time = 0; @@ -192,35 +167,35 @@ function parseTimeSim(): TimeSimQuery { return { queryType: "time", theory: theory, - strat: stratSelector.value, + strat: UI.controls.stratSelector.value, sigma: sigma, - rho: parseCurrency(currencyInput.value, theory, sigma), + rho: parseCurrency(UI.controls.currencyInput.value, theory, sigma), time, - hardCap: hardCap.checked, + hardCap: UI.controls.hardCap.checked, settings: parseSettings() } } function parseStepChainSim(): StepChainQuery { - const theory = theorySelector.value as theoryType; + const theory = UI.controls.theorySelector.value as theoryType; const sigma = parseSigma(isMainTheory(theory)); return { queryType: "step_chain", theory: theory, - strat: stratSelector.value, + strat: UI.controls.stratSelector.value, sigma: sigma, - rho: parseCurrency(currencyInput.value, theory, sigma), - cap: parseCurrency(capInput.value, theory, sigma), - step: parseExponentialValue(modeInput.value), - hardCap: hardCap.checked, + rho: parseCurrency(UI.controls.currencyInput.value, theory, sigma), + cap: parseCurrency(UI.controls.capInput.value, theory, sigma), + step: parseExponentialValue(UI.controls.extraInput.value), + hardCap: UI.controls.hardCap.checked, settings: parseSettings() } } function parseSimAll(): SimAllQuery { const settings = parseSettings(); - const str = simAllInputArea.value; + const str = UI.controls.simAllInputArea.value; let split = str.split(" ").map(s => s.replace("\n", "")).filter(s => s != ""); const sigmaStr = split.shift() ?? ""; @@ -248,15 +223,15 @@ function parseSimAll(): SimAllQuery { queryType: "all", sigma: sigma, values: values, - veryActive: hard_active.checked, - semiIdle: semi_idle.checked, + veryActive: UI.controls.veryActiveToggle.checked, + semiIdle: UI.controls.semiIdleToggle.checked, stratType: settings.simAllStrats, settings: settings } } export function parseQuery(): SimQuery { - switch (modeSelector.value) { + switch (UI.controls.modeSelector.value) { case "All": return parseSimAll(); case "Single sim": return parseSingleSim(); case "Chain": return parseChainSim(); diff --git a/src/Sim/simulate.ts b/src/Sim/simulate.ts index 9464ceea..9013145b 100644 --- a/src/Sim/simulate.ts +++ b/src/Sim/simulate.ts @@ -1,7 +1,6 @@ import jsonData from "../Data/data.json" with { type: "json" }; import { global } from "./main"; import { convertTime, defaultResult, getBestResult, getTheoryFromIndex, logToExp, sleep } from "../Utils/helpers"; -import { qs } from "../Utils/DOMhelpers"; import { getStrats } from "./strats"; import t1 from "../Theories/T1-T8/T1"; import t2 from "../Theories/T1-T8/T2"; @@ -22,8 +21,7 @@ import mf from "../Theories/CTs/MF"; import bap from "../Theories/CTs/BaP"; import bt from "../Theories/Unofficial-CTs/BT"; import tc from "../Theories/Unofficial-CTs/TC"; - -const output = qs(".output"); +import UI from "../UI/elements"; const simFunction: { [key in theoryType]: ((data: theoryData) => Promise) } = { T1: t1, @@ -86,7 +84,7 @@ async function chainSim(query: ChainSimQuery, doLog = true): Promise 250 && doLog) { lastLog = ts; - output.textContent = `Simulating ${logToExp(rho, 0)}/${stopStr}`; + UI.outputs.log.textContent = `Simulating ${logToExp(rho, 0)}/${stopStr}`; await sleep(); } @@ -130,7 +128,7 @@ async function amountSim(query: AmountSimQuery, doLog = true): Promise 250 && doLog) { lastLog = ts; - output.textContent = `Simulating ${i+1}/${query.amount} pubs`; + UI.outputs.log.textContent = `Simulating ${i+1}/${query.amount} pubs`; await sleep(); } @@ -174,7 +172,7 @@ async function timeSim(query: TimeSimQuery): Promise { const ts = performance.now(); if (ts - lastLog > 250) { lastLog = ts; - output.textContent = `Simulating ${convertTime(time)}/${stopStr}`; + UI.outputs.log.textContent = `Simulating ${convertTime(time)}/${stopStr}`; await sleep(); } @@ -217,7 +215,7 @@ async function stepSim(query: StepSimQuery): Promise { const ts = performance.now(); if (ts - lastLog > 250) { lastLog = ts; - output.textContent = `Simulating ${logToExp(rho, 0)}/${stopStr}`; + UI.outputs.log.textContent = `Simulating ${logToExp(rho, 0)}/${stopStr}`; await sleep(); } @@ -271,7 +269,7 @@ async function simAll(query: SimAllQuery): Promise { if (rho <= 0) continue; if (!global.simulating) break; - output.innerText = `Simulating ${theory}/${lastTheory}`; + UI.outputs.log.innerText = `Simulating ${theory}/${lastTheory}`; await sleep(); const queryData: Omit = { @@ -322,7 +320,7 @@ async function stepChainSim(query: StepChainQuery): Promise { const ts = performance.now(); if (ts - lastLog > 250) { lastLog = ts; - output.textContent = `Simulating ${logToExp(rho, 0)}/${stopStr}`; + UI.outputs.log.textContent = `Simulating ${logToExp(rho, 0)}/${stopStr}`; await sleep(); } diff --git a/src/Sim/write.ts b/src/Sim/write.ts index dbb5a37f..5c3ca744 100644 --- a/src/Sim/write.ts +++ b/src/Sim/write.ts @@ -1,18 +1,7 @@ import jsonData from "../Data/data.json" with { type: "json" }; import { convertTime, formatNumber, isMainTheory, logToExp } from "../Utils/helpers"; -import { qs, qsa, ce, event, removeAllChilds, downloadString, getTableHeaders, tau } from "../Utils/DOMhelpers"; - -// Settings -const generateTotalPurchaseList = qs(".totalPurchaseList"); - -// Outputs -const table = qs(".simTable"); -const theadRow = qs(".simTable > thead > tr"); -const tbody = qs(".simTable > tbody"); - -const varBuyDialog = qs(".boughtVars"); -const varBuyTable = qs(".boughtVarsOtp"); -const varBuyListCloseBtn = qs(".boughtVarsCloseBtn"); +import { qsa, ce, event, removeAllChilds, downloadString, getTableHeaders, tau } from "../Utils/DOMhelpers"; +import UI from "../UI/elements"; const downloadIcon = ' { const cell = ce("th"); cell.innerHTML = header; - theadRow.appendChild(cell); + UI.outputs.tableHeadRow.appendChild(cell); }) } @@ -84,7 +73,7 @@ function makeVarBuyCsv(arr: varBuy[]): string { } function addVarBuyCell(row: HTMLTableRowElement, buys: varBuy[], addToTotal = true, rowspan = 1) { - if (addToTotal && generateTotalPurchaseList.checked) { + if (addToTotal && UI.settings.totalPurchaseList.checked) { totalBuys.push(...buys); totalBuys.push({variable: "---", level: 0, cost: 0, timeStamp: 0}); } @@ -137,22 +126,22 @@ function highlightResetCells() { /** Generates and open the var buy list */ function openVarModal(arr: varBuy[]) { document.body.style.overflow = "hidden"; - varBuyDialog.showModal(); - removeAllChilds(varBuyTable); + UI.buyList.dialog.showModal(); + removeAllChilds(UI.buyList.table); for (let varBuy of arr) { const row = ce("tr"); addTableCell(row, varBuy.variable); addTableCell(row, varBuy.level.toString()); addTableCell(row, `${logToExp(varBuy.cost, 2)}${getCurrencySymbol(varBuy.symbol)}`); addTableCell(row, convertTime(varBuy.timeStamp)); - varBuyTable.appendChild(row); + UI.buyList.table.appendChild(row); } highlightResetCells(); } -event(varBuyListCloseBtn, "pointerdown", () => varBuyDialog.close()); +event(UI.buyList.closeBtn, "pointerdown", () => UI.buyList.dialog.close()); -event(varBuyDialog, "close", () => document.body.style.overflow = "auto"); +event(UI.buyList.dialog, "close", () => document.body.style.overflow = "auto"); // Response writers @@ -169,7 +158,7 @@ function writeSingleSimResponse(response: SingleSimResponse) { addTableCell(row, res.tauH == 0 ? "0" : formatNumber(res.tauH)); addTableCell(row, convertTime(res.time)); addVarBuyCell(row, res.boughtVars); - tbody.append(row); + UI.outputs.tableBody.append(row); } function writeChainSimResponse(response: ChainSimResponse) { @@ -196,15 +185,15 @@ function writeChainSimResponse(response: ChainSimResponse) { addTableCell(resRow, convertTime(response.totalTime)); fillTableRow(labelRow, 1); - if(generateTotalPurchaseList.checked) { + if(UI.settings.totalPurchaseList.checked) { addVarBuyCell(resRow, totalBuys, false); } else { fillTableRow(resRow, 1); } - tbody.append(labelRow); - tbody.append(resRow); + UI.outputs.tableBody.append(labelRow); + UI.outputs.tableBody.append(resRow); } function writeStepSimResponse(response: StepSimResponse) { @@ -212,12 +201,12 @@ function writeStepSimResponse(response: StepSimResponse) { responseType: "single", result: res })); - if (generateTotalPurchaseList.checked) { + if (UI.settings.totalPurchaseList.checked) { const resRow = ce("tr"); fillTableRow(resRow, 8); addTableCell(resRow, "Total"); addVarBuyCell(resRow, totalBuys, false); - tbody.append(resRow); + UI.outputs.tableBody.append(resRow); } } @@ -259,8 +248,8 @@ function writeSimAllResponse(response: SimAllResponse) { completeSimAllLine(rowActive, res.active); completeSimAllLine(rowPassive, res.idle); - tbody.appendChild(rowActive); - tbody.appendChild(rowPassive); + UI.outputs.tableBody.appendChild(rowActive); + UI.outputs.tableBody.appendChild(rowPassive); } else { const uniqueRes = response.stratType == "active" ? res.active : res.idle; @@ -270,7 +259,7 @@ function writeSimAllResponse(response: SimAllResponse) { addTableCell(row, logToExp(res.lastPub, 2)); completeSimAllLine(row, uniqueRes); - tbody.appendChild(row); + UI.outputs.tableBody.appendChild(row); } }) @@ -281,8 +270,8 @@ function writeSimAllResponse(response: SimAllResponse) { bufferRow1.style.display = "none"; addTableCell(bufferRow2, "---"); - tbody.appendChild(bufferRow1); - tbody.appendChild(bufferRow2); + UI.outputs.tableBody.appendChild(bufferRow1); + UI.outputs.tableBody.appendChild(bufferRow2); } }) } diff --git a/src/UI/buttonEvents.ts b/src/UI/buttonEvents.ts index b497fc2b..71aedd75 100644 --- a/src/UI/buttonEvents.ts +++ b/src/UI/buttonEvents.ts @@ -1,52 +1,32 @@ import html2canvas from "html2canvas"; -import { qs, qsa, ce, event, removeAllChilds, downloadString, getTableHeaders } from "../Utils/DOMhelpers"; +import { qs, qsa, ce, event, removeAllChilds, downloadString, getTableHeaders, animateButton } from "../Utils/DOMhelpers"; +import UI from "./elements"; -//Buttons -const clear = qs(".clear"); -const copyImage = qs(".imageC"); -const downloadImage = qs(".imageD"); -const downloadCsv = qs(".csvD"); -const clearInput = qs(".clearInput"); - -const saveDist = qs(".saveDist"); -const getDist = qs(".getDist"); -const loadSaveButton = qs(".loadSave"); -const sigmaInput = qs("#sigmaInput"); -const currencyInput = qs(".input"); -const capInput = qs(".cap"); -const simAllInputArea = qs(".simAllInputArea"); -const modeInput = qs(".modeInput"); - - -const output = qs(".output"); -const table = qs(".simTable"); -const tbody = qs(".simTable tbody"); - -event(clear, "pointerdown", () => { - removeAllChilds(tbody); - output.textContent = ""; +event(UI.controls.clearResultsBtn, "pointerdown", () => { + removeAllChilds(UI.outputs.tableBody); + UI.outputs.log.textContent = ""; console.clear(); }); -event(clearInput, "pointerdown", () => { - sigmaInput.value = ""; - currencyInput.value = ""; - capInput.value = ""; - simAllInputArea.value = ""; - modeInput.value = ""; +event(UI.controls.clearInputsBtn, "pointerdown", () => { + UI.controls.sigmaInput.value = ""; + UI.controls.currencyInput.value = ""; + UI.controls.capInput.value = ""; + UI.controls.simAllInputArea.value = ""; + UI.controls.extraInput.value = ""; }) -event(copyImage, "pointerdown", () => createImage("")); -event(downloadImage, "pointerdown", () => createImage("download")); -event(downloadCsv, "pointerdown", () => { - if (table.children[0].children[0].childElementCount == 0) { +event(UI.controls.copyImageBtn, "pointerdown", () => createImage("copy")); +event(UI.controls.downloadImageBtn, "pointerdown", () => createImage("download")); +event(UI.controls.downloadCsvBtn, "pointerdown", () => { + if (UI.outputs.tableHeadRow.childElementCount == 0) { return; } downloadString(makeTableCsv(), "sim_results.csv"); }) -function createImage(mode: string) { - if (table.children[0].children[0].childElementCount == 0) { +function createImage(mode: "download" | "copy") { + if (UI.outputs.tableHeadRow.childElementCount == 0) { return; } @@ -57,7 +37,7 @@ function createImage(mode: string) { lastHeader.style.display = "none"; varBuyCells.forEach((elem) => elem.style.display = "none"); - html2canvas(table).then((canvas) => + html2canvas(UI.outputs.table).then((canvas) => canvas.toBlob((blob) => { if (mode === "download") { const a = ce("a"); @@ -70,16 +50,8 @@ function createImage(mode: string) { .write([new ClipboardItem({ "image/png": blob })]) .then(() => { console.log("Sucsessfully created image and copied to clipboard!"); - copyImage.disabled = true; - copyImage.innerHTML = "Copied!"; - copyImage.classList.add("buttongreen"); - setTimeout(() => { - copyImage.disabled = false; - copyImage.innerHTML = "Copy Image"; - copyImage.classList.remove("buttongreen"); - }, 1000); - }) - .catch(() => console.log("Failed creating image.")); + animateButton(UI.controls.copyImageBtn, "Copied!"); + }).catch(() => console.log("Failed creating image.")); } }) ) @@ -90,28 +62,26 @@ function createImage(mode: string) { } function makeTableCsv(): string { - const theadRow = qs(".simTable thead tr"); - let csvTotal = ""; - if (table.classList.contains("big")) { + if (UI.outputs.table.classList.contains("big")) { let headers = getTableHeaders( - theadRow.children.length == 10 ? "all" : "all_one", + UI.outputs.tableHeadRow.children.length == 10 ? "all" : "all_one", "text", - Number(theadRow.children[0].innerHTML.match(/^\d+/)) + Number(UI.outputs.tableHeadRow.children[0].innerHTML.match(/^\d+/)) ) csvTotal += headers.join(",") + ",\n"; let rowIndex = 0; - while (rowIndex < tbody.children.length) { - let row = tbody.children[rowIndex]; + while (rowIndex < UI.outputs.tableBody.children.length) { + let row = UI.outputs.tableBody.children[rowIndex]; if (row.children.length >= 2) { if ((row.children[0] as HTMLTableCellElement).rowSpan == 2) { rowIndex++; - let nextRow = tbody.children[rowIndex]; + let nextRow = UI.outputs.tableBody.children[rowIndex]; let row1Content = []; let row2Content = []; let j = 0; - for (let i = 0; i < theadRow.children.length - 1; i++) { + for (let i = 0; i < UI.outputs.tableHeadRow.children.length - 1; i++) { if ((row.children[i] as HTMLTableCellElement).rowSpan == 2) { row1Content.push(row.children[i].innerHTML); row2Content.push(row.children[i].innerHTML); @@ -126,7 +96,7 @@ function makeTableCsv(): string { csvTotal += row2Content.join(",") + ",\n"; } else { - for (let i = 0; i < theadRow.children.length - 1; i++) { + for (let i = 0; i < UI.outputs.tableHeadRow.children.length - 1; i++) { csvTotal += row.children[i].innerHTML + ","; } csvTotal += "\n"; @@ -140,7 +110,7 @@ function makeTableCsv(): string { let h0match = headers[0].match(/]*>(.*)<\/span>/); headers[0] = h0match == undefined ? headers[0] : (h0match.groups == undefined ? headers[0] : h0match.groups[0]); csvTotal += headers.join(",") + ",\n"; - for (let row of tbody.children) { + for (let row of UI.outputs.tableBody.children) { if (row.children[0].innerHTML.trim().length == 0) { continue; } @@ -154,25 +124,18 @@ function makeTableCsv(): string { return csvTotal; } -event(saveDist, "pointerdown", () => { - const saveString = simAllInputArea.value; +event(UI.controls.saveDistBtn, "pointerdown", () => { + const saveString = UI.controls.simAllInputArea.value; if (saveString.replace(" ", "").length === 0) return; - saveDist.disabled = true; - saveDist.innerHTML = "Saved!"; - saveDist.classList.add("buttongreen"); localStorage.setItem("savedDistribution", saveString); - setTimeout(() => { - saveDist.disabled = false; - saveDist.innerHTML = "Save distribution"; - saveDist.classList.remove("buttongreen") - }, 1000); + animateButton(UI.controls.saveDistBtn, "Saved!"); }); -event(getDist, "pointerdown", () => { - simAllInputArea.value = localStorage.getItem("savedDistribution") ?? simAllInputArea.value; +event(UI.controls.getDistBtn, "pointerdown", () => { + UI.controls.simAllInputArea.value = localStorage.getItem("savedDistribution") ?? UI.controls.simAllInputArea.value; }); export async function loadSave(): Promise { - let presumedSaveFile = simAllInputArea.value.trim(); + let presumedSaveFile = UI.controls.simAllInputArea.value.trim(); return fetch("https://ex-save-loader.hotab.pw/load",{ method: "POST", @@ -183,13 +146,14 @@ export async function loadSave(): Promise { body: JSON.stringify({savefile: presumedSaveFile}) }).then(res => res.json()).then(r => { if(!r[1] || r[1] == "Not a savefile") { - output.textContent = "Error loading save file."; + UI.outputs.log.textContent = "Error loading save file."; } else { - simAllInputArea.value = r[1]; + UI.controls.simAllInputArea.value = r[1]; + animateButton(UI.controls.loadSaveBtn, "Loaded!") } }).catch(e => { - output.textContent = "Error loading save file."; + UI.outputs.log.textContent = "Error loading save file."; }); } -event(loadSaveButton, "pointerdown", loadSave); \ No newline at end of file +event(UI.controls.loadSaveBtn, "pointerdown", loadSave); \ No newline at end of file diff --git a/src/UI/elements.ts b/src/UI/elements.ts new file mode 100644 index 00000000..62a5d685 --- /dev/null +++ b/src/UI/elements.ts @@ -0,0 +1,85 @@ +import { qs } from "../Utils/DOMhelpers"; + +const UI = { + nav: { + instructionsBtn: qs("#instructionsBtn"), + settingsBtn: qs("#settingsBtn") + }, + controls: { + baseWrapper: qs("#baseControlsWrapper"), + + theorySelector: qs(".theory"), + + stratSelectorWrapper: qs("#stratSelectionWrapper"), + stratSelector: qs("#stratSelector"), + + sigmaInput: qs("#sigmaInput"), + currencyInput: qs(".input"), + capInputWrapper: qs(".capWrapper"), + capInput: qs(".cap"), + + modeSelector: qs(".mode"), + + hardCapWrapper: qs(".hardCapWrapper"), + hardCap: qs(".hardCap"), + + extraInputWrapper: qs(".extraInputs"), + extraInputDesc: qs(".extraInputDescription"), + + simAllInputWrapper: qs(".simAllInputs"), + saveDistBtn: qs(".saveDist"), + semiIdleToggle: qs(".semi-idle"), + veryActiveToggle: qs(".hard-active"), + getDistBtn: qs(".getDist"), + loadSaveBtn: qs(".loadSave"), + + simAllInputArea: qs(".simAllInputArea"), + extraInput: qs(".modeInput"), + + timeDiffWrapper: qs(".timeDiffWrapper"), + + copyImageBtn: qs(".imageC"), + downloadImageBtn: qs(".imageD"), + downloadCsvBtn: qs(".csvD"), + clearResultsBtn: qs(".clear"), + clearInputsBtn: qs(".clearInput"), + simulateBtn: qs(".simulate") + }, + outputs: { + log: qs(".output"), + table: qs(".simTable"), + tableHeadRow: qs(".simTable > thead > tr"), + tableBody: qs(".simTable > tbody") + }, + settings: { + dialog: qs(".settings"), + closeBtn: qs(".settingsCloseBtn"), + dtSlider: qs(".dt"), + dtOtp: qs(".dtOtp"), + ddtSlider: qs(".ddt"), + ddtOtp: qs(".ddtOtp"), + mfDepthSlider: qs(".mfDepth"), + mfDepthOtp: qs(".mfDepthOtp"), + boughtVarsDeltaSlider: qs(".boughtVarsDelta"), + boughtVarsDeltaOtp: qs(".boughtVarsDeltaOtp"), + resetBtn: qs(".resetSettings"), + + themeSelector: qs(".themeSelector"), + simAllStrats: qs(".simallstrats"), + completedCTs: qs(".completedcts"), + showA23: qs(".a23"), + showUnofficials: qs(".unofficials"), + totalPurchaseList: qs(".totalPurchaseList") + }, + buyList: { + dialog: qs(".boughtVars"), + closeBtn: qs(".boughtVarsCloseBtn"), + table: qs(".boughtVarsOtp") + }, + instructions: { + dialog: qs(".instructions"), + closeBtn: qs(".instructionsCloseBtn") + } +}; + +export default UI; \ No newline at end of file diff --git a/src/UI/render.ts b/src/UI/render.ts index 0702c994..3bb375d2 100644 --- a/src/UI/render.ts +++ b/src/UI/render.ts @@ -1,29 +1,8 @@ import data from "../Data/data.json" with { type: "json" }; import { findIndex, getIndexFromTheory } from "../Utils/helpers"; -import { qs, qsa, event, ce, removeAllChilds } from "../Utils/DOMhelpers"; +import { event, ce, removeAllChilds } from "../Utils/DOMhelpers"; import { getSimState } from "./simState"; - -//Inputs -const theorySelector = qs(".theory"); -const stratSelector = qs("#stratSelector"); -const capInputWrapper = qs(".capWrapper"); -const modeSelector = qs(".mode"); -const sigmaInput = qs("#sigmaInput"); -const currencyInput = qs(".input"); -const simAllInputArea = qs(".simAllInputArea") -const modeInput = qs(".modeInput"); -const hardCapWrapper = qs(".hardCapWrapper"); -const themeSelector = qs(".themeSelector"); -const showUnofficials = qs(".unofficials"); - -//Other containers/elements -const stratSelectionWrapper = qs("#stratSelectionWrapper"); -const extraInputs = qs(".extraInputs"); -const timeDiffWrapper = qs(".timeDiffWrapper"); -const baseControlsWrapper = qs("#baseControlsWrapper"); -const simAllInputs = qs(".simAllInputs"); -const modeInputDescription = qs(".extraInputDescription"); - +import UI from "./elements"; const theories = Object.keys(data.theories) as theoryType[]; @@ -38,110 +17,109 @@ function populateSelectElement(select: HTMLSelectElement, items: string[], clear } } function populateTheoryList(showUnofficials: boolean) { - populateSelectElement(theorySelector, theories.filter(theory => + populateSelectElement(UI.controls.theorySelector, theories.filter(theory => (data.theories as TheoryDataStructure)[theory].UI_visible !== false || showUnofficials)); } //Renders theories, strats and modes options on page load -populateSelectElement(themeSelector, data.themes); -event(themeSelector, "change", themeUpdate); +populateSelectElement(UI.settings.themeSelector, data.themes); +event(UI.settings.themeSelector, "change", themeUpdate); getSimState(); -populateSelectElement(modeSelector, data.modes); +populateSelectElement(UI.controls.modeSelector, data.modes); modeUpdate(); -event(modeSelector, "input", modeUpdate); +event(UI.controls.modeSelector, "input", modeUpdate); -populateTheoryList(showUnofficials.checked); +populateTheoryList(UI.settings.showUnofficials.checked); theoryUpdate(); -event(theorySelector, "change", theoryUpdate); +event(UI.controls.theorySelector, "change", theoryUpdate); -event(showUnofficials, "click", () => { - populateTheoryList(showUnofficials.checked); +event(UI.settings.showUnofficials, "click", () => { + populateTheoryList(UI.settings.showUnofficials.checked); theoryUpdate(); }); function populateSingleSimFields(rewriteCurrency: boolean = false): void { // Sigma field - const splits = simAllInputArea.value.replace("\n", "").split(" ").filter(s => s != "") + const splits = UI.controls.simAllInputArea.value.replace("\n", "").split(" ").filter(s => s != "") - if (sigmaInput.value == "" && splits.length > 0) { + if (UI.controls.sigmaInput.value == "" && splits.length > 0) { const match = splits[0].match(/^\d+$/g); if (match) { - sigmaInput.value = match[0]; + UI.controls.sigmaInput.value = match[0]; } } - if ((currencyInput.value == "" || rewriteCurrency) && theorySelector.value && splits.length > 1) { - const theoryIndex = getIndexFromTheory(theorySelector.value); + if ((UI.controls.currencyInput.value == "" || rewriteCurrency) && UI.controls.theorySelector.value && splits.length > 1) { + const theoryIndex = getIndexFromTheory(UI.controls.theorySelector.value); if (splits.length > theoryIndex + 1) { const str = splits[theoryIndex + 1]; const match = str.match(/^e?\d+(\.\d+)?[rtm]?$/) || str.match(/^\d+(\.\d+)?e\d+[rtm]?$/); if (match) { - currencyInput.value = /[rtm]/.test(str) ? str : str.concat("t"); + UI.controls.currencyInput.value = /[rtm]/.test(str) ? str : str.concat("t"); } } else if (rewriteCurrency) { - currencyInput.value = ""; + UI.controls.currencyInput.value = ""; } } } function modeUpdate(): void { - const newMode = modeSelector.value; - + const newMode = UI.controls.modeSelector.value; - baseControlsWrapper.style.display = "none"; - capInputWrapper.style.display = "none"; - hardCapWrapper.style.display = "none"; + UI.controls.baseWrapper.style.display = "none"; + UI.controls.capInputWrapper.style.display = "none"; + UI.controls.hardCapWrapper.style.display = "none"; - stratSelectionWrapper.style.display = "none"; - extraInputs.style.display = "none"; - simAllInputs.style.display = "none"; - simAllInputArea.style.display = "none"; - modeInputDescription.style.display = "inline"; - modeInput.style.display = "none"; - timeDiffWrapper.style.display = "none"; + UI.controls.stratSelectorWrapper.style.display = "none"; + UI.controls.extraInputWrapper.style.display = "none"; + UI.controls.simAllInputWrapper.style.display = "none"; + UI.controls.simAllInputArea.style.display = "none"; + UI.controls.extraInputDesc.style.display = "inline"; + UI.controls.extraInput.style.display = "none"; + UI.controls.timeDiffWrapper.style.display = "none"; // Displays the strat selector - if (newMode !== "Comparison") stratSelectionWrapper.style.display = "block"; + if (newMode !== "Comparison") UI.controls.stratSelectorWrapper.style.display = "block"; // Displays the single-theory inputs - if (newMode !== "All" && newMode !== "Time diff.") baseControlsWrapper.style.display = "grid"; + if (newMode !== "All" && newMode !== "Time diff.") UI.controls.baseWrapper.style.display = "grid"; // Displays the cap input for chain/steps mode - if (newMode === "Chain" || newMode === "Steps" || newMode === "StepChain") capInputWrapper.style.display = "inline"; + if (newMode === "Chain" || newMode === "Steps" || newMode === "StepChain") UI.controls.capInputWrapper.style.display = "inline"; // Displays the hard cap input - if (newMode === "Chain" || newMode == "StepChain" /*|| newMode == "Time"*/) hardCapWrapper.style.display = "block"; + if (newMode === "Chain" || newMode == "StepChain" /*|| newMode == "Time"*/) UI.controls.hardCapWrapper.style.display = "block"; // Extra Inputs - if (newMode !== "Single sim" && newMode !== "Comparison" && newMode !== "Time diff." && newMode !== "Chain") extraInputs.style.display = "flex"; + if (newMode !== "Single sim" && newMode !== "Comparison" && newMode !== "Time diff." && newMode !== "Chain") UI.controls.extraInputWrapper.style.display = "flex"; if (newMode === "All") { - simAllInputs.style.display = "grid"; - modeInputDescription.style.display = "none"; - simAllInputArea.style.display = "block"; - simAllInputArea.placeholder = data.modeInputPlaceholder[0]; + UI.controls.simAllInputWrapper.style.display = "grid"; + UI.controls.extraInputDesc.style.display = "none"; + UI.controls.simAllInputArea.style.display = "block"; + UI.controls.simAllInputArea.placeholder = data.modeInputPlaceholder[0]; } else { - modeInput.style.display = "block"; + UI.controls.extraInput.style.display = "block"; } - modeInputDescription.textContent = data.modeInputDescriptions[findIndex(data.modes, newMode)]; - modeInput.placeholder = data.modeInputPlaceholder[findIndex(data.modes, newMode)]; + UI.controls.extraInputDesc.textContent = data.modeInputDescriptions[findIndex(data.modes, newMode)]; + UI.controls.extraInput.placeholder = data.modeInputPlaceholder[findIndex(data.modes, newMode)]; - if (newMode === "Time diff.") timeDiffWrapper.style.display = "grid"; + if (newMode === "Time diff.") UI.controls.timeDiffWrapper.style.display = "grid"; populateSingleSimFields(); } function theoryUpdate() { - const currentTheory = theorySelector.value as theoryType; + const currentTheory = UI.controls.theorySelector.value as theoryType; const currentTheoryStrats = Object.keys(data.theories[currentTheory].strats).filter( (strat) => (data.theories as TheoryDataStructure)[currentTheory].strats[strat].UI_visible !== false ); - populateSelectElement(stratSelector, data.stratCategories.concat(currentTheoryStrats)); + populateSelectElement(UI.controls.stratSelector, data.stratCategories.concat(currentTheoryStrats)); populateSingleSimFields(true); } function themeUpdate() { const root = document.documentElement; - root.setAttribute("theme", themeSelector.value); + root.setAttribute("theme", UI.settings.themeSelector.value); } diff --git a/src/UI/settings.ts b/src/UI/settings.ts index a0d74b85..07e50084 100644 --- a/src/UI/settings.ts +++ b/src/UI/settings.ts @@ -1,73 +1,52 @@ import { formatNumber, getddtFromSlider, getdtFromSlider } from "../Utils/helpers"; -import { qs, event } from "../Utils/DOMhelpers"; +import { event } from "../Utils/DOMhelpers"; import { setSimState } from "./simState"; +import UI from "./elements"; -// Settings menu - -const settingsBtn = qs("#settingsBtn"); -const settingsCloseBtn = qs(".settingsCloseBtn"); -const settingsModal = qs(".settings"); - -event(settingsBtn, "pointerdown", () => { - settingsModal.showModal(); +event(UI.nav.settingsBtn, "pointerdown", () => { + UI.settings.dialog.showModal(); document.body.style.overflow = "hidden"; }); -event(settingsCloseBtn, "pointerdown", () => settingsModal.close()); +event(UI.settings.closeBtn, "pointerdown", () => UI.settings.dialog.close()); -event(settingsModal, "close", () => { +event(UI.settings.dialog, "close", () => { setSimState(); document.body.style.overflow = "auto"; }) -// Instructions menu - -const instructionsBtn = qs("#instructionsBtn"); -const instructionsCloseBtn = qs(".instructionsCloseBtn"); -const instructionsModal = qs(".instructions"); - -event(instructionsBtn, "pointerdown", () => { - instructionsModal.showModal(); +event(UI.nav.instructionsBtn, "pointerdown", () => { + UI.instructions.dialog.showModal(); document.body.style.overflow = "hidden"; }); -event(instructionsCloseBtn, "pointerdown", () => instructionsModal.close()); - -event(instructionsModal, "close", () => document.body.style.overflow = "auto"); - -// Settings inputs +event(UI.instructions.closeBtn, "pointerdown", () => UI.instructions.dialog.close()); -const dtSlider = qs(".dt"); -const dtOtp = qs(".dtOtp"); +event(UI.instructions.dialog, "close", () => document.body.style.overflow = "auto"); -const ddtSlider = qs(".ddt"); -const ddtOtp = qs(".ddtOtp"); - -const mfDepthSlider = qs(".mfDepth"); -const mfDepthOtp = qs(".mfDepthOtp"); - -const boughtVarsDeltaSlider = qs(".boughtVarsDelta"); -const boughtVarsDeltaOtp = qs(".boughtVarsDeltaOtp"); - -event(dtSlider, "input", () => { - dtOtp.textContent = formatNumber(getdtFromSlider(parseFloat(dtSlider.value)), 4); +event(UI.settings.dtSlider, "input", () => { + UI.settings.dtOtp.textContent = formatNumber(getdtFromSlider(parseFloat(UI.settings.dtSlider.value)), 4); }); -event(ddtSlider, "input", () => { - ddtOtp.textContent = formatNumber(getddtFromSlider(parseFloat(ddtSlider.value)), 7) +event(UI.settings.ddtSlider, "input", () => { + UI.settings.ddtOtp.textContent = formatNumber(getddtFromSlider(parseFloat(UI.settings.ddtSlider.value)), 7) }); -event(mfDepthSlider, "input", () => mfDepthOtp.textContent = mfDepthSlider.value); - -event(boughtVarsDeltaSlider, "input", () => boughtVarsDeltaOtp.textContent = `e${boughtVarsDeltaSlider.value}ρ`); - -event(qs(".resetSettings"), "pointerdown", () => { - dtSlider.value = "8.1943"; - dtOtp.textContent = "1.5"; - ddtSlider.value = "2.71233"; - ddtOtp.textContent = "1.0001"; - boughtVarsDeltaSlider.value = "5"; - boughtVarsDeltaOtp.textContent = "e5ρ"; - mfDepthSlider.value = "0"; - mfDepthOtp.textContent = "0"; +event(UI.settings.mfDepthSlider, "input", () => + UI.settings.mfDepthOtp.textContent = UI.settings.mfDepthSlider.value +); + +event(UI.settings.boughtVarsDeltaSlider, "input", () => + UI.settings.boughtVarsDeltaOtp.textContent = `e${UI.settings.boughtVarsDeltaSlider.value}ρ` +); + +event(UI.settings.resetBtn, "pointerdown", () => { + UI.settings.dtSlider.value = "8.1943"; + UI.settings.dtOtp.textContent = "1.5"; + UI.settings.ddtSlider.value = "2.71233"; + UI.settings.ddtOtp.textContent = "1.0001"; + UI.settings.boughtVarsDeltaSlider.value = "5"; + UI.settings.boughtVarsDeltaOtp.textContent = "e5ρ"; + UI.settings.mfDepthSlider.value = "0"; + UI.settings.mfDepthOtp.textContent = "0"; }); diff --git a/src/UI/simState.ts b/src/UI/simState.ts index d9b492cf..9979642b 100644 --- a/src/UI/simState.ts +++ b/src/UI/simState.ts @@ -1,48 +1,27 @@ import { round } from "../Utils/helpers"; -import { qs } from "../Utils/DOMhelpers"; - -//Sim All Settings -const semiIdle = qs(".semi-idle"); -const hardActive = qs(".hard-active"); - -//Setting Inputs -const dtSlider = qs(".dt"); -const dtOtp = qs(".dtOtp"); - -const ddtSlider = qs(".ddt"); -const ddtOtp = qs(".ddtOtp"); - -const mfDepthSlider = qs(".mfDepth"); -const mfDepthOtp = qs(".mfDepthOtp"); - -const boughtVarsDeltaSlider = qs(".boughtVarsDelta"); -const boughtVarsDeltaOtp = qs(".boughtVarsDeltaOtp"); - -const themeSelector = qs(".themeSelector"); - -const simAllStrats = qs(".simallstrats"); -const completedCTs = qs(".completedcts"); -const showA23 = qs(".a23"); -const showUnofficials = qs(".unofficials"); +import UI from "./elements"; const defaultState = `{"settings":{"dt":"1.5","ddt":"1.0001","showA23":false,"showUnofficials":false}}`; const defaultTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? "dark" : "classic"; export function setSimState() { - localStorage.setItem("simAllSettings", JSON.stringify([semiIdle.checked, hardActive.checked])); + localStorage.setItem("simAllSettings", JSON.stringify([ + UI.controls.semiIdleToggle.checked, + UI.controls.veryActiveToggle.checked + ])); localStorage.setItem( "simState", JSON.stringify({ settings: { - dt: dtOtp.textContent, - ddt: ddtOtp.textContent, - mfResetDepth: mfDepthOtp.textContent, - boughtVarsDelta: boughtVarsDeltaSlider.value, - simAllStrats: simAllStrats.value, - completedCTs: completedCTs.value, - showA23: showA23.checked, - showUnofficials: showUnofficials.checked, - theme: themeSelector.value + dt: UI.settings.dtOtp.textContent, + ddt: UI.settings.ddtOtp.textContent, + mfResetDepth: UI.settings.mfDepthOtp.textContent, + boughtVarsDelta: UI.settings.boughtVarsDeltaSlider.value, + simAllStrats: UI.settings.simAllStrats.value, + completedCTs: UI.settings.completedCTs.value, + showA23: UI.settings.showA23.checked, + showUnofficials: UI.settings.showUnofficials.checked, + theme: UI.settings.themeSelector.value }, }) ); @@ -50,26 +29,28 @@ export function setSimState() { export function getSimState() { //Sim All Settings const simAllSettings: [boolean, boolean] = JSON.parse(localStorage.getItem("simAllSettings") ?? "[true, false]"); - semiIdle.checked = simAllSettings[0]; - hardActive.checked = simAllSettings[1]; + UI.controls.semiIdleToggle.checked = simAllSettings[0]; + UI.controls.veryActiveToggle.checked = simAllSettings[1]; // Sim Settings const state = JSON.parse(localStorage.getItem("simState") ?? defaultState); - dtOtp.textContent = state.settings.dt; - ddtOtp.textContent = state.settings.ddt; - mfDepthOtp.textContent = state.settings.mfResetDepth ?? "0"; - boughtVarsDeltaOtp.textContent = `e${state.settings.boughtVarsDelta ?? 5}ρ`; + UI.settings.dtOtp.textContent = state.settings.dt; + UI.settings.ddtOtp.textContent = state.settings.ddt; + UI.settings.mfDepthOtp.textContent = state.settings.mfResetDepth ?? "0"; + UI.settings.boughtVarsDeltaOtp.textContent = `e${state.settings.boughtVarsDelta ?? 5}ρ`; // Determines the slider position based on the stored value (see helpers.ts) - dtSlider.value = String(round(Math.log2((state.settings.dt - 0.15) / (4.9 / (1 + 2 ** parseFloat(dtSlider.max)))), 4)); - ddtSlider.value = String(round(Math.log((state.settings.ddt - 1) / (0.3 / 3 ** parseFloat(ddtSlider.max))) / Math.log(3), 4)); - mfDepthSlider.value = mfDepthOtp.textContent ?? "0"; - boughtVarsDeltaSlider.value = state.settings.boughtVarsDelta ?? 5; - - themeSelector.value = state.settings.theme ?? defaultTheme; - simAllStrats.value = state.settings.simAllStrats ?? "all"; - completedCTs.value = state.settings.completedCTs ?? (state.settings.skipCompletedCTs === true ? "no" : "in"); + UI.settings.dtSlider.value = + String(round(Math.log2((state.settings.dt - 0.15) / (4.9 / (1 + 2 ** parseFloat(UI.settings.dtSlider.max)))), 4)); + UI.settings.ddtSlider.value = + String(round(Math.log((state.settings.ddt - 1) / (0.3 / 3 ** parseFloat(UI.settings.ddtSlider.max))) / Math.log(3), 4)); + UI.settings.mfDepthSlider.value = UI.settings.mfDepthOtp.textContent ?? "0"; + UI.settings.boughtVarsDeltaSlider.value = state.settings.boughtVarsDelta ?? 5; + + UI.settings.themeSelector.value = state.settings.theme ?? defaultTheme; + UI.settings.simAllStrats.value = state.settings.simAllStrats ?? "all"; + UI.settings.completedCTs.value = state.settings.completedCTs ?? (state.settings.skipCompletedCTs === true ? "no" : "in"); //skipCompletedCTs.checked = state.settings.skipCompletedCTs ?? false; - showA23.checked = state.settings.showA23; - showUnofficials.checked = state.settings.showUnofficials ?? false; + UI.settings.showA23.checked = state.settings.showA23; + UI.settings.showUnofficials.checked = state.settings.showUnofficials ?? false; } diff --git a/src/Utils/DOMhelpers.ts b/src/Utils/DOMhelpers.ts index 8dcc38af..6e55f2e3 100644 --- a/src/Utils/DOMhelpers.ts +++ b/src/Utils/DOMhelpers.ts @@ -76,4 +76,16 @@ export function getTableHeaders(tableType: "single" | "all" | "all_one", headerT ]; return headers; }; +} + +export function animateButton(button: HTMLButtonElement, text: string, delay = 1000, animateClass = "buttongreen") { + const previousText = button.innerHTML; + button.disabled = true; + button.innerHTML = text; + button.classList.add(animateClass); + setTimeout(() => { + button.disabled = false; + button.innerHTML = previousText; + button.classList.remove(animateClass); + }, delay); } \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index 019ede45..21072f83 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -8,7 +8,8 @@ module.exports = { "./src/UI/buttonEvents.ts", "./src/UI/render.ts", "./src/UI/settings.ts", - "./src/UI/simState.ts" + "./src/UI/simState.ts", + "./src/UI/elements.ts" ], }, output: { From e638e4e37fcb1f72515b88d36c40d86584c89ae2 Mon Sep 17 00:00:00 2001 From: MathisSinet Date: Tue, 23 Jun 2026 16:46:34 +0200 Subject: [PATCH 04/14] Updated HTML/CSS for controls --- Styles/controls.css | 59 +++++++++++++++++----------- Styles/narrow.css | 93 +++++++++++++++++++++------------------------ index.html | 72 +++++++++++++++++------------------ src/UI/elements.ts | 48 +++++++++++------------ 4 files changed, 141 insertions(+), 131 deletions(-) diff --git a/Styles/controls.css b/Styles/controls.css index 7b7008fd..9f22c8ea 100644 --- a/Styles/controls.css +++ b/Styles/controls.css @@ -20,20 +20,22 @@ outline: 1px solid var(--btn-border-clr); } -.button-wrapper { - display: grid; - grid-template-columns: repeat(6, auto); - gap: 1rem; - width: fit-content; - margin-block: 2rem 1rem; +#sigmaInput { + width: 3.5rem } -.button-wrapper button { - font-size: 0.8rem; - padding: 0.1em 0.2em; - cursor: pointer; + +#currencyInput, #capInput { + width: 5rem +} + +#hardCapToggle { + position: relative; + width: min(1rem, 5vw); + outline: none; } -.button-wrapper button:hover { - transform: scale(1.1); + +#extraInputDescription { + margin-right: 0.8rem; } .timeDiffWrapper { @@ -44,25 +46,38 @@ width: 20rem; } -.simAllInputs { +/* Action bar */ + +#actionBar { + display: grid; + grid-template-columns: repeat(6, auto); + gap: 1rem; + width: fit-content; + margin-block: 2rem 1rem; +} +#actionBar button { + font-size: 0.8rem; + padding: 0.1em 0.2em; +} + +/* Sim all inputs */ + +#simAllInputWrapper { display: grid; grid-template-columns: 1fr auto auto; gap: 1rem 0.5rem; margin-right: 2rem; place-items: center; } -.simAllInputs button:hover { - cursor: pointer; - transform: scale(1.1); +#simAllInputWrapper .simAllCheckboxLabel { + font-size: 0.75rem; } -.simAllInputs input[type="checkbox"] { +#simAllInputWrapper input[type="checkbox"] { width: 0.8rem; height: 0.8rem; } -.saveDist { - position: relative; -} +/* Sim all input & extra input */ textarea { resize: none; @@ -72,11 +87,11 @@ textarea { background-color: var(--input-bg); color: var(--input-f-clr) } -textarea.simAllInputArea { +textarea#simAllInputArea { width: 20rem; height: 4rem; } -textarea.modeInput { +textarea#extraInput { width: 6rem; height: 1.8em; } diff --git a/Styles/narrow.css b/Styles/narrow.css index 4954986c..ec79faa1 100644 --- a/Styles/narrow.css +++ b/Styles/narrow.css @@ -2,40 +2,19 @@ :root { font-size: calc(0.5vw + 0.8rem + 0.5vh); } - #baseControlsWrapper { - display: grid; - grid-template-columns: repeat(3, auto); - gap: 0.5rem 1rem; - } - .button-wrapper { - display: grid; - grid-template-columns: repeat(2, auto); - gap: 0.5rem 1rem; - } - .settings { - width: 95%; - --inline-padding: 1.2rem; + .content-wrapper { + padding: 1rem; } + /* Nav */ .navBtns { font-size: 0.8rem; } - .settings input[type="range"] { - appearance: none; - width: 5rem; - } - .settings input[type="range"]::-webkit-slider-runnable-track { - height: 0.4rem; - } - .settings input[type="range"]::-webkit-slider-thumb { - appearance: none; - height: 0.8rem; - width: 0.45rem; - margin-top: -0.2rem; - background-color: red; - outline: 1px solid green; - } - .content-wrapper { - padding: 1rem; + + /* Controls */ + #baseControlsWrapper { + display: grid; + grid-template-columns: repeat(3, auto); + gap: 0.5rem 1rem; } #extraControlsWrapper { display: flex; @@ -43,35 +22,30 @@ gap: 1rem; white-space: nowrap; } - .description { + .inputLabel { display: block; } - .simAllInputs button { + #simAllInputWrapper { + width: max-content; + } + #simAllInputWrapper button { font-size: 0.6rem; } - .simAllInputs input { + #simAllInputWrapper input { width: 0.7rem; height: 0.7rem; } - .output { - min-width: 80vw; - } - .saveDist::before { - content: "Saved!"; - position: absolute; - inset: 0; - transition: opacity 500ms; - color: var(--font-clr); - font-size: 0.7rem; - opacity: 0; - top: -90%; - } - .extraInputs { + #extraInputWrapper { flex-direction: column; gap: 1rem; } - .simAllInputs { - width: max-content; + #actionBar { + display: grid; + grid-template-columns: repeat(2, auto); + gap: 0.5rem 1rem; + } + .output { + min-width: 80vw; } .boughtVars table, .boughtVars tr, @@ -81,4 +55,25 @@ text-align: center; font-size: 0.63rem; } + + /* Settings dialog */ + .settings { + width: 95%; + --inline-padding: 1.2rem; + } + .settings input[type="range"] { + appearance: none; + width: 5rem; + } + .settings input[type="range"]::-webkit-slider-runnable-track { + height: 0.4rem; + } + .settings input[type="range"]::-webkit-slider-thumb { + appearance: none; + height: 0.8rem; + width: 0.45rem; + margin-top: -0.2rem; + background-color: red; + outline: 1px solid green; + } } \ No newline at end of file diff --git a/index.html b/index.html index 68236701..95165979 100644 --- a/index.html +++ b/index.html @@ -38,11 +38,11 @@

ex Theory simulator

- Theory: - + Theory: +
- Strat: + Strat:
- Sigma: - + Sigma: +
- Input: - + Input: +
-
- Cap: - +
+ Cap: +
- Mode: - + Mode: +
-