Changeset 39dab6b in Klonkt for src/views/pages

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/views/pages/ward.ejs (modified) (2 diffs)

src/views/pages/ward.ejs

@@ -19 +19 @@
     <div class="topbar">
       <h1><%= state.strings.title %></h1>
+      <button id="theme-open" type="button" class="icon-btn" aria-label="<%= state.strings.theme %>">🎨</button>
       <button id="mode" type="button" aria-pressed="false"><%= state.strings.toSky %></button>
     </div>
@@ -141 +142 @@
   </dialog>
 
+  <!-- De mini-speler: één blijvende <audio> buiten de feed, zodat het geluid
+       een herteken en een wissel naar de hemel overleeft. -->
+  <div id="mini-player" hidden>
+    <audio id="mini-audio" preload="none"></audio>
+    <button id="mini-toggle" type="button" aria-label="<%= state.strings.playPause %>">▶</button>
+    <span id="mini-title"></span>
+    <button id="mini-close" type="button" aria-label="<%= state.strings.close %>">✕</button>
+  </div>
+
+  <!-- De themakiezer (SkyPalette): acht kleuren, de keuze kleurt de hele ward. -->
+  <dialog id="theme-dialog">
+    <h2><%= state.strings.theme %></h2>
+    <div id="theme-swatches" class="swatches"></div>
+    <button id="theme-close" type="button"><%= state.strings.cancel %></button>
+  </dialog>
+
   <!-- De begintoestand reist als JSON mee, zodat de pagina meteen compleet is
        en niet eerst leeg staat te wachten op een fetch. Geen inline script: