feat(viewer): add Vue-based HUD, ops strip, and history window

2026-03-19 13:49:56 -04:00
parent 710addf1f5
commit 3ca568c05d
36 changed files with 2648 additions and 1017 deletions
--- a/apps/viewer/src/viewerHudState.ts
+++ b/apps/viewer/src/viewerHudState.ts
@@ -0,0 +1,178 @@
+import { reactive } from "vue";
+import type { ViewerSelectionStore } from "./ui/stores/viewerSelection";
+import type { Selectable } from "./viewerTypes";
+
+export interface HudPanelState {
+  collapsed: boolean;
+  summary: string;
+  bodyText: string;
+}
+
+export interface HudHtmlPanelState {
+  hidden: boolean;
+  title: string;
+  bodyHtml: string;
+}
+
+export interface HudErrorState {
+  hidden: boolean;
+  message: string;
+}
+
+export interface HudProgressBar {
+  label: string;
+  valueLabel: string;
+  progress: number;
+}
+
+export interface OpsFactionCardState {
+  kind: "faction";
+  id: string;
+  label: string;
+  stateLines: string[];
+  priorities: { label: string; value: string }[];
+}
+
+export interface OpsStationCardState {
+  kind: "station";
+  id: string;
+  label: string;
+  badge: string;
+  selected: boolean;
+  lines: string[];
+  processes: HudProgressBar[];
+}
+
+export interface OpsShipCardState {
+  kind: "ship";
+  id: string;
+  label: string;
+  badge: string;
+  selected: boolean;
+  followed: boolean;
+  locationLines: string[];
+  lines: string[];
+  action?: HudProgressBar;
+  aiLines: string[];
+}
+
+export interface OpsStripState {
+  factions: OpsFactionCardState[];
+  stations: OpsStationCardState[];
+  ships: OpsShipCardState[];
+}
+
+export interface HistoryWindowState {
+  id: string;
+  target: Selectable;
+  title: string;
+  bodyHtml: string;
+  text: string;
+  copyLabel: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  zIndex: number;
+}
+
+export interface HoverLabelState {
+  hidden: boolean;
+  text: string;
+  x: number;
+  y: number;
+  connectorHidden: boolean;
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
+}
+
+export interface MarqueeState {
+  visible: boolean;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export interface ViewerHudState {
+  gamePanel: HudPanelState;
+  networkPanel: HudPanelState;
+  performancePanel: HudPanelState;
+  systemPanel: HudHtmlPanelState;
+  detailPanel: HudHtmlPanelState;
+  error: HudErrorState;
+  opsStrip: OpsStripState;
+  historyWindows: HistoryWindowState[];
+  hoverLabel: HoverLabelState;
+  marquee: MarqueeState;
+}
+
+export interface ViewerHudBindings {
+  state: ViewerHudState;
+  selectionStore: ViewerSelectionStore;
+  opsStripEl: HTMLDivElement;
+  historyLayerEl: HTMLDivElement;
+  marqueeEl: HTMLDivElement;
+  hoverLabelEl: HTMLDivElement;
+  hoverConnectorLineEl: SVGLineElement;
+}
+
+export function createViewerHudState(): ViewerHudState {
+  return reactive({
+    gamePanel: {
+      collapsed: true,
+      summary: "Bootstrapping",
+      bodyText: "Bootstrapping",
+    },
+    networkPanel: {
+      collapsed: true,
+      summary: "Waiting",
+      bodyText: "Waiting for snapshot.",
+    },
+    performancePanel: {
+      collapsed: true,
+      summary: "Waiting",
+      bodyText: "Waiting for frame samples.",
+    },
+    systemPanel: {
+      hidden: false,
+      title: "Deep Space",
+      bodyHtml: "Waiting for the authoritative snapshot.",
+    },
+    detailPanel: {
+      hidden: false,
+      title: "Nothing selected",
+      bodyHtml: "Waiting for the authoritative snapshot.",
+    },
+    error: {
+      hidden: true,
+      message: "",
+    },
+    opsStrip: {
+      factions: [],
+      stations: [],
+      ships: [],
+    },
+    historyWindows: [],
+    hoverLabel: {
+      hidden: true,
+      text: "",
+      x: 0,
+      y: 0,
+      connectorHidden: true,
+      x1: 0,
+      y1: 0,
+      x2: 0,
+      y2: 0,
+    },
+    marquee: {
+      visible: false,
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0,
+    },
+  });
+}