Hustler-Pixelwelt: Spec und Plan zur Freigabe (Hochhaus, Pult, Keller aus der Zeichenfläche)
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
1 parent
c0163c3575
commit
6e24868995
2 files changed
+173
No files matched your search
@@ -0,0 +1,101 @@
|
|||||||
|
# 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.
|
||||||
@@ -0,0 +1,72 @@
|
|||||||
|
# Hustler-Pixelwelt in WOMS – Spec
|
||||||
|
|
||||||
|
Stand: 22.10.2026 · Status: **Entwurf zur Freigabe durch Kenso** · Branch `feature/hustler-pixel` (ab `feature/workers` c0163c3)
|
||||||
|
|
||||||
|
## 1. Ziel
|
||||||
|
|
||||||
|
Die in der Claude-Design-Zeichenfläche „Hustler – Oberflächen“ abgenommene Pixel-Nachtwelt ersetzt die bisherige helle Oberfläche des Hustler-Reiters (P2–P6). Drei Bildschirme:
|
||||||
|
|
||||||
|
| Bildschirm | Vorlage (Zeichenfläche) | ersetzt heute |
|
||||||
|
|---|---|---|
|
||||||
|
| **Hochhaus** – 16:9-Spielwelt mit Zoom/Ziehen, klickbare Etagen und Hustler, Detailansicht, Kopfzeile mit Münzen und Icons | `Main.dc.html` | `WorkersBoard` (Kanvas-Engine, Kennzahlen, Karte, Liste) |
|
||||||
|
| **Keller · Bot-Leads** – Archiv-Szene mit Arne, Liste als Register-Buch, Akte | `BotLeads.dc.html` | `BotLeadList` (Tabelle) |
|
||||||
|
| **Dein Pult · Freigabe** – Büro-Szene mit Aufzug und Briefkasten, Umschläge auf dem Klemmbrett, Brief | `Freigabe.dc.html` | `PultList` (Zeilenliste) |
|
||||||
|
|
||||||
|
Alles hängt an den echten Daten: `workersApi`, `useWorkersFeed`/Ereignisstrom, `usePultFeed`, `api.botleads`, `api.trace`. Keine Beispieldaten im Code (nur im Prüfstand und in Tests).
|
||||||
|
|
||||||
|
Nicht Teil davon: Freigabe-Handy, Kaufseite (Portal), Dienst-Code, neue Funktionen der Hustler.
|
||||||
|
|
||||||
|
## 2. Unveränderte Regeln (Vertrag)
|
||||||
|
|
||||||
|
- **Pult-Aktionen exakt wie heute:** Sichtbarkeit und Sperren kommen aus `rowModel` in `src/lib/workersPult.js`; Ablauf, Texte und Rückfragen aus dem heutigen `PultRow` (Rückfrage 4 s bei Verwerfen/Freigeben/Bauen, `BUILD_HINT`, „Kopieren & öffnen“ über `copyAndOpen`, Antworten/Einfügen mit 8000-Zeichen-Grenze, `UNCERTAIN_TEXT`, Übernehmen, Fokus-Rückgabe). `workersPult.js` wird nicht geändert.
|
||||||
|
- **Bot-Leads:** Telefonregel (`phoneLabel`, Heilberufe nie), sichere Links (`safeHref`), Raumfilter, Suche mit Verzögerung, Seiten vom Dienst (50 je Seite), Einzelansicht über `?tab=botleads&bot=<id>`.
|
||||||
|
- **Hochhaus:** Pause mit Rückfrage (nur Anhalten fragt), Einstellungen nur für Admins, Notbremse-Hinweis (`sendingHalted`), Verbindungsfehler-Hinweis, Spur nur mit sicheren Links (`safeLink`).
|
||||||
|
- `src/lib/*` (Events, Feed, View, Pult, Roster, Api, Prospect, Focus) bleibt fachlich gleich; neue reine Funktionen kommen in neue Dateien.
|
||||||
|
|
||||||
|
## 3. Entscheidungen (meine Vorschläge, Kenso gibt frei)
|
||||||
|
|
||||||
|
**E1 Technik: DOM + CSS statt Kanvas.** Die Welt ist wie in der Vorlage ein 2400 × 1200 großes Element mit PNG-Ebenen, per `transform` verschoben und gezoomt; Figuren, Etagen und Effekte sind HTML-Elemente, Animationen reine CSS-Sprite-Animationen (`steps()`). Die Kanvas-Engine (`components/workers/engine/*`) samt `WorkersStage`, `WorkerCard`, `WorkerList`, `WorkersKpis`, `WorkersBoard` entfällt.
|
||||||
|
|
||||||
|
**E2 Bilder:** Die PNGs aus `pixelwelt-v2` kommen nach `src/assets/hustler/<gruppe>/` und werden aus dem CSS referenziert (Vite hängt einen Hash an, kein Cache-Ärger nach Updates). Nur benutzte Dateien, ca. 1,3 MB, Seite lädt weiter lazy. Ein Import-Skript (`scripts/hustler-import.mjs`) kopiert die Bilder, übernimmt das CSS der drei Artboards (Blob-Adressen → Asset-Pfade, alle Klassen und Keyframes mit `hk-` vorangestellt, damit nichts mit dem WOMS-CSS kollidiert) und schreibt die Geometrie (Welt, Haus, Etagen, Anker, Aufzug-Halte, Zeitachsen) nach `src/lib/hustlerWelt.js`. So lässt sich jede spätere Änderung an der Zeichenfläche (z. B. Kensos Hustler-Designs einzeln) neu einspielen.
|
||||||
|
|
||||||
|
**E3 Schriften:** Pixelify Sans (liegt schon da) und Press Start 2P (SIL OFL, für Zahlen und Überschriften) selbst gehostet unter `public/fonts/`, kein Google-Fonts-Abruf.
|
||||||
|
|
||||||
|
**E4 Graue Räume dynamisch:** Im Entwurfsbild sind die Räume von Kim, Pia und Finn fest abgedunkelt. Echt ist „nicht angeschlossen“ ein Zustand, der sich ändert (alle acht Such-Räume können grau sein, `SEARCH_ROOMS`). Darum wird `haus.png` mit allen Räumen hell neu erzeugt (kleine neue Raum-Deko für Kleinanzeigen, Portale, Foren im Stil der übrigen Räume) und für jeden der acht Such-Räume eine abgedunkelte Raum-Ebene (gleicher Generator, Dunkelfilter + Spinnweben) erzeugt, die nur bei `connected: false` erscheint. Vorschau bekommt Kenso vor dem Einbau.
|
||||||
|
|
||||||
|
**E5 Status → Figur** (Haus und Detailansicht):
|
||||||
|
|
||||||
|
| Dienst-Status | Figur | Zusatz |
|
||||||
|
|---|---|---|
|
||||||
|
| `arbeitet` | farbig, tippt | Bildschirm leuchtet; Rita: Radar läuft |
|
||||||
|
| `wartet` | grau, Kaffeetasse | „…“-Punkte |
|
||||||
|
| `leerlauf` | grau, schläft | „Zzz“ |
|
||||||
|
| `grau` (nicht angeschlossen) | grau, steht | Raum abgedunkelt (E4); Detail: Szene mit Stecker |
|
||||||
|
| `fehler` | grau, steht | roter „!“-Marker über dem Kopf, Statustext rot |
|
||||||
|
|
||||||
|
Overseer (`otto`): Kristall immer sichtbar; nur bei `arbeitet` volles Leuchten, sonst gedimmt. Bei `state.paused` stehen alle Animationen still und die Kopfzeile zeigt „Angehalten“.
|
||||||
|
|
||||||
|
**E6 Name:** `otto` heißt in der Oberfläche „Overseer“ (Anzeige-Name, wie in der Zeichenfläche). Roster, Fixture und Dienst bleiben bei `otto`/„Otto“. Texte, die der Dienst schreibt (Spur, Ereignisse), können noch „Otto“ sagen – das wäre eine eigene Dienst-Änderung.
|
||||||
|
|
||||||
|
**E7 Kopfzeile (HUD):** grüne Münze = `kpis.mrrNewEur` („+60 €/M“), rote Münze = `kpis.apiTodayUsd` („−5,10 $“, Hinweis-Text „von 6,00 $“ im Titel, ab 80 % blinkt sie). Icons mit Zahl: Stern Abos (`newAbosMonth`), Pokal Deals (`dealsMonth`), Blase Gespräche (`openThreads`), Glocke Wartet auf dich (`pultOpen`), Roboter Bot-Leads (`botLeads`). Fehlende Werte zeigen „–“. Rechts: Pause/Fortsetzen (mit Pixel-Rückfrage wie heute) und Zahnrad (nur Admin, öffnet den bestehenden Einstellungen-Dialog unverändert). Meldungen (Notbremse, Verbindung gestört, Umschalten fehlgeschlagen) als Pixel-Banner unter der Kopfzeile.
|
||||||
|
|
||||||
|
**E8 Navigation:** `?tab=hochhaus|freigabe|botleads` bleibt (Links aus dem Ereignisstrom und `/leads`/`/workers`-Umleitungen funktionieren weiter). Etage „Freigabe“ → Pult, Etage „Keller“ → Bot-Leads, alle anderen Etagen zoomen heran. Pult und Keller haben oben links „◂ Hochhaus“. Im Haus: Briefkasten-Zähler = `pultOpen` (bei 0 weg), Tresor-Schild „N Deals“, Keller-Schild „N Bot-Leads“. Die Seitenüberschrift „Hustler“ und die Reiterleiste entfallen (Tab-Titel bleibt „Hustler“). Die Welt füllt den Inhaltsbereich neben der WOMS-Seitenleiste in voller Höhe.
|
||||||
|
|
||||||
|
**E9 Ereignisse sichtbar machen (leicht):** Status und „Gerade“-Text folgen live dem Ereignisstrom (`reduceEvents`, wie heute). Zusätzlich übersetzt eine neue kleine Regie (`src/lib/hustlerRegie.js`, rein, testbar) die vorhandenen Schritte aus `eventToSteps` in kurze Effekte: Sprechblase (2,5 s), Stempel/Umschlag/Akte/Alarm-Symbol über der Figur, Umschlag fliegt von Figur zu Figur (`give`), kleiner Hüpfer (`cheer`), Münzen in den Tresor (`deal`). Höchstens 4 gleichzeitig, Rückstau wird verworfen, „weniger Bewegung“ zeigt nur Blasen, verdeckter Tab sammelt nichts an. Symbole kommen aus den vorhandenen Icon-PNGs, keine neue Grafik.
|
||||||
|
|
||||||
|
**E10 Detailansicht:** wie Zeichenfläche (Büro-, Stecker- oder Brücken-Szene mit großer Figur nach E5, daneben Name, Status, Modell, Etage · Raum, Aufgabe, Gerade, Heute, Kosten · Tokens, Spur, ◂ n / 19 ▸). Daten: Modell aus `MODEL_IDS` als „Claude Opus 5.5“ usw., Aufgabe = `trace.worker.role` sonst Roster-Rolle, Gerade = `worker.task`, Heute = `counterLines`, Kosten/Tokens aus `trace.today`, Spur = `traceRows` (neueste zuerst, nur sichere Links). Tastatur: ←/→ blättern, Esc schließt, Fokus bleibt im Dialog und geht danach zur Figur zurück.
|
||||||
|
|
||||||
|
**E11 Pult:** Szene wie Zeichenfläche; die Boten-Schleife (Clara, Nora, Aufzug, Fähnchen) läuft nur, solange etwas wartet, sonst ruht der Raum. Klemmbrett mit Reitern Wartet / Veraltet / Erledigt (`PULT_FILTERS`, `usePultFeed` unverändert). Zahl am Reiter: „Wartet“ aus `kpis.pultOpen`, am aktiven Reiter die Länge der Liste; für die anderen beiden gibt es keine Zahl (sonst drei Abrufe alle 30 s). Ein Umschlag zeigt Art-Icon, Titel, Alter, ggf. Frist/übernommen/veraltet/Ergebnis-Stempel und „von <Hustler>“. Klick öffnet den **Brief**: Original, Entwurf (bearbeitbar bei sendbaren Arten), Stempel-Knöpfe = die heutigen Aktionen nach `rowModel`, Antworten-/Einfügen-Feld, „Interessent“ öffnet das bestehende `ProspectPanel`. „Pult zuklappen“ zeigt die Szene ganz.
|
||||||
|
|
||||||
|
**E12 Keller:** Szene wie Zeichenfläche; Arne läuft seine Ablage-Schleife nur bei `arbeitet`, sonst döst er am Pult (Haus-Figur, schläft), Rohrpost nur bei `arbeitet`. Register-Buch: Raum-Reiter (`ROOM_FILTERS`, Zahl nur am aktiven Reiter = `total`), Suche, Einträge der Dienst-Seite (50) im Buch scrollbar, Blättern ◂ ▸ mit „Seite x von y“. Zeile: Raum-Icon, Name, Ort, Grund-Icon + Grund. **Akte** (Dialog): Grund mit Erklärung (Tabelle für die 14 Gründe aus `scoring/business.js` des Dienstes, unbekannt → allgemeiner Satz), Scout aus dem Roster, Punkte, Telefon nach `phoneLabel`, Quelle (`safeHref`), gefunden am, „gekürzt“. „Register zuklappen“ zeigt die Szene ganz.
|
||||||
|
|
||||||
|
**E13 Handy (unter 720 px):** Haus mit Wischen/Pinch wie am Desktop, Kopfzeile bricht um. Pult und Keller: Klemmbrett/Buch in voller Breite über der abgedunkelten Szene; Brief, Akte und Detailansicht als Vollbild. Keine eigenen Handy-Entwürfe – schlicht und benutzbar.
|
||||||
|
|
||||||
|
**E14 Barrierefreiheit:** Etagen und Figuren sind echte Knöpfe mit deutschem `aria-label` („Lea, Haiku, arbeitet“), Bilder `aria-hidden`, Dialoge `role="dialog"` mit Fokusfalle, Tastenkürzel im Haus (+/−/0/Esc), „weniger Bewegung“ schaltet Schnee, Flackern und Gleiten ab.
|
||||||
|
|
||||||
|
## 4. Tests
|
||||||
|
|
||||||
|
- Alle Tests der reinen Logik (`workersEvents`, `workersFeed`, `workersView`, `workersPult`, `botleadsView`, `workersRoster`, `workersApi`, `workersSettingsForm`, `workersFocus`, `workersProspect` (Logik), `copyableCredential`, `navLinks`, `routeErrorBoundary`) bleiben **unverändert grün**.
|
||||||
|
- UI-Tests, die die alte Oberfläche abbilden (`workersPultUi`, `botleadList`, `botleadsView` (Teil Komponente), `workersComponents`, `workersCss`, `workersRoute`, `workersFont`, `workersProspect` (Teil Panel), `workersHarness`, `workersSmoke`), werden auf die neue Struktur umgestellt; **jede fachliche Zusicherung bleibt** (gleiche Aktionen, Texte, Sperren, Rückfragen), nur Klassen/Wege ändern sich (z. B. erst Umschlag öffnen, dann Knopf drücken).
|
||||||
|
- Die Tests der Kanvas-Engine (`workersCamera`, `workersDirector`, `workersFx`, `workersLayout`, `workersLift`, `workersProps`, `workersRooms`, `workersScene`, `workersSprites`) gehen mit der Engine.
|
||||||
|
- Neu: Geometrie (jeder der 19 Hustler hat einen Anker in seinem Raum, Etagen lückenlos), Status→Figur-Tabelle inkl. `fehler`/`grau`/Overseer/Pause, HUD-Werte und Striche, Kamera-Mathematik (Grenzen, Zoom um Punkt, Etage heranzoomen), Regie (Blasen, Höchstzahl, Rückstau, weniger Bewegung), Detailansicht (Daten, Blättern, Fokus), Pult (Umschlag → Brief → jede Aktion wie bisher), Keller (Buch, Akte, Grund-Tabelle deckt alle Dienst-Gründe), Assets (jede im CSS genannte Datei existiert, keine Datei ungenutzt, keine fremde Klasse ohne `hk-`).
|
||||||
|
- Prüfstand (`scripts/workers-harness`) zeigt die neue Seite mit dem Skript-Dienst; Bildschirmfotos 1280×720, 1920×1080 und 390×844 für Kenso.
|
||||||
Reference in new issue
Block a user