From b4e67a43a2ed12519fc9314f51051bc9da75ec1f Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 22 Oct 2026 08:23:49 +0000 Subject: [PATCH] =?UTF-8?q?Hustler-Pixelwelt:=20Hochhaus=20zusammengesteck?= =?UTF-8?q?t=20(Welt=20mit=20Regie,=20Kopfzeile,=20Detailansicht),=20CSS-I?= =?UTF-8?q?mporte,=20forwardRef=20im=20Mini-L=C3=A4ufer?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 5.5 --- src/components/workers/hochhaus/Hochhaus.jsx | 41 ++++++++- src/pages/WorkersPage.jsx | 4 + tests/unit/helpers/fakeReact.mjs | 7 ++ tests/unit/hustlerHochhausWelt.test.mjs | 7 +- tests/unit/hustlerRegie.test.mjs | 9 +- tests/unit/hustlerSeite.test.mjs | 92 +++++++++++++++++--- tests/unit/workersRoute.test.mjs | 2 +- 7 files changed, 135 insertions(+), 27 deletions(-) diff --git a/src/components/workers/hochhaus/Hochhaus.jsx b/src/components/workers/hochhaus/Hochhaus.jsx index 5dfad7e..82b9ae2 100644 --- a/src/components/workers/hochhaus/Hochhaus.jsx +++ b/src/components/workers/hochhaus/Hochhaus.jsx @@ -1,8 +1,16 @@ -// Bildschirm „Hochhaus“ (Spielwelt, Kopfzeile, Detailansicht). Gerüst von T3: Zustände wie bisher im WorkersBoard; T5–T8 füllen die Welt. +import { useRef, useState } from 'react' +import HochhausKopf from './HochhausKopf' +import HochhausWelt from './HochhausWelt' +import HustlerDialog from './HustlerDialog' +import RegieEbene from './RegieEbene' + +// Bildschirm „Hochhaus“: Spielwelt mit Regie-Ebene (T5, T8), Kopfzeile (T6) und Detailansicht eines Hustlers (T7). Zustände wie bisher im WorkersBoard. // Reine Darstellung ohne Auth-Bezug: isAdmin, der Feed (feed = { state, error, loaded, refresh }), die Hustler-Tabelle (workers), die Regie-Anbindung // (regieRef, die Seite ruft regieRef.current.push(events) bei neuen Ereignissen) und der Bildschirmwechsel (onOpen(tab)) kommen von der Seite. // Kein CSS-Import und keine Bilder: die Stile hängt WorkersPage ein (Regeln dieser Datei in styles/hustler/hustler-ui.css). export default function Hochhaus({ api, isAdmin, feed, workers, regieRef, onOpen }) { + const weltRef = useRef(null) + const [auswahl, setAuswahl] = useState(null) // workerId der offenen Detailansicht (null = keine) const ready = feed.loaded && Boolean(feed.state) // Dienst noch nie erreicht: Pixel-Leerzustand mit Fehlertext und „Neu laden“ if (!ready && feed.error) { @@ -24,10 +32,37 @@ export default function Hochhaus({ api, isAdmin, feed, workers, regieRef, onOpen ) } - // T5 füllt diesen Rahmen mit der Welt (Kopfzeile T6, Detailansicht T7, Regie T8) + // Die Regie-Ebene liegt in der skalierten Bühne (Weltkoordinaten); ihr Handle ist regieRef der Seite, die neue Ereignisse hineinreicht. + // Solange die Detailansicht offen ist, ruhen Rad, Ziehen und Tasten der Kamera (gesperrt). return (
-
+ + + + { if (weltRef.current) weltRef.current.ganz() }} + /> + {auswahl !== null && ( + setAuswahl(null)} + onWechsel={setAuswahl} + /> + )}
) } diff --git a/src/pages/WorkersPage.jsx b/src/pages/WorkersPage.jsx index 99a88e3..daef049 100644 --- a/src/pages/WorkersPage.jsx +++ b/src/pages/WorkersPage.jsx @@ -14,6 +14,10 @@ import '../styles/hustler/hochhaus.css' import '../styles/hustler/keller.css' import '../styles/hustler/pult.css' import '../styles/hustler/hustler-ui.css' +import '../styles/hustler/hustler-welt.css' +import '../styles/hustler/hustler-kopf.css' +import '../styles/hustler/hustler-detail.css' +import '../styles/hustler/hustler-regie.css' // Bildschirme der Seite: das Hochhaus, das Pult (Freigabe von P3) und der Keller (Bot-Leads von P6). Eine Reiterleiste gibt es nicht mehr; // gewechselt wird im Haus (Etage Freigabe, Etage Keller) und über „◂ Hochhaus“ in Pult und Keller. diff --git a/tests/unit/helpers/fakeReact.mjs b/tests/unit/helpers/fakeReact.mjs index 84f36b5..92d3110 100644 --- a/tests/unit/helpers/fakeReact.mjs +++ b/tests/unit/helpers/fakeReact.mjs @@ -112,6 +112,13 @@ export function useEffect(fn, deps) { slot.cleanup = fn() }) } +// forwardRef: der ref kommt wie in React 18 als zweites Argument (der Mini-Läufer lässt ref in den props stehen) +export function forwardRef(render) { return (props) => render(props, props.ref ?? null) } +// useImperativeHandle: Objekt-Ref sofort beim Rendern setzen (wie React vor den Effekten), beim Abbau wieder null +export function useImperativeHandle(ref, create) { + if (ref && typeof ref === 'object') ref.current = create() + useEffect(() => () => { if (ref && typeof ref === 'object') ref.current = null }, [ref]) +} ` export const fakeReact = { name: 'fake-react', diff --git a/tests/unit/hustlerHochhausWelt.test.mjs b/tests/unit/hustlerHochhausWelt.test.mjs index 9ba49dc..1e6c7bb 100644 --- a/tests/unit/hustlerHochhausWelt.test.mjs +++ b/tests/unit/hustlerHochhausWelt.test.mjs @@ -11,16 +11,13 @@ import { makeState, IDS } from './helpers/workersFixtures.mjs' // 1. Figuren nach Status (E5), graue Räume samt Zettel (E4), Schilder, Etagen (E8), Pause, Beschriftungen (E14). // 2. Kamera mit nachgestellten Zeigerereignissen: Rad um den Mauspunkt, Ziehen und unterdrückter Klick danach, Pinch, Doppelklick/-tipp, Tasten, Gleiten, Größenänderung, gesperrt. // Der Mini-Läufer ruft nur Objekt-Refs (globalThis.__fakeRef); die Kamera hängt über einen ref-Callback am Sichtfenster, den der Test wie React beim Einhängen selbst mit -// einer Element-Attrappe ruft. forwardRef und useImperativeHandle fehlen im gemeinsamen Mini-Läufer: dieser Test ergänzt sie lokal. +// einer Element-Attrappe ruft. const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '../..') const importBundle = (out) => import(`data:text/javascript;base64,${Buffer.from(out.outputFiles[0].text).toString('base64')}`) const settle = () => new Promise((resolve) => setImmediate(resolve)) const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms)) -const FAKE_REACT_PLUS = `${FAKE_REACT} -export function forwardRef(render) { return (props) => render(props, props.ref ?? null) } -export function useImperativeHandle(ref, create) { if (ref && typeof ref === 'object') ref.current = create() } -` +const FAKE_REACT_PLUS = FAKE_REACT // forwardRef und useImperativeHandle liefert inzwischen der gemeinsame Mini-Läufer const fakeReactPlus = { name: 'fake-react', setup(build) { diff --git a/tests/unit/hustlerRegie.test.mjs b/tests/unit/hustlerRegie.test.mjs index 9bc1c66..0959537 100644 --- a/tests/unit/hustlerRegie.test.mjs +++ b/tests/unit/hustlerRegie.test.mjs @@ -541,13 +541,8 @@ test('Quelltext: rein (kein React, window, document, Zeitgeber); Importe nur wor // ---------- RegieEbene (Mini-Läufer) ---------- -// fakeReact kennt forwardRef und useImperativeHandle nicht: hier angehängt (ref kommt wie bei React 18 als zweites Argument) -const FAKE_REACT_MIT_REF = `${FAKE_REACT} -export function forwardRef(render) { return (props) => render(props, props.ref ?? null) } -export function useImperativeHandle(ref, create, deps) { - useEffect(() => { if (ref) ref.current = create(); return () => { if (ref) ref.current = null } }, deps) -} -` +// forwardRef und useImperativeHandle liefert der gemeinsame Mini-Läufer (helpers/fakeReact.mjs) +const FAKE_REACT_MIT_REF = FAKE_REACT const fakeReactMitRef = { name: 'fake-react-mit-ref', setup(build) { diff --git a/tests/unit/hustlerSeite.test.mjs b/tests/unit/hustlerSeite.test.mjs index bfba3c9..a654c2c 100644 --- a/tests/unit/hustlerSeite.test.mjs +++ b/tests/unit/hustlerSeite.test.mjs @@ -7,7 +7,7 @@ import { fakeReact } from './helpers/fakeReact.mjs' import { ev, makeState } from './helpers/workersFixtures.mjs' // Das Gerüst der Hustler-Pixelwelt (T3) läuft wirklich: im Mini-Läufer anstelle von React (Muster botleadList.test.mjs, Baustein helpers/fakeReact.mjs). -// 1. Hochhaus.jsx: Laden, Dienst nicht erreichbar („Neu laden“), geladen -> Rahmen der Welt. +// 1. Hochhaus.jsx: Laden, Dienst nicht erreichbar („Neu laden“), geladen -> Welt, Kopfzeile, Detailansicht auf Klick. // 2. WorkersPage.jsx: mit esbuild-Attrappen für Router, Anmeldung, Dienst-Client, Feed-Hook, CSS und die drei Bildschirme. Geprüft wird, // welcher Bildschirm zu ?tab gehört, welche Props er bekommt, dass der Feed einmal pro Seite läuft (kein Neustart beim Bildschirmwechsel), // dass Ereignisse die Hustler-Tabelle fortschreiben und an die Regie gehen, und dass ein Schnappschuss die Tabelle neu setzt. @@ -27,20 +27,49 @@ const byClass = (tree, name) => nodes(tree, (n) => typeof n.tag === 'string' && // ---------- Hochhaus ---------- +// Die vier Teile des Hochhauses (Welt T5, Kopfzeile T6, Detailansicht T7, Regie T8) haben eigene Tests; hier sind sie Attrappen, +// geprüft wird das Zusammenstecken (Props, Auswahl, Sperre der Kamera, Regie-Handle, „Ganzes Haus zeigen“). +const TEILE = { + welt: `import { jsx, forwardRef, useImperativeHandle } from 'react' + export default forwardRef(function HochhausWelt(props, ref) { + useImperativeHandle(ref, () => ({ ganz: () => { globalThis.__hh.ganz += 1 } })) + globalThis.__hh.welt = props + return jsx('div', { 'data-teil': 'welt', children: props.children }) + })`, + kopf: "import { jsx } from 'react'\nexport default function HochhausKopf(props) { globalThis.__hh.kopf = props; return jsx('div', { 'data-teil': 'kopf' }) }", + dialog: "import { jsx } from 'react'\nexport default function HustlerDialog(props) { globalThis.__hh.dialog = props; return jsx('div', { 'data-teil': 'dialog' }) }", + regie: `import { jsx, forwardRef, useImperativeHandle } from 'react' + export default forwardRef(function RegieEbene(props, ref) { + useImperativeHandle(ref, () => ({ push: (events) => { globalThis.__hh.pushed.push(events) }, flush() {} })) + return jsx('div', { 'data-teil': 'regie' }) + })`, +} +const teilePlugin = { + name: 'hochhaus-teile', + setup(build) { + for (const [filter, key] of [[/^\.\/HochhausWelt$/, 'welt'], [/^\.\/HochhausKopf$/, 'kopf'], [/^\.\/HustlerDialog$/, 'dialog'], [/^\.\/RegieEbene$/, 'regie']]) { + build.onResolve({ filter }, () => ({ path: key, namespace: 'hochhaus-teil' })) + } + build.onLoad({ filter: /.*/, namespace: 'hochhaus-teil' }, (args) => ({ contents: TEILE[args.path], loader: 'js' })) + }, +} + let hochhausBundle const loadHochhaus = () => (hochhausBundle ??= esbuild.build({ stdin: { contents: "export { __mount, jsx } from 'react'\nexport { default as Hochhaus } from './src/components/workers/hochhaus/Hochhaus.jsx'", resolveDir: ROOT, loader: 'js' }, - bundle: true, format: 'esm', platform: 'neutral', write: false, jsx: 'automatic', loader: { '.jsx': 'jsx' }, plugins: [fakeReact], + bundle: true, format: 'esm', platform: 'neutral', write: false, jsx: 'automatic', loader: { '.jsx': 'jsx' }, plugins: [fakeReact, teilePlugin], }).then(importBundle)) async function hochhaus(feed, extra = {}) { const { __mount, jsx, Hochhaus } = await loadHochhaus() - const props = { api: {}, isAdmin: false, workers: {}, regieRef: { current: null }, onOpen() {}, ...extra, feed } + globalThis.__hh = { ganz: 0, pushed: [], welt: null, kopf: null, dialog: null } + const props = { api: { name: 'api' }, isAdmin: false, workers: {}, regieRef: { current: null }, onOpen() {}, ...extra, feed } const mounted = __mount(jsx(() => jsx(Hochhaus, props), {})) await settle() - return { tree: () => mounted.tree(), end: () => mounted.unmount() } + return { props, hh: globalThis.__hh, tree: () => mounted.tree(), end: () => mounted.unmount() } } const counting = (n = { refresh: 0 }) => ({ n, refresh: () => { n.refresh += 1 } }) +const teil = (tree, name) => nodes(tree, (n) => n.props && n.props['data-teil'] === name) test('Hochhaus: solange nichts geladen ist, steht „Wird geladen …“ mit role=status in der Wurzel hk-hochhaus', async () => { const c = counting() @@ -50,7 +79,7 @@ test('Hochhaus: solange nichts geladen ist, steht „Wird geladen …“ mit rol assert.equal(root.tag, 'div'); assert.equal(root.props.className, 'hk-hochhaus') const laden = byClass(root, 'hk-laden') assert.equal(laden.length, 1); assert.equal(laden[0].props.role, 'status'); assert.equal(textOf(laden[0]), 'Wird geladen …') - assert.equal(byClass(root, 'hk-welt-rahmen').length, 0); assert.equal(byClass(root, 'hk-leer').length, 0) + assert.equal(teil(root, 'welt').length, 0); assert.equal(byClass(root, 'hk-leer').length, 0) assert.equal(c.n.refresh, 0) } finally { view.end() } }) @@ -70,7 +99,7 @@ test('Hochhaus: Dienst nie erreicht -> Pixel-Leerzustand mit Titel, Fehlertext a const knoepfe = nodes(root, (n) => n.tag === 'button') assert.equal(knoepfe.length, 1) assert.equal(textOf(knoepfe[0]), 'Neu laden'); assert.equal(knoepfe[0].props.type, 'button'); assert.ok(hasClass(knoepfe[0], 'hk-knopf')) - assert.equal(byClass(root, 'hk-laden').length, 0); assert.equal(byClass(root, 'hk-welt-rahmen').length, 0) + assert.equal(byClass(root, 'hk-laden').length, 0); assert.equal(teil(root, 'welt').length, 0) knoepfe[0].props.onClick({ preventDefault() {} }) assert.equal(c.n.refresh, 1) knoepfe[0].props.onClick({ preventDefault() {} }) @@ -78,28 +107,69 @@ test('Hochhaus: Dienst nie erreicht -> Pixel-Leerzustand mit Titel, Fehlertext a } finally { view.end() } }) -test('Hochhaus: geladen -> leerer Rahmen hk-welt-rahmen; ein späterer Verbindungsfehler ersetzt die Welt nicht', async () => { +test('Hochhaus: geladen -> Welt mit Regie-Ebene darin, Kopfzeile, noch keine Detailansicht; ein späterer Verbindungsfehler ersetzt die Welt nicht', async () => { const c = counting() const state = makeState() - const view = await hochhaus({ state, error: null, loaded: true, refresh: c.refresh }) + const workers = { lea: { status: 'arbeitet', task: 'x', lastTs: null, connected: true, counters: {} } } + const onOpen = () => {} + const view = await hochhaus({ state, error: null, loaded: true, refresh: c.refresh }, { isAdmin: true, workers, onOpen }) try { const root = view.tree() assert.equal(root.props.className, 'hk-hochhaus') - assert.equal(byClass(root, 'hk-welt-rahmen').length, 1) + const welt = teil(root, 'welt') + assert.equal(welt.length, 1); assert.equal(teil(welt[0], 'regie').length, 1) // Regie liegt in der Bühne der Welt + assert.equal(teil(root, 'kopf').length, 1); assert.equal(teil(root, 'dialog').length, 0) assert.equal(byClass(root, 'hk-laden').length, 0); assert.equal(byClass(root, 'hk-leer').length, 0) + const w = view.hh.welt + assert.equal(w.state, state); assert.equal(w.workers, workers); assert.equal(w.onOpen, onOpen); assert.equal(w.gesperrt, false) + const k = view.hh.kopf + assert.equal(k.api, view.props.api); assert.equal(k.isAdmin, true); assert.equal(k.state, state); assert.equal(k.error, null); assert.equal(k.refresh, c.refresh) } finally { view.end() } const gestoert = await hochhaus({ state, error: 'Verbindung weg', loaded: true, refresh: c.refresh }) try { - assert.equal(byClass(gestoert.tree(), 'hk-welt-rahmen').length, 1) + assert.equal(teil(gestoert.tree(), 'welt').length, 1) assert.equal(byClass(gestoert.tree(), 'hk-leer').length, 0) + assert.equal(gestoert.hh.kopf.error, 'Verbindung weg') } finally { gestoert.end() } }) +test('Hochhaus: das Regie-Handle landet in regieRef der Seite, Ereignisse kommen bei der Ebene an; nach dem Abbau ist es weg', async () => { + const regieRef = { current: null } + const view = await hochhaus({ state: makeState(), error: null, loaded: true, refresh() {} }, { regieRef }) + assert.equal(typeof regieRef.current?.push, 'function') + const events = [ev('fund', 'lea')] + regieRef.current.push(events) + assert.deepEqual(view.hh.pushed, [events]) + view.end() + await settle() + assert.equal(regieRef.current, null) +}) + +test('Hochhaus: Figur-Klick öffnet die Detailansicht und sperrt die Kamera, Blättern wechselt, Schließen gibt frei; „Ganzes Haus zeigen“ ruft die Welt', async () => { + const workers = { lea: { status: 'arbeitet', task: 'x', lastTs: null, connected: true, counters: {} } } + const view = await hochhaus({ state: makeState(), error: null, loaded: true, refresh() {} }, { workers }) + try { + view.hh.welt.onZeige('lea') + await settle() + assert.equal(teil(view.tree(), 'dialog').length, 1) + assert.equal(view.hh.dialog.workerId, 'lea'); assert.equal(view.hh.dialog.workers, workers); assert.equal(view.hh.dialog.api, view.props.api) + assert.equal(view.hh.welt.gesperrt, true) + view.hh.dialog.onWechsel('bea') + await settle() + assert.equal(view.hh.dialog.workerId, 'bea') + view.hh.dialog.onClose() + await settle() + assert.equal(teil(view.tree(), 'dialog').length, 0); assert.equal(view.hh.welt.gesperrt, false) + view.hh.kopf.onGanz() + assert.equal(view.hh.ganz, 1) + } finally { view.end() } +}) + test('Hochhaus: ohne Zustand gilt auch ein geladen-Flag nicht als bereit (wie bisher im Board)', async () => { const c = counting() const view = await hochhaus({ state: null, error: 'weg', loaded: true, refresh: c.refresh }) try { - assert.equal(byClass(view.tree(), 'hk-welt-rahmen').length, 0) + assert.equal(teil(view.tree(), 'welt').length, 0) assert.equal(byClass(view.tree(), 'hk-leer').length, 1) } finally { view.end() } }) diff --git a/tests/unit/workersRoute.test.mjs b/tests/unit/workersRoute.test.mjs index 3833766..dcb2911 100644 --- a/tests/unit/workersRoute.test.mjs +++ b/tests/unit/workersRoute.test.mjs @@ -47,7 +47,7 @@ test('WorkersPage: freigabe zeigt die PultList, botleads die BotLeadList (api, b }) test('CSS-Importe der Hustler-Oberfläche stehen nur in WorkersPage, nicht in den Komponenten (sonst nicht unter Node mit fakeReact ladbar)', () => { const s = readFileSync(new URL('../../src/pages/WorkersPage.jsx', import.meta.url), 'utf8') - for (const css of ['workers', 'hustler/schrift', 'hustler/hochhaus', 'hustler/keller', 'hustler/pult', 'hustler/hustler-ui']) assert.ok(s.includes(`import '../styles/${css}.css'`), css) + for (const css of ['workers', 'hustler/schrift', 'hustler/hochhaus', 'hustler/keller', 'hustler/pult', 'hustler/hustler-ui', 'hustler/hustler-welt', 'hustler/hustler-kopf', 'hustler/hustler-detail', 'hustler/hustler-regie']) assert.ok(s.includes(`import '../styles/${css}.css'`), css) const walk = (dir) => readdirSync(dir, { withFileTypes: true }).flatMap((e) => (e.isDirectory() ? walk(path.join(dir, e.name)) : [path.join(dir, e.name)])) const root = fileURLToPath(new URL('../../src/components/workers/', import.meta.url)) const files = walk(root).filter((f) => /\.(jsx?|mjs)$/.test(f))