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>

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 (
     <div className="hk-hochhaus">
-      <div className="hk-welt-rahmen" />
+      <HochhausWelt
+        ref={weltRef}
+        state={feed.state}
+        workers={workers}
+        onZeige={setAuswahl}
+        onOpen={onOpen}
+        gesperrt={auswahl !== null}
+      >
+        <RegieEbene ref={regieRef} />
+      </HochhausWelt>
+      <HochhausKopf
+        api={api}
+        isAdmin={isAdmin}
+        state={feed.state}
+        error={feed.error}
+        refresh={feed.refresh}
+        onGanz={() => { if (weltRef.current) weltRef.current.ganz() }}
+      />
+      {auswahl !== null && (
+        <HustlerDialog
+          api={api}
+          workerId={auswahl}
+          workers={workers}
+          onClose={() => setAuswahl(null)}
+          onWechsel={setAuswahl}
+        />
+      )}
     </div>
   )
 }

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.