Refactor: extract renderQuestion + _renderStartScreen uit index.html #120

New issue

Closed

opened 2026-04-22 12:27:56 +02:00 by Ghost · 1 comment

Ghost commented

2026-04-22 12:27:56 +02:00

(Migrated from codeberg.org)

Waarom het blijft hangen

Beide functies muteren closure-state die elders ook reassign-baar is. Een ctx-object volstaat dus niet — je zou óf alle mutaties achterlaten in een wrapper (defeating the purpose), óf een bredere state-container invoeren.

`+ "`renderQuestion`" +` (~85 LOC, index.html ~933)

Reassigns die niet via ctx-object kunnen:

+ "answered = false" +
+ "hintRevealed = 0" +
+ "currentCity = pickCity()" +
+ "mapClickMarker = null" + (na + "map.removeLayer" + )
+ "highlightMarker = null" +

Plus ~12 globale reads (gameMode, streak, SETS, selectedSet, activeCities, polygonTypes, NL_BOUNDS, map, markerLayer) en ~8 functie-deps.

`+ "`_renderStartScreen`" +` (~20 LOC, index.html ~1593)

Zelfde class probleem: cleanup van map-layers met reassignments ( + "mapClickMarker = null" + , + "highlightMarker = null" + ).

Voorgestelde aanpak

Eerst een quiz-state module ( + "src/quiz-state.js" + ) die de losse + "let" + -variabelen bundelt achter getters/setters of een plain object met methods. Dan kunnen renderQuestion en _renderStartScreen die module importeren en hun eigen mutaties doen.

Alternatief: de functies als-is verhuizen met een dikke ctx die ook callback-setters bevat ( + "setCurrentCity" + , + "setAnswered" + , etc.). Minder elegant maar sneller.

Scope

Quiz-state module met centrale state (currentCity, answered, hintRevealed, mapClickMarker, highlightMarker, selectedSet, gameMode, activeCities, streak, cumulativeOk/Err, sessionOk/Err, consecutiveCorrect, dailyAnswers, quizStartTime)
+ "renderQuestion" + → + "src/screens/question.js" +
+ "_renderStartScreen" + → + "src/screens/start-screen.js" +
Geen regressies in E2E (nav, smoke, scenarios, router, phased-sets, daily-bonus)

Verificatie

+ "node test.mjs" + volledig groen
+ "npx playwright test" + volledig groen
Visuele check op CF preview: hamburger → andere quiz, daily afronden, phased set afronden, map-click mode, provincie-zoom (#116)

Niet in scope: + "pickCity" + / + "nearbyDistractors" + / + "setHighlight" + (quiz-logica, geen view).

Follow-up op #96. De eerste vier increments (levelselect, modeselect, phase-transition, end) zijn gemerged in v2.25.2/dev; index.html is van ~2180 → 2003 LOC. Wat overblijft zijn twee render-functies die niet schoon te extracten zijn zonder een grotere state-refactor. ## Waarom het blijft hangen Beide functies muteren closure-state die elders ook reassign-baar is. Een ctx-object volstaat dus niet — je zou óf alle mutaties achterlaten in een wrapper (defeating the purpose), óf een bredere state-container invoeren. ### ` + "`renderQuestion`" + ` (~85 LOC, index.html ~933) Reassigns die niet via ctx-object kunnen: - ` + "`answered = false`" + ` - ` + "`hintRevealed = 0`" + ` - ` + "`currentCity = pickCity()`" + ` - ` + "`mapClickMarker = null`" + ` (na ` + "`map.removeLayer`" + `) - ` + "`highlightMarker = null`" + ` Plus ~12 globale reads (gameMode, streak, SETS, selectedSet, activeCities, polygonTypes, NL_BOUNDS, map, markerLayer) en ~8 functie-deps. ### ` + "`_renderStartScreen`" + ` (~20 LOC, index.html ~1593) Zelfde class probleem: cleanup van map-layers met reassignments (` + "`mapClickMarker = null`" + `, ` + "`highlightMarker = null`" + `). ## Voorgestelde aanpak Eerst een **quiz-state module** (` + "`src/quiz-state.js`" + `) die de losse ` + "`let`" + `-variabelen bundelt achter getters/setters of een plain object met methods. Dan kunnen renderQuestion en _renderStartScreen die module importeren en hun eigen mutaties doen. Alternatief: de functies als-is verhuizen met een dikke ctx die ook callback-setters bevat (` + "`setCurrentCity`" + `, ` + "`setAnswered`" + `, etc.). Minder elegant maar sneller. ## Scope - [ ] Quiz-state module met centrale state (currentCity, answered, hintRevealed, mapClickMarker, highlightMarker, selectedSet, gameMode, activeCities, streak, cumulativeOk/Err, sessionOk/Err, consecutiveCorrect, dailyAnswers, quizStartTime) - [ ] ` + "`renderQuestion`" + ` → ` + "`src/screens/question.js`" + ` - [ ] ` + "`_renderStartScreen`" + ` → ` + "`src/screens/start-screen.js`" + ` - [ ] Geen regressies in E2E (nav, smoke, scenarios, router, phased-sets, daily-bonus) ## Verificatie - ` + "`node test.mjs`" + ` volledig groen - ` + "`npx playwright test`" + ` volledig groen - Visuele check op CF preview: hamburger → andere quiz, daily afronden, phased set afronden, map-click mode, provincie-zoom (#116) Niet in scope: ` + "`pickCity`" + `/` + "`nearbyDistractors`" + `/` + "`setHighlight`" + ` (quiz-logica, geen view).

jelmerk commented

2026-04-29 12:29:59 +02:00

(Migrated from codeberg.org)

Fixed in v2.25.8 — beide render-functies in eigen module via thick-ctx + setter-callbacks. index.html 2003 → 1951 LOC. Volledige Playwright-suite groen op staging.