Changeset 39dab6b in Klonkt for src/assets/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@…>

Location:

src/assets/js

Files:

• ward-sky.js (modified) (3 diffs)
• ward-theme.js (added)
• ward.js (modified) (4 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());
   }
 

src/assets/js/ward.js

@@ -8 +8 @@
  */
 import { SkyRenderer } from '/ward/sky.js';
+import { PRESETS, loadColor, saveColor, applyColor } from '/ward/theme.js';
 
 const state = JSON.parse(document.getElementById('ward-state').textContent);
+
+// De opgeslagen themakleur meteen toepassen, voor het eerste frame.
+applyColor(loadColor());
 const $ = (id) => document.getElementById(id);
 
@@ -421 +425 @@
     } catch { /* zonder hemel blijft het scherm gewoon werken */ }
   })();
+
+  // De hemel skint zijn placeholder-schijfjes bij als de themakleur wisselt.
+  window.addEventListener('ward-accent', () => sky.reskin());
 }
 
@@ -515 +522 @@
 }
 
-/** De controle kost per guardian een remote fetch, dus hij komt ná het tekenen. */
+/**
+ * De themakiezer (SkyPalette): acht presets, gekozen kleur kleurt alles.
+ * Een rij swatches in een dialoog; de keuze staat meteen en blijft bewaard.
+ */
+function wireTheme() {
+  const dlg = document.getElementById('theme-dialog');
+  const row = document.getElementById('theme-swatches');
+  const current = loadColor();
+  row.replaceChildren();
+  PRESETS.forEach((rgb) => {
+    const b = el('button', 'swatch');
+    b.type = 'button';
+    b.style.background = '#' + rgb.toString(16).padStart(6, '0');
+    b.setAttribute('aria-label', 'kleur ' + rgb.toString(16));
+    if (rgb === current) b.classList.add('chosen');
+    b.addEventListener('click', () => {
+      saveColor(rgb);
+      row.querySelectorAll('.swatch').forEach((s) => s.classList.remove('chosen'));
+      b.classList.add('chosen');
+      // De hemel tekent de placeholder-schijfjes in het accent; even opnieuw.
+      window.dispatchEvent(new CustomEvent('ward-accent'));
+    });
+    row.append(b);
+  });
+  document.getElementById('theme-open').addEventListener('click', () => dlg.showModal());
+  document.getElementById('theme-close').addEventListener('click', () => dlg.close());
+}
+
+/**
+ * De mini-speler: audio blijft doorspelen terwijl je scrolt of van stand
+ * wisselt.
+ *
+ * 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 ÉÉN blijvende speler buiten de feed; een
+ * audiotegel geeft alleen zijn bron door en pauzeert zichzelf. Zo overleeft
+ * het geluid een herteken en een wissel naar de hemel, precies als in de app.
+ */
+function wireMiniPlayer() {
+  const bar = document.getElementById('mini-player');
+  const audio = document.getElementById('mini-audio');
+  const title = document.getElementById('mini-title');
+  const toggle = document.getElementById('mini-toggle');
+
+  // Vangen in de CAPTURE-fase: zodra een feed-audio wil spelen, neemt de
+  // gedeelde speler het over. Delegatie op document, want de kaarten komen en
+  // gaan.
+  document.addEventListener('play', (e) => {
+    const t = e.target;
+    if (!(t instanceof HTMLAudioElement) || t === audio) return;
+    e.preventDefault();
+    t.pause();
+    const card = t.closest('.post');
+    title.textContent = card?.querySelector('.name')?.textContent || 'Audio';
+    if (audio.src !== new URL(t.currentSrc || t.src, location.href).href) {
+      audio.src = t.currentSrc || t.src;
+    }
+    audio.play().catch(() => {});
+    bar.hidden = false;
+  }, true);
+
+  toggle.addEventListener('click', () => { audio.paused ? audio.play() : audio.pause(); });
+  audio.addEventListener('play', () => { toggle.textContent = '⏸'; });
+  audio.addEventListener('pause', () => { toggle.textContent = '▶'; });
+  audio.addEventListener('ended', () => { bar.hidden = true; });
+  document.getElementById('mini-close').addEventListener('click', () => { audio.pause(); bar.hidden = true; });
+}
+
+/** De controle kost per guardian een remote fetch, dus hij komt ná het tekenen. *//** De controle kost per guardian een remote fetch, dus hij komt ná het tekenen. */
 async function loadChecks() {
   if (!state.guardians.length) return;
@@ -542 +617 @@
 wireSky();
 wireComposer();
+wireTheme();
+wireMiniPlayer();
 loadFeed();
 renderOffers();