Hustler-Pixelwelt: Hochhaus zusammengesteckt (Welt mit Regie, Kopfzeile, Detailansicht), CSS-Importe, forwardRef im Mini-Läufer

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

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',

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) {

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) {

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() }
 })

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))