Changeset 39dab6b in Klonkt for src/assets/js/ward-sky.js

Timestamp:

08/12/2026 09:43:20 PM (3 months ago)

Author:

Robin <roboburr@…>

Children:

5e0fea7

Parents:

2086ea2

Message:

Ward-PWA: de mini-speler, de themakleur en een breder kaartraster

Drie dingen in een ronde.

DE THEMAKLEUR (SkyPalette). De acht presets en de luminantie-regel komen
LETTERLIJK uit Shaer: dezelfde kleuren, en dezelfde beslissing welke
tekst erop leesbaar is (donker op zon, wit op nacht). Een handgehouden
lijstje zou uit de pas lopen; luminantie beslist. De keuze kleurt het
accent (knoppen, bubbels, de (+)), tint de achtergrond zacht, en laat de
hemel zijn placeholder-schijfjes bijkleuren. Opgeslagen per apparaat.

DE MINI-SPELER. Een feed-kaart rendert een gewone audio, maar de feed
wordt bij elke verversing opnieuw getekend en dan sterft dat element:
de muziek stopt midden in een nummer. Daarom is er EEN blijvende speler
buiten de feed; een audiotegel geeft alleen zijn bron door (gevangen in
de capture-fase) en pauzeert zichzelf. Zo overleeft het geluid een
herteken en een wissel naar de hemel, precies als in de app.

HET KAARTRASTER (Robins wens, 12-8). Op desktop net als op mobiel en
tablet MEER kolommen: auto-fill met een minimum van 280px vult zelf op,
een op een smalle telefoon, twee op een tablet, drie of meer breed.

New file:
src/assets/js/ward-theme.js

• presets, onSky (luminantie), load/save/apply

Changed files:
src/assets/js/ward.js

• wireTheme (swatches), wireMiniPlayer (gedeelde audio)
• de hemel skint bij op een themawissel

src/assets/js/ward-sky.js

• buildAtlas neemt het accent; reskin() bij een kleurwissel

src/views/pages/ward.ejs

• themaknop, themadialoog, mini-speler-balk

src/assets/css/ward.css

• accent/achtergrond als variabelen, mini-speler, swatches, responsief raster (auto-fill minmax 280px)

src/services/i18n.js

• kleur + play/pause in nl, en, de

test/ward-theme.test.js

• acht presets, en de tekstkleur volgt luminantie

remarks: 905 tests groen. Slepen en het echt doorspelen van audio zijn
in code getest, niet met oor en vinger; dat is aan Robin op dev.

-robo
Co-Authored-By: Claude Opus 4.8 <noreply@…>

File:

• src/assets/js/ward-sky.js (modified) (3 diffs)

src/assets/js/ward-sky.js

@@ -99 +99 @@
 
 /** Eén canvas met alle avatars naast elkaar, zodat tekenen één drawImage is. */
-async function buildAtlas(faces) {
+async function buildAtlas(faces, accent) {
   const size = FACE * 2;                       // retina-scherp
   const cols = Math.max(1, Math.ceil(Math.sqrt(faces.length || 1)));
@@ -120 +120 @@
       g.save();
       g.beginPath(); g.arc(x + size / 2, y + size / 2, size / 2, 0, Math.PI * 2); g.clip();
-      g.fillStyle = '#5a32e6'; g.fillRect(x, y, size, size);
+      g.fillStyle = accent || '#5a32e6'; g.fillRect(x, y, size, size);
       g.fillStyle = '#fff';
       g.font = `600 ${size * 0.45}px system-ui, sans-serif`;
@@ -176 +176 @@
     this.faces = faces;
     this.spots = orbitPlacement(faces.map((f) => f.ageMs));
-    this.atlas = await buildAtlas(faces);
+    this.atlas = await buildAtlas(faces, this._accent());
     this._resize();
+  }
+
+  /** De themakleur uit de CSS-variabele, voor de placeholder-schijfjes. */
+  _accent() {
+    return getComputedStyle(document.documentElement).getPropertyValue('--accent').trim() || '#5a32e6';
+  }
+
+  /** Het thema veranderde: de letters-op-schijf opnieuw in het nieuwe accent. */
+  async reskin() {
+    if (this.faces.length) this.atlas = await buildAtlas(this.faces, this._accent());
   }