tickte-system/docs/superpowers/plans/2026-10-22-hustler-pixelwelt.md

Hustler-Pixelwelt in WOMS – Plan

Stand: 22.10.2026 · Status: Entwurf zur Freigabe durch Kenso · Spec: docs/superpowers/specs/2026-10-22-hustler-pixelwelt-design.md Repo /home/webklar/apps/ticket.webklar.com/dev-hustler-pixel, Branch feature/hustler-pixel ab feature/workers c0163c3, node_modules als Verweis auf ../build/node_modules (kein npm install). Ausgangslage: 1154 Tests grün.

Ausführung: wie P1–P6 – ich steuere, Sonnet-Umsetzer je Aufgabe (Auftrag mit Sicherheitsblock), schlanke Prüfung je Aufgabe, am Ende eine Endprüfung. Jede Aufgabe endet mit grünen Tests und einem Commit (git add nur mit Namen, nie --force, nichts pushen). Node-Tests immer timeout … node --max-old-space-size=1024 --test --test-concurrency=2, vor schweren Läufen free -m (≥ 2500 MB frei). Prüfstand-Fotos laufen einzeln, nie parallel zu einer Testsuite.

Quelle der Vorlage: /root/reports/workers-2026-10-16/pixelwelt-v2/ (identisch mit der Zeichenfläche, Stand 22.10.). Arbeitskopien für geänderte Grafik: /root/reports/workers-2026-10-16/pixelwelt-woms/ (die Vorlage selbst wird nicht verändert).

Teil A – Grafik und Import

T1 Haus-Bild mit beweglichen grauen Räumen (Spec E4)

• Kopie von haus/gen.py nach pixelwelt-woms/haus/; Zusatz: alle Räume hell (dim=False), neue helle Deko für Kleinanzeigen (Preisschild-Brett), Portale (Bildschirm mit Liste) und Foren (zwei Sprechblasen) im Stil der Nachbarräume, Raumlicht an.
• Zusätzlich je Such-Raum (netz, kleinanzeigen, portale, foren, aerzte, handwerk, selbst, laden) eine Ebene raum-grau-<raum>.png (Ausschnitt des Raums, Dunkelfilter + Spinnweben wie bisher) mit Lage im Manifest.
• Vorschau vorschau-alle-hell.png und vorschau-alle-grau.png (×2) – Kenso schaut drauf, bevor T5 sie einbaut.
• Fertig: deterministisch (timeout 300 python3 -I gen.py), alle übrigen Pixel von haus.png gleich wie vorher (Prüfung per Bildvergleich außerhalb der drei Räume).

T2 Import-Skript und Schriften (Spec E2, E3)

• scripts/hustler-import.mjs <pixelwelt-v2> <pixelwelt-woms>: Tabelle „Blob-Schlüssel → Quelldatei“ je Bildschirm (aus entwurf/bauen.py, keller/entwurf/bauen.py, pult/entwurf/bauen.py), Prüfung gegen hochgeladen.sha256 bzw. Hash der Datei; kopiert nur benutzte PNGs nach src/assets/hustler/{haus,welt,figuren,ui,detail,keller,pult}/.
• Zieht den <style>-Block der drei Artboards heraus → src/styles/hustler/{hochhaus,keller,pult}.css: /_blob/… → relativer Asset-Pfad, jede Klasse und jeder Keyframe-Name mit hk- davor, body{…} → Wurzelklasse des Bildschirms, Google-Fonts-Link entfällt.
• Schreibt src/lib/hustlerWelt.js (reine Daten): Weltgröße, Haus-Rechteck, Etagen (oben/unten), Räume, Anker der 19 Hustler, Briefkasten/Tresor/Keller-Schildpunkte, Aufzug-Halte, Sprite-Tabelle, Zeitachsen Arne/Boten/Tür/Briefkasten, Detail-Szenen-Anker.
• Schriften: public/fonts/PressStart2P-Regular.woff2 + OFL-Text (lokal vorhandene OFL-Kopie, Hash wird mit der Google-Fonts-Fassung verglichen), @font-face in src/styles/hustler/schrift.css.
• Test tests/unit/hustlerAssets.test.mjs: jede url(...) in den drei CSS-Dateien zeigt auf eine vorhandene Datei, keine Datei in src/assets/hustler ist unbenutzt, jede Klasse/Keyframe beginnt mit hk-, kein /_blob/ und kein fonts.googleapis übrig, Skript ist idempotent (zweiter Lauf ändert nichts).

Teil B – Gerüst und reine Logik

T3 Seite und Daten-Fluss (Spec E8)

• WorkersPage.jsx: Seitenkopf und Reiterleiste raus; useWorkersFeed wandert aus dem Board auf die Seite (Zustand + Hustler-Tabelle über indexWorkers/reduceEvents, Ereignisse gehen zusätzlich an die Regie), damit Kopfzahlen, Arne und Boten auf allen drei Bildschirmen stimmen. ?tab= und bot= wie bisher; Wechsel per setParams.
• Vollhöhen-Layout: .hk-seite füllt main (Desktop 100dvh, Handy 100dvh minus Mobilleiste), kein Seiten-Scrollen.
• Tests: workersRoute angepasst (Route, Umleitungen, Lazy-Load bleiben), neuer Test: Tab-Auswahl, Feed einmal pro Seite, unbekannter Tab → Hochhaus.

T4 Reine Ableitungen src/lib/hustlerSicht.js (Spec E5–E7, E10)

• figurZustand(workerId, eintrag, { paused }) → Sprite-Klasse, grau ja/nein, Extras (Bildschirm, Radar, Punkte, Zzz, Alarm, Raum grau), aria-label.
• anzeigeName(workerId) („Overseer“ für otto), modellName(model).
• hudWerte(kpis) (Münzen, fünf Icons, Strich bei fehlenden Werten, Budget-Warnstufe über die vorhandene 80-%-Regel).
• detailModell(workerId, eintrag, trace, now) (Felder der Detailansicht, Spur über traceRows).
• Kamera als reine Funktionen aus der Vorlage (grenzen, passend, zoomAuf, etage, Mindestzoom „cover“).
• Tests tests/unit/hustlerSicht.test.mjs: alle fünf Status + Overseer + Pause, unbekannter Status, alle 19 Hustler bekommen ein Label; HUD mit vollen/leeren/kaputten Werten; Detail mit/ohne Trace; Kamera-Grenzen (nie Himmel über Rand, Zoom 5 max, Zoom um Mauspunkt hält den Punkt fest).

Teil C – Hochhaus

T5 Welt components/workers/hochhaus/HochhausWelt.jsx + useKamera.js (Spec E1, E4, E5, E8, E14)

• Ebenen wie Vorlage (Himmel, Funkeln, Mond, Welt + Lichter, Haus + Fenster + Schild + Neon, Antenne, Aufzug + Seil, Schnee), Raumschilder aus ROOM_TITLES, Bildschirm/Radar nur bei arbeitet, graue Raum-Ebenen nach connected, Briefkasten-Zähler, Tresor- und Keller-Schild aus den Kennzahlen.
• Etagen als Knöpfe (zoomen) bzw. Links (Freigabe → ?tab=freigabe, Keller → ?tab=botleads), Hustler als Knöpfe → Detailansicht.
• Kamera: Mausrad, Ziehen, Pinch, Doppelklick/-tipp, Tasten +/−/0/Esc, Gleiten 0,55 s (aus bei „weniger Bewegung“), nach einem Zug kein versehentlicher Klick. Bei paused und bei verdecktem Tab stehen die CSS-Animationen (animation-play-state).
• Tests (fakeReact): Figur-Klassen je Status, graue Räume, Etagen-Ziele, Zähler 0 → kein Badge, Labels; Kamera-Hook mit nachgestellten Zeigerereignissen.

T6 Kopfzeile, Meldungen, Pause, Einstellungen HochhausKopf.jsx (Spec E7)

• Panels mit Münzen und fünf Icons, Pause/Fortsetzen mit Pixel-Rückfrage (Logik 1:1 aus WorkersBoard: Zielwert übergeben, Fokus zurück, Rückfrage verschwindet, wenn jemand anderes angehalten hat), Zahnrad nur für Admins → bestehender WorkersSettingsDialog.
• Banner: Notbremse (haltReasonOf übernommen), Verbindung gestört, Umschalten fehlgeschlagen; Dienst nicht erreichbar → Pixel-Leerzustand mit „Neu laden“.
• Tests: die fachlichen Zusicherungen aus workersComponents zu Pause/Notbremse/Admin übernommen, plus HUD-Ausgabe.

T7 Detailansicht HustlerDialog.jsx (Spec E10)

• Szene + große Figur nach Status (Büro / Stecker / Brücke), Daten aus detailModell, useWorkerTrace wie bisher (15 s), Blättern in Roster-Reihenfolge, Esc/←/→, Fokusfalle, Fokus zurück zur Figur.
• Tests: Felder, Laden/Fehler/leere Spur, unsichere Links bleiben Text, Blättern über das Ende, Fokus.

T8 Regie src/lib/hustlerRegie.js + RegieEbene.jsx (Spec E9)

• Rein: eventToSteps → Effekte mit Start/Dauer/Ort (Weltkoordinaten aus hustlerWelt), höchstens 4 gleichzeitig, Rückstau über 12 verworfen, weniger Bewegung → nur Blasen, flush() beim Zurückkehren in den Tab.
• Ebene: Pixel-Sprechblase, Icon-Pop (vorhandene PNGs: Haken, Stopp, Umschlag, Akte, Münze, Alarm), fliegender Umschlag per CSS-Übergang, Hüpfer.
• Tests: Zuordnung je Schrittart, Höchstzahl, Rückstau, Zeitablauf mit eigener Uhr, unbekannte Hustler fallen weg.

Teil D – Pult

T9 Dein Pult components/workers/pult/ (Spec E11, Regeln Spec §2)

• PultSzene.jsx (Raum, Lichter, Fenster-Schnee, Uhr, Lichterkette, Boten-Schleife nur wenn pultOpen > 0), Klemmbrett.jsx (Reiter mit Zahl, Untertitel, Leerzustände, Umschläge, Meldung, „Pult zuklappen“), Brief.jsx (Dialog).
• PultList.jsx wird zum Klemmbrett; der heutige PultRow bleibt als Herz des Briefs erhalten (gleiche Zustände, Handler, Texte, rowModel-Schalter) und bekommt nur neues Markup (Stempel-Knöpfe). Entwürfe und Felder überleben weiter Filterwechsel und Neuladen. ProspectPanel öffnet aus dem Brief.
• Tests: workersPultUi und Panel-Teil von workersProspect umgestellt (Umschlag öffnen → Aktion), jede bisherige Zusicherung bleibt; neu: Umschlag-Inhalt je Art/Status, Brief schließt nach Abschluss und gibt Fokus an Meldung/Liste, Boten nur bei wartenden Einträgen.

Teil E – Keller

T10 Keller · Bot-Leads components/workers/keller/ (Spec E12)

• KellerSzene.jsx (Arne-Schleife nur bei arbeitet, sonst döst er; Rohrpost, Schublade, Stempel synchron; Maus, Staub, Lampen-Flackern), RegisterBuch.jsx (Reiter, Suche, Einträge, Blättern), Akte.jsx (Dialog).
• src/lib/botleadGruende.js: Grund-Text → Icon + Erklärung für die 14 Gründe des Dienstes (inkl. „Punktzahl unter 55“ und „Lauf unterbrochen“), sonst allgemeiner Satz. Fixture tests/fixtures/botlead-gruende.json (Texte aus scoring/business.js des Dienstes, Stand d0d66f9).
• BotLeadList.jsx wird zum Register-Buch; Abruf-, Such-, Seiten- und Einzelansicht-Logik bleibt.
• Tests: botleadList und botleadsView umgestellt (alle Zusicherungen bleiben: Verzögerung, Fokus beim Blättern, „Erneut versuchen“, Einzelansicht, Telefonregel); neu: Grund-Tabelle deckt die Fixture, Akte zeigt Scout/Telefon/Quelle, Arne-Zustand.

Teil F – Aufräumen und Abnahme

T11 Alte Oberfläche entfernen

• Löschen: components/workers/engine/*, WorkersStage, WorkersBoard, WorkerCard, WorkerList, WorkersKpis und die neun Engine-Tests (209 Tests: camera, director, fx, layout, lift, props, rooms, scene, sprites) samt helpers/engineVm.mjs, falls nichts anderes es braucht.
• workers.css auf das Nötige (Einstellungen-Dialog, ProspectPanel) gekürzt; workersCss, workersComponents, workersFont, workersSmoke angepasst.
• Fertig: grep findet keinen Verweis mehr auf die Engine; Suite grün; vite build ok.

T12 Prüfstand und Fotos

• scripts/workers-harness/entry.jsx rendert die neue Seite mit scripted-api.js (alle Status, grau, fehler, Pause, Notbremse, Pult in allen Arten, 112 Bot-Leads).
• Fotos 1280×720, 1920×1080, 390×844: Hochhaus ganz, Etage herangezoomt, Detail je Status, Pult mit Brief, Keller mit Akte. Seite an Seite mit der Zeichenfläche verglichen; Abweichungen werden behoben oder Kenso genannt.

T13 Endprüfung und Bericht

• Volle Suite, vite build, Sonnet-Prüfer mit drei Blickwinkeln: (1) Pult-Regeln gleich wie vorher (Diff gegen alte Zusicherungen), (2) Fokus/Tastatur/Screenreader/„weniger Bewegung“, (3) Leistung (Anzahl animierter Elemente, kein Speicherleck beim Tab-Wechsel, Bildgröße) und CSS-Kollisionen.
• Funde beheben, Bericht für Kenso (was geht, Fotos, was bewusst abweicht, Livegang-Hinweis: WOMS-Teil gehört zum Livegang „P3 (+P2 WOMS)“).

Reihenfolge

T1 → (Kenso schaut Haus-Vorschau) · T2 · T3 · T4 → T5 → T6 → T7 → T8 → T9 → T10 → T11 → T12 → T13. T1 und T2 können parallel laufen; ab T3 nacheinander (gemeinsame Dateien: WorkersPage.jsx, CSS).

Risiken

• Bildgröße: ~1,3 MB PNG beim ersten Öffnen (danach im Cache). Gegenmaßnahme: lazy Seite, Keller/Pult-Bilder erst beim Öffnen des Reiters (eigene CSS-Chunks).
• Viele CSS-Animationen auf schwachen Rechnern: bei verdecktem Tab und Pause angehalten, „weniger Bewegung“ schaltet ab.
• Vorlage ändert sich (Kensos Hustler-Designs): Import-Skript neu laufen lassen, Tests zeigen fehlende Dateien/Klassen sofort.