Refactor modular startup and viewer ship debugging
This commit is contained in:
@@ -2,6 +2,7 @@ import * as THREE from "three";
|
||||
import { fetchWorldSnapshot, openWorldStream } from "./api";
|
||||
import type {
|
||||
FactionSnapshot,
|
||||
InventoryEntry,
|
||||
PlanetSnapshot,
|
||||
ResourceNodeDelta,
|
||||
ResourceNodeSnapshot,
|
||||
@@ -149,6 +150,16 @@ interface SystemSummaryVisual {
|
||||
anchor: THREE.Vector3;
|
||||
}
|
||||
|
||||
interface HistoryWindowState {
|
||||
id: string;
|
||||
target: Selectable;
|
||||
root: HTMLElement;
|
||||
titleEl: HTMLHeadingElement;
|
||||
bodyEl: HTMLDivElement;
|
||||
copyButtonEl: HTMLButtonElement;
|
||||
text: string;
|
||||
}
|
||||
|
||||
const ZOOM_DISTANCE: Record<ZoomLevel, number> = {
|
||||
local: 900,
|
||||
system: 3200,
|
||||
@@ -204,6 +215,7 @@ export class GameViewer {
|
||||
private readonly networkPanelEl: HTMLDivElement;
|
||||
private readonly performancePanelEl: HTMLDivElement;
|
||||
private readonly errorEl: HTMLDivElement;
|
||||
private readonly historyLayerEl: HTMLDivElement;
|
||||
private readonly marqueeEl: HTMLDivElement;
|
||||
private readonly hoverLabelEl: HTMLDivElement;
|
||||
|
||||
@@ -241,6 +253,12 @@ export class GameViewer {
|
||||
private suppressClickSelection = false;
|
||||
private activeSystemId?: string;
|
||||
private followedShipId?: string;
|
||||
private readonly historyWindows: HistoryWindowState[] = [];
|
||||
private historyWindowCounter = 0;
|
||||
private historyWindowZCounter = 10;
|
||||
private historyWindowDragId?: string;
|
||||
private historyWindowDragPointerId?: number;
|
||||
private historyWindowDragOffset = new THREE.Vector2();
|
||||
|
||||
constructor(container: HTMLElement) {
|
||||
this.container = container;
|
||||
@@ -286,7 +304,8 @@ export class GameViewer {
|
||||
</aside>
|
||||
<div class="error-strip" hidden></div>
|
||||
</div>
|
||||
<section class="faction-strip"></section>
|
||||
<div class="history-layer"></div>
|
||||
<section class="ship-strip"></section>
|
||||
<div class="marquee-box"></div>
|
||||
<div class="hover-label" hidden></div>
|
||||
`;
|
||||
@@ -297,10 +316,11 @@ export class GameViewer {
|
||||
this.systemBodyEl = hud.querySelector(".system-body") as HTMLDivElement;
|
||||
this.detailTitleEl = hud.querySelector(".detail-title") as HTMLHeadingElement;
|
||||
this.detailBodyEl = hud.querySelector(".detail-body") as HTMLDivElement;
|
||||
this.factionStripEl = hud.querySelector(".faction-strip") as HTMLDivElement;
|
||||
this.factionStripEl = hud.querySelector(".ship-strip") as HTMLDivElement;
|
||||
this.networkPanelEl = hud.querySelector(".network-body") as HTMLDivElement;
|
||||
this.performancePanelEl = hud.querySelector(".performance-body") as HTMLDivElement;
|
||||
this.errorEl = hud.querySelector(".error-strip") as HTMLDivElement;
|
||||
this.historyLayerEl = hud.querySelector(".history-layer") as HTMLDivElement;
|
||||
this.marqueeEl = hud.querySelector(".marquee-box") as HTMLDivElement;
|
||||
this.hoverLabelEl = hud.querySelector(".hover-label") as HTMLDivElement;
|
||||
|
||||
@@ -313,6 +333,11 @@ export class GameViewer {
|
||||
this.renderer.domElement.addEventListener("click", this.onClick);
|
||||
this.renderer.domElement.addEventListener("dblclick", this.onDoubleClick);
|
||||
this.renderer.domElement.addEventListener("wheel", this.onWheel, { passive: false });
|
||||
this.factionStripEl.addEventListener("click", this.onShipStripClick);
|
||||
this.historyLayerEl.addEventListener("click", this.onHistoryLayerClick);
|
||||
this.historyLayerEl.addEventListener("pointerdown", this.onHistoryLayerPointerDown);
|
||||
window.addEventListener("pointermove", this.onHistoryWindowPointerMove);
|
||||
window.addEventListener("pointerup", this.onHistoryWindowPointerUp);
|
||||
window.addEventListener("keydown", this.onKeyDown);
|
||||
window.addEventListener("keyup", this.onKeyUp);
|
||||
window.addEventListener("resize", this.onResize);
|
||||
@@ -671,17 +696,34 @@ export class GameViewer {
|
||||
}
|
||||
}
|
||||
|
||||
private rebuildFactions(factions: FactionSnapshot[]) {
|
||||
this.factionStripEl.innerHTML = factions
|
||||
.map((faction) => `
|
||||
<article class="faction-card">
|
||||
<div class="swatch" style="background:${faction.color}"></div>
|
||||
<div>
|
||||
<h3>${faction.label}</h3>
|
||||
<p>Credits ${faction.credits.toFixed(0)} · Ore ${faction.oreMined.toFixed(0)} · Goods ${faction.goodsProduced.toFixed(0)}</p>
|
||||
</div>
|
||||
</article>
|
||||
`)
|
||||
private rebuildFactions(_factions: FactionSnapshot[]) {
|
||||
if (!this.world) {
|
||||
this.factionStripEl.innerHTML = "";
|
||||
return;
|
||||
}
|
||||
|
||||
const ships = [...this.world.ships.values()]
|
||||
.sort((left, right) => left.label.localeCompare(right.label));
|
||||
|
||||
this.factionStripEl.innerHTML = ships
|
||||
.map((ship) => {
|
||||
const fuel = this.inventoryAmount(ship.inventory, "gas");
|
||||
const isSelected = this.selectedItems.length === 1 && this.selectedItems[0].kind === "ship" && this.selectedItems[0].id === ship.id;
|
||||
const isFollowed = this.followedShipId === ship.id;
|
||||
return `
|
||||
<article class="ship-card${isSelected ? " is-selected" : ""}${isFollowed ? " is-followed" : ""}" data-ship-id="${ship.id}">
|
||||
<div class="ship-card-header">
|
||||
<h3>${ship.label}</h3>
|
||||
<span class="ship-card-badge">${ship.shipClass}</span>
|
||||
</div>
|
||||
<p>${ship.systemId}</p>
|
||||
<p>Fuel ${fuel.toFixed(0)} · Energy ${ship.energyStored.toFixed(0)}</p>
|
||||
<p>State ${ship.state}</p>
|
||||
<p>Order ${ship.orderKind ?? "none"}</p>
|
||||
<button type="button" class="ship-card-history-button" data-history-ship-id="${ship.id}">Open History</button>
|
||||
</article>
|
||||
`;
|
||||
})
|
||||
.join("");
|
||||
}
|
||||
|
||||
@@ -690,6 +732,7 @@ export class GameViewer {
|
||||
return;
|
||||
}
|
||||
|
||||
this.refreshHistoryWindows();
|
||||
this.updateSystemPanel();
|
||||
|
||||
if (this.selectedItems.length === 0) {
|
||||
@@ -722,14 +765,16 @@ export class GameViewer {
|
||||
}
|
||||
const parent = this.describeSelectionParent(selected);
|
||||
this.detailTitleEl.textContent = ship.label;
|
||||
const cargoUsed = ship.inventory.reduce((sum, entry) => sum + entry.amount, 0);
|
||||
this.detailBodyEl.innerHTML = `
|
||||
<p>${ship.shipClass} · ${ship.role} · ${ship.systemId}</p>
|
||||
<p>Parent ${parent}</p>
|
||||
<p>State ${ship.state}<br>Behavior ${ship.defaultBehaviorKind}<br>Task ${ship.controllerTaskKind}</p>
|
||||
<p>Cargo ${ship.cargo.toFixed(0)} / ${ship.cargoCapacity.toFixed(0)} ${ship.cargoItemId ?? ""}</p>
|
||||
<p>Energy ${ship.energyStored.toFixed(0)}<br>Cargo ${cargoUsed.toFixed(0)} / ${ship.cargoCapacity.toFixed(0)}</p>
|
||||
<p>Inventory ${this.formatInventory(ship.inventory)}</p>
|
||||
<p>Velocity ${this.formatVector(ship.localVelocity)}</p>
|
||||
<p>${this.followedShipId === ship.id ? "Camera follow engaged" : "Camera follow idle"}</p>
|
||||
<p class="history">${ship.history.join("<br>")}</p>
|
||||
<p>History available from the ship card list.</p>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
@@ -744,8 +789,9 @@ export class GameViewer {
|
||||
this.detailBodyEl.innerHTML = `
|
||||
<p>${station.category} · ${station.systemId}</p>
|
||||
<p>Parent ${parent}</p>
|
||||
<p>Ore ${station.oreStored.toFixed(0)}<br>Refined ${station.refinedStock.toFixed(0)}<br>Docked ${station.dockedShips}</p>
|
||||
<p class="history">${this.renderRecentEvents("station", station.id)}</p>
|
||||
<p>Energy ${station.energyStored.toFixed(0)}<br>Docked ${station.dockedShips}</p>
|
||||
<p>Inventory ${this.formatInventory(station.inventory)}</p>
|
||||
<p>History available in the separate history window.</p>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
@@ -795,6 +841,20 @@ export class GameViewer {
|
||||
`;
|
||||
}
|
||||
|
||||
private formatInventory(entries: InventoryEntry[]): string {
|
||||
if (entries.length === 0) {
|
||||
return "empty";
|
||||
}
|
||||
|
||||
return entries
|
||||
.map((entry) => `${entry.itemId} ${entry.amount.toFixed(0)}`)
|
||||
.join("<br>");
|
||||
}
|
||||
|
||||
private inventoryAmount(entries: InventoryEntry[], itemId: string): number {
|
||||
return entries.find((entry) => entry.itemId === itemId)?.amount ?? 0;
|
||||
}
|
||||
|
||||
private render() {
|
||||
const frameStartedAtMs = performance.now();
|
||||
const delta = Math.min(this.clock.getDelta(), 0.033);
|
||||
@@ -1925,6 +1985,269 @@ export class GameViewer {
|
||||
this.updatePanels();
|
||||
};
|
||||
|
||||
private onShipStripClick = (event: MouseEvent) => {
|
||||
const target = event.target;
|
||||
if (!(target instanceof HTMLElement)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const historyButton = target.closest<HTMLElement>("[data-history-ship-id]");
|
||||
const historyShipId = historyButton?.dataset.historyShipId;
|
||||
if (historyShipId) {
|
||||
this.openHistoryWindow({ kind: "ship", id: historyShipId });
|
||||
return;
|
||||
}
|
||||
|
||||
const card = target.closest<HTMLElement>("[data-ship-id]");
|
||||
const shipId = card?.dataset.shipId;
|
||||
if (!shipId) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.selectedItems = [{ kind: "ship", id: shipId }];
|
||||
this.syncFollowStateFromSelection();
|
||||
this.updatePanels();
|
||||
};
|
||||
|
||||
private openHistoryWindow(target: Selectable) {
|
||||
const existing = this.historyWindows.find((windowState) => JSON.stringify(windowState.target) === JSON.stringify(target));
|
||||
if (existing) {
|
||||
this.bringHistoryWindowToFront(existing);
|
||||
this.refreshHistoryWindows();
|
||||
return;
|
||||
}
|
||||
|
||||
const id = `history-${++this.historyWindowCounter}`;
|
||||
const root = document.createElement("aside");
|
||||
root.className = "history-window";
|
||||
root.dataset.historyWindowId = id;
|
||||
root.innerHTML = `
|
||||
<div class="history-window-header">
|
||||
<h2 class="history-window-title">History</h2>
|
||||
<div class="history-window-actions">
|
||||
<button type="button" class="history-window-copy">Copy</button>
|
||||
<button type="button" class="history-window-close">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="history-window-body">No history selected.</div>
|
||||
`;
|
||||
|
||||
root.style.width = `${Math.min(520, window.innerWidth - 40)}px`;
|
||||
root.style.height = `${Math.min(360, Math.max(240, window.innerHeight * 0.42))}px`;
|
||||
root.style.left = `${Math.max(20, 20 + ((this.historyWindows.length * 28) % Math.max(40, window.innerWidth - 580)))}px`;
|
||||
root.style.top = `${Math.max(20, 20 + ((this.historyWindows.length * 28) % Math.max(40, window.innerHeight - 420)))}px`;
|
||||
|
||||
const windowState: HistoryWindowState = {
|
||||
id,
|
||||
target,
|
||||
root,
|
||||
titleEl: root.querySelector(".history-window-title") as HTMLHeadingElement,
|
||||
bodyEl: root.querySelector(".history-window-body") as HTMLDivElement,
|
||||
copyButtonEl: root.querySelector(".history-window-copy") as HTMLButtonElement,
|
||||
text: "",
|
||||
};
|
||||
|
||||
this.historyWindows.push(windowState);
|
||||
this.historyLayerEl.append(root);
|
||||
this.bringHistoryWindowToFront(windowState);
|
||||
this.refreshHistoryWindows();
|
||||
}
|
||||
|
||||
private refreshHistoryWindows() {
|
||||
if (!this.world) {
|
||||
return;
|
||||
}
|
||||
|
||||
for (const windowState of [...this.historyWindows]) {
|
||||
if (windowState.target.kind === "ship") {
|
||||
const ship = this.world.ships.get(windowState.target.id);
|
||||
if (!ship) {
|
||||
this.destroyHistoryWindow(windowState.id);
|
||||
continue;
|
||||
}
|
||||
|
||||
windowState.titleEl.textContent = `${ship.label} History`;
|
||||
windowState.text = ship.history.length > 0 ? ship.history.join("\n") : "No history yet.";
|
||||
windowState.bodyEl.innerHTML = windowState.text.replaceAll("\n", "<br>");
|
||||
continue;
|
||||
}
|
||||
|
||||
if (windowState.target.kind === "station") {
|
||||
const station = this.world.stations.get(windowState.target.id);
|
||||
if (!station) {
|
||||
this.destroyHistoryWindow(windowState.id);
|
||||
continue;
|
||||
}
|
||||
|
||||
windowState.titleEl.textContent = `${station.label} History`;
|
||||
windowState.text = this.renderRecentEvents("station", station.id).replaceAll("<br>", "\n") || "No history yet.";
|
||||
windowState.bodyEl.innerHTML = windowState.text.replaceAll("\n", "<br>");
|
||||
continue;
|
||||
}
|
||||
|
||||
this.destroyHistoryWindow(windowState.id);
|
||||
}
|
||||
}
|
||||
|
||||
private destroyHistoryWindow(id: string) {
|
||||
const index = this.historyWindows.findIndex((windowState) => windowState.id === id);
|
||||
if (index < 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const [removed] = this.historyWindows.splice(index, 1);
|
||||
removed.root.remove();
|
||||
if (this.historyWindowDragId === id) {
|
||||
this.historyWindowDragId = undefined;
|
||||
this.historyWindowDragPointerId = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
private onHistoryLayerClick = (event: MouseEvent) => {
|
||||
const target = event.target;
|
||||
if (!(target instanceof HTMLElement)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const windowEl = target.closest<HTMLElement>("[data-history-window-id]");
|
||||
const windowId = windowEl?.dataset.historyWindowId;
|
||||
if (!windowId) {
|
||||
return;
|
||||
}
|
||||
|
||||
const copyButton = target.closest(".history-window-copy");
|
||||
if (copyButton) {
|
||||
void this.copyHistoryWindowContent(windowId);
|
||||
return;
|
||||
}
|
||||
|
||||
const closeButton = target.closest(".history-window-close");
|
||||
if (closeButton) {
|
||||
this.destroyHistoryWindow(windowId);
|
||||
return;
|
||||
}
|
||||
|
||||
const windowState = this.historyWindows.find((candidate) => candidate.id === windowId);
|
||||
if (windowState) {
|
||||
this.bringHistoryWindowToFront(windowState);
|
||||
}
|
||||
};
|
||||
|
||||
private onHistoryLayerPointerDown = (event: PointerEvent) => {
|
||||
const target = event.target;
|
||||
if (!(target instanceof HTMLElement)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const windowEl = target.closest<HTMLElement>("[data-history-window-id]");
|
||||
const windowId = windowEl?.dataset.historyWindowId;
|
||||
if (!windowEl || !windowId) {
|
||||
return;
|
||||
}
|
||||
|
||||
const windowState = this.historyWindows.find((candidate) => candidate.id === windowId);
|
||||
if (!windowState) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.bringHistoryWindowToFront(windowState);
|
||||
if (!target.closest(".history-window-header") || target.closest("button")) {
|
||||
return;
|
||||
}
|
||||
|
||||
const bounds = windowState.root.getBoundingClientRect();
|
||||
this.historyWindowDragId = windowId;
|
||||
this.historyWindowDragPointerId = event.pointerId;
|
||||
this.historyWindowDragOffset.set(event.clientX - bounds.left, event.clientY - bounds.top);
|
||||
windowState.root.setPointerCapture?.(event.pointerId);
|
||||
};
|
||||
|
||||
private onHistoryWindowPointerMove = (event: PointerEvent) => {
|
||||
if (this.historyWindowDragPointerId !== event.pointerId || !this.historyWindowDragId) {
|
||||
return;
|
||||
}
|
||||
|
||||
const windowState = this.historyWindows.find((candidate) => candidate.id === this.historyWindowDragId);
|
||||
if (!windowState) {
|
||||
return;
|
||||
}
|
||||
|
||||
const width = windowState.root.offsetWidth;
|
||||
const height = windowState.root.offsetHeight;
|
||||
const left = THREE.MathUtils.clamp(event.clientX - this.historyWindowDragOffset.x, 20, window.innerWidth - width - 20);
|
||||
const top = THREE.MathUtils.clamp(event.clientY - this.historyWindowDragOffset.y, 20, window.innerHeight - height - 20);
|
||||
|
||||
windowState.root.style.left = `${left}px`;
|
||||
windowState.root.style.top = `${top}px`;
|
||||
};
|
||||
|
||||
private onHistoryWindowPointerUp = (event: PointerEvent) => {
|
||||
if (this.historyWindowDragPointerId !== event.pointerId || !this.historyWindowDragId) {
|
||||
return;
|
||||
}
|
||||
|
||||
const windowState = this.historyWindows.find((candidate) => candidate.id === this.historyWindowDragId);
|
||||
this.historyWindowDragPointerId = undefined;
|
||||
this.historyWindowDragId = undefined;
|
||||
windowState?.root.releasePointerCapture?.(event.pointerId);
|
||||
};
|
||||
|
||||
private async copyHistoryWindowContent(windowId: string) {
|
||||
const windowState = this.historyWindows.find((candidate) => candidate.id === windowId);
|
||||
if (!windowState?.text) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await this.copyTextToClipboard(windowState.text);
|
||||
windowState.copyButtonEl.textContent = "Copied";
|
||||
window.setTimeout(() => {
|
||||
windowState.copyButtonEl.textContent = "Copy";
|
||||
}, 1200);
|
||||
} catch {
|
||||
windowState.copyButtonEl.textContent = "Failed";
|
||||
window.setTimeout(() => {
|
||||
windowState.copyButtonEl.textContent = "Copy";
|
||||
}, 1200);
|
||||
}
|
||||
}
|
||||
|
||||
private async copyTextToClipboard(text: string) {
|
||||
if (navigator.clipboard?.writeText) {
|
||||
try {
|
||||
await navigator.clipboard.writeText(text);
|
||||
return;
|
||||
} catch {
|
||||
}
|
||||
}
|
||||
|
||||
const textarea = document.createElement("textarea");
|
||||
textarea.value = text;
|
||||
textarea.setAttribute("readonly", "true");
|
||||
textarea.style.position = "fixed";
|
||||
textarea.style.top = "0";
|
||||
textarea.style.left = "0";
|
||||
textarea.style.width = "1px";
|
||||
textarea.style.height = "1px";
|
||||
textarea.style.opacity = "0";
|
||||
document.body.append(textarea);
|
||||
textarea.focus();
|
||||
textarea.select();
|
||||
|
||||
try {
|
||||
const copied = document.execCommand("copy");
|
||||
if (!copied) {
|
||||
throw new Error("execCommand copy failed");
|
||||
}
|
||||
} finally {
|
||||
textarea.remove();
|
||||
}
|
||||
}
|
||||
|
||||
private bringHistoryWindowToFront(windowState: HistoryWindowState) {
|
||||
windowState.root.style.zIndex = `${++this.historyWindowZCounter}`;
|
||||
}
|
||||
|
||||
private updateHoverLabel(event: PointerEvent) {
|
||||
if (this.dragMode) {
|
||||
this.hoverLabelEl.hidden = true;
|
||||
|
||||
Reference in New Issue
Block a user