# 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.