Changeset 084b046 in Klonkt for src/assets/js/ward.js

Timestamp:

08/12/2026 08:04:38 PM (3 months ago)

Author:

Robin <roboburr@…>

Children:

5218863

Parents:

a5a6249

Message:

De Ward PWA: de avatarhemel achter de kaarten

Plak 3. Robins correctie: niet de hemel IN PLAATS VAN de kaarten, maar
allebei, met de hemel er altijd achter. Zelfde beweging als in Shaer: de
kaarten vallen weg en wat eronder lag was er al.

MODEL EN RENDERER APART, en die naad is het punt. orbitPlacement en
nearestFace zijn pure wiskunde en bestaan nu drie keer (Swift, Kotlin,
hier). Drie keer kans op drift, en drift zie je niet aan een screenshot:
je ziet het als gezichten ergens anders hangen dan in de app. Daarom in
een eigen module, met dezelfde eigenschappen bewaakt als AvatarSkyTest.kt.

CANVAS, GEEN ENGINE, en dat is een afweging en geen luiheid. De rem is
niet het aantal sprites maar het aantal texturen: alle avatars gaan een
keer in een atlas, daarna is elk gezicht een drawImage uit datzelfde
plaatje. Dat haalt duizenden. Wil het ooit meer, dan vervangt een
WebGL-variant alleen SkyRenderer en merkt de rest er niets van. De echte
schaaloplossing is trouwens niet sneller tekenen maar clusteren; dat
staat als bead voor later.

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

• orbitPlacement + nearestFace, letterlijke port
• SkyRenderer: atlas, ademhaling, pan, zoom, tik

test/ward-sky.test.js

• vers dichterbij dan oud, deterministisch, geen overlap, mikken kiest de dichtstbijzijnde en schaalt mee met de zoom

Changed files:
src/routes/ward.js

• /api/conversations: per tegenpartij het jongste bericht
• /sky.js als eigen asset

src/views/pages/ward.ejs

• canvas achter alles, wisselknop, app.js als module

src/assets/js/ward.js

• de wissel: kaarten of hemel, hemel draait altijd

src/assets/css/ward.css

• hemel op z-index 0, kaarten erboven

src/services/i18n.js

• drie sleutels in nl, en, de

remarks: 895 tests groen. Een tik op een gezicht wijst naar /ward/thread,
en die route bestaat nog niet; dat is de volgende plak.

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

File:

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

src/assets/js/ward.js

@@ -7 +7 @@
  * pagina en dit bestand tekent hem. Alles wat nieuw is komt van /ward/api/*.
  */
-'use strict';
+import { SkyRenderer } from '/ward/sky.js';
 
 const state = JSON.parse(document.getElementById('ward-state').textContent);
@@ -215 +215 @@
 }
 
-/** De controle kost per guardian een remote fetch, dus hij komt ná het tekenen. */
+/**
+ * De hemel en de kaarten zijn één scherm met twee standen.
+ *
+ * De hemel draait ALTIJD en ligt achter de kaarten; in kaartenstand is hij
+ * decor en vangt hij geen tikken, in berichtenstand vallen de kaarten weg en
+ * wordt hij de interface. Dat is precies de beweging uit Shaer: de kaarten
+ * vallen weg en wat eronder lag was er al.
+ */
+function wireSky() {
+  const canvas = document.getElementById('sky');
+  const btn = document.getElementById('mode');
+  const main = document.getElementById('app');
+  let convs = [];
+
+  const sky = new SkyRenderer(canvas, (i) => {
+    const c = convs[i];
+    if (c) window.location.href = `/ward/thread?with=${encodeURIComponent(c.uri)}`;
+  });
+
+  let messagesMode = false;
+  const setMode = (on) => {
+    messagesMode = on;
+    sky.interactive = on;
+    canvas.setAttribute('aria-hidden', String(!on));
+    // touch-action pas uitzetten als de hemel echt bedienbaar is: anders kun
+    // je in kaartenstand niet meer scrollen.
+    canvas.style.touchAction = on ? 'none' : '';
+    canvas.style.pointerEvents = on ? 'auto' : 'none';
+    document.body.classList.toggle('messages-mode', on);
+    btn.textContent = on ? state.strings.toCards : state.strings.toSky;
+    btn.setAttribute('aria-pressed', String(on));
+    main.querySelectorAll('section').forEach((sec) => { sec.hidden = on; });
+  };
+
+  btn.addEventListener('click', () => setMode(!messagesMode));
+  setMode(false);
+
+  (async () => {
+    try {
+      const r = await fetch('/ward/api/conversations', { headers: { Accept: 'application/json' } });
+      if (!r.ok) return;
+      convs = (await r.json()).items || [];
+      await sky.setFaces(convs.map((c) => ({ name: c.name, icon: c.icon, ageMs: c.ageMs })));
+      sky.start();
+    } catch { /* zonder hemel blijft het scherm gewoon werken */ }
+  })();
+}
+
+/** 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;
@@ -240 +288 @@
 renderGuardians(null);
 wireBuoy();
+wireSky();
 loadFeed();
 renderOffers();