refactor(#86): scherm-rendering naar eigen modules #96

New issue

Closed

opened 2026-04-21 15:08:32 +02:00 by Ghost · 2 comments

Ghost commented

2026-04-21 15:08:32 +02:00

(Migrated from codeberg.org)

Part of #86 (code-audit scope 1). Zie AUDIT.md §1.3 UI-modules subset.

Context

`index.html` bevat ~800 LOC scherm-rendering: `_renderStartScreen`, `_renderLevelSelect`, `_renderModeSelect`, `renderQuestion`, `showEnd`, `showFeedback`, plus dev-menu-renderer en various modal-opbouwers. Versnipperd tussen regels 1800-2600.

Als de centrale router (#94) staat krijgt elk scherm een duidelijk contract (`navigate('quiz', {...})`) waardoor de rendering-functies hun eigen module kunnen worden: `src/screens/start.js`, `src/screens/levelselect.js` etc.

Scope

Per scherm een `render(root, state)`-functie in eigen file
Gedeelde UI-utilities (feedback-modal, toast, dev-menu) naar `src/ui/`
Router roept `screens[name].render(root, state)`

Verificatie

`node test.js` groen
`npx playwright test` 166+ groen
`index.html` krimpt met 600-800 LOC

Effort/Impact/Risico

3 / 2 / 2

Afhankelijkheid

#94 (router) MOET af zijn — zonder duidelijk navigate-contract is dit gefragmenteerd opruimen.

Part of #86 (code-audit scope 1). Zie [AUDIT.md §1.3](../blob/dev/AUDIT.md#13-js-sectie-regels-742-2673--onderverdeling) UI-modules subset. ## Context \`index.html\` bevat ~800 LOC scherm-rendering: \`_renderStartScreen\`, \`_renderLevelSelect\`, \`_renderModeSelect\`, \`renderQuestion\`, \`showEnd\`, \`showFeedback\`, plus dev-menu-renderer en various modal-opbouwers. Versnipperd tussen regels 1800-2600. Als de centrale router (#94) staat krijgt elk scherm een duidelijk contract (\`navigate('quiz', {...})\`) waardoor de rendering-functies hun eigen module kunnen worden: \`src/screens/start.js\`, \`src/screens/levelselect.js\` etc. ## Scope - Per scherm een \`render(root, state)\`-functie in eigen file - Gedeelde UI-utilities (feedback-modal, toast, dev-menu) naar \`src/ui/\` - Router roept \`screens[name].render(root, state)\` ## Verificatie - [ ] \`node test.js\` groen - [ ] \`npx playwright test\` 166+ groen - [ ] \`index.html\` krimpt met 600-800 LOC ## Effort/Impact/Risico 3 / 2 / 2 ## Afhankelijkheid **#94 (router) MOET af zijn** — zonder duidelijk navigate-contract is dit gefragmenteerd opruimen.

Ghost commented

2026-04-22 12:34:38 +02:00

(Migrated from codeberg.org)

Increments 1-4 gereleased in v2.25.3:

src/screens/levelselect.js — home + group-select + set-lijst
src/screens/modeselect.js — mode-select view
src/screens/phase-transition.js — fase-flash
src/screens/end.js — eindscherm view

index.html ~180 LOC kleiner. Vervolg in #120: renderQuestion + _renderStartScreen vereisen eerst een quiz-state module om de closure-state reassignments (currentCity, answered, hintRevealed, mapClickMarker, highlightMarker) schoon te kunnen extracten. Issue blijft open tot die increment landt — of sluit samen met #120 zodra alles extract is.

Increments 1-4 gereleased in v2.25.3: - `src/screens/levelselect.js` — home + group-select + set-lijst - `src/screens/modeselect.js` — mode-select view - `src/screens/phase-transition.js` — fase-flash - `src/screens/end.js` — eindscherm view index.html ~180 LOC kleiner. Vervolg in #120: `renderQuestion` + `_renderStartScreen` vereisen eerst een quiz-state module om de closure-state reassignments (currentCity, answered, hintRevealed, mapClickMarker, highlightMarker) schoon te kunnen extracten. Issue blijft open tot die increment landt — of sluit samen met #120 zodra alles extract is.

Ghost commented

2026-04-22 13:13:59 +02:00

(Migrated from codeberg.org)

Superseded by #120. Vier van de zes schermen geëxtraheerd in v2.25.2–v2.25.5: src/screens/levelselect.js, modeselect.js, phase-transition.js, end.js. Index.html ~2180 → ~2003 LOC. De twee resterende schermen (renderQuestion, _renderStartScreen) zijn geblokkeerd op closure-state-reassignments en verhuizen pas nadat een quiz-state-module bestaat — dat werk leeft nu in #120.

Superseded by #120. Vier van de zes schermen geëxtraheerd in v2.25.2–v2.25.5: `src/screens/levelselect.js`, `modeselect.js`, `phase-transition.js`, `end.js`. Index.html ~2180 → ~2003 LOC. De twee resterende schermen (`renderQuestion`, `_renderStartScreen`) zijn geblokkeerd op closure-state-reassignments en verhuizen pas nadat een quiz-state-module bestaat — dat werk leeft nu in #120.