refactor: polygonTypes-register — generiek buildPolygonLayer + setHighlightPolygon #67

New issue

Closed

opened 2026-04-12 16:09:14 +02:00 by Ghost · 1 comment

Ghost commented

2026-04-12 16:09:14 +02:00

(Migrated from codeberg.org)

Probleem

buildProvinceLayer(), buildWaterLayer(), buildCountryLayer() zijn 3× copy-paste. Idem voor setHighlightProvince(), setHighlightWater(), setHighlightCountry(). Elk nieuw quizType vereist opnieuw ~40 regels vrijwel identieke code.

Tevens is de layer-cleanup in initLevel() fragiel: 3 hardgecodeerde if-blokken die handmatig elke layer verwijderen. En mastered-styling staat op 4 plekken (recordCorrect, initStreak, restoreProgress, buildXLayer).

Oplossing

Eén polygonTypes-register met configuratie per quizType:

const polygonTypes = {
  province: {
    featureData: null, layers: {}, quizLayer: null,
    styles: { default: PROV_DEFAULT, highlight: PROV_HIGHLIGHT, mastered: PROV_MASTERED },
    nameKey: 'statnaam',
  },
  water:   { /* ... */ nameKey: 'name' },
  country: { /* ... */ nameKey: 'name' },
};

Één generieke buildPolygonLayer(type) en setHighlightPolygon(type, item) vervangt de 3 dubbele functies.

Layer-cleanup in initLevel():

Object.values(polygonTypes).forEach(t => {
  if (t.quizLayer) { map.removeLayer(t.quizLayer); t.quizLayer = null; t.layers = {}; }
});

Één applyMasteredStyle(name) die zowel markers als polygonen afdekt:

function applyMasteredStyle(name) {
  const city = activeCities.find(c => c.name === name);
  if (city?.marker) city.marker.setStyle({ ...MASTERED_STYLE, radius: cityRadius(city) });
  Object.values(polygonTypes).forEach(t => {
    if (t.layers[name]) t.layers[name].setStyle(t.styles.mastered);
  });
}

Impact

~120 regels verwijderd uit index.html
Elk nieuw quizType: 5 regels config i.p.v. 40 regels code
Geen UI-wijziging, puur interne reorganisatie

Risico

Laag. Alle bestaande Playwright E2E tests en unit tests zijn de regressiecheck.

Aanpak

Feature branch refactor/polygon-types-register. Tests eerst: schrijf falende unit tests voor buildPolygonLayer('province'), setHighlightPolygon('country', item) voordat je de implementatie omgooit.

Zie REFACTORING.md voorstellen #1, #2, #3

## Probleem `buildProvinceLayer()`, `buildWaterLayer()`, `buildCountryLayer()` zijn 3× copy-paste. Idem voor `setHighlightProvince()`, `setHighlightWater()`, `setHighlightCountry()`. Elk nieuw quizType vereist opnieuw ~40 regels vrijwel identieke code. Tevens is de layer-cleanup in `initLevel()` fragiel: 3 hardgecodeerde if-blokken die handmatig elke layer verwijderen. En mastered-styling staat op 4 plekken (`recordCorrect`, `initStreak`, `restoreProgress`, `buildXLayer`). ## Oplossing Eén `polygonTypes`-register met configuratie per quizType: ```js const polygonTypes = { province: { featureData: null, layers: {}, quizLayer: null, styles: { default: PROV_DEFAULT, highlight: PROV_HIGHLIGHT, mastered: PROV_MASTERED }, nameKey: 'statnaam', }, water: { /* ... */ nameKey: 'name' }, country: { /* ... */ nameKey: 'name' }, }; ``` Één generieke `buildPolygonLayer(type)` en `setHighlightPolygon(type, item)` vervangt de 3 dubbele functies. Layer-cleanup in `initLevel()`: ```js Object.values(polygonTypes).forEach(t => { if (t.quizLayer) { map.removeLayer(t.quizLayer); t.quizLayer = null; t.layers = {}; } }); ``` Één `applyMasteredStyle(name)` die zowel markers als polygonen afdekt: ```js function applyMasteredStyle(name) { const city = activeCities.find(c => c.name === name); if (city?.marker) city.marker.setStyle({ ...MASTERED_STYLE, radius: cityRadius(city) }); Object.values(polygonTypes).forEach(t => { if (t.layers[name]) t.layers[name].setStyle(t.styles.mastered); }); } ``` ## Impact - ~120 regels verwijderd uit index.html - Elk nieuw quizType: 5 regels config i.p.v. 40 regels code - Geen UI-wijziging, puur interne reorganisatie ## Risico Laag. Alle bestaande Playwright E2E tests en unit tests zijn de regressiecheck. ## Aanpak Feature branch `refactor/polygon-types-register`. Tests eerst: schrijf falende unit tests voor `buildPolygonLayer('province')`, `setHighlightPolygon('country', item)` voordat je de implementatie omgooit. _Zie REFACTORING.md voorstellen #1, #2, #3_

Ghost commented

2026-04-12 20:56:12 +02:00

(Migrated from codeberg.org)

Geïmplementeerd: polygonTypes-register + clearPolygonLayers + applyMasteredStyle. Refactor #70 (vraagstekst-mapping) meegenomen. 296 unit tests + 43 E2E groen.