source: Klonkt/test/ward-theme.test.js@ 3866994

Last change on this file since 3866994 was 39dab6b, checked in by Robin <roboburr@…>, 3 months ago

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@…>
  • Property mode set to 100644
File size: 1.4 KB
Line 
1// De themakleur (SkyPalette): de presets en de leesbaarheidsregel.
2//
3// Deze acht kleuren en de luminantie-regel staan ook in Swift en Kotlin; dit is
4// de derde plek en dus de derde kans op drift. Bewaakt: dezelfde acht presets,
5// en dat de tekstkleur luminantie volgt (donker op zon, wit op nacht), niet een
6// handgehouden lijstje.
7import { test } from 'node:test';
8import assert from 'node:assert/strict';
9
10// De module leunt op localStorage en document; die bestaan niet in node. We
11// testen alleen de pure export (onSky) door hem los te importeren met een
12// minimale stub, zodat de rekenkant bewaakt is zonder een browser.
13globalThis.localStorage = { getItem: () => null, setItem: () => {} };
14globalThis.document = { documentElement: { style: { setProperty() {} } } };
15
16const { PRESETS, onSky } = await import('../src/assets/js/ward-theme.js');
17
18test('acht presets, en de vertrouwde paarse staat vooraan', () => {
19 assert.equal(PRESETS.length, 8);
20 assert.equal(PRESETS[0], 0x5A32E6);
21 assert.equal(PRESETS[7], 0x1F2937); // nacht
22});
23
24test('de tekstkleur volgt luminantie, geen handgehouden lijst', () => {
25 // Zon is licht: donkere tekst. Nacht en paars zijn donker: witte tekst.
26 assert.equal(onSky(0xF59E0B), '#1f2430', 'zon kreeg geen donkere tekst');
27 assert.equal(onSky(0x1F2937), '#ffffff', 'nacht kreeg geen witte tekst');
28 assert.equal(onSky(0x5A32E6), '#ffffff', 'paars kreeg geen witte tekst');
29});
Note: See TracBrowser for help on using the repository browser.