feat: production chain

apps/viewer/src/ViewerAppController.ts

@@ -55,6 +55,7 @@ import { ViewerNavigationController } from "./viewerNavigationController";
 import { ViewerSceneDataController } from "./viewerSceneDataController";
 import { ViewerPresentationController } from "./viewerPresentationController";
 import { createViewerControllers, wireViewerEvents } from "./viewerControllerFactory";
+import type { SceneNode } from "./viewerScenePrimitives";
 import type { FactionSnapshot, ShipSnapshot } from "./contracts";
 import type {
   BubbleVisual,
@@ -66,6 +67,7 @@ import type {
   MoonVisual,
   NetworkStats,
   NodeVisual,
+  OrbitLineVisual,
   OrbitalAnchor,
   PerformanceStats,
   PlanetVisual,
@@ -101,6 +103,7 @@ export class ViewerAppController {
   private readonly constructionSiteGroup = new THREE.Group();
   private readonly shipGroup = new THREE.Group();
   private readonly ambienceGroup = new THREE.Group();
+  private readonly gamePanelEl: HTMLDivElement;
   private readonly selectableTargets = new Map<THREE.Object3D, Selectable>();
   private readonly presentationEntries: PresentationEntry[] = [];
   private readonly nodeVisuals = new Map<string, NodeVisual>();
@@ -113,15 +116,20 @@ export class ViewerAppController {
   private readonly systemVisuals = new Map<string, SystemVisual>();
   private readonly systemSummaryVisuals = new Map<string, SystemSummaryVisual>();
   private readonly planetVisuals: PlanetVisual[] = [];
-  private readonly orbitLines: THREE.Object3D[] = [];
+  private readonly orbitLines: OrbitLineVisual[] = [];
   private readonly statusEl: HTMLDivElement;
+  private readonly gameSummaryEl: HTMLSpanElement;
   private readonly systemPanelEl: HTMLDivElement;
   private readonly systemTitleEl: HTMLHeadingElement;
   private readonly systemBodyEl: HTMLDivElement;
   private readonly detailTitleEl: HTMLHeadingElement;
   private readonly detailBodyEl: HTMLDivElement;
   private readonly factionStripEl: HTMLDivElement;
+  private readonly networkSectionEl: HTMLDivElement;
+  private readonly networkSummaryEl: HTMLSpanElement;
   private readonly networkPanelEl: HTMLDivElement;
+  private readonly performanceSectionEl: HTMLDivElement;
+  private readonly performanceSummaryEl: HTMLSpanElement;
   private readonly performancePanelEl: HTMLDivElement;
   private readonly errorEl: HTMLDivElement;
   private readonly historyLayerEl: HTMLDivElement;
@@ -179,15 +187,32 @@ export class ViewerAppController {
     const keyLight = new THREE.DirectionalLight(0xdcecff, 1.3);
     keyLight.position.set(1000, 1200, 800);
     this.scene.add(keyLight);
+    this.scene.add(
+      this.ambienceGroup,
+      this.systemGroup,
+      this.spatialNodeGroup,
+      this.bubbleGroup,
+      this.nodeGroup,
+      this.stationGroup,
+      this.claimGroup,
+      this.constructionSiteGroup,
+      this.shipGroup,
+    );
     const hud = createViewerHud(document);
+    this.gamePanelEl = hud.gamePanelEl;
     this.statusEl = hud.statusEl;
+    this.gameSummaryEl = hud.gameSummaryEl;
+    this.networkSectionEl = hud.networkSectionEl;
     this.systemPanelEl = hud.systemPanelEl;
     this.systemTitleEl = hud.systemTitleEl;
     this.systemBodyEl = hud.systemBodyEl;
     this.detailTitleEl = hud.detailTitleEl;
     this.detailBodyEl = hud.detailBodyEl;
     this.factionStripEl = hud.factionStripEl;
+    this.networkSummaryEl = hud.networkSummaryEl;
     this.networkPanelEl = hud.networkPanelEl;
+    this.performanceSectionEl = hud.performanceSectionEl;
+    this.performanceSummaryEl = hud.performanceSummaryEl;
     this.performancePanelEl = hud.performancePanelEl;
     this.errorEl = hud.errorEl;
     this.historyLayerEl = hud.historyLayerEl;
@@ -200,13 +225,31 @@ export class ViewerAppController {
       worldLifecycle: this.worldLifecycle,
       interactionController: this.interactionController,
     } = createViewerControllers(this));
+    this.presentationController.initializeAmbience();
 
     this.container.append(this.renderer.domElement, hud.root);
+    this.initializePanelToggles();
     wireViewerEvents(this);
     this.onResize();
     this.updateCamera(0);
   }
 
+  private initializePanelToggles() {
+    for (const panel of [this.gamePanelEl, this.networkSectionEl, this.performanceSectionEl]) {
+      const toggle = panel.querySelector(".panel-toggle");
+      if (!(toggle instanceof HTMLButtonElement)) {
+        continue;
+      }
+
+      toggle.addEventListener("click", () => {
+        const collapsed = panel.classList.toggle("is-collapsed");
+        toggle.textContent = collapsed ? "+" : "-";
+        toggle.setAttribute("aria-expanded", collapsed ? "false" : "true");
+        toggle.setAttribute("aria-label", `${collapsed ? "Expand" : "Collapse"} ${panel.dataset.panelName ?? "panel"}`);
+      });
+    }
+  }
+
   async start() {
     await this.worldLifecycle.bootstrapWorld();
     this.renderer.setAnimationLoop(() => this.render());
@@ -308,8 +351,8 @@ export class ViewerAppController {
   }
 
   private registerPresentation(
-    detail: THREE.Object3D,
-    icon: THREE.Sprite,
+    detail: SceneNode,
+    icon: SceneNode,
     hideDetailInUniverse: boolean,
     hideIconInUniverse = false,
     systemId?: string,
@@ -344,7 +387,7 @@ export class ViewerAppController {
     });
   };
 
-  private setShellReticleOpacity(sprite: THREE.Sprite, opacity: number) {
+  private setShellReticleOpacity(sprite: SystemVisual["shellReticle"], opacity: number) {
     setShellReticleOpacity(sprite, opacity);
   }