jbourdon/space-game
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Jonathan Bourdon
2026-03-19 13:49:56 -04:00
parent 710addf1f5
commit 3ca568c05d
36 changed files with 2648 additions and 1017 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
apps/viewer/src/viewerInteractionController.ts
View File

@@ -14,6 +14,7 @@ import {
} from "./viewerControls";
import { NAV_DISTANCE, NAV_DISTANCE_PLANET_ORBIT, NAV_DISTANCE_SHIP_HULL } from "./viewerConstants";
import { ViewerHistoryWindowController } from "./viewerHistoryWindowController";
import type { ViewerHudState } from "./viewerHudState";
import type {
CameraMode,
DragMode,
@@ -33,6 +34,7 @@ export interface ViewerInteractionContext {
hoverLabelEl: HTMLDivElement;
hoverConnectorLineEl: SVGLineElement;
marqueeEl: HTMLDivElement;
hudState: ViewerHudState;
keyState: Set<string>;
getWorld: () => WorldState | undefined;
getActiveSystemId: () => string | undefined;
@@ -109,6 +111,7 @@ export class ViewerInteractionController {
if (!this.context.getMarqueeActive() && dragDistance > 8) {
this.context.setMarqueeActive(true);
this.context.setSuppressClickSelection(true);
this.context.hudState.marquee.visible = true;
this.context.marqueeEl.style.display = "block";
}
@@ -117,7 +120,7 @@ export class ViewerInteractionController {
}
this.context.dragLast.copy(point);
updateMarqueeBox(this.context.marqueeEl, this.context.dragStart, this.context.dragLast);
updateMarqueeBox(this.context.hudState.marquee, this.context.marqueeEl, this.context.dragStart, this.context.dragLast);
};
readonly onPointerUp = (event: PointerEvent) => {
@@ -131,7 +134,7 @@ export class ViewerInteractionController {
if (this.context.getDragMode() === "marquee" && this.context.getMarqueeActive()) {
this.completeMarqueeSelection();
hideMarqueeBox(this.context.marqueeEl);
hideMarqueeBox(this.context.hudState.marquee, this.context.marqueeEl);
}
this.context.setDragMode(undefined);
@@ -285,6 +288,7 @@ export class ViewerInteractionController {
updateHoverLabel(event: PointerEvent) {
updateHoverLabel({
dragMode: this.context.getDragMode(),
hoverState: this.context.hudState.hoverLabel,
hoverLabelEl: this.context.hoverLabelEl,
hoverConnectorLineEl: this.context.hoverConnectorLineEl,
hoverPick: this.pickSelectableHitAtClientPosition(event.clientX, event.clientY),
@@ -299,6 +303,10 @@ export class ViewerInteractionController {
this.context.historyController.refreshHistoryWindows();
}
openHistoryWindow(selection: Selectable) {
this.context.historyController.openHistoryWindow(selection);
}
toggleCameraMode(forceMode?: CameraMode) {
const nextState = toggleCameraMode({
cameraMode: this.context.getCameraMode(),