Tribes2/t2-mapper
1
0
Fork 0
mirror of https://github.com/exogen/t2-mapper.git synced 2026-03-13 17:30:56 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

new UI, unify map/demo/live architecture more, cleanup

Browse source
This commit is contained in:
Brian Beck 2026-03-12 16:25:04 -07:00
parent d9b5e30831
commit 4741f59582
146 changed files with 5477 additions and 3005 deletions
Download patch file Download diff file Expand all files Collapse all files

6
.env.example
View file

@ -24,3 +24,9 @@ T2_ACCOUNT_PASSWORD=
# Relay URL for the browser client (default: ws://localhost:8765)
# NEXT_PUBLIC_RELAY_URL=ws://localhost:8765
# Logging (comma-separated). Bare level sets global default; module:level
# pairs override specific modules. If only modules given, rest are silent.
# NEXT_PUBLIC_LOG=debug
# NEXT_PUBLIC_LOG=liveStreaming:debug,DebugSuspense:trace
# NEXT_PUBLIC_LOG=warn,liveStreaming:debug

12
README.md
View file

@ -119,12 +119,12 @@ This only needs to be done once — the volume persists across deploys.
**Environment variables** (all optional, with defaults):
| Variable | Default | Description |
| --- | --- | --- |
| `RELAY_PORT` | `8765` | WebSocket listen port |
| `GAME_BASE_PATH` | `docs/base` relative to relay | Path to extracted game assets |
| `MANIFEST_PATH` | `public/manifest.json` relative to project root | Path to resource manifest |
| `T2_MASTER_SERVER` | `master.tribesnext.com` | Master server for server list queries |
| Variable | Default | Description |
| ------------------ | ----------------------------------------------- | ------------------------------------- |
| `RELAY_PORT` | `8765` | WebSocket listen port |
| `GAME_BASE_PATH` | `docs/base` relative to relay | Path to extracted game assets |
| `MANIFEST_PATH` | `public/manifest.json` relative to project root | Path to resource manifest |
| `T2_MASTER_SERVER` | `master.tribesnext.com` | Master server for server list queries |
### Running scripts

6
app/layout.tsx
View file

@ -18,11 +18,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
return (
<html lang="en">
<body>
<NuqsAdapter
defaultOptions={{
clearOnDefault: false,
}}
>
<NuqsAdapter defaultOptions={{ clearOnDefault: false }}>
{children}
</NuqsAdapter>
</body>

512
app/page.tsx
View file

@ -1,521 +1,21 @@
"use client";
import {
useState,
useEffect,
useCallback,
Suspense,
useRef,
lazy,
} from "react";
import { Canvas, GLProps } from "@react-three/fiber";
import { NoToneMapping, SRGBColorSpace, PCFShadowMap, Camera } from "three";
import { Mission } from "@/src/components/Mission";
import { Suspense } from "react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import {
ObserverControls,
KEYBOARD_CONTROLS,
} from "@/src/components/ObserverControls";
import { KeyboardOverlay } from "@/src/components/KeyboardOverlay";
import {
TouchJoystick,
TouchCameraMovement,
type JoystickState,
} from "@/src/components/TouchControls";
import { KeyboardControls } from "@react-three/drei";
import { InspectorControls } from "@/src/components/InspectorControls";
import { useTouchDevice } from "@/src/components/useTouchDevice";
import {
SettingsProvider,
useSettings,
} from "@/src/components/SettingsProvider";
import { ObserverCamera } from "@/src/components/ObserverCamera";
import { AudioProvider } from "@/src/components/AudioContext";
import { DebugElements } from "@/src/components/DebugElements";
import { CamerasProvider } from "@/src/components/CamerasProvider";
import {
RecordingProvider,
usePlaybackActions,
useRecording,
} from "@/src/components/RecordingProvider";
import { EntityScene } from "@/src/components/EntityScene";
import { TickProvider } from "@/src/components/TickProvider";
import { SceneLighting } from "@/src/components/SceneLighting";
import { PlayerHUD } from "@/src/components/PlayerHUD";
import { LiveConnectionProvider } from "@/src/components/LiveConnection";
import { useLiveSelector } from "@/src/state/liveConnectionStore";
import { ServerBrowser } from "@/src/components/ServerBrowser";
import {
FeaturesProvider,
useFeatures,
} from "@/src/components/FeaturesProvider";
// Lazy-load demo and live streaming modules — they pull in heavy dependencies
// (demo parser, streaming engine, particles) that aren't needed for mission-only mode.
const StreamPlayback = lazy(() =>
import("@/src/components/StreamPlayback").then((mod) => ({
default: mod.StreamPlayback,
})),
);
const DemoPlaybackControls = lazy(() =>
import("@/src/components/DemoPlaybackControls").then((mod) => ({
default: mod.DemoPlaybackControls,
})),
);
const LiveObserver = lazy(() =>
import("@/src/components/LiveObserver").then((mod) => ({
default: mod.LiveObserver,
})),
);
const ChatSoundPlayer = lazy(() =>
import("@/src/components/ChatSoundPlayer").then((mod) => ({
default: mod.ChatSoundPlayer,
})),
);
import {
getMissionList,
getMissionInfo,
} from "@/src/manifest";
import { createParser, parseAsBoolean, useQueryState } from "nuqs";
import styles from "./page.module.css";
const MapInfoDialog = lazy(() =>
import("@/src/components/MapInfoDialog").then((mod) => ({
default: mod.MapInfoDialog,
})),
);
// import { LiveConnectionProvider } from "@/src/components/LiveConnection";
import { FeaturesProvider } from "@/src/components/FeaturesProvider";
import { MapInspector } from "@/src/components/MapInspector";
// Three.js has its own loaders for textures and models, but we need to load other
// stuff too, e.g. missions, terrains, and more. This client is used for those.
const queryClient = new QueryClient();
// Renderer settings to match Tribes 2's simple rendering pipeline.
// Tribes 2 (Torque engine, 2001) worked entirely in gamma/sRGB space with no HDR
// or tone mapping. We disable tone mapping and ensure proper sRGB output.
const glSettings: GLProps = {
toneMapping: NoToneMapping,
outputColorSpace: SRGBColorSpace,
};
type CurrentMission = {
missionName: string;
missionType?: string;
};
const defaultMission: CurrentMission = {
missionName: "RiverDance",
missionType: "CTF",
};
const parseAsMissionWithType = createParser<CurrentMission>({
parse(query: string) {
const [missionName, missionType] = query.split("~");
let selectedMissionType = missionType;
const availableMissionTypes = getMissionInfo(missionName).missionTypes;
if (!missionType || !availableMissionTypes.includes(missionType)) {
selectedMissionType = availableMissionTypes[0];
}
return { missionName, missionType: selectedMissionType };
},
serialize({ missionName, missionType }): string {
const availableMissionTypes = getMissionInfo(missionName).missionTypes;
if (availableMissionTypes.length === 1) {
return missionName;
}
return `${missionName}~${missionType}`;
},
eq(a, b) {
return a.missionName === b.missionName && a.missionType === b.missionType;
},
}).withDefault(defaultMission);
function MapInspector() {
const [currentMission, setCurrentMission] = useQueryState(
"mission",
parseAsMissionWithType,
);
const [fogEnabledOverride, setFogEnabledOverride] = useQueryState(
"fog",
parseAsBoolean,
);
const clearFogEnabledOverride = useCallback(() => {
setFogEnabledOverride(null);
}, [setFogEnabledOverride]);
const changeMission = useCallback(
(mission: CurrentMission) => {
window.location.hash = "";
clearFogEnabledOverride();
setCurrentMission(mission);
},
[setCurrentMission, clearFogEnabledOverride],
);
const isTouch = useTouchDevice();
const features = useFeatures();
const hasLiveAdapter = useLiveSelector((s) => s.adapter != null);
const liveReady = useLiveSelector((s) => s.liveReady);
const gameStatus = useLiveSelector((s) => s.gameStatus);
const { missionName, missionType } = currentMission;
const [mapInfoOpen, setMapInfoOpen] = useState(false);
const [serverBrowserOpen, setServerBrowserOpen] = useState(false);
const [missionLoadingProgress, setMissionLoadingProgress] = useState(0);
const [showLoadingIndicator, setShowLoadingIndicator] = useState(true);
// During live join, show progress based on connection status.
// Relay status order: connecting → challenging → authenticating → connected.
// Once liveReady (first ghost arrives), loading is complete.
const liveLoadingProgress = hasLiveAdapter
? liveReady
? 1
: gameStatus === "connected" ? 0.8
: gameStatus === "authenticating" ? 0.6
: gameStatus === "challenging" ? 0.3
: gameStatus === "connecting" ? 0.2
: 0.1
: null;
// Reset stale mission progress when live mode takes over, so it can't
// flash through if liveLoadingProgress briefly becomes null.
useEffect(() => {
if (liveLoadingProgress != null) {
setMissionLoadingProgress(0);
}
}, [liveLoadingProgress != null]); // eslint-disable-line react-hooks/exhaustive-deps
const loadingProgress = liveLoadingProgress ?? missionLoadingProgress;
const isLoading = loadingProgress < 1;
// Keep the loading indicator visible briefly after reaching 100%
useEffect(() => {
if (isLoading) {
setShowLoadingIndicator(true);
} else {
const timer = setTimeout(() => setShowLoadingIndicator(false), 500);
return () => clearTimeout(timer);
}
}, [isLoading]);
useEffect(() => {
// For automation, like the t2-maps app!
window.setMissionName = (missionName: string) => {
const availableMissionTypes = getMissionInfo(missionName).missionTypes;
changeMission({
missionName,
missionType: availableMissionTypes[0],
});
};
window.getMissionList = getMissionList;
window.getMissionInfo = getMissionInfo;
return () => {
delete window.setMissionName;
delete window.getMissionList;
delete window.getMissionInfo;
};
}, [changeMission]);
useEffect(() => {
const handleKey = (e: KeyboardEvent) => {
if (e.code !== "KeyI" || e.metaKey || e.ctrlKey || e.altKey) return;
const target = e.target as HTMLElement;
if (
target.tagName === "INPUT" ||
target.tagName === "TEXTAREA" ||
target.isContentEditable
) {
return;
}
setMapInfoOpen(true);
};
window.addEventListener("keydown", handleKey);
return () => window.removeEventListener("keydown", handleKey);
}, []);
const handleLoadingChange = useCallback(
(_loading: boolean, progress: number = 0) => {
setMissionLoadingProgress(progress);
},
[],
);
const cameraRef = useRef<Camera | null>(null);
const joystickStateRef = useRef<JoystickState>({ angle: 0, force: 0 });
const joystickZoneRef = useRef<HTMLDivElement | null>(null);
const lookJoystickStateRef = useRef<JoystickState>({ angle: 0, force: 0 });
const lookJoystickZoneRef = useRef<HTMLDivElement | null>(null);
return (
<QueryClientProvider client={queryClient}>
<main>
<RecordingProvider>
<SettingsProvider
fogEnabledOverride={fogEnabledOverride}
onClearFogEnabledOverride={clearFogEnabledOverride}
>
<KeyboardControls map={KEYBOARD_CONTROLS}>
<div id="canvasContainer" className={styles.CanvasContainer}>
{showLoadingIndicator && (
<div
id="loadingIndicator"
className={styles.LoadingIndicator}
data-complete={!isLoading}
>
<div className={styles.Spinner} />
<div className={styles.Progress}>
<div
className={styles.ProgressBar}
style={{ width: `${loadingProgress * 100}%` }}
/>
</div>
<div className={styles.ProgressText}>
{Math.round(loadingProgress * 100)}%
</div>
</div>
)}
<Canvas
frameloop="always"
gl={glSettings}
shadows={{ type: PCFShadowMap }}
onCreated={(state) => {
cameraRef.current = state.camera;
}}
>
<TickProvider>
<CamerasProvider>
<AudioProvider>
<MissionWhenIdle
missionName={missionName}
missionType={missionType}
onLoadingChange={handleLoadingChange}
/>
<SceneLighting />
<EntityScene missionType={missionType} />
<ObserverCamera />
<DebugElements />
<StreamingComponents
isTouch={isTouch}
joystickStateRef={joystickStateRef}
joystickZoneRef={joystickZoneRef}
lookJoystickStateRef={lookJoystickStateRef}
lookJoystickZoneRef={lookJoystickZoneRef}
/>
</AudioProvider>
</CamerasProvider>
</TickProvider>
</Canvas>
</div>
<StreamingHUD />
{isTouch && (
<TouchJoystick
joystickState={joystickStateRef}
joystickZone={joystickZoneRef}
lookJoystickState={lookJoystickStateRef}
lookJoystickZone={lookJoystickZoneRef}
/>
)}
{isTouch === false && <KeyboardOverlay />}
<InspectorControls
missionName={missionName}
missionType={missionType}
onChangeMission={changeMission}
onOpenMapInfo={() => setMapInfoOpen(true)}
onOpenServerBrowser={features.live ? () => setServerBrowserOpen(true) : undefined}
cameraRef={cameraRef}
isTouch={isTouch}
/>
{mapInfoOpen && (
<Suspense fallback={null}>
<MapInfoDialog
open={mapInfoOpen}
onClose={() => setMapInfoOpen(false)}
missionName={missionName}
missionType={missionType ?? ""}
/>
</Suspense>
)}
<ServerBrowserDialog
open={serverBrowserOpen}
onClose={() => setServerBrowserOpen(false)}
/>
<StreamingOverlay />
<DemoWindowAPI />
</KeyboardControls>
</SettingsProvider>
</RecordingProvider>
</main>
</QueryClientProvider>
);
}
/**
* Only mount Mission (TorqueScript runtime, .mis loading) when NOT streaming.
* During demo/live playback, all scene data comes from ghosts — no need for
* the heavy TorqueScript execution pipeline.
*/
function MissionWhenIdle({
missionName,
missionType,
onLoadingChange,
}: {
missionName: string;
missionType: string;
onLoadingChange: (isLoading: boolean, progress?: number) => void;
}) {
const recording = useRecording();
const hasLiveAdapter = useLiveSelector((s) => s.adapter != null);
const isStreaming = recording != null || hasLiveAdapter;
if (isStreaming) return null;
return (
<Mission
key={`${missionName}~${missionType}`}
name={missionName}
missionType={missionType}
onLoadingChange={onLoadingChange}
/>
);
}
/**
* In-Canvas components that depend on streaming mode. Mounts the appropriate
* controller (StreamPlayback or LiveObserver) and disables observer controls
* during streaming.
*/
function StreamingComponents({
isTouch,
joystickStateRef,
joystickZoneRef,
lookJoystickStateRef,
lookJoystickZoneRef,
}: {
isTouch: boolean | null;
joystickStateRef: React.RefObject<JoystickState>;
joystickZoneRef: React.RefObject<HTMLDivElement | null>;
lookJoystickStateRef: React.RefObject<JoystickState>;
lookJoystickZoneRef: React.RefObject<HTMLDivElement | null>;
}) {
const recording = useRecording();
const isLive = useLiveSelector((s) => s.adapter != null);
const isStreaming = recording != null || isLive;
// Show ObserverControls for: non-streaming mode, OR live mode.
// During live, ObserverControls provides the same camera controls
// (pointer lock, drag-to-rotate, WASD fly) and LiveObserver intercepts
// click-while-locked to cycle observed players instead of nextCamera.
// During demo playback, the demo drives the camera so no controls needed.
const showObserverControls = !isStreaming || isLive;
return (
<>
{recording && (
<Suspense fallback={null}>
<StreamPlayback />
</Suspense>
)}
{isLive && (
<Suspense fallback={null}>
<LiveObserver />
</Suspense>
)}
{isStreaming && (
<Suspense fallback={null}>
<ChatSoundPlayer />
</Suspense>
)}
{showObserverControls && isTouch !== null && (
isTouch ? (
<TouchCameraMovement
joystickState={joystickStateRef}
joystickZone={joystickZoneRef}
lookJoystickState={lookJoystickStateRef}
lookJoystickZone={lookJoystickZoneRef}
/>
) : (
<ObserverControls />
)
)}
</>
);
}
/** HUD overlay — shown during streaming (demo or live). */
function StreamingHUD() {
const recording = useRecording();
const hasLiveAdapter = useLiveSelector((s) => s.adapter != null);
if (!recording && !hasLiveAdapter) return null;
return <PlayerHUD isLive={hasLiveAdapter} />;
}
/** Playback controls overlay — only shown during demo playback. */
function StreamingOverlay() {
const recording = useRecording();
const hasLiveAdapter = useLiveSelector((s) => s.adapter != null);
if (!recording || hasLiveAdapter) return null;
return (
<Suspense fallback={null}>
<DemoPlaybackControls />
</Suspense>
);
}
/** Server browser dialog connected to live state. */
function ServerBrowserDialog({
open,
onClose,
}: {
open: boolean;
onClose: () => void;
}) {
const servers = useLiveSelector((s) => s.servers);
const serversLoading = useLiveSelector((s) => s.serversLoading);
const browserToRelayPing = useLiveSelector((s) => s.browserToRelayPing);
const listServers = useLiveSelector((s) => s.listServers);
const joinServer = useLiveSelector((s) => s.joinServer);
const settings = useSettings();
const handleJoin = useCallback(
(address: string) => {
joinServer(address, settings?.warriorName);
},
[joinServer, settings?.warriorName],
);
return (
<ServerBrowser
open={open}
onClose={onClose}
servers={servers}
loading={serversLoading}
onRefresh={listServers}
onJoin={handleJoin}
wsPing={browserToRelayPing}
warriorName={settings?.warriorName ?? ""}
onWarriorNameChange={(name) => settings?.setWarriorName(name)}
/>
);
}
/** Exposes `window.loadDemoRecording` for automation/testing. */
function DemoWindowAPI() {
const { setRecording } = usePlaybackActions();
useEffect(() => {
window.loadDemoRecording = setRecording;
return () => {
delete window.loadDemoRecording;
};
}, [setRecording]);
return null;
}
export default function HomePage() {
return (
<Suspense>
<FeaturesProvider>
<LiveConnectionProvider>
<QueryClientProvider client={queryClient}>
<MapInspector />
</LiveConnectionProvider>
</QueryClientProvider>
</FeaturesProvider>
</Suspense>
);

9
app/shapes/page.tsx
View file

@ -13,16 +13,13 @@ import * as THREE from "three";
import { NoToneMapping, SRGBColorSpace, PCFShadowMap } from "three";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { OrbitControls, Center, Bounds, useBounds } from "@react-three/drei";
import {
SettingsProvider,
useDebug,
} from "@/src/components/SettingsProvider";
import { SettingsProvider, useDebug } from "@/src/components/SettingsProvider";
import { ShapeRenderer, useStaticShape } from "@/src/components/GenericShape";
import { ShapeInfoProvider } from "@/src/components/ShapeInfoProvider";
import { DebugElements } from "@/src/components/DebugElements";
import { TickProvider } from "@/src/components/TickProvider";
import { ShapeSelect } from "@/src/components/ShapeSelect";
import { engineStore, useEngineSelector } from "@/src/state";
import { engineStore, useEngineSelector } from "@/src/state/engineStore";
import {
getResourceList,
getResourceMap,
@ -328,7 +325,7 @@ function ShapeInspector() {
<TickProvider>
<SceneLighting />
<Bounds fit clip observe margin={1.5}>
<Suspense fallback={null}>
<Suspense>
<ShapeViewer
key={currentShape}
shapeName={currentShape}

5
app/style.css
View file

@ -39,11 +39,6 @@ body {
overflow: hidden;
}
main {
width: 100dvw;
height: 100dvh;
}
input[type="range"] {
max-width: 80px;
}

1
eslint.config.mjs
View file

@ -10,6 +10,7 @@ export default defineConfig(
...nextConfig,
{
rules: {
"@next/next/no-img-element": "off",
"@typescript-eslint/no-explicit-any": "off",
"@typescript-eslint/no-unused-vars": [
"error",

2
next-env.d.ts vendored
View file

@ -1,6 +1,6 @@
/// <reference types="next" />
/// <reference types="next/image-types/global" />
import "./.next/types/routes.d.ts";
import "./docs/dev/types/routes.d.ts";
// NOTE: This file should not be edited
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

1
next.config.ts
View file

@ -10,6 +10,7 @@ const nextConfig = (phase, { defaultConfig }): NextConfig => {
assetPrefix: "/t2-mapper/",
trailingSlash: true,
reactCompiler: true,
experimental: { viewTransition: true },
headers:
// TorqueScript files should be served as text. This won't affect what
// GitHub Pages does with the static export, but it'll at least improve

274
package-lock.json generated
View file

@ -10,6 +10,7 @@
"license": "MIT",
"dependencies": {
"@ariakit/react": "^0.4.21",
"@radix-ui/react-accordion": "^1.2.12",
"@react-three/drei": "^10.7.7",
"@react-three/fiber": "^9.5.0",
"@tanstack/react-query": "^5.90.21",
@ -1964,6 +1965,279 @@
"node": ">=10"
}
},
"node_modules/@radix-ui/primitive": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
"integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
"license": "MIT"
},
"node_modules/@radix-ui/react-accordion": {
"version": "1.2.12",
"resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.2.12.tgz",
"integrity": "sha512-T4nygeh9YE9dLRPhAHSeOZi7HBXo+0kYIPJXayZfvWOWA0+n3dESrZbjfDPUABkUNym6Hd+f2IR113To8D2GPA==",
"license": "MIT",
"dependencies": {
"@radix-ui/primitive": "1.1.3",
"@radix-ui/react-collapsible": "1.1.12",
"@radix-ui/react-collection": "1.1.7",
"@radix-ui/react-compose-refs": "1.1.2",
"@radix-ui/react-context": "1.1.2",
"@radix-ui/react-direction": "1.1.1",
"@radix-ui/react-id": "1.1.1",
"@radix-ui/react-primitive": "2.1.3",
"@radix-ui/react-use-controllable-state": "1.2.2"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-collapsible": {
"version": "1.1.12",
"resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.12.tgz",
"integrity": "sha512-Uu+mSh4agx2ib1uIGPP4/CKNULyajb3p92LsVXmH2EHVMTfZWpll88XJ0j4W0z3f8NK1eYl1+Mf/szHPmcHzyA==",
"license": "MIT",
"dependencies": {
"@radix-ui/primitive": "1.1.3",
"@radix-ui/react-compose-refs": "1.1.2",
"@radix-ui/react-context": "1.1.2",
"@radix-ui/react-id": "1.1.1",
"@radix-ui/react-presence": "1.1.5",
"@radix-ui/react-primitive": "2.1.3",
"@radix-ui/react-use-controllable-state": "1.2.2",
"@radix-ui/react-use-layout-effect": "1.1.1"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-collection": {
"version": "1.1.7",
"resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
"integrity": "sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==",
"license": "MIT",
"dependencies": {
"@radix-ui/react-compose-refs": "1.1.2",
"@radix-ui/react-context": "1.1.2",
"@radix-ui/react-primitive": "2.1.3",
"@radix-ui/react-slot": "1.2.3"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-compose-refs": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
"integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
"license": "MIT",
"peerDependencies": {
"@types/react": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-context": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
"integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
"license": "MIT",
"peerDependencies": {
"@types/react": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-direction": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.1.tgz",
"integrity": "sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==",
"license": "MIT",
"peerDependencies": {
"@types/react": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-id": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz",
"integrity": "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==",
"license": "MIT",
"dependencies": {
"@radix-ui/react-use-layout-effect": "1.1.1"
},
"peerDependencies": {
"@types/react": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-presence": {
"version": "1.1.5",
"resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.5.tgz",
"integrity": "sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==",
"license": "MIT",
"dependencies": {
"@radix-ui/react-compose-refs": "1.1.2",
"@radix-ui/react-use-layout-effect": "1.1.1"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-primitive": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
"integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
"license": "MIT",
"dependencies": {
"@radix-ui/react-slot": "1.2.3"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-slot": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
"integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
"license": "MIT",
"dependencies": {
"@radix-ui/react-compose-refs": "1.1.2"
},
"peerDependencies": {
"@types/react": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-use-controllable-state": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz",
"integrity": "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==",
"license": "MIT",
"dependencies": {
"@radix-ui/react-use-effect-event": "0.0.2",
"@radix-ui/react-use-layout-effect": "1.1.1"
},
"peerDependencies": {
"@types/react": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-use-effect-event": {
"version": "0.0.2",
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.2.tgz",
"integrity": "sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==",
"license": "MIT",
"dependencies": {
"@radix-ui/react-use-layout-effect": "1.1.1"
},
"peerDependencies": {
"@types/react": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-use-layout-effect": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
"integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
"license": "MIT",
"peerDependencies": {
"@types/react": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@react-three/drei": {
"version": "10.7.7",
"resolved": "https://registry.npmjs.org/@react-three/drei/-/drei-10.7.7.tgz",

1
package.json
View file

@ -30,6 +30,7 @@
},
"dependencies": {
"@ariakit/react": "^0.4.21",
"@radix-ui/react-accordion": "^1.2.12",
"@react-three/drei": "^10.7.7",
"@react-three/fiber": "^9.5.0",
"@tanstack/react-query": "^5.90.21",

37
relay/HuffmanWriter.ts
View file

@ -2,32 +2,24 @@ import { BitStreamWriter } from "./BitStreamWriter.js";
/** Hardcoded character frequency table from the V12 engine (bitStream.cc). */
const CSM_CHAR_FREQS: number[] = [
0, 0, 0, 0, 0, 0, 0, 0, 0, 329, 21, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
2809, 68, 0, 27, 0, 58, 3, 62, 4, 7, 0, 0, 15, 65, 554, 3,
394, 404, 189, 117, 30, 51, 27, 15, 34, 32, 80, 1, 142, 3, 142, 39,
0, 144, 125, 44, 122, 275, 70, 135, 61, 127, 8, 12, 113, 246, 122, 36,
185, 1, 149, 309, 335, 12, 11, 14, 54, 151, 0, 0, 2, 0, 0, 211,
0, 2090, 344, 736, 993, 2872, 701, 605, 646, 1552, 328, 305, 1240, 735, 1533, 1713,
562, 3, 1775, 1149, 1469, 979, 407, 553, 59, 279, 31, 0, 0, 0, 68, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 329, 21, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 2809, 68, 0, 27, 0, 58, 3, 62, 4, 7, 0, 0, 15, 65, 554,
3, 394, 404, 189, 117, 30, 51, 27, 15, 34, 32, 80, 1, 142, 3, 142, 39, 0, 144,
125, 44, 122, 275, 70, 135, 61, 127, 8, 12, 113, 246, 122, 36, 185, 1, 149,
309, 335, 12, 11, 14, 54, 151, 0, 0, 2, 0, 0, 211, 0, 2090, 344, 736, 993,
2872, 701, 605, 646, 1552, 328, 305, 1240, 735, 1533, 1713, 562, 3, 1775,
1149, 1469, 979, 407, 553, 59, 279, 31, 0, 0, 0, 68, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
];
const PROB_BOOST = 1;
function isAlphaNumeric(c: number): boolean {
return (
(c >= 48 && c <= 57) ||
(c >= 65 && c <= 90) ||
(c >= 97 && c <= 122)
);
return (c >= 48 && c <= 57) || (c >= 65 && c <= 90) || (c >= 97 && c <= 122);
}
interface HuffLeaf {
@ -62,7 +54,8 @@ function buildTables(): void {
leaves = [];
for (let i = 0; i < 256; i++) {
leaves.push({
pop: CSM_CHAR_FREQS[i] + (isAlphaNumeric(i) ? PROB_BOOST : 0) + PROB_BOOST,
pop:
CSM_CHAR_FREQS[i] + (isAlphaNumeric(i) ? PROB_BOOST : 0) + PROB_BOOST,
symbol: i,
numBits: 0,
code: 0,

11
relay/auth.ts
View file

@ -317,7 +317,10 @@ export class T2csriAuth {
// Sanitize: must be hex only
const challenge = this.encryptedChallenge.toLowerCase();
authLog.info(
{ challengeLen: challenge.length, clientChallengeLen: this.clientChallenge.length },
{
challengeLen: challenge.length,
clientChallengeLen: this.clientChallenge.length,
},
"Auth: starting challenge decryption",
);
for (let i = 0; i < challenge.length; i++) {
@ -339,7 +342,11 @@ export class T2csriAuth {
const modulusHex = fields[3];
authLog.debug(
{ encryptedLen: challenge.length, modulusLen: modulusHex?.length, privateKeyLen: this.credentials.privateKey.length },
{
encryptedLen: challenge.length,
modulusLen: modulusHex?.length,
privateKeyLen: this.credentials.privateKey.length,
},
"Auth: RSA parameters",
);

12
relay/crc.ts
View file

@ -49,7 +49,9 @@ export interface CRCDataBlock {
}
// Manifest types (mirrored from src/manifest.ts)
type SourceTuple = [sourcePath: string] | [sourcePath: string, actualPath: string];
type SourceTuple =
| [sourcePath: string]
| [sourcePath: string, actualPath: string];
type ResourceEntry = [firstSeenPath: string, ...SourceTuple[]];
interface Manifest {
resources: Record<string, ResourceEntry>;
@ -120,8 +122,8 @@ export async function computeGameCRC(
console.log(
`[crc] starting computation: seed=0x${(seed >>> 0).toString(16)}, ` +
`${sorted.length} ShapeBaseData datablocks (of ${datablocks.length} total), ` +
`includeTextures=${includeTextures}`,
`${sorted.length} ShapeBaseData datablocks (of ${datablocks.length} total), ` +
`includeTextures=${includeTextures}`,
);
for (const db of sorted) {
@ -153,7 +155,7 @@ export async function computeGameCRC(
console.log(
`[crc] #${filesFound} id=${db.objectId} ${db.className} "${db.shapeName}" ` +
`size=${data.length} crc=0x${prevCrc.toString(16)}→0x${crc.toString(16)}`,
`size=${data.length} crc=0x${prevCrc.toString(16)}→0x${crc.toString(16)}`,
);
// TODO: If includeTextures && db.className !== "PlayerData",
@ -172,7 +174,7 @@ export async function computeGameCRC(
console.log(
`[crc] RESULT: ${filesFound} files CRC'd, ${filesMissing} missing, ` +
`crc=0x${crc.toString(16)}, totalSize=${totalSize}, elapsed=${elapsed.toFixed(0)}ms`,
`crc=0x${crc.toString(16)}, totalSize=${totalSize}, elapsed=${elapsed.toFixed(0)}ms`,
);
return { crc, totalSize };

149
relay/gameConnection.ts
View file

@ -58,7 +58,10 @@ export class GameConnection extends EventEmitter<GameConnectionEvents> {
private nextSendEventSeq = 0;
private pendingEvents: ClientEvent[] = [];
/** Events sent but not yet acked, keyed by packet sequence number. */
private sentEventsByPacket = new Map<number, { seq: number; event: ClientEvent }[]>();
private sentEventsByPacket = new Map<
number,
{ seq: number; event: ClientEvent }[]
>();
/** Events waiting to be sent (new or retransmitted from lost packets). */
private eventSendQueue: { seq: number; event: ClientEvent }[] = [];
private stringTable = new ClientNetStringTable();
@ -178,7 +181,11 @@ export class GameConnection extends EventEmitter<GameConnectionEvents> {
this.rawMessageCount++;
if (this.rawMessageCount <= 30 || this.rawMessageCount % 50 === 0) {
connLog.debug(
{ bytes: msg.length, firstByte: msg[0], rawTotal: this.rawMessageCount },
{
bytes: msg.length,
firstByte: msg[0],
rawTotal: this.rawMessageCount,
},
"Raw UDP message received",
);
}
@ -225,11 +232,16 @@ export class GameConnection extends EventEmitter<GameConnectionEvents> {
case 36: // ConnectAccept
this.handleConnectAccept(msg);
break;
case 38: { // Disconnect — U8(type) + U32(seq1) + U32(seq2) + HuffString(reason)
case 38: {
// Disconnect — U8(type) + U32(seq1) + U32(seq2) + HuffString(reason)
let reason = "Server disconnected";
if (msg.length > 9) {
try {
const data = new Uint8Array(msg.buffer, msg.byteOffset, msg.byteLength);
const data = new Uint8Array(
msg.buffer,
msg.byteOffset,
msg.byteLength,
);
// Skip 9-byte header (1 type + 4 connectSeq + 4 connectSeq2).
// Reason is Huffman-encoded via BitStream::writeString (no stringBuffer).
const bs = new BitStream(data.subarray(9));
@ -239,7 +251,10 @@ export class GameConnection extends EventEmitter<GameConnectionEvents> {
// Fall back to default reason
}
}
connLog.warn({ reason, bytes: msg.length }, "Server sent Disconnect packet");
connLog.warn(
{ reason, bytes: msg.length },
"Server sent Disconnect packet",
);
this.setStatus("disconnected", reason);
this.disconnect();
break;
@ -249,16 +264,24 @@ export class GameConnection extends EventEmitter<GameConnectionEvents> {
}
}
/** Handle ChallengeReject (type 28): U8(28) + U32(connectSeq) + ASCII reason. */
/** Handle ChallengeReject (type 28): U8(28) + U32(clientSeq) + HuffString(reason). */
private handleChallengeReject(msg: Buffer): void {
if (msg.length < 5) return;
const dv = new DataView(msg.buffer, msg.byteOffset, msg.byteLength);
const seq = dv.getUint32(1, true);
if (seq !== this.clientConnectSequence) {
connLog.debug({ expected: this.clientConnectSequence, got: seq }, "ChallengeReject sequence mismatch, ignoring");
return;
}
let reason = "Challenge rejected";
if (msg.length > 5) {
const chars: number[] = [];
for (let i = 5; i < msg.length && msg[i] !== 0; i++) {
chars.push(msg[i]);
}
if (chars.length > 0) {
reason = String.fromCharCode(...chars);
try {
const data = new Uint8Array(msg.buffer, msg.byteOffset, msg.byteLength);
const bs = new BitStream(data.subarray(5));
const parsed = bs.readString();
if (parsed) reason = parsed;
} catch {
// Fall back to default reason
}
}
connLog.warn({ reason }, "ChallengeReject received");
@ -269,18 +292,11 @@ export class GameConnection extends EventEmitter<GameConnectionEvents> {
/** Handle ConnectChallengeResponse. */
private handleChallengeResponse(msg: Buffer): void {
if (msg.length < 14) {
connLog.error(
{ bytes: msg.length },
"ChallengeResponse too short",
);
connLog.error({ bytes: msg.length }, "ChallengeResponse too short");
return;
}
const dv = new DataView(
msg.buffer,
msg.byteOffset,
msg.byteLength,
);
const dv = new DataView(msg.buffer, msg.byteOffset, msg.byteLength);
const serverProtocolVersion = dv.getUint32(1, true);
this.serverConnectSequence = dv.getUint32(5, true);
const echoedClientSeq = dv.getUint32(9, true);
@ -354,14 +370,30 @@ export class GameConnection extends EventEmitter<GameConnectionEvents> {
}
/** Handle ConnectReject. */
/** Handle ConnectReject (type 34): U8(34) + U32(serverSeq) + U32(clientSeq) + HuffString(reason). */
private handleConnectReject(msg: Buffer): void {
if (msg.length < 9) return;
const dv = new DataView(msg.buffer, msg.byteOffset, msg.byteLength);
const serverSeq = dv.getUint32(1, true);
const clientSeq = dv.getUint32(5, true);
if (serverSeq !== this.serverConnectSequence || clientSeq !== this.clientConnectSequence) {
connLog.debug(
{ expectedServer: this.serverConnectSequence, gotServer: serverSeq,
expectedClient: this.clientConnectSequence, gotClient: clientSeq },
"ConnectReject sequence mismatch, ignoring",
);
return;
}
let reason = "Connection rejected";
if (msg.length > 1) {
const chars: number[] = [];
for (let i = 1; i < msg.length && msg[i] !== 0; i++) {
chars.push(msg[i]);
if (msg.length > 9) {
try {
const data = new Uint8Array(msg.buffer, msg.byteOffset, msg.byteLength);
const bs = new BitStream(data.subarray(9));
const parsed = bs.readString();
if (parsed) reason = parsed;
} catch {
// Fall back to default reason
}
reason = String.fromCharCode(...chars);
}
connLog.warn({ reason }, "ConnectReject received");
this.setStatus("disconnected", reason);
@ -385,7 +417,6 @@ export class GameConnection extends EventEmitter<GameConnectionEvents> {
// We still need to process the dnet header locally to track ack state
this.processPacketForAcks(data);
}
/** Process a packet's dnet header to maintain ack state. */
@ -415,7 +446,10 @@ export class GameConnection extends EventEmitter<GameConnectionEvents> {
// The server's processRawPacket calls sendPingResponse on receiving a
// PingPacket. Without this response, the server may time us out.
if (packetType === 1) {
connLog.debug({ seq: seqNumber }, "Received PingPacket, sending ping response");
connLog.debug(
{ seq: seqNumber },
"Received PingPacket, sending ping response",
);
const pingResponse = this.protocol.buildPingPacket();
this.sendRaw(pingResponse);
}
@ -472,19 +506,15 @@ export class GameConnection extends EventEmitter<GameConnectionEvents> {
}
/** Handle a parsed T2csri event from the browser. */
handleAuthEvent(
eventName: string,
args: string[],
): void {
handleAuthEvent(eventName: string, args: string[]): void {
if (!this.auth) return;
switch (eventName) {
case "t2csri_pokeClient": {
connLog.info("Auth: received pokeClient, sending certificate + challenge");
const result = this.auth.onPokeClient(
args[0] || "",
this.host,
connLog.info(
"Auth: received pokeClient, sending certificate + challenge",
);
const result = this.auth.onPokeClient(args[0] || "", this.host);
for (const cmd of result.commands) {
this.sendCommand(cmd.name, ...cmd.args);
}
@ -512,10 +542,7 @@ export class GameConnection extends EventEmitter<GameConnectionEvents> {
this.authDelayTimer = setTimeout(() => {
this.authDelayTimer = null;
if (this._status !== "authenticating") return;
this.sendCommand(
result.command.name,
...result.command.args,
);
this.sendCommand(result.command.name, ...result.command.args);
this.enforceObserver();
this.setStatus("connected");
}, delay);
@ -553,11 +580,20 @@ export class GameConnection extends EventEmitter<GameConnectionEvents> {
basePath: string,
): Promise<void> {
connLog.info(
{ seed: `0x${(seed >>> 0).toString(16)}`, datablocks: datablocks.length, includeTextures },
{
seed: `0x${(seed >>> 0).toString(16)}`,
datablocks: datablocks.length,
includeTextures,
},
"Computing CRC over game files",
);
try {
const { crc, totalSize } = await computeGameCRC(seed, datablocks, basePath, includeTextures);
const { crc, totalSize } = await computeGameCRC(
seed,
datablocks,
basePath,
includeTextures,
);
connLog.info(
{ crc: `0x${(crc >>> 0).toString(16)}`, totalSize },
"CRC computed, sending response",
@ -586,7 +622,10 @@ export class GameConnection extends EventEmitter<GameConnectionEvents> {
/** Send a commandToServer as a RemoteCommandEvent. */
sendCommand(command: string, ...args: string[]): void {
connLog.debug({ command, args, eventSeq: this.nextSendEventSeq }, "Sending commandToServer");
connLog.debug(
{ command, args, eventSeq: this.nextSendEventSeq },
"Sending commandToServer",
);
const events = buildRemoteCommandEvent(this.stringTable, command, ...args);
this.pendingEvents.push(...events);
this.flushEvents();
@ -608,9 +647,7 @@ export class GameConnection extends EventEmitter<GameConnectionEvents> {
* Build and send a data packet that includes events from the send queue.
* Events stay tracked per-packet so they can be re-queued on loss.
*/
private sendDataPacketWithEvents(
move?: ClientMoveData,
): void {
private sendDataPacketWithEvents(move?: ClientMoveData): void {
const events = this.eventSendQueue.splice(0);
if (events.length === 0) return;
@ -631,8 +668,12 @@ export class GameConnection extends EventEmitter<GameConnectionEvents> {
this.sentEventsByPacket.set(packetSeq, events);
const moveData = move ?? {
x: 0, y: 0, z: 0,
yaw: 0, pitch: 0, roll: 0,
x: 0,
y: 0,
z: 0,
yaw: 0,
pitch: 0,
roll: 0,
freeLook: false,
trigger: [false, false, false, false, false, false],
};
@ -702,7 +743,14 @@ export class GameConnection extends EventEmitter<GameConnectionEvents> {
this.sendMoveCount++;
if (this.sendMoveCount <= 5 || this.sendMoveCount % 100 === 0) {
connLog.debug(
{ yaw: move.yaw, pitch: move.pitch, x: move.x, y: move.y, z: move.z, total: this.sendMoveCount },
{
yaw: move.yaw,
pitch: move.pitch,
x: move.x,
y: move.y,
z: move.z,
total: this.sendMoveCount,
},
"Sending move",
);
}
@ -779,7 +827,8 @@ export class GameConnection extends EventEmitter<GameConnectionEvents> {
let keepaliveCount = 0;
this.keepaliveTimer = setInterval(() => {
keepaliveCount++;
if (keepaliveCount % 300 === 0) { // ~10s at 32ms tick rate
if (keepaliveCount % 300 === 0) {
// ~10s at 32ms tick rate
connLog.info(
{
dataPackets: this.dataPacketCount,

22
relay/masterQuery.ts
View file

@ -133,7 +133,12 @@ async function queryServers(addresses: string[]): Promise<ServerInfo[]> {
if (info) {
pingResults.set(addr, info);
masterLog.debug(
{ addr, name: info.name, build: info.buildVersion, ping: info.ping },
{
addr,
name: info.name,
build: info.buildVersion,
ping: info.ping,
},
"Ping response",
);
}
@ -246,10 +251,7 @@ async function queryServers(addresses: string[]): Promise<ServerInfo[]> {
* U32 buildVersion (e.g. 25034)
* HuffString serverName (24 chars max)
*/
function parsePingResponse(
data: Buffer,
sendTime?: number,
): PingInfo | null {
function parsePingResponse(data: Buffer, sendTime?: number): PingInfo | null {
if (data.length < 7 || data[0] !== 16) return null;
try {
const bs = new BitStream(
@ -301,7 +303,15 @@ function parseInfoResponse(data: Buffer): GameInfo | null {
const playerCount = bs.readU8();
const maxPlayers = bs.readU8();
const botCount = bs.readU8();
return { mod, gameType, mapName, status, playerCount, maxPlayers, botCount };
return {
mod,
gameType,
mapName,
status,
playerCount,
maxPlayers,
botCount,
};
} catch {
return null;
}

35
relay/protocol.ts
View file

@ -29,9 +29,7 @@ export class ConnectionProtocol {
private _sendCount = 0;
buildSendPacketHeader(
packetType: number = DataPacket,
): BitStreamWriter {
buildSendPacketHeader(packetType: number = DataPacket): BitStreamWriter {
const bs = new BitStreamWriter(1500);
// gameFlag — always true for data connection packets
@ -42,8 +40,7 @@ export class ConnectionProtocol {
// Increment send sequence
this.lastSendSeq = (this.lastSendSeq + 1) >>> 0;
this.lastSeqRecvdAtSend[this.lastSendSeq & 0x1f] =
this.lastSeqRecvd >>> 0;
this.lastSeqRecvdAtSend[this.lastSendSeq & 0x1f] = this.lastSeqRecvd >>> 0;
// seqNumber (9 bits)
bs.writeInt(this.lastSendSeq & 0x1ff, 9);
@ -71,12 +68,13 @@ export class ConnectionProtocol {
this._sendCount++;
if (this._sendCount <= 30 || this._sendCount % 50 === 0) {
const typeName = packetType === 0 ? "data" : packetType === 1 ? "ping" : "ack";
const typeName =
packetType === 0 ? "data" : packetType === 1 ? "ping" : "ack";
console.log(
`[proto] SEND #${this._sendCount} seq=${this.lastSendSeq} ` +
`highestAck=${this.lastSeqRecvd} type=${typeName} ` +
`ackBytes=${ackByteCount} mask=0x${mask.toString(16).padStart(8, "0")} ` +
`(${mask.toString(2).replace(/^0+/, "") || "0"})`,
`highestAck=${this.lastSeqRecvd} type=${typeName} ` +
`ackBytes=${ackByteCount} mask=0x${mask.toString(16).padStart(8, "0")} ` +
`(${mask.toString(2).replace(/^0+/, "") || "0"})`,
);
}
@ -131,8 +129,7 @@ export class ConnectionProtocol {
const isAcked =
(header.ackMask & (1 << ((highestAck - ackSeq) & 0x1f))) !== 0;
if (isAcked) {
this.lastRecvAckAck =
this.lastSeqRecvdAtSend[ackSeq & 0x1f] >>> 0;
this.lastRecvAckAck = this.lastSeqRecvdAtSend[ackSeq & 0x1f] >>> 0;
}
if (this.onNotify) {
this.onNotify(ackSeq, isAcked);
@ -144,8 +141,7 @@ export class ConnectionProtocol {
this.highestAckedSeq = highestAck;
const dispatchData =
this.lastSeqRecvd !== seqNumber &&
header.packetType === DataPacket;
this.lastSeqRecvd !== seqNumber && header.packetType === DataPacket;
this.lastSeqRecvd = seqNumber;
return { accepted: true, dispatchData };
@ -168,9 +164,7 @@ export class ConnectionProtocol {
* The caller provides a callback that writes game data to the stream
* after the dnet header.
*/
buildDataPacket(
writePayload: (bs: BitStreamWriter) => void,
): Uint8Array {
buildDataPacket(writePayload: (bs: BitStreamWriter) => void): Uint8Array {
const bs = this.buildSendPacketHeader(DataPacket);
writePayload(bs);
return bs.getBuffer();
@ -343,10 +337,7 @@ export class ClientNetStringTable {
}
/** Build a NetStringEvent to register a string with the server. */
export function buildNetStringEvent(
id: number,
value: string,
): ClientEvent {
export function buildNetStringEvent(id: number, value: string): ClientEvent {
return {
classId: NetStringEventClassId,
write(bs: BitStreamWriter) {
@ -489,9 +480,7 @@ export function buildConnectRequest(
}
/** Build a Disconnect (type 38) OOB packet. */
export function buildDisconnectPacket(
connectSequence: number,
): Uint8Array {
export function buildDisconnectPacket(connectSequence: number): Uint8Array {
const bs = new BitStreamWriter(64);
bs.writeU8(38); // Disconnect type
bs.writeU32(connectSequence);

38
relay/server.ts
View file

@ -19,8 +19,7 @@ const MANIFEST_PATH =
path.resolve(GAME_BASE_PATH, "..", "..", "public", "manifest.json");
const RELAY_PORT = parseInt(process.env.RELAY_PORT || "8765", 10);
const MASTER_SERVER =
process.env.T2_MASTER_SERVER || "master.tribesnext.com";
const MASTER_SERVER = process.env.T2_MASTER_SERVER || "master.tribesnext.com";
/** HTTP server for health checks; WebSocket upgrades are handled separately. */
const httpServer = http.createServer(async (req, res) => {
@ -58,7 +57,9 @@ const httpServer = http.createServer(async (req, res) => {
const allOk = Object.values(checks).every((c) => c.ok);
res.writeHead(allOk ? 200 : 503, { "Content-Type": "application/json" });
res.end(JSON.stringify({ status: allOk ? "ok" : "degraded", checks }, null, 2));
res.end(
JSON.stringify({ status: allOk ? "ok" : "degraded", checks }, null, 2),
);
return;
}
@ -87,7 +88,11 @@ wss.on("connection", (ws) => {
const RETRY_DELAY_MS = 6000;
const RETRYABLE_REASONS = ["Server is cycling mission"];
async function connectToServer(ws: WebSocket, address: string, warriorName?: string): Promise<void> {
async function connectToServer(
ws: WebSocket,
address: string,
warriorName?: string,
): Promise<void> {
if (gameConnection) {
gameConnection.disconnect();
}
@ -95,9 +100,7 @@ wss.on("connection", (ws) => {
gameConnection = new GameConnection(address, { warriorName });
// Set mapName from the cached server list if available.
const cachedServer = cachedServers.find(
(s) => s.address === address,
);
const cachedServer = cachedServers.find((s) => s.address === address);
if (cachedServer?.mapName) {
gameConnection.setMapName(cachedServer.mapName);
}
@ -123,7 +126,11 @@ wss.on("connection", (ws) => {
) {
retryCount++;
relayLog.info(
{ attempt: retryCount, maxRetries: MAX_RETRIES, delay: RETRY_DELAY_MS },
{
attempt: retryCount,
maxRetries: MAX_RETRIES,
delay: RETRY_DELAY_MS,
},
"Retryable disconnect — will reconnect",
);
sendToClient(ws, {
@ -243,7 +250,10 @@ wss.on("connection", (ws) => {
}
case "joinServer": {
relayLog.info({ address: message.address, warriorName: message.warriorName }, "Join server requested");
relayLog.info(
{ address: message.address, warriorName: message.warriorName },
"Join server requested",
);
if (gameConnection) {
relayLog.info("Disconnecting existing game connection");
gameConnection.disconnect();
@ -285,10 +295,7 @@ wss.on("connection", (ws) => {
{ event: message.command },
"Forwarding auth event from browser",
);
gameConnection.handleAuthEvent(
message.command,
message.args,
);
gameConnection.handleAuthEvent(message.command, message.args);
} else {
relayLog.debug(
{ command: message.command },
@ -315,7 +322,10 @@ wss.on("connection", (ws) => {
case "sendCRCCompute": {
if (gameConnection) {
relayLog.info(
{ datablocks: message.datablocks.length, includeTextures: message.includeTextures },
{
datablocks: message.datablocks.length,
includeTextures: message.includeTextures,
},
"Computing CRC from game files",
);
gameConnection.computeAndSendCRC(

23
relay/types.ts
View file

@ -5,15 +5,32 @@ export type ClientMessage =
| { type: "disconnect" }
| { type: "sendMove"; move: ClientMove }
| { type: "sendCommand"; command: string; args: string[] }
| { type: "sendCRCResponse"; crcValue: number; field1: number; field2: number }
| { type: "sendCRCCompute"; seed: number; field2: number; includeTextures: boolean; datablocks: { objectId: number; className: string; shapeName: string }[] }
| {
type: "sendCRCResponse";
crcValue: number;
field1: number;
field2: number;
}
| {
type: "sendCRCCompute";
seed: number;
field2: number;
includeTextures: boolean;
datablocks: { objectId: number; className: string; shapeName: string }[];
}
| { type: "sendGhostAck"; sequence: number; ghostCount: number }
| { type: "wsPing"; ts: number };
/** Messages from relay server to browser client. */
export type ServerMessage =
| { type: "serverList"; servers: ServerInfo[] }
| { type: "status"; status: ConnectionStatus; message?: string; connectSequence?: number; mapName?: string }
| {
type: "status";
status: ConnectionStatus;
message?: string;
connectSequence?: number;
mapName?: string;
}
| { type: "gamePacket"; data: Uint8Array }
| { type: "ping"; ms: number }
| { type: "wsPong"; ts: number }

4
scripts/check-mount-points.ts
View file

@ -215,7 +215,9 @@ for (const rel of weaponModels) {
});
if (mpIdx === -1) {
console.log(`${name}: NO Mountpoint node. Nodes: [${nodeNames.join(", ")}]`);
console.log(
`${name}: NO Mountpoint node. Nodes: [${nodeNames.join(", ")}]`,
);
continue;
}

4
scripts/compute-mount-world.ts
View file

@ -111,10 +111,10 @@ function fmt(v: number[]): string {
async function main() {
const playerBuf = await fs.readFile(
"docs/base/@vl2/shapes.vl2/shapes/light_male.glb"
"docs/base/@vl2/shapes.vl2/shapes/light_male.glb",
);
const weaponBuf = await fs.readFile(
"docs/base/@vl2/shapes.vl2/shapes/weapon_disc.glb"
"docs/base/@vl2/shapes.vl2/shapes/weapon_disc.glb",
);
const playerDoc = parseGlb(playerBuf);

4
scripts/convert-wav.ts
View file

@ -26,7 +26,9 @@ async function run({
try {
await fs.stat(oggFile);
continue; // .ogg already exists, skip
} catch { /* expected */ }
} catch {
/* expected */
}
}
inputFiles.push(wavFile);
}

53
scripts/inspect-glb-nodes.ts
View file

@ -72,7 +72,7 @@ function printNodeTree(
doc: GltfDocument,
nodeIndex: number,
depth: number,
visited: Set<number>
visited: Set<number>,
): void {
if (visited.has(nodeIndex)) return;
visited.add(nodeIndex);
@ -101,12 +101,16 @@ function printNodeTree(
// Only show scale if non-identity
const s = node.scale;
if (s && (s[0] !== 1 || s[1] !== 1 || s[2] !== 1)) {
console.log(`${indent} S: ${formatVec3(node.scale as [number, number, number])}`);
console.log(
`${indent} S: ${formatVec3(node.scale as [number, number, number])}`,
);
}
// Show matrix if present
if (node.matrix) {
console.log(`${indent} Matrix: [${node.matrix.map((n) => n.toFixed(4)).join(", ")}]`);
console.log(
`${indent} Matrix: [${node.matrix.map((n) => n.toFixed(4)).join(", ")}]`,
);
}
if (node.children) {
@ -130,18 +134,20 @@ async function inspectGlb(filePath: string): Promise<void> {
const skinCount = doc.skins?.length ?? 0;
const animCount = doc.animations?.length ?? 0;
console.log(`Nodes: ${nodeCount}, Meshes: ${meshCount}, Skins: ${skinCount}, Animations: ${animCount}`);
console.log(
`Nodes: ${nodeCount}, Meshes: ${meshCount}, Skins: ${skinCount}, Animations: ${animCount}`,
);
// Show skins (skeletons)
if (doc.skins && doc.skins.length > 0) {
console.log(`\n--- Skins ---`);
for (let i = 0; i < doc.skins.length; i++) {
const skin = doc.skins[i];
console.log(`Skin ${i}: "${skin.name ?? "(unnamed)"}" - ${skin.joints.length} joints`);
console.log(` Root skeleton node: ${skin.skeleton ?? "unset"}`);
console.log(
` Joint node indices: [${skin.joints.join(", ")}]`
`Skin ${i}: "${skin.name ?? "(unnamed)"}" - ${skin.joints.length} joints`,
);
console.log(` Root skeleton node: ${skin.skeleton ?? "unset"}`);
console.log(` Joint node indices: [${skin.joints.join(", ")}]`);
}
}
@ -150,7 +156,9 @@ async function inspectGlb(filePath: string): Promise<void> {
console.log(`\n--- Animations ---`);
for (let i = 0; i < doc.animations.length; i++) {
const anim = doc.animations[i];
console.log(` [${i}] "${anim.name ?? "(unnamed)"}" (${anim.channels?.length ?? 0} channels)`);
console.log(
` [${i}] "${anim.name ?? "(unnamed)"}" (${anim.channels?.length ?? 0} channels)`,
);
}
}
@ -178,7 +186,18 @@ async function inspectGlb(filePath: string): Promise<void> {
}
// Highlight interesting nodes
const keywords = ["eye", "mount", "hand", "cam", "head", "weapon", "muzzle", "node", "jet", "contrail"];
const keywords = [
"eye",
"mount",
"hand",
"cam",
"head",
"weapon",
"muzzle",
"node",
"jet",
"contrail",
];
const interesting: { index: number; name: string; node: GltfNode }[] = [];
if (doc.nodes) {
for (let i = 0; i < doc.nodes.length; i++) {
@ -191,7 +210,9 @@ async function inspectGlb(filePath: string): Promise<void> {
}
if (interesting.length > 0) {
console.log(`\n--- Interesting Nodes (matching: ${keywords.join(", ")}) ---`);
console.log(
`\n--- Interesting Nodes (matching: ${keywords.join(", ")}) ---`,
);
for (const { index, name, node } of interesting) {
console.log(` [${index}] "${name}"`);
console.log(` Translation: ${formatVec3(node.translation)}`);
@ -199,13 +220,17 @@ async function inspectGlb(filePath: string): Promise<void> {
console.log(` Rotation: ${formatQuat(node.rotation)}`);
}
if (node.scale) {
console.log(` Scale: ${formatVec3(node.scale as [number, number, number])}`);
console.log(
` Scale: ${formatVec3(node.scale as [number, number, number])}`,
);
}
// Find parent
if (doc.nodes) {
for (let j = 0; j < doc.nodes.length; j++) {
if (doc.nodes[j].children?.includes(index)) {
console.log(` Parent: [${j}] "${doc.nodes[j].name || "(unnamed)"}"`);
console.log(
` Parent: [${j}] "${doc.nodes[j].name || "(unnamed)"}"`,
);
break;
}
}
@ -218,7 +243,9 @@ async function inspectGlb(filePath: string): Promise<void> {
if (doc.nodes) {
for (let i = 0; i < doc.nodes.length; i++) {
const node = doc.nodes[i];
console.log(` [${i}] "${node.name || "(unnamed)"}" T:${formatVec3(node.translation)}`);
console.log(
` [${i}] "${node.name || "(unnamed)"}" T:${formatVec3(node.translation)}`,
);
}
}
}

4
scripts/play-demo.ts
View file

@ -38,7 +38,9 @@ if (!demoPath) {
console.error();
console.error("Options:");
console.error(" --no-headless Show the browser window");
console.error(" --wait, -w <s> Seconds to wait after loading (default: 10)");
console.error(
" --wait, -w <s> Seconds to wait after loading (default: 10)",
);
console.error(" --screenshot, -s Take a screenshot after loading");
console.error();
console.error("Examples:");

14
scripts/t2-login.ts
View file

@ -185,7 +185,9 @@ async function downloadAccount(
const trimmed = buffer.trim();
if (trimmed === "RECOVERERROR") {
reject(new Error("Auth server returned RECOVERERROR (malformed request)"));
reject(
new Error("Auth server returned RECOVERERROR (malformed request)"),
);
return;
}
if (trimmed === "NOTFOUND") {
@ -202,7 +204,11 @@ async function downloadAccount(
// Line 2: EXP: <encrypted_private_exponent>
const lines = trimmed.split("\n");
if (lines.length < 2) {
reject(new Error(`Unexpected response from auth server: ${trimmed.slice(0, 200)}`));
reject(
new Error(
`Unexpected response from auth server: ${trimmed.slice(0, 200)}`,
),
);
return;
}
@ -300,7 +306,9 @@ async function main() {
const existingLines = await readEnvLines(envFilePath);
const updatedLines = updateEnvLines(
existingLines.length > 0 ? existingLines : ["# Generated by scripts/t2-login.ts"],
existingLines.length > 0
? existingLines
: ["# Generated by scripts/t2-login.ts"],
{
T2_ACCOUNT_NAME: username,
T2_ACCOUNT_PASSWORD: password,

8
scripts/t2-server-list.ts
View file

@ -9,8 +9,7 @@
import { queryServerList } from "../relay/masterQuery.js";
const MASTER_SERVER =
process.env.T2_MASTER_SERVER || "master.tribesnext.com";
const MASTER_SERVER = process.env.T2_MASTER_SERVER || "master.tribesnext.com";
async function main() {
console.log(`Master server: ${MASTER_SERVER}`);
@ -27,10 +26,7 @@ async function main() {
console.log(`Found ${servers.length} server(s):\n`);
// Print as a table
const nameWidth = Math.max(
11,
...servers.map((s) => s.name.length),
);
const nameWidth = Math.max(11, ...servers.map((s) => s.name.length));
const header = [
"Server Name".padEnd(nameWidth),
"Map".padEnd(20),

67
src/components/Accordion.module.css Normal file
View file

@ -0,0 +1,67 @@
.AccordionGroup {
display: flex;
flex-direction: column;
gap: 1px;
}
.Trigger {
display: flex;
align-items: center;
width: 100%;
background: rgb(255, 255, 255, 0.1);
padding: 6px 8px;
color: #fff;
font-family: inherit;
font-size: 12px;
font-weight: normal;
text-align: left;
border: 0;
text-transform: uppercase;
letter-spacing: 0.0417em;
gap: 4px;
}
.TriggerIcon {
font-size: 12px;
transition: transform 0.2s;
transform: rotate(0deg);
opacity: 0.5;
}
.Trigger[data-state="open"] .TriggerIcon {
transform: rotate(90deg);
}
.Content {
overflow: hidden;
}
.Content[data-state="open"] {
animation: slideDown 300ms;
}
.Content[data-state="closed"] {
animation: slideUp 300ms;
}
.Body {
padding: 10px;
}
@keyframes slideDown {
from {
height: 0;
}
to {
height: var(--radix-accordion-content-height);
}
}
@keyframes slideUp {
from {
height: var(--radix-accordion-content-height);
}
to {
height: 0;
}
}

29
src/components/Accordion.tsx Normal file
View file

@ -0,0 +1,29 @@
import * as RadixAccordion from "@radix-ui/react-accordion";
import { ReactNode } from "react";
import { IoCaretForward } from "react-icons/io5";
import styles from "./Accordion.module.css";
export function AccordionGroup(props) {
return <RadixAccordion.Root className={styles.AccordionGroup} {...props} />;
}
export function Accordion({
value,
label,
children,
}: {
value: string;
label: ReactNode;
children: ReactNode;
}) {
return (
<RadixAccordion.Item value={value}>
<RadixAccordion.Trigger className={styles.Trigger}>
<IoCaretForward className={styles.TriggerIcon} /> {label}
</RadixAccordion.Trigger>
<RadixAccordion.Content className={styles.Content}>
<div className={styles.Body}>{children}</div>
</RadixAccordion.Content>
</RadixAccordion.Item>
);
}

16
src/components/AudioContext.tsx
View file

@ -7,7 +7,8 @@ import {
} from "react";
import { useThree } from "@react-three/fiber";
import { AudioListener, AudioLoader } from "three";
import { engineStore } from "../state";
import { engineStore } from "../state/engineStore";
import { useSettings } from "./SettingsProvider";
interface AudioContextType {
audioLoader: AudioLoader | null;
@ -21,7 +22,8 @@ const AudioContext = createContext<AudioContextType | undefined>(undefined);
* Must be rendered inside the Canvas component.
*/
export function AudioProvider({ children }: { children: ReactNode }) {
const { camera } = useThree();
const camera = useThree((state) => state.camera);
const { audioVolume } = useSettings();
const [audioContext, setAudioContext] = useState<AudioContextType>({
audioLoader: null,
audioListener: null,
@ -41,8 +43,6 @@ export function AudioProvider({ children }: { children: ReactNode }) {
camera.add(listener);
}
listener.setMasterVolume(0.8);
setAudioContext({
audioLoader,
audioListener: listener,
@ -51,7 +51,7 @@ export function AudioProvider({ children }: { children: ReactNode }) {
// Resume the AudioContext on user interaction to satisfy browser autoplay
// policy. Without this, sounds won't play until the user clicks/taps.
const resumeOnGesture = () => {
const ctx = listener?.context;
const ctx = listener.context;
if (!ctx || ctx.state !== "suspended") return;
ctx.resume().finally(() => {
document.removeEventListener("click", resumeOnGesture);
@ -67,7 +67,7 @@ export function AudioProvider({ children }: { children: ReactNode }) {
const unsubscribe = engineStore.subscribe(
(state) => state.playback.status,
(status) => {
const ctx = listener?.context;
const ctx = listener.context;
if (!ctx) return;
if (status === "paused") {
ctx.suspend();
@ -85,6 +85,10 @@ export function AudioProvider({ children }: { children: ReactNode }) {
};
}, [camera]);
useEffect(() => {
audioContext.audioListener?.setMasterVolume(audioVolume);
}, [audioVolume, audioContext.audioListener]);
return (
<AudioContext.Provider value={audioContext}>
{children}

83
src/components/AudioEmitter.tsx
View file

@ -8,11 +8,15 @@ import {
PositionalAudio,
Vector3,
} from "three";
import { createLogger } from "../logger";
import { audioToUrl } from "../loaders";
import { useAudio } from "./AudioContext";
import { useDebug, useSettings } from "./SettingsProvider";
import { FloatingLabel } from "./FloatingLabel";
import { engineStore } from "../state";
import { engineStore } from "../state/engineStore";
import { AudioEmitterEntity } from "../state/gameEntityTypes";
const log = createLogger("AudioEmitter");
// Global audio buffer cache shared across all audio components.
export const audioBufferCache = new Map<string, AudioBuffer>();
@ -50,8 +54,16 @@ export function getSoundGeneration(): number {
export function stopAllTrackedSounds(): void {
_soundGeneration++;
for (const [sound] of _activeSounds) {
try { sound.stop(); } catch { /* already stopped */ }
try { sound.disconnect(); } catch { /* already disconnected */ }
try {
sound.stop();
} catch {
/* already stopped */
}
try {
sound.disconnect();
} catch {
/* already disconnected */
}
}
_activeSounds.clear();
}
@ -148,7 +160,11 @@ export function playOneShotSound(
sound.play();
sound.source!.onended = () => {
_activeSounds.delete(sound);
try { sound.disconnect(); } catch { /* already disconnected */ }
try {
sound.disconnect();
} catch {
/* already disconnected */
}
parent.remove(sound);
};
} else {
@ -160,7 +176,11 @@ export function playOneShotSound(
sound.play();
sound.source!.onended = () => {
_activeSounds.delete(sound);
try { sound.disconnect(); } catch { /* already disconnected */ }
try {
sound.disconnect();
} catch {
/* already disconnected */
}
};
}
} catch {
@ -185,7 +205,7 @@ export function getCachedAudioBuffer(
},
undefined,
(err: any) => {
console.error("Audio load error", audioUrl, err);
log.error("Audio load error %s: %o", audioUrl, err);
},
);
}
@ -194,17 +214,7 @@ export function getCachedAudioBuffer(
export const AudioEmitter = memo(function AudioEmitter({
entity,
}: {
entity: {
audioFileName?: string;
audioVolume?: number;
audioMinDistance?: number;
audioMaxDistance?: number;
audioMinLoopGap?: number;
audioMaxLoopGap?: number;
audioIs3D?: boolean;
audioIsLooping?: boolean;
position?: [number, number, number];
};
entity: AudioEmitterEntity;
}) {
const { debugMode } = useDebug();
const fileName = entity.audioFileName ?? "";
@ -217,7 +227,8 @@ export const AudioEmitter = memo(function AudioEmitter({
const isLooping = entity.audioIsLooping ?? true;
const [x, y, z] = entity.position ?? [0, 0, 0];
const { scene, camera } = useThree();
const scene = useThree((state) => state.scene);
const camera = useThree((state) => state.camera);
const { audioLoader, audioListener } = useAudio();
const { audioEnabled } = useSettings();
@ -268,8 +279,16 @@ export const AudioEmitter = memo(function AudioEmitter({
return () => {
clearTimers();
try { sound.stop(); } catch { /* already stopped */ }
try { sound.disconnect(); } catch { /* already disconnected */ }
try {
sound.stop();
} catch {
/* already stopped */
}
try {
sound.disconnect();
} catch {
/* already disconnected */
}
if (is3D) scene.remove(sound);
soundRef.current = null;
isLoadedRef.current = false;
@ -306,7 +325,9 @@ export const AudioEmitter = memo(function AudioEmitter({
try {
sound.play();
setupLooping(sound, gen);
} catch { /* expected */ }
} catch {
/* expected */
}
}, gap);
} else {
loopGapIntervalRef.current = setTimeout(checkLoop, 100);
@ -337,7 +358,9 @@ export const AudioEmitter = memo(function AudioEmitter({
try {
sound.play();
setupLooping(sound, gen);
} catch { /* expected */ }
} catch {
/* expected */
}
}
});
} else {
@ -346,7 +369,9 @@ export const AudioEmitter = memo(function AudioEmitter({
sound.play();
setupLooping(sound, gen);
}
} catch { /* expected */ }
} catch {
/* expected */
}
}
};
@ -373,7 +398,11 @@ export const AudioEmitter = memo(function AudioEmitter({
} else if (!isNowInRange && wasInRange) {
isInRangeRef.current = false;
clearTimers();
try { sound.stop(); } catch { /* expected */ }
try {
sound.stop();
} catch {
/* expected */
}
}
});
@ -384,7 +413,11 @@ export const AudioEmitter = memo(function AudioEmitter({
if (!audioEnabled) {
clearTimers();
try { sound.stop(); } catch { /* expected */ }
try {
sound.stop();
} catch {
/* expected */
}
isInRangeRef.current = false;
}
}, [audioEnabled]);

7
src/components/AudioEnabled.tsx Normal file
View file

@ -0,0 +1,7 @@
import { ReactNode, Suspense } from "react";
import { useSettings } from "./SettingsProvider";
export function AudioEnabled({ children }: { children: ReactNode }) {
const { audioEnabled } = useSettings();
return audioEnabled ? <Suspense>{children}</Suspense> : null;
}

9
src/components/Camera.tsx
View file

@ -9,17 +9,12 @@ export function Camera({ entity }: { entity: CameraEntity }) {
const dataBlock = entity.cameraDataBlock;
const position = useMemo(
() =>
entity.position
? new Vector3(...entity.position)
: new Vector3(),
() => (entity.position ? new Vector3(...entity.position) : new Vector3()),
[entity.position],
);
const rotation = useMemo(
() =>
entity.rotation
? new Quaternion(...entity.rotation)
: new Quaternion(),
entity.rotation ? new Quaternion(...entity.rotation) : new Quaternion(),
[entity.rotation],
);

5
src/components/CamerasProvider.tsx
View file

@ -35,7 +35,7 @@ export function useCameras() {
}
export function CamerasProvider({ children }: { children: ReactNode }) {
const { camera } = useThree();
const camera = useThree((state) => state.camera);
const [cameraIndex, setCameraIndex] = useState(-1);
const [cameraMap, setCameraMap] = useState<Record<string, CameraEntry>>({});
const [initialViewState, setInitialViewState] = useState(() => ({
@ -53,7 +53,8 @@ export function CamerasProvider({ children }: { children: ReactNode }) {
const unregisterCamera = useCallback((camera: CameraEntry) => {
setCameraMap((prevCameraMap) => {
const { [camera.id]: _removedCamera, ...remainingCameras } = prevCameraMap;
const { [camera.id]: _removedCamera, ...remainingCameras } =
prevCameraMap;
return remainingCameras;
});
}, []);

26
src/components/ChatInput.module.css Normal file
View file

@ -0,0 +1,26 @@
.InputForm {
display: flex;
}
.Input {
width: 100%;
background: rgba(0, 50, 60, 0.8);
border: 0;
border-top: 1px solid rgba(78, 179, 167, 0.2);
border-radius: 0;
color: rgb(40, 231, 240);
font-family: inherit;
font-size: 12px;
line-height: 1.25;
margin: 0;
padding: 6px;
outline: none;
}
.Input::placeholder {
color: rgba(44, 172, 181, 0.5);
}
.Input:focus {
background: rgba(0, 50, 60, 0.9);
}

33
src/components/ChatInput.tsx Normal file
View file

@ -0,0 +1,33 @@
import { useCallback, useState } from "react";
import { liveConnectionStore } from "../state/liveConnectionStore";
import styles from "./ChatInput.module.css";
export function ChatInput() {
const [chatText, setChatText] = useState("");
const handleSubmit = useCallback(
(e: React.FormEvent) => {
e.preventDefault();
const text = chatText.trim();
if (!text) return;
liveConnectionStore.getState().sendCommand("messageSent", text);
setChatText("");
},
[chatText],
);
return (
<form className={styles.InputForm} onSubmit={handleSubmit}>
<input
className={styles.Input}
type="text"
placeholder="Say something…"
value={chatText}
onChange={(e) => setChatText(e.target.value)}
onKeyDown={(e) => e.stopPropagation()}
onKeyUp={(e) => e.stopPropagation()}
maxLength={255}
/>
</form>
);
}

34
src/components/ChatSoundPlayer.tsx
View file

@ -2,9 +2,14 @@ import { useEffect, useRef } from "react";
import { Audio } from "three";
import { audioToUrl } from "../loaders";
import { useAudio } from "./AudioContext";
import { getCachedAudioBuffer, getSoundGeneration, trackSound, untrackSound } from "./AudioEmitter";
import {
getCachedAudioBuffer,
getSoundGeneration,
trackSound,
untrackSound,
} from "./AudioEmitter";
import { useSettings } from "./SettingsProvider";
import { engineStore, useEngineSelector } from "../state";
import { engineStore, useEngineSelector } from "../state/engineStore";
import type { ChatMessage } from "../stream/types";
/**
@ -13,8 +18,7 @@ import type { ChatMessage } from "../stream/types";
*/
export function ChatSoundPlayer() {
const { audioLoader, audioListener } = useAudio();
const settings = useSettings();
const audioEnabled = settings?.audioEnabled ?? false;
const { audioEnabled } = useSettings();
const messages = useEngineSelector(
(state) => state.playback.streamSnapshot?.chatMessages,
);
@ -24,9 +28,7 @@ export function ChatSoundPlayer() {
const playedSetRef = useRef(new WeakSet<ChatMessage>());
// Track active voice chat sound per sender so a new voice bind from the
// same player stops their previous one (matching Tribes 2 behavior).
const activeBySenderRef = useRef(
new Map<string, Audio<GainNode>>(),
);
const activeBySenderRef = useRef(new Map<string, Audio<GainNode>>());
useEffect(() => {
if (
@ -58,9 +60,17 @@ export function ChatSoundPlayer() {
if (sender) {
const prev = activeBySender.get(sender);
if (prev) {
try { prev.stop(); } catch { /* already stopped */ }
try {
prev.stop();
} catch {
/* already stopped */
}
untrackSound(prev);
try { prev.disconnect(); } catch { /* already disconnected */ }
try {
prev.disconnect();
} catch {
/* already disconnected */
}
activeBySender.delete(sender);
}
}
@ -75,7 +85,11 @@ export function ChatSoundPlayer() {
// Clean up the source node once playback finishes.
sound.source!.onended = () => {
untrackSound(sound);
try { sound.disconnect(); } catch { /* already disconnected */ }
try {
sound.disconnect();
} catch {
/* already disconnected */
}
if (sender && activeBySender.get(sender) === sound) {
activeBySender.delete(sender);
}

63
src/components/ChatWindow.module.css Normal file
View file

@ -0,0 +1,63 @@
.ChatContainer {
position: absolute;
top: 8px;
left: 8px;
width: 400px;
max-width: 50%;
display: flex;
flex-direction: column;
pointer-events: auto;
border: 1px solid rgba(44, 172, 181, 0.4);
}
.ChatWindow {
max-height: 12.5em;
min-height: 4em;
overflow-y: auto;
background: rgba(0, 50, 60, 0.65);
padding: 6px;
user-select: text;
font-size: 12px;
line-height: 1.25;
/* Thin scrollbar that doesn't take much space. */
scrollbar-width: thin;
scrollbar-color: rgba(44, 172, 181, 0.4) transparent;
}
.ChatMessage {
/* Default to \c0 (GuiChatHudProfile fontColor) for untagged messages. */
color: rgb(44, 172, 181);
padding: 2px 0;
}
/* T2 GuiChatHudProfile fontColors palette (\c0–\c9). */
.ChatColor0 {
color: rgb(44, 172, 181);
}
.ChatColor1 {
color: rgb(4, 235, 105);
}
.ChatColor2 {
color: rgb(219, 200, 128);
}
.ChatColor3 {
color: rgb(77, 253, 95);
}
.ChatColor4 {
color: rgb(40, 231, 240);
}
.ChatColor5 {
color: rgb(200, 200, 50);
}
.ChatColor6 {
color: rgb(200, 200, 200);
}
.ChatColor7 {
color: rgb(220, 220, 20);
}
.ChatColor8 {
color: rgb(150, 150, 250);
}
.ChatColor9 {
color: rgb(60, 220, 150);
}

84
src/components/ChatWindow.tsx Normal file
View file

@ -0,0 +1,84 @@
import { lazy, memo, Suspense, useEffect, useRef } from "react";
import { useEngineSelector } from "../state/engineStore";
import { ChatMessage, ChatSegment } from "../stream/types";
import styles from "./ChatWindow.module.css";
const ChatInput = lazy(() =>
import("./ChatInput").then((mod) => ({ default: mod.ChatInput })),
);
const EMPTY_MESSAGES: ChatMessage[] = [];
/** Map a colorCode to a CSS module class name (c0–c9 GuiChatHudProfile). */
const CHAT_COLOR_CLASSES: Record<number, string> = {
0: styles.ChatColor0,
1: styles.ChatColor1,
2: styles.ChatColor2,
3: styles.ChatColor3,
4: styles.ChatColor4,
5: styles.ChatColor5,
6: styles.ChatColor6,
7: styles.ChatColor7,
8: styles.ChatColor8,
9: styles.ChatColor9,
};
function segmentColorClass(colorCode: number): string {
return CHAT_COLOR_CLASSES[colorCode] ?? CHAT_COLOR_CLASSES[0];
}
function chatColorClass(msg: ChatMessage): string {
if (msg.colorCode != null && CHAT_COLOR_CLASSES[msg.colorCode]) {
return CHAT_COLOR_CLASSES[msg.colorCode];
}
// Fallback: default to \c0 (teal). Messages with detected codes (like \c2
// for flag events) will match above; \c0 kill messages may lose their null
// byte color code, so the correct default for server messages is c0.
return CHAT_COLOR_CLASSES[0];
}
export const ChatWindow = memo(function ChatWindow() {
const isLive = useEngineSelector(
(state) => state.playback.recording?.source === "live",
);
const messages = useEngineSelector(
(state) => state.playback.streamSnapshot?.chatMessages ?? EMPTY_MESSAGES,
);
const scrollRef = useRef<HTMLDivElement>(null);
const lastMessageId = messages[messages.length - 1]?.id;
useEffect(() => {
if (scrollRef.current) {
scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
}
}, [lastMessageId]);
return (
<div className={styles.ChatContainer}>
<div ref={scrollRef} className={styles.ChatWindow}>
{messages.map((msg: ChatMessage) => (
<div key={msg.id} className={styles.ChatMessage} hidden={!msg.text}>
{msg.segments ? (
msg.segments.map((seg: ChatSegment, j: number) => (
<span key={j} className={segmentColorClass(seg.colorCode)}>
{seg.text}
</span>
))
) : (
<span className={chatColorClass(msg)}>
{msg.sender ? `${msg.sender}: ` : ""}
{msg.text}
</span>
)}
</div>
))}
</div>
{isLive && (
<Suspense>
<ChatInput />
</Suspense>
)}
</div>
);
});

11
src/components/CloudLayers.tsx
View file

@ -471,16 +471,19 @@ export function CloudLayers({ scene }: CloudLayersProps) {
const { data: detailMapList } = useDetailMapList(materialList);
// From Tribes 2 sky.cc line 1170: mRadius = visibleDistance * 0.95
const visibleDistance = scene.visibleDistance > 0 ? scene.visibleDistance : 500;
const visibleDistance =
scene.visibleDistance > 0 ? scene.visibleDistance : 500;
const radius = visibleDistance * 0.95;
const cloudSpeeds = useMemo(
() => scene.cloudLayers.map((l, i) => l.speed || [0.0001, 0.0002, 0.0003][i]),
() =>
scene.cloudLayers.map((l, i) => l.speed || [0.0001, 0.0002, 0.0003][i]),
[scene.cloudLayers],
);
const cloudHeights = useMemo(
() => scene.cloudLayers.map((l, i) => l.heightPercent || [0.35, 0.25, 0.2][i]),
() =>
scene.cloudLayers.map((l, i) => l.heightPercent || [0.35, 0.25, 0.2][i]),
[scene.cloudLayers],
);
@ -536,7 +539,7 @@ export function CloudLayers({ scene }: CloudLayersProps) {
{layers.map((layer, i) => {
const url = textureToUrl(layer.texture);
return (
<Suspense key={i} fallback={null}>
<Suspense key={i}>
<CloudLayer
textureUrl={url}
radius={radius}

9
src/components/CopyCoordinatesButton.tsx
View file

@ -22,10 +22,12 @@ export function CopyCoordinatesButton({
cameraRef,
missionName,
missionType,
disabled,
}: {
cameraRef: RefObject<Camera | null>;
missionName: string;
missionType: string;
disabled?: boolean;
}) {
const { fogEnabled } = useSettings();
const [showCopied, setShowCopied] = useState(false);
@ -57,15 +59,16 @@ export function CopyCoordinatesButton({
<button
type="button"
className={styles.Root}
aria-label="Copy coordinates URL"
title="Copy coordinates URL"
aria-label="Link to coordinates"
title="Copy the current coordinates to URL"
onClick={handleCopyLink}
disabled={disabled}
data-copied={showCopied ? "true" : "false"}
id="copyCoordinatesButton"
>
<FaMapPin className={styles.MapPin} />
<FaClipboardCheck className={styles.ClipboardCheck} />
<span className={styles.ButtonLabel}> Copy coordinates URL</span>
<span className={styles.ButtonLabel}> Link to coordinates</span>
</button>
);
}

6
src/components/DebugElements.tsx
View file

@ -1,11 +1,9 @@
import { Stats, Html } from "@react-three/drei";
import { useDebug } from "./SettingsProvider";
import { useEffect, useRef } from "react";
import { AxesHelper } from "three";
import styles from "./DebugElements.module.css";
export function DebugElements() {
const { debugMode } = useDebug();
const axesRef = useRef<AxesHelper>(null);
useEffect(() => {
@ -16,7 +14,7 @@ export function DebugElements() {
axes.setColors("rgb(153, 255, 0)", "rgb(0, 153, 255)", "rgb(255, 153, 0)");
});
return debugMode ? (
return (
<>
<Stats className={styles.StatsPanel} />
<axesHelper ref={axesRef} args={[70]} renderOrder={999}>
@ -43,5 +41,5 @@ export function DebugElements() {
</span>
</Html>
</>
) : null;
);
}

8
src/components/DebugEnabled.tsx Normal file
View file

@ -0,0 +1,8 @@
import { ReactNode, Suspense } from "react";
import { useDebug } from "./SettingsProvider";
export function DebugEnabled({ children }: { children: ReactNode }) {
const { debugMode } = useDebug();
return debugMode ? <Suspense>{children}</Suspense> : null;
}

50
src/components/DebugSuspense.tsx Normal file
View file

@ -0,0 +1,50 @@
import { Suspense, useEffect, type ReactNode } from "react";
import { createLogger } from "../logger";
const log = createLogger("DebugSuspense");
/**
* Suspense wrapper that logs when a component suspends and resolves.
* Use in place of `<Suspense>` during debugging to track async loading.
*/
export function DebugSuspense({
name,
fallback = null,
children,
}: {
name: string;
fallback?: ReactNode;
children: ReactNode;
}) {
return (
<Suspense
name={name}
fallback={
<DebugSuspenseFallback name={name}>{fallback}</DebugSuspenseFallback>
}
>
<DebugSuspenseResolved name={name} />
{children}
</Suspense>
);
}
function DebugSuspenseFallback({
name,
children,
}: {
name: string;
children: ReactNode;
}) {
useEffect(() => {
log.debug("🛑 SUSPENDED: %s", name);
}, [name]);
return children;
}
function DebugSuspenseResolved({ name }: { name: string }) {
useEffect(() => {
log.debug("✅ RESOLVED: %s", name);
}, [name]);
return null;
}

6
src/components/DemoPlaybackControls.module.css
View file

@ -1,14 +1,8 @@
.Root {
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
background: rgba(0, 0, 0, 0.7);
color: #fff;
font-size: 13px;
z-index: 2;
}

1
src/components/DemoPlaybackControls.tsx
View file

@ -78,6 +78,7 @@ export function DemoPlaybackControls() {
className={styles.PlayPause}
onClick={isPlaying ? pause : play}
aria-label={isPlaying ? "Pause" : "Play"}
autoFocus
>
{isPlaying ? "\u275A\u275A" : "\u25B6"}
</button>

221
src/components/EntityRenderer.tsx
View file

@ -1,20 +1,15 @@
import { lazy, memo, Suspense, useRef } from "react";
import { lazy, memo, useRef } from "react";
import { useFrame } from "@react-three/fiber";
import type { Group } from "three";
import type {
GameEntity,
ShapeEntity as ShapeEntityType,
ForceFieldBareEntity as ForceFieldBareEntityType,
PlayerEntity as PlayerEntityType,
ExplosionEntity as ExplosionEntityType,
TracerEntity as TracerEntityType,
SpriteEntity as SpriteEntityType,
AudioEmitterEntity as AudioEmitterEntityType,
} from "../state/gameEntityTypes";
import { streamPlaybackStore } from "../state/streamPlaybackStore";
import { ShapeRenderer } from "./GenericShape";
import { ShapeRenderer, ShapePlaceholder } from "./GenericShape";
import { ShapeInfoProvider } from "./ShapeInfoProvider";
import type { StaticShapeType } from "./ShapeInfoProvider";
import { DebugSuspense } from "./DebugSuspense";
import { ShapeErrorBoundary } from "./ShapeErrorBoundary";
import { FloatingLabel } from "./FloatingLabel";
import { useSettings } from "./SettingsProvider";
import { Camera } from "./Camera";
@ -22,44 +17,51 @@ import { WayPoint } from "./WayPoint";
import { TerrainBlock } from "./TerrainBlock";
import { InteriorInstance } from "./InteriorInstance";
import { Sky } from "./Sky";
import { AudioEnabled } from "./AudioEnabled";
import type { TorqueObject } from "../torqueScript";
// Lazy-loaded heavy renderers
const PlayerModel = lazy(() =>
import("./PlayerModel").then((mod) => ({ default: mod.PlayerModel })),
);
function createLazy<K extends string>(
name: K,
loader: () => Promise<Record<K, React.ComponentType<any>>>,
): React.ComponentType<{ entity: GameEntity }> {
const LazyComponent = lazy(() =>
loader().then((mod) => {
const NamedComponent = mod[name];
return { default: NamedComponent };
}),
);
const LazyComponentWithSuspense = ({ entity }: { entity: GameEntity }) => {
return (
<DebugSuspense name={`${name}:${entity.id}`}>
<LazyComponent entity={entity} />
</DebugSuspense>
);
};
const ExplosionShape = lazy(() =>
import("./ShapeModel").then((mod) => ({
default: mod.ExplosionShape,
})),
);
LazyComponentWithSuspense.displayName = `createLazy(${name})`;
return LazyComponentWithSuspense;
}
const TracerProjectile = lazy(() =>
import("./Projectiles").then((mod) => ({
default: mod.TracerProjectile,
})),
const PlayerModel = createLazy("PlayerModel", () => import("./PlayerModel"));
const ExplosionShape = createLazy(
"ExplosionShape",
() => import("./ShapeModel"),
);
const SpriteProjectile = lazy(() =>
import("./Projectiles").then((mod) => ({
default: mod.SpriteProjectile,
})),
const TracerProjectile = createLazy(
"TracerProjectile",
() => import("./Projectiles"),
);
const ForceFieldBareRenderer = lazy(() =>
import("./ForceFieldBare").then((mod) => ({
default: mod.ForceFieldBare,
})),
const SpriteProjectile = createLazy(
"SpriteProjectile",
() => import("./Projectiles"),
);
const AudioEmitter = lazy(() =>
import("./AudioEmitter").then((mod) => ({ default: mod.AudioEmitter })),
);
const WaterBlock = lazy(() =>
import("./WaterBlock").then((mod) => ({ default: mod.WaterBlock })),
const ForceFieldBare = createLazy(
"ForceFieldBare",
() => import("./ForceFieldBare"),
);
const AudioEmitter = createLazy("AudioEmitter", () => import("./AudioEmitter"));
const WaterBlock = createLazy("WaterBlock", () => import("./WaterBlock"));
const WeaponModel = createLazy("WeaponModel", () => import("./ShapeModel"));
const TEAM_NAMES: Record<number, string> = {
1: "Storm",
@ -81,17 +83,21 @@ export const EntityRenderer = memo(function EntityRenderer({
case "Shape":
return <ShapeEntity entity={entity} />;
case "ForceFieldBare":
return <ForceFieldBareEntity entity={entity} />;
return <ForceFieldBare entity={entity} />;
case "Player":
return <PlayerEntity entity={entity} />;
return <PlayerModel entity={entity} />;
case "Explosion":
return <ExplosionEntity entity={entity} />;
return <ExplosionShape entity={entity} />;
case "Tracer":
return <TracerEntity entity={entity} />;
return <TracerProjectile entity={entity} />;
case "Sprite":
return <SpriteEntity entity={entity} />;
return <SpriteProjectile entity={entity} />;
case "AudioEmitter":
return <AudioEntity entity={entity} />;
return (
<AudioEnabled>
<AudioEmitter entity={entity} />
</AudioEnabled>
);
case "Camera":
return <Camera entity={entity} />;
case "WayPoint":
@ -101,25 +107,21 @@ export const EntityRenderer = memo(function EntityRenderer({
case "InteriorInstance":
return <InteriorInstance scene={entity.interiorData} />;
case "Sky":
return <Sky scene={entity.skyData} />;
return <Sky entity={entity} />;
case "Sun":
// Sun lighting is handled by SceneLighting (rendered outside EntityScene)
return null;
case "WaterBlock":
return (
<Suspense fallback={null}>
<WaterBlock scene={entity.waterData} />
</Suspense>
);
return <WaterBlock entity={entity} />;
case "MissionArea":
return null;
case "None":
return null;
default:
return null;
}
});
// ── Shape Entity ──
function ShapeEntity({ entity }: { entity: ShapeEntityType }) {
const { animationEnabled } = useSettings();
const groupRef = useRef<Group>(null);
@ -131,7 +133,9 @@ function ShapeEntity({ entity }: { entity: ShapeEntityType }) {
groupRef.current.rotation.y = (t / 3.0) * Math.PI * 2;
});
if (!entity.shapeName) return null;
if (!entity.shapeName) {
throw new Error(`Shape entity missing shapeName: ${entity.id}`);
}
const torqueObject = entity.runtimeObject as TorqueObject | undefined;
const shapeType = (entity.shapeType ?? "StaticShape") as StaticShapeType;
@ -156,7 +160,10 @@ function ShapeEntity({ entity }: { entity: ShapeEntityType }) {
type={shapeType}
>
<group ref={entity.rotate ? groupRef : undefined}>
<ShapeRenderer loadingColor={loadingColor} streamEntity={torqueObject ? undefined : entity}>
<ShapeRenderer
loadingColor={loadingColor}
streamEntity={torqueObject ? undefined : entity}
>
{flagLabel ? (
<FloatingLabel opacity={0.6}>{flagLabel}</FloatingLabel>
) : null}
@ -172,92 +179,26 @@ function ShapeEntity({ entity }: { entity: ShapeEntityType }) {
</group>
</ShapeInfoProvider>
)}
{entity.weaponShape && (
<ShapeErrorBoundary
fallback={
<ShapePlaceholder color="red" label={entity.weaponShape} />
}
>
<DebugSuspense
name={`Weapon:${entity.id}/${entity.weaponShape}`}
fallback={
<ShapePlaceholder color="cyan" label={entity.weaponShape} />
}
>
<WeaponModel
shapeName={entity.weaponShape}
playerShapeName={entity.shapeName}
/>
</DebugSuspense>
</ShapeErrorBoundary>
)}
</group>
</ShapeInfoProvider>
);
}
// ── Force Field Entity ──
function ForceFieldBareEntity({ entity }: { entity: ForceFieldBareEntityType }) {
if (!entity.forceFieldData) return null;
return (
<Suspense fallback={null}>
<ForceFieldBareRenderer
data={entity.forceFieldData}
scale={entity.forceFieldData.dimensions}
/>
</Suspense>
);
}
// ── Player Entity ──
function PlayerEntity({ entity }: { entity: PlayerEntityType }) {
if (!entity.shapeName) return null;
return (
<Suspense fallback={null}>
<PlayerModel entity={entity} />
</Suspense>
);
}
// ── Explosion Entity ──
function ExplosionEntity({ entity }: { entity: ExplosionEntityType }) {
const playback = streamPlaybackStore.getState().playback;
// ExplosionShape still expects a StreamEntity-shaped object.
// Adapt minimally until that component is also refactored.
const streamEntity = {
id: entity.id,
type: "Explosion" as const,
dataBlock: entity.shapeName,
position: entity.position,
rotation: entity.rotation,
faceViewer: entity.faceViewer,
explosionDataBlockId: entity.explosionDataBlockId,
};
if (!entity.shapeName || !playback) return null;
return (
<Suspense fallback={null}>
<ExplosionShape entity={streamEntity as any} playback={playback} />
</Suspense>
);
}
// ── Tracer Entity ──
function TracerEntity({ entity }: { entity: TracerEntityType }) {
return (
<Suspense fallback={null}>
<TracerProjectile entity={entity} visual={entity.visual} />
</Suspense>
);
}
// ── Sprite Entity ──
function SpriteEntity({ entity }: { entity: SpriteEntityType }) {
return (
<Suspense fallback={null}>
<SpriteProjectile visual={entity.visual} />
</Suspense>
);
}
// ── Audio Entity ──
function AudioEntity({ entity }: { entity: AudioEmitterEntityType }) {
const { audioEnabled } = useSettings();
if (!entity.audioFileName || !audioEnabled) return null;
return (
<Suspense fallback={null}>
<AudioEmitter entity={entity} />
</Suspense>
);
}

185
src/components/EntityScene.tsx
View file

@ -1,25 +1,21 @@
import { lazy, memo, Suspense, useCallback, useMemo, useRef, useState } from "react";
import { memo, useCallback, useRef, useState, useMemo } from "react";
import { Quaternion } from "three";
import type { Group } from "three";
import { useFrame } from "@react-three/fiber";
import { useAllGameEntities } from "../state";
import type { GameEntity, PositionedEntity, PlayerEntity } from "../state/gameEntityTypes";
import { useAllGameEntities } from "../state/gameEntityStore";
import type {
GameEntity,
PositionedEntity,
PlayerEntity,
} from "../state/gameEntityTypes";
import { isSceneEntity } from "../state/gameEntityTypes";
import { streamPlaybackStore } from "../state/streamPlaybackStore";
import { EntityRenderer } from "./EntityRenderer";
import { ShapeErrorBoundary } from "./ShapeErrorBoundary";
import { PlayerNameplate } from "./PlayerNameplate";
import { FlagMarker } from "./FlagMarker";
import { FloatingLabel } from "./FloatingLabel";
import { entityTypeColor } from "../stream/playbackUtils";
import { useDebug } from "./SettingsProvider";
import { useEngineSelector } from "../state";
const WeaponModel = lazy(() =>
import("./ShapeModel").then((mod) => ({
default: mod.WeaponModel,
})),
);
import { useEngineSelector } from "../state/engineStore";
/**
* The ONE rendering component tree for all game entities.
@ -27,39 +23,28 @@ const WeaponModel = lazy(() =>
* Data sources (mission .mis, demo .rec, live server) are controllers that
* populate the store — this component doesn't know or care which is active.
*/
export function EntityScene({ missionType }: { missionType?: string }) {
const debug = useDebug();
const debugMode = debug?.debugMode ?? false;
export function EntityScene() {
const rootRef = useCallback((node: Group | null) => {
streamPlaybackStore.setState({ root: node });
}, []);
return (
<group ref={rootRef}>
<EntityLayer missionType={missionType} debugMode={debugMode} />
<EntityLayer />
</group>
);
}
/** Renders all game entities. Uses an ID-stable selector so the component
* only re-renders when entities are added or removed, not when their
* fields change. Entity references are cached so that once an entity
* renders and loads resources via Suspense, it keeps its reference stable. */
const EntityLayer = memo(function EntityLayer({
missionType,
debugMode,
}: {
missionType?: string;
debugMode: boolean;
}) {
* fields change. */
const EntityLayer = memo(function EntityLayer() {
const entities = useAllGameEntities();
// Cache entity references by ID so that in-place field mutations
// (threads, colors, weapon shape) don't cause React to see a new
// object and remount Suspense boundaries. The cache IS updated when
// the store provides a genuinely new object reference (identity
// rebuild: armor change, datablock change, etc.).
// (threads, colors, weapon shape) don't cause unnecessary remounts.
// The cache IS updated when the store provides a genuinely new object
// reference (identity rebuild: armor change, datablock change, etc.).
const cacheRef = useRef(new Map<string, GameEntity>());
const cache = cacheRef.current;
@ -75,29 +60,10 @@ const EntityLayer = memo(function EntityLayer({
}
}
const filtered = useMemo(() => {
const result: GameEntity[] = [];
const lowerType = missionType?.toLowerCase();
for (const entity of cache.values()) {
if (lowerType && entity.missionTypesList) {
const types = new Set(
entity.missionTypesList
.toLowerCase()
.split(/\s+/)
.filter(Boolean),
);
if (types.size > 0 && !types.has(lowerType)) continue;
}
result.push(entity);
}
return result;
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [entities, missionType]);
return (
<>
{filtered.map((entity) => (
<EntityWrapper key={entity.id} entity={entity} debugMode={debugMode} />
{[...cache.values()].map((entity) => (
<EntityWrapper key={entity.id} entity={entity} />
))}
</>
);
@ -105,13 +71,11 @@ const EntityLayer = memo(function EntityLayer({
const EntityWrapper = memo(function EntityWrapper({
entity,
debugMode,
}: {
entity: GameEntity;
debugMode: boolean;
}) {
// Scene infrastructure handles its own positioning — render directly.
// The named group allows the interpolation loop to identify and skip them.
// Scene infrastructure handles its own positioning and Suspense — render
// directly. The named group allows the interpolation loop to skip them.
if (isSceneEntity(entity)) {
return (
<group name={entity.id}>
@ -123,14 +87,13 @@ const EntityWrapper = memo(function EntityWrapper({
if (entity.renderType === "None") return null;
// From here, entity is a PositionedEntity
return <PositionedEntityWrapper entity={entity} debugMode={debugMode} />;
return <PositionedEntityWrapper entity={entity} />;
});
/** Renders the player nameplate, subscribing to controlPlayerGhostId
* internally so that PositionedEntityWrapper doesn't need to. This keeps
* internally so that PositionedEntityWrapper doesn't need to. Keeps
* engine store mutations from triggering synchronous selector evaluations
* on every positioned entity (which was starving Suspense retries for
* shape GLB loading). */
* on every positioned entity. */
function PlayerNameplateIfVisible({ entity }: { entity: PlayerEntity }) {
const controlPlayerGhostId = useEngineSelector(
(state) => state.playback.streamSnapshot?.controlPlayerGhostId,
@ -146,13 +109,19 @@ function PlayerNameplateIfVisible({ entity }: { entity: PlayerEntity }) {
function FlagMarkerSlot({ entity }: { entity: GameEntity }) {
const flagRef = useRef(false);
const [isFlag, setIsFlag] = useState(() => {
const flags = "targetRenderFlags" in entity ? (entity.targetRenderFlags as number | undefined) : undefined;
const flags =
"targetRenderFlags" in entity
? (entity.targetRenderFlags as number | undefined)
: undefined;
return ((flags ?? 0) & 0x2) !== 0;
});
flagRef.current = isFlag;
useFrame(() => {
const flags = "targetRenderFlags" in entity ? (entity.targetRenderFlags as number | undefined) : undefined;
const flags =
"targetRenderFlags" in entity
? (entity.targetRenderFlags as number | undefined)
: undefined;
const nowFlag = ((flags ?? 0) & 0x2) !== 0;
if (nowFlag !== flagRef.current) {
flagRef.current = nowFlag;
@ -161,19 +130,13 @@ function FlagMarkerSlot({ entity }: { entity: GameEntity }) {
});
if (!isFlag) return null;
return (
<Suspense fallback={null}>
<FlagMarker entity={entity} />
</Suspense>
);
return <FlagMarker entity={entity} />;
}
function PositionedEntityWrapper({
entity,
debugMode,
}: {
entity: PositionedEntity;
debugMode: boolean;
}) {
const position = entity.position;
const scale = entity.scale;
@ -187,7 +150,12 @@ function PositionedEntityWrapper({
// Entities without a resolved shape get a wireframe placeholder.
if (entity.renderType === "Shape" && !entity.shapeName) {
return (
<group name={entity.id} position={position} quaternion={quaternion} scale={scale}>
<group
name={entity.id}
position={position}
quaternion={quaternion}
scale={scale}
>
<mesh>
<sphereGeometry args={[0.3, 6, 4]} />
<meshBasicMaterial
@ -195,7 +163,6 @@ function PositionedEntityWrapper({
wireframe
/>
</mesh>
{debugMode && <MissingShapeLabel entity={entity} />}
<FlagMarkerSlot entity={entity} />
</group>
);
@ -212,82 +179,22 @@ function PositionedEntityWrapper({
</mesh>
);
const shapeName = "shapeName" in entity ? entity.shapeName : undefined;
const weaponShape = "weaponShape" in entity ? entity.weaponShape : undefined;
return (
<group name={entity.id} position={position} quaternion={quaternion} scale={scale}>
<group
name={entity.id}
position={position}
quaternion={quaternion}
scale={scale}
>
<group name="model">
<ShapeErrorBoundary fallback={fallback}>
<Suspense fallback={fallback}>
<EntityRenderer entity={entity} />
</Suspense>
<EntityRenderer entity={entity} />
</ShapeErrorBoundary>
{isPlayer && (
<Suspense fallback={null}>
<PlayerNameplateIfVisible entity={entity as PlayerEntity} />
</Suspense>
<PlayerNameplateIfVisible entity={entity as PlayerEntity} />
)}
<FlagMarkerSlot entity={entity} />
{debugMode && !shapeName && entity.renderType !== "Shape" && (
<MissingShapeLabel entity={entity} />
)}
</group>
{weaponShape && shapeName && !isPlayer && (
<group name="weapon">
<ShapeErrorBoundary fallback={null}>
<Suspense fallback={null}>
<WeaponModel
shapeName={weaponShape}
playerShapeName={shapeName}
/>
</Suspense>
</ShapeErrorBoundary>
</group>
)}
</group>
);
}
function MissingShapeLabel({ entity }: { entity: GameEntity }) {
const bits: string[] = [];
bits.push(`${entity.id} (${entity.className})`);
if (typeof entity.ghostIndex === "number") bits.push(`ghost ${entity.ghostIndex}`);
if (typeof entity.dataBlockId === "number") bits.push(`db ${entity.dataBlockId}`);
bits.push(
entity.shapeHint
? `shapeHint ${entity.shapeHint}`
: "shapeHint <none resolved>",
);
return <FloatingLabel color="#ff6688">{bits.join(" | ")}</FloatingLabel>;
}
/** Error boundary that renders a fallback when shape loading fails. */
import { Component } from "react";
import type { ErrorInfo, ReactNode } from "react";
export class ShapeErrorBoundary extends Component<
{ children: ReactNode; fallback: ReactNode },
{ hasError: boolean }
> {
state = { hasError: false };
static getDerivedStateFromError() {
return { hasError: true };
}
componentDidCatch(error: Error, info: ErrorInfo) {
console.warn(
"[entity] Shape load failed:",
error.message,
info.componentStack,
);
}
render() {
if (this.state.hasError) {
return this.props.fallback;
}
return this.props.children;
}
}

14
src/components/FlagMarker.tsx
View file

@ -3,6 +3,7 @@ import { useFrame, useThree } from "@react-three/fiber";
import { Html } from "@react-three/drei";
import { Group, Vector3 } from "three";
import { textureToUrl } from "../loaders";
interface FlagEntity {
id: string;
iffColor?: { r: number; g: number; b: number };
@ -10,7 +11,6 @@ interface FlagEntity {
import styles from "./FlagMarker.module.css";
const FLAG_ICON_HEIGHT = 1.5;
const FLAG_ICON_URL = textureToUrl("commander/MiniIcons/com_flag_grey");
const _tmpVec = new Vector3();
@ -24,7 +24,7 @@ export function FlagMarker({ entity }: { entity: FlagEntity }) {
const markerRef = useRef<Group>(null);
const iconRef = useRef<HTMLDivElement>(null);
const distRef = useRef<HTMLSpanElement>(null);
const { camera } = useThree();
const camera = useThree((state) => state.camera);
useFrame(() => {
// Tint imperatively — iffColor is mutated in-place by streaming playback.
@ -52,10 +52,12 @@ export function FlagMarker({ entity }: { entity: FlagEntity }) {
<div
ref={iconRef}
className={styles.Icon}
style={{
backgroundColor: initialColor,
"--flag-icon-url": `url(${FLAG_ICON_URL})`,
} as React.CSSProperties}
style={
{
backgroundColor: initialColor,
"--flag-icon-url": `url(${FLAG_ICON_URL})`,
} as React.CSSProperties
}
/>
</div>
</Html>

9
src/components/FogProvider.tsx
View file

@ -208,7 +208,14 @@ export function fogStateFromScene(sky: SceneSky): FogState {
const enabled = visibleDistance > fogDistance;
return { fogDistance, visibleDistance, fogColor, fogVolumes, fogLine, enabled };
return {
fogDistance,
visibleDistance,
fogColor,
fogVolumes,
fogLine,
enabled,
};
}
/**

0
src/components/FollowControls.tsx Normal file
View file

24
src/components/ForceFieldBare.tsx
View file

@ -1,4 +1,5 @@
import { Suspense, useEffect, useMemo, useRef } from "react";
import { useEffect, useMemo, useRef } from "react";
import { DebugSuspense } from "./DebugSuspense";
import { useTexture } from "@react-three/drei";
import { useFrame } from "@react-three/fiber";
import {
@ -10,7 +11,10 @@ import {
RepeatWrapping,
} from "three";
import type { Texture } from "three";
import type { ForceFieldData } from "../state/gameEntityTypes";
import type {
ForceFieldBareEntity,
ForceFieldData,
} from "../state/gameEntityTypes";
import { textureToUrl } from "../loaders";
import { useSettings } from "./SettingsProvider";
import {
@ -126,13 +130,10 @@ function ForceFieldMesh({
* Renders a ForceFieldBare from pre-resolved ForceFieldData.
* Used by the unified EntityRenderer — does NOT read from TorqueObject/datablock.
*/
export function ForceFieldBare({
data,
scale,
}: {
data: ForceFieldData;
scale: [number, number, number];
}) {
export function ForceFieldBare({ entity }: { entity: ForceFieldBareEntity }) {
const data = entity.forceFieldData;
const scale = data.dimensions;
const textureUrls = useMemo(
() => data.textures.map((t) => textureToUrl(t)),
[data.textures],
@ -149,7 +150,8 @@ export function ForceFieldBare({
}
return (
<Suspense
<DebugSuspense
name={`ForceField`}
fallback={
<ForceFieldFallback
scale={scale}
@ -159,6 +161,6 @@ export function ForceFieldBare({
}
>
<ForceFieldMesh scale={scale} data={data} />
</Suspense>
</DebugSuspense>
);
}

31
src/components/DialogButton.module.css → src/components/GameDialog.module.css
View file

@ -1,4 +1,33 @@
/* Shared button base for dialog actions (server browser, map info, etc.). */
.Dialog {
position: relative;
max-width: calc(100dvw - 40px);
max-height: calc(100dvh - 40px);
background: rgba(20, 37, 38, 0.8);
border: 1px solid rgba(65, 131, 139, 0.6);
border-radius: 4px;
box-shadow:
0 0 50px rgba(0, 0, 0, 0.4),
inset 0 0 60px rgba(1, 7, 13, 0.6);
color: #b0d5c9;
font-size: 14px;
line-height: 1.5;
overflow: hidden;
outline: none;
user-select: text;
-webkit-touch-callout: default;
}
.Overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.DialogButton {
background: linear-gradient(
to bottom,

14
src/components/GenericShape.tsx
View file

@ -2,6 +2,7 @@ import { memo, Suspense, useEffect, useMemo, useRef } from "react";
import { ErrorBoundary } from "react-error-boundary";
import { useGLTF, useTexture } from "@react-three/drei";
import { useFrame } from "@react-three/fiber";
import { createLogger } from "../logger";
import { FALLBACK_TEXTURE_URL, textureToUrl, shapeToUrl } from "../loaders";
import {
MeshStandardMaterial,
@ -21,7 +22,7 @@ import * as SkeletonUtils from "three/examples/jsm/utils/SkeletonUtils.js";
import { setupTexture } from "../textureUtils";
import { useDebug, useSettings } from "./SettingsProvider";
import { useShapeInfo, isOrganicShape } from "./ShapeInfoProvider";
import { useEngineSelector, effectNow, engineStore } from "../state";
import { useEngineSelector, effectNow, engineStore } from "../state/engineStore";
import { FloatingLabel } from "./FloatingLabel";
import {
useIflTexture,
@ -39,6 +40,8 @@ import {
} from "../stream/playbackUtils";
import type { ThreadState as StreamThreadState } from "../stream/types";
const log = createLogger("GenericShape");
/** Returns pausable time in seconds for demo mode, real time otherwise. */
function shapeNowSec(): number {
const { recording } = engineStore.getState().playback;
@ -271,9 +274,7 @@ const StaticTexture = memo(function StaticTexture({
const url = useMemo(() => {
if (!resourcePath) {
console.warn(
`No resource_path was found on "${shapeName}" - rendering fallback.`,
);
log.warn("No resource_path found on \"%s\" — rendering fallback", shapeName);
}
return resourcePath ? textureToUrl(resourcePath) : FALLBACK_TEXTURE_URL;
}, [resourcePath, shapeName]);
@ -662,10 +663,7 @@ export const ShapeModel = memo(function ShapeModel({
iflMeshAtlasRef.current.set(info.mesh, atlas);
})
.catch((err) => {
console.warn(
`[ShapeModel] Failed to load IFL atlas for ${info.iflPath}:`,
err,
);
log.warn("Failed to load IFL atlas for %s: %o", info.iflPath, err);
});
}
}, [iflMeshes]);

37
src/components/InputHandlers.tsx Normal file
View file

@ -0,0 +1,37 @@
import { lazy, ReactNode, Suspense } from "react";
import { KeyboardControls } from "@react-three/drei";
import { JoystickProvider } from "./JoystickContext";
import { useTouchDevice } from "./useTouchDevice";
import {
KeyboardAndMouseHandler,
KEYBOARD_CONTROLS,
} from "./KeyboardAndMouseHandler";
const TouchHandler = lazy(() =>
import("@/src/components/TouchHandler").then((mod) => ({
default: mod.TouchHandler,
})),
);
export function InputProvider({ children }: { children: ReactNode }) {
return (
<KeyboardControls map={KEYBOARD_CONTROLS}>
<JoystickProvider>{children}</JoystickProvider>
</KeyboardControls>
);
}
export function InputHandlers() {
const isTouch = useTouchDevice();
return (
<>
<KeyboardAndMouseHandler />
{isTouch ? (
<Suspense>
<TouchHandler />
</Suspense>
) : null}
</>
);
}

254
src/components/InspectorControls.module.css
View file

@ -1,57 +1,170 @@
.Controls {
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
color: #fff;
padding: 8px 12px 8px 8px;
border-radius: 0 0 4px 0;
.InspectorControls {
position: relative;
font-size: 13px;
line-height: 1.231;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
}
.Dropdown {
display: flex;
align-items: center;
flex-direction: column;
align-items: stretch;
justify-content: center;
gap: 20px;
gap: 0;
}
.ButtonGroup {
width: 100%;
flex: 1 0 auto;
display: flex;
align-items: stretch;
}
.ButtonGroup .IconButton {
flex: 1 0 0;
flex-direction: column;
gap: 1px;
font-size: 22px;
padding-top: 8px;
padding-bottom: 8px;
}
.ButtonGroup .IconButton svg {
margin-bottom: 3px;
}
.ButtonGroup .IconButton[data-active="true"] {
background: rgb(5, 114, 177);
}
.ButtonGroup .IconButton:not(:first-child) {
border-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.ButtonGroup .IconButton:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.Group {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 20px;
}
.CheckboxField,
.LabelledButton {
display: flex;
align-items: center;
gap: 6px;
}
.Field {
.CheckboxField {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
align-items: center;
gap: 0 6px;
margin: 0 0 6px 0;
}
.CheckboxField input[type="checkbox"] {
margin-left: 0;
grid-column: 1;
grid-row: 1;
}
.CheckboxField .Label {
grid-column: 2;
grid-row: 1;
display: flex;
align-items: center;
gap: 6px;
}
.Description {
font-size: 12px;
line-height: 1.3333;
opacity: 0.6;
margin: 2px 0 4px 0;
padding: 0;
}
.CheckboxField .Description {
grid-column: 2;
grid-row: 2;
}
.Control {
display: flex;
align-items: center;
gap: 8px;
}
.Field select {
margin-bottom: 6px;
}
.Field output {
opacity: 0.7;
}
.Tools {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding: 10px;
}
.Field {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
align-items: center;
margin: 0 0 6px 0;
}
.Field label {
grid-column: 1;
grid-row: 1;
}
.Field .Control {
grid-column: 2;
grid-row: 1;
}
.Field .Description {
grid-column: 1 / -1;
grid-row: 2;
}
.IconButton {
flex: 1 1 auto;
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: auto;
height: auto;
min-width: 28px;
height: 28px;
margin: 0 0 0 -12px;
font-size: 15px;
padding: 0;
min-height: 32px;
gap: 8px;
margin: 0;
font-family: inherit;
font-size: 18px;
font-weight: 500;
padding: 4px 8px;
border-top: 1px solid rgba(255, 255, 255, 0.3);
border-left: 1px solid rgba(255, 255, 255, 0.3);
border-right: 1px solid rgba(200, 200, 200, 0.3);
border-bottom: 1px solid rgba(200, 200, 200, 0.3);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
border-radius: 4px;
border-radius: 5px;
background: rgba(3, 82, 147, 0.6);
color: #fff;
cursor: pointer;
@ -60,92 +173,69 @@
background 0.2s,
border-color 0.2s;
}
.IconButton svg {
flex: 0 0 auto;
pointer-events: none;
opacity: 0.6;
transition: opacity 0.2s;
}
.IconButton:disabled {
opacity: 0.6;
cursor: default;
}
@media (hover: hover) {
.IconButton:hover {
.IconButton:not(:disabled):hover {
background: rgba(0, 98, 179, 0.8);
border-color: rgba(255, 255, 255, 0.4);
}
.IconButton:not(:disabled):hover svg {
opacity: 1;
}
}
.IconButton:active,
.IconButton:not(:disabled):active,
.IconButton[aria-expanded="true"] {
background: rgba(0, 98, 179, 0.7);
border-color: rgba(255, 255, 255, 0.3);
transform: translate(0, 1px);
}
.IconButton[data-active="true"] {
background: rgba(0, 117, 213, 0.9);
border-color: rgba(255, 255, 255, 0.4);
}
.ButtonLabel {
font-size: 12px;
font-size: 14px;
}
.ButtonHint {
font-size: 10px;
opacity: 0.7;
}
.Toggle {
composes: IconButton;
margin: 0;
}
.MapInfoButton {
composes: IconButton;
composes: LabelledButton;
}
.MissionSelectWrapper {
}
@media (max-width: 1279px) {
.Dropdown[data-open="false"] {
display: none;
}
.Dropdown {
position: absolute;
top: calc(100% + 2px);
left: 2px;
right: 2px;
display: flex;
overflow: auto;
max-height: calc(100dvh - 56px);
flex-direction: column;
align-items: center;
gap: 12px;
background: rgba(0, 0, 0, 0.8);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 4px;
padding: 12px;
box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
}
.Group {
flex-wrap: wrap;
gap: 12px 20px;
}
.LabelledButton {
width: auto;
padding: 0 10px;
}
}
@media (max-width: 639px) {
.Controls {
right: 0;
border-radius: 0;
}
.MissionSelectWrapper {
flex: 1 1 0;
min-width: 0;
}
.MissionSelectWrapper input {
width: 100%;
}
.Toggle {
flex: 0 0 auto;
}
}
@media (min-width: 1280px) {
.Toggle {
display: none;
}
.LabelledButton .ButtonLabel {
display: none;
}
.MapInfoButton {
display: none;
}
.ForceRenderButton {
display: grid;
place-content: center;
border: 0;
margin: 0;
padding: 0 2px;
font-size: 16px;
background: transparent;
color: #4cb5ff;
cursor: pointer;
}

453
src/components/InspectorControls.tsx
View file

@ -1,42 +1,62 @@
import { useEffect, useState, useRef, RefObject } from "react";
import { RiLandscapeFill } from "react-icons/ri";
import { FaRotateRight } from "react-icons/fa6";
import { LuClipboardList } from "react-icons/lu";
import { Camera } from "three";
import {
useControls,
useDebug,
useSettings,
type TouchMode,
} from "./SettingsProvider";
import { MissionSelect } from "./MissionSelect";
import { useEffect, useState, useRef, RefObject } from "react";
import { CopyCoordinatesButton } from "./CopyCoordinatesButton";
import { LoadDemoButton } from "./LoadDemoButton";
import { JoinServerButton } from "./JoinServerButton";
import { useRecording } from "./RecordingProvider";
import { useLiveSelector } from "../state/liveConnectionStore";
import { FiInfo, FiSettings } from "react-icons/fi";
import { Camera } from "three";
import { Accordion, AccordionGroup } from "./Accordion";
import styles from "./InspectorControls.module.css";
import { useTouchDevice } from "./useTouchDevice";
import { useRecording } from "./RecordingProvider";
import { useDataSource, useMissionName } from "../state/gameEntityStore";
import { useLiveSelector } from "../state/liveConnectionStore";
import { hasMission } from "../manifest";
const DEFAULT_PANELS = ["controls", "preferences", "audio"];
export function InspectorControls({
missionName,
missionType,
onChangeMission,
onOpenMapInfo,
onOpenServerBrowser,
isTouch,
onChooseMap,
onCancelChoosingMap,
choosingMap,
cameraRef,
invalidateRef,
}: {
missionName: string;
missionType: string;
onChangeMission: ({
missionName,
missionType,
}: {
missionName: string;
missionType: string;
}) => void;
onOpenMapInfo: () => void;
onOpenServerBrowser?: () => void;
isTouch: boolean | null;
onChooseMap?: () => void;
onCancelChoosingMap?: () => void;
choosingMap?: boolean;
cameraRef: RefObject<Camera>;
invalidateRef: RefObject<() => void>;
}) {
const isTouch = useTouchDevice();
const dataSource = useDataSource();
const recording = useRecording();
const storeMissionName = useMissionName();
const hasStreamData = dataSource === "demo" || dataSource === "live";
// When streaming, the URL query param may not reflect the actual map.
// Use the store's mission name (from the server) for the manifest check.
const effectiveMissionName = hasStreamData ? storeMissionName : missionName;
const missionInManifest = effectiveMissionName
? hasMission(effectiveMissionName)
: false;
const isLiveConnected = useLiveSelector(
(s) => s.gameStatus === "connected" || s.gameStatus === "authenticating",
);
const {
fogEnabled,
setFogEnabled,
@ -44,18 +64,25 @@ export function InspectorControls({
setFov,
audioEnabled,
setAudioEnabled,
audioVolume,
setAudioVolume,
animationEnabled,
setAnimationEnabled,
} = useSettings();
const { speedMultiplier, setSpeedMultiplier, touchMode, setTouchMode } =
useControls();
const { debugMode, setDebugMode } = useDebug();
const demoRecording = useRecording();
const isLive = useLiveSelector((s) => s.adapter != null);
const isStreaming = demoRecording != null || isLive;
// Hide FOV/speed controls during .rec playback (faithfully replaying),
// but show them in .mis browsing and live observer mode.
const hideViewControls = isStreaming && !isLive;
const {
speedMultiplier,
setSpeedMultiplier,
touchMode,
setTouchMode,
invertScroll,
setInvertScroll,
invertDrag,
setInvertDrag,
invertJoystick,
setInvertJoystick,
} = useControls();
const { debugMode, setDebugMode, renderOnDemand, setRenderOnDemand } =
useDebug();
const [settingsOpen, setSettingsOpen] = useState(false);
const dropdownRef = useRef<HTMLDivElement>(null);
const buttonRef = useRef<HTMLButtonElement>(null);
@ -81,34 +108,8 @@ export function InspectorControls({
}
};
return (
<div
id="controls"
className={styles.Controls}
onKeyDown={(e) => e.stopPropagation()}
onPointerDown={(e) => e.stopPropagation()}
onClick={(e) => e.stopPropagation()}
>
<div className={styles.MissionSelectWrapper}>
<MissionSelect
value={missionName}
missionType={missionType}
onChange={onChangeMission}
disabled={isStreaming}
/>
</div>
<div className={styles.InspectorControls}>
<div ref={focusAreaRef}>
<button
ref={buttonRef}
className={styles.Toggle}
onClick={() => {
setSettingsOpen((isOpen) => !isOpen);
}}
aria-expanded={settingsOpen}
aria-controls="settingsPanel"
aria-label="Settings"
>
<FiSettings />
</button>
<div
className={styles.Dropdown}
ref={dropdownRef}
@ -118,122 +119,268 @@ export function InspectorControls({
onBlur={handleDropdownBlur}
data-open={settingsOpen}
>
<div className={styles.Group}>
<div className={styles.Tools}>
<div className={styles.ButtonGroup}>
<button
type="button"
className={styles.IconButton}
data-active={
(dataSource === "map" && !recording) || choosingMap
}
onClick={onChooseMap}
>
<RiLandscapeFill />
<span className={styles.ButtonLabel}>Explore</span>
<span className={styles.ButtonHint}>Browse maps</span>
</button>
<LoadDemoButton
isActive={!choosingMap && recording?.source === "demo"}
choosingMap={choosingMap}
onCancelChoosingMap={onCancelChoosingMap}
/>
{onOpenServerBrowser && (
<JoinServerButton
isActive={!choosingMap && isLiveConnected}
onOpenServerBrowser={onOpenServerBrowser}
/>
)}
</div>
<CopyCoordinatesButton
missionName={missionName}
missionType={missionType}
cameraRef={cameraRef}
disabled={!missionInManifest}
/>
<LoadDemoButton />
{onOpenServerBrowser && (
<JoinServerButton onOpenServerBrowser={onOpenServerBrowser} />
)}
<button
type="button"
className={styles.MapInfoButton}
aria-label="Show map info"
onClick={onOpenMapInfo}
disabled={!missionInManifest}
>
<FiInfo />
<LuClipboardList />
<span className={styles.ButtonLabel}>Show map info</span>
</button>
</div>
<div className={styles.Group}>
<div className={styles.CheckboxField}>
<input
id="fogInput"
type="checkbox"
checked={fogEnabled}
onChange={(event) => {
setFogEnabled(event.target.checked);
}}
/>
<label htmlFor="fogInput">Fog?</label>
</div>
<div className={styles.CheckboxField}>
<input
id="audioInput"
type="checkbox"
checked={audioEnabled}
onChange={(event) => {
setAudioEnabled(event.target.checked);
}}
/>
<label htmlFor="audioInput">Audio?</label>
</div>
<div className={styles.Accordions}>
<AccordionGroup type="multiple" defaultValue={DEFAULT_PANELS}>
<Accordion value="controls" label="Controls">
<div className={styles.Field}>
<label htmlFor="speedInput">Fly speed</label>
<input
id="speedInput"
type="range"
min={0.1}
max={5}
step={0.05}
value={speedMultiplier}
onChange={(event) =>
setSpeedMultiplier(parseFloat(event.target.value))
}
/>
<p className={styles.Description}>
How fast you move in free-flying mode.
{isTouch === false
? " Use your scroll wheel or trackpad to adjust while flying."
: ""}
</p>
</div>
{isTouch ? (
<div className={styles.Field}>
<label htmlFor="touchModeInput">Joystick</label>{" "}
<select
id="touchModeInput"
value={touchMode}
onChange={(e) =>
setTouchMode(e.target.value as TouchMode)
}
>
<option value="dualStick">Dual stick</option>
<option value="moveLookStick">Single stick</option>
</select>
<p className={styles.Description}>
Single stick has a unified move + look control. Dual stick
has independent move + look.
</p>
</div>
) : null}
{isTouch === false ? (
<div className={styles.CheckboxField}>
<input
id="invertScroll"
type="checkbox"
checked={invertScroll}
onChange={(event) => {
setInvertScroll(event.target.checked);
}}
/>
<label className={styles.Label} htmlFor="invertScroll">
Invert scroll direction
</label>
<p className={styles.Description}>
Reverse which scroll direction increases and decreases fly
speed.
</p>
</div>
) : null}
{isTouch ? (
<div className={styles.CheckboxField}>
<input
id="invertJoystick"
type="checkbox"
checked={invertJoystick}
onChange={(event) => {
setInvertJoystick(event.target.checked);
}}
/>
<label className={styles.Label} htmlFor="invertJoystick">
Invert joystick direction
</label>
<p className={styles.Description}>
Reverse joystick look direction.
</p>
</div>
) : null}
<div className={styles.CheckboxField}>
<input
id="invertDrag"
type="checkbox"
checked={invertDrag}
onChange={(event) => {
setInvertDrag(event.target.checked);
}}
/>
<label className={styles.Label} htmlFor="invertDrag">
Invert drag direction
</label>
<p className={styles.Description}>
Reverse how dragging the viewport aims the camera.
</p>
</div>
</Accordion>
<Accordion value="preferences" label="Preferences">
<div className={styles.Field}>
<label htmlFor="fovInput">FOV</label>
<div className={styles.Control}>
<output htmlFor="fovInput">{fov}&deg;</output>
<input
id="fovInput"
type="range"
min={75}
max={120}
step={5}
value={fov}
onChange={(event) => setFov(parseInt(event.target.value))}
/>
</div>
</div>
</Accordion>
<Accordion value="audio" label="Audio">
<div className={styles.CheckboxField}>
<input
id="audioInput"
type="checkbox"
checked={audioEnabled}
onChange={(event) => {
setAudioEnabled(event.target.checked);
}}
/>
<label className={styles.Label} htmlFor="audioInput">
Enable audio
</label>
</div>
<div className={styles.Field}>
<label htmlFor="volumeInput">Master volume</label>
<div className={styles.Control}>
<output htmlFor="volumeInput">
{Math.round(audioVolume * 100)}%
</output>
<input
id="volumeInput"
type="range"
min={0}
max={1}
step={0.05}
value={audioVolume}
onChange={(event) =>
setAudioVolume(parseFloat(event.target.value))
}
/>
</div>
</div>
</Accordion>
<Accordion value="graphics" label="Graphics">
<div className={styles.CheckboxField}>
<input
id="fogInput"
type="checkbox"
checked={fogEnabled}
onChange={(event) => {
setFogEnabled(event.target.checked);
}}
/>
<label className={styles.Label} htmlFor="fogInput">
Enable fog
</label>
</div>
<div className={styles.CheckboxField}>
<input
id="animationInput"
type="checkbox"
checked={animationEnabled}
onChange={(event) => {
setAnimationEnabled(event.target.checked);
}}
/>
<label className={styles.Label} htmlFor="animationInput">
Enable animations
</label>
</div>
</Accordion>
<Accordion value="debug" label="Debug">
<div className={styles.CheckboxField}>
<input
id="debugInput"
type="checkbox"
checked={debugMode}
onChange={(event) => {
setDebugMode(event.target.checked);
}}
/>
<label className={styles.Label} htmlFor="debugInput">
Render debug visuals
</label>
</div>
<div className={styles.CheckboxField}>
<input
id="onDemandInput"
type="checkbox"
checked={renderOnDemand}
onChange={(event) => {
setRenderOnDemand(event.target.checked);
}}
/>
<div className={styles.Label}>
<label htmlFor="onDemandInput">Render on demand </label>
<button
type="button"
className={styles.ForceRenderButton}
title="Force render"
aria-label="Force render"
onClick={() => invalidateRef.current?.()}
>
<FaRotateRight />
</button>
</div>
<p className={styles.Description}>
Significantly decreases CPU and GPU usage by only rendering
frames when requested. Helpful when developing parts of the
app unrelated to rendering.
</p>
</div>
</Accordion>
</AccordionGroup>
</div>
<div className={styles.Group}>
<div className={styles.CheckboxField}>
<input
id="animationInput"
type="checkbox"
checked={animationEnabled}
onChange={(event) => {
setAnimationEnabled(event.target.checked);
}}
/>
<label htmlFor="animationInput">Animation?</label>
</div>
<div className={styles.CheckboxField}>
<input
id="debugInput"
type="checkbox"
checked={debugMode}
onChange={(event) => {
setDebugMode(event.target.checked);
}}
/>
<label htmlFor="debugInput">Debug?</label>
</div>
</div>
<div className={styles.Group}>
{hideViewControls ? null : (
<div className={styles.Field}>
<label htmlFor="fovInput">FOV</label>
<input
id="fovInput"
type="range"
min={75}
max={120}
step={5}
value={fov}
onChange={(event) => setFov(parseInt(event.target.value))}
/>
<output htmlFor="fovInput">{fov}</output>
</div>
)}
{hideViewControls ? null : (
<div className={styles.Field}>
<label htmlFor="speedInput">Speed</label>
<input
id="speedInput"
type="range"
min={0.1}
max={5}
step={0.05}
value={speedMultiplier}
onChange={(event) =>
setSpeedMultiplier(parseFloat(event.target.value))
}
/>
</div>
)}
</div>
{isTouch && (
<div className={styles.Group}>
<div className={styles.Field}>
<label htmlFor="touchModeInput">Joystick:</label>{" "}
<select
id="touchModeInput"
value={touchMode}
onChange={(e) => setTouchMode(e.target.value as TouchMode)}
>
<option value="dualStick">Dual Stick</option>
<option value="moveLookStick">Single Stick</option>
</select>
</div>
</div>
)}
</div>
</div>
</div>

23
src/components/InteriorInstance.tsx
View file

@ -1,5 +1,7 @@
import { memo, Suspense, useMemo, useCallback, useEffect, useRef } from "react";
import { memo, useMemo, useCallback, useEffect, useRef } from "react";
import { DebugSuspense } from "./DebugSuspense";
import { ErrorBoundary } from "react-error-boundary";
import { createLogger } from "../logger";
import {
Mesh,
Material,
@ -24,6 +26,8 @@ import { injectCustomFog } from "../fogShader";
import { globalFogUniforms } from "../globalFogUniforms";
import { injectInteriorLighting } from "../interiorMaterial";
const log = createLogger("InteriorInstance");
/**
* Load a .gltf file that was converted from a .dif, used for "interior" models.
*/
@ -151,7 +155,8 @@ function InteriorMesh({ node }: { node: Mesh }) {
return (
<mesh geometry={node.geometry} castShadow receiveShadow>
{node.material ? (
<Suspense
<DebugSuspense
label={`InteriorTexture:${Array.isArray(node.material) ? node.material[0]?.userData?.resource_path : node.material?.userData?.resource_path ?? "?"}`}
fallback={
// Allow the mesh to render while the texture is still loading;
// show a wireframe placeholder.
@ -174,7 +179,7 @@ function InteriorMesh({ node }: { node: Mesh }) {
lightMap={lightMaps[0]}
/>
)}
</Suspense>
</DebugSuspense>
) : null}
</mesh>
);
@ -253,18 +258,18 @@ export const InteriorInstance = memo(function InteriorInstance({
/>
}
onError={(error) => {
console.warn(
`[interior] Failed to load ${scene.interiorFile}:`,
error.message,
);
log.error("Failed to load %s: %s", scene.interiorFile, error.message);
}}
>
<Suspense fallback={<InteriorPlaceholder color="orange" />}>
<DebugSuspense
label={`InteriorModel:${scene.interiorFile}`}
fallback={<InteriorPlaceholder color="orange" />}
>
<InteriorModel
interiorFile={scene.interiorFile}
ghostIndex={scene.ghostIndex}
/>
</Suspense>
</DebugSuspense>
</ErrorBoundary>
</group>
);

7
src/components/JoinServerButton.module.css
View file

@ -1,7 +1,6 @@
.Root {
composes: IconButton from "./InspectorControls.module.css";
composes: LabelledButton from "./InspectorControls.module.css";
padding: 0 5px;
}
/* Text label ("Connect", "Connecting...") follows standard breakpoint rules. */
.TextLabel {
@ -14,7 +13,7 @@
margin-right: 2px;
}
.LiveIcon {
font-size: 15px;
/* font-size: 15px; */
}
.Pulsing {
animation: blink 1.2s ease-out infinite;
@ -27,3 +26,7 @@
opacity: 0.25;
}
}
.ButtonHint {
composes: ButtonHint from "./InspectorControls.module.css";
}

27
src/components/JoinServerButton.tsx
View file

@ -3,12 +3,14 @@ import { useLiveSelector, selectPing } from "../state/liveConnectionStore";
import styles from "./JoinServerButton.module.css";
function formatPing(ms: number): string {
return ms >= 1000 ? ms.toLocaleString() + "ms" : ms + "ms";
return `${ms.toLocaleString()} ms`;
}
export function JoinServerButton({
isActive,
onOpenServerBrowser,
}: {
isActive: boolean;
onOpenServerBrowser: () => void;
}) {
const gameStatus = useLiveSelector((s) => s.gameStatus);
@ -26,8 +28,8 @@ export function JoinServerButton({
<button
type="button"
className={styles.Root}
aria-label={isLive ? `Disconnect from ${serverName ?? "server"}` : "Join server"}
title={isLive ? `Disconnect from ${serverName ?? "server"}` : "Join server"}
aria-label={isLive ? "Connected – click to disconnect" : "Join server"}
title={isLive ? "Connected – click to disconnect" : "Join server"}
onClick={() => {
if (isLive) {
disconnectServer();
@ -35,21 +37,20 @@ export function JoinServerButton({
onOpenServerBrowser();
}
}}
data-active={isLive ? "true" : undefined}
data-active={isActive}
>
<BsFillLightningChargeFill
className={`${styles.LiveIcon} ${isLive ? styles.Pulsing : ""}`}
/>
{!isLive && (
<span className={styles.TextLabel}>
{isConnecting ? "Connecting..." : "Connect"}
<>
<span className={styles.TextLabel}>Live</span>
<span className={styles.ButtonHint}>
{ping != null ? formatPing(ping) : "Join a game"}
</span>
)}
{isLive && ping != null && (
<span className={styles.PingLabel}>
{formatPing(ping)}
</span>
)}
</>
{/* {isLive && ping != null && (
<span className={styles.PingLabel}>{formatPing(ping)}</span>
)} */}
</button>
);
}

69
src/components/JoystickContext.tsx Normal file
View file

@ -0,0 +1,69 @@
import {
createContext,
ReactNode,
RefObject,
useCallback,
useContext,
useMemo,
useRef,
} from "react";
export type JoystickState = {
angle: number;
force: number;
};
type JoystickContextType = {
moveState: RefObject<JoystickState>;
lookState: RefObject<JoystickState>;
setMoveState: (state: Partial<JoystickState>) => void;
setLookState: (state: Partial<JoystickState>) => void;
};
export const JoystickContext = createContext<JoystickContextType | null>(null);
export function useJoystick() {
const context = useContext(JoystickContext);
if (!context) {
throw new Error(
"No JoystickContext found. Did you forget to add a <JoystickProvider>?",
);
}
return context;
}
export function JoystickProvider({ children }: { children: ReactNode }) {
const moveState = useRef<JoystickState>({ angle: 0, force: 0 });
const lookState = useRef<JoystickState>({ angle: 0, force: 0 });
const setMoveState = useCallback(
({ angle, force }: Partial<JoystickState>) => {
if (angle != null) {
moveState.current.angle = angle;
}
if (force != null) {
moveState.current.force = force;
}
},
[],
);
const setLookState = useCallback(
({ angle, force }: Partial<JoystickState>) => {
if (angle != null) {
lookState.current.angle = angle;
}
if (force != null) {
lookState.current.force = force;
}
},
[],
);
const context: JoystickContextType = useMemo(
() => ({ moveState, lookState, setMoveState, setLookState }),
[setMoveState, setLookState],
);
return <JoystickContext value={context}>{children}</JoystickContext>;
}

111
src/components/ObserverControls.tsx → src/components/KeyboardAndMouseHandler.tsx
View file

@ -1,4 +1,4 @@
import { useEffect, useRef } from "react";
import { useEffect, useEffectEvent, useRef } from "react";
import { Euler, Vector3 } from "three";
import { useFrame, useThree } from "@react-three/fiber";
import { useKeyboardControls } from "@react-three/drei";
@ -29,6 +29,28 @@ export enum Controls {
camera9 = "camera9",
}
export const KEYBOARD_CONTROLS = [
{ name: Controls.forward, keys: ["KeyW"] },
{ name: Controls.backward, keys: ["KeyS"] },
{ name: Controls.left, keys: ["KeyA"] },
{ name: Controls.right, keys: ["KeyD"] },
{ name: Controls.up, keys: ["Space"] },
{ name: Controls.down, keys: ["ShiftLeft", "ShiftRight"] },
{ name: Controls.lookUp, keys: ["ArrowUp"] },
{ name: Controls.lookDown, keys: ["ArrowDown"] },
{ name: Controls.lookLeft, keys: ["ArrowLeft"] },
{ name: Controls.lookRight, keys: ["ArrowRight"] },
{ name: Controls.camera1, keys: ["Digit1"] },
{ name: Controls.camera2, keys: ["Digit2"] },
{ name: Controls.camera3, keys: ["Digit3"] },
{ name: Controls.camera4, keys: ["Digit4"] },
{ name: Controls.camera5, keys: ["Digit5"] },
{ name: Controls.camera6, keys: ["Digit6"] },
{ name: Controls.camera7, keys: ["Digit7"] },
{ name: Controls.camera8, keys: ["Digit8"] },
{ name: Controls.camera9, keys: ["Digit9"] },
];
const BASE_SPEED = 80;
const MIN_SPEED_ADJUSTMENT = 0.05;
const MAX_SPEED_ADJUSTMENT = 0.5;
@ -39,13 +61,39 @@ const DRAG_THRESHOLD = 3; // px of movement before it counts as a drag
export const MOUSE_SENSITIVITY = 0.003;
export const ARROW_LOOK_SPEED = 1; // radians/sec
function CameraMovement() {
const { speedMultiplier, setSpeedMultiplier } = useControls();
export function KeyboardAndMouseHandler() {
// Don't let KeyboardControls handle stuff when metaKey is held.
useEffect(() => {
const handleKey = (e: KeyboardEvent) => {
// Let Cmd/Ctrl+K pass through for search focus.
if ((e.metaKey || e.ctrlKey) && e.key === "k") {
return;
}
if (e.metaKey) {
e.stopImmediatePropagation();
}
};
window.addEventListener("keydown", handleKey, { capture: true });
window.addEventListener("keyup", handleKey, { capture: true });
return () => {
window.removeEventListener("keydown", handleKey, { capture: true });
window.removeEventListener("keyup", handleKey, { capture: true });
};
}, []);
const { speedMultiplier, setSpeedMultiplier, invertScroll, invertDrag } =
useControls();
const [subscribe, getKeys] = useKeyboardControls<Controls>();
const { camera, gl } = useThree();
const camera = useThree((state) => state.camera);
const gl = useThree((state) => state.gl);
const { nextCamera, setCameraIndex, cameraCount } = useCameras();
const controlsRef = useRef<PointerLockControls | null>(null);
const getInvertScroll = useEffectEvent(() => invertScroll);
const getInvertDrag = useEffectEvent(() => invertDrag);
// Scratch vectors/euler to avoid allocations each frame
const forwardVec = useRef(new Vector3());
const sideVec = useRef(new Vector3());
@ -92,9 +140,10 @@ function CameraMovement() {
}
didDrag = true;
const dragSign = getInvertDrag() ? -1 : 1;
euler.setFromQuaternion(camera.quaternion, "YXZ");
euler.y -= e.movementX * MOUSE_SENSITIVITY;
euler.x -= e.movementY * MOUSE_SENSITIVITY;
euler.y += dragSign * e.movementX * MOUSE_SENSITIVITY;
euler.x += dragSign * e.movementY * MOUSE_SENSITIVITY;
euler.x = Math.max(-MAX_PITCH, Math.min(MAX_PITCH, euler.x));
camera.quaternion.setFromEuler(euler);
};
@ -154,7 +203,8 @@ function CameraMovement() {
const handleWheel = (e: WheelEvent) => {
e.preventDefault();
const direction = e.deltaY > 0 ? -1 : 1;
const scrollSign = getInvertScroll() ? -1 : 1;
const direction = (e.deltaY > 0 ? -1 : 1) * scrollSign;
const delta =
// Helps normalize sensitivity; trackpad scrolling will have many small
@ -253,50 +303,3 @@ function CameraMovement() {
return null;
}
export const KEYBOARD_CONTROLS = [
{ name: Controls.forward, keys: ["KeyW"] },
{ name: Controls.backward, keys: ["KeyS"] },
{ name: Controls.left, keys: ["KeyA"] },
{ name: Controls.right, keys: ["KeyD"] },
{ name: Controls.up, keys: ["Space"] },
{ name: Controls.down, keys: ["ShiftLeft", "ShiftRight"] },
{ name: Controls.lookUp, keys: ["ArrowUp"] },
{ name: Controls.lookDown, keys: ["ArrowDown"] },
{ name: Controls.lookLeft, keys: ["ArrowLeft"] },
{ name: Controls.lookRight, keys: ["ArrowRight"] },
{ name: Controls.camera1, keys: ["Digit1"] },
{ name: Controls.camera2, keys: ["Digit2"] },
{ name: Controls.camera3, keys: ["Digit3"] },
{ name: Controls.camera4, keys: ["Digit4"] },
{ name: Controls.camera5, keys: ["Digit5"] },
{ name: Controls.camera6, keys: ["Digit6"] },
{ name: Controls.camera7, keys: ["Digit7"] },
{ name: Controls.camera8, keys: ["Digit8"] },
{ name: Controls.camera9, keys: ["Digit9"] },
];
export function ObserverControls() {
// Don't let KeyboardControls handle stuff when metaKey is held.
useEffect(() => {
const handleKey = (e: KeyboardEvent) => {
// Let Cmd/Ctrl+K pass through for search focus.
if ((e.metaKey || e.ctrlKey) && e.key === "k") {
return;
}
if (e.metaKey) {
e.stopImmediatePropagation();
}
};
window.addEventListener("keydown", handleKey, { capture: true });
window.addEventListener("keyup", handleKey, { capture: true });
return () => {
window.removeEventListener("keydown", handleKey, { capture: true });
window.removeEventListener("keyup", handleKey, { capture: true });
};
}, []);
return <CameraMovement />;
}

2
src/components/KeyboardOverlay.module.css
View file

@ -1,5 +1,5 @@
.Root {
position: fixed;
position: absolute;
bottom: 16px;
left: 50%;
transform: translateX(-50%);

2
src/components/KeyboardOverlay.tsx
View file

@ -1,5 +1,5 @@
import { useKeyboardControls } from "@react-three/drei";
import { Controls } from "./ObserverControls";
import { Controls } from "./KeyboardAndMouseHandler";
import { useRecording } from "./RecordingProvider";
import styles from "./KeyboardOverlay.module.css";

15
src/components/LiveConnection.tsx
View file

@ -1,15 +0,0 @@
import { useEffect } from "react";
import { disposeLiveConnection } from "../state/liveConnectionStore";
/** Cleanup-only provider — disposes the relay connection on unmount. */
export function LiveConnectionProvider({
children,
}: {
children: React.ReactNode;
}) {
useEffect(() => {
return () => disposeLiveConnection();
}, []);
return children;
}

60
src/components/LiveObserver.tsx
View file

@ -2,19 +2,26 @@ import { useRef, useEffect } from "react";
import { useFrame, useThree } from "@react-three/fiber";
import { Vector3 } from "three";
import { useKeyboardControls } from "@react-three/drei";
import { useLiveSelector } from "../state/liveConnectionStore";
import { createLogger } from "../logger";
import {
liveConnectionStore,
useLiveSelector,
} from "../state/liveConnectionStore";
import { useEngineStoreApi } from "../state/engineStore";
import { streamPlaybackStore } from "../state/streamPlaybackStore";
import { Controls, MOUSE_SENSITIVITY, ARROW_LOOK_SPEED } from "./ObserverControls";
import {
Controls,
MOUSE_SENSITIVITY,
ARROW_LOOK_SPEED,
} from "./KeyboardAndMouseHandler";
import { useControls } from "./SettingsProvider";
import { useTick, TICK_RATE } from "./TickProvider";
import {
yawPitchToQuaternion,
MAX_PITCH,
} from "../stream/streamHelpers";
import { yawPitchToQuaternion, MAX_PITCH } from "../stream/streamHelpers";
import type { StreamRecording, StreamCamera } from "../stream/types";
import type { LiveStreamAdapter } from "../stream/liveStreaming";
const log = createLogger("LiveObserver");
const TICK_INTERVAL = 1 / TICK_RATE;
// Scratch objects to avoid per-frame allocations.
@ -50,7 +57,7 @@ export function LiveObserver() {
const store = useEngineStoreApi();
const { speedMultiplier } = useControls();
const activeAdapterRef = useRef<LiveStreamAdapter | null>(null);
const { gl } = useThree();
const gl = useThree((state) => state.gl);
const [, getKeys] = useKeyboardControls<Controls>();
// Accumulated rotation deltas since last move was sent. Mouse events and
@ -73,15 +80,22 @@ export function LiveObserver() {
// Wire adapter to engine store.
useEffect(() => {
if (adapter && (gameStatus === "connected" || gameStatus === "authenticating")) {
if (
adapter &&
(gameStatus === "connected" || gameStatus === "authenticating")
) {
if (activeAdapterRef.current === adapter) return;
console.log("[LiveObserver] wiring adapter to engine store");
log.info("wiring adapter to engine store");
const liveState = liveConnectionStore.getState();
const liveRecording: StreamRecording = {
source: "live",
duration: Infinity,
missionName: null,
missionName: liveState.mapName ?? null,
gameType: null,
serverDisplayName: liveState.serverName ?? null,
recorderName: liveState.warriorName ?? null,
recordingDate: null,
streamingPlayback: adapter,
};
@ -92,7 +106,11 @@ export function LiveObserver() {
predRef.current.initialized = false;
predRef.current.lastSyncedCamera = null;
} else if (!adapter && activeAdapterRef.current) {
store.getState().setRecording(null);
// Only clear the recording if it's still the live one we set.
const current = store.getState().playback.recording;
if (current?.source === "live") {
store.getState().setRecording(null);
}
activeAdapterRef.current = null;
predRef.current.initialized = false;
}
@ -165,7 +183,7 @@ export function LiveObserver() {
if (!activeAdapterRef.current) return;
activeAdapterRef.current.toggleObserverMode();
console.log(`[LiveObserver] observer mode: ${activeAdapterRef.current.observerMode}`);
log.info("observer mode: %s", activeAdapterRef.current.observerMode);
};
window.addEventListener("keydown", handleKey);
return () => window.removeEventListener("keydown", handleKey);
@ -274,12 +292,15 @@ export function LiveObserver() {
// Interpolate between previous and current tick prediction, then add
// pending (unconsumed) mouse/arrow deltas so rotation responds at frame
// rate rather than waiting for the next useTick to consume them.
const interpYaw = pred.prevYaw + (pred.yaw - pred.prevYaw) * t + deltaYawRef.current;
const interpYaw =
pred.prevYaw + (pred.yaw - pred.prevYaw) * t + deltaYawRef.current;
const interpPitch = Math.max(
-MAX_PITCH,
Math.min(
MAX_PITCH,
pred.prevPitch + (pred.pitch - pred.prevPitch) * t + deltaPitchRef.current,
pred.prevPitch +
(pred.pitch - pred.prevPitch) * t +
deltaPitchRef.current,
),
);
@ -314,7 +335,9 @@ export function LiveObserver() {
if (_orbitDir.lengthSq() > 1e-8) {
_orbitDir.normalize();
const orbitDistance = Math.max(0.1, serverCam.orbitDistance ?? 4);
state.camera.position.copy(_orbitTarget).addScaledVector(_orbitDir, orbitDistance);
state.camera.position
.copy(_orbitTarget)
.addScaledVector(_orbitDir, orbitDistance);
state.camera.lookAt(_orbitTarget);
}
}
@ -323,13 +346,16 @@ export function LiveObserver() {
// from StreamingController's server snapshot interpolation).
state.camera.quaternion.set(qx, qy, qz, qw);
}
}, 1);
});
// Clean up on unmount.
useEffect(() => {
return () => {
if (activeAdapterRef.current) {
store.getState().setRecording(null);
const current = store.getState().playback.recording;
if (current?.source === "live") {
store.getState().setRecording(null);
}
activeAdapterRef.current = null;
}
};

8
src/components/LoadDemoButton.module.css
View file

@ -7,6 +7,10 @@
composes: ButtonLabel from "./InspectorControls.module.css";
}
.DemoIcon {
font-size: 19px;
.ButtonHint {
composes: ButtonHint from "./InspectorControls.module.css";
}
.DemoIcon {
/* font-size: 20px; */
}

43
src/components/LoadDemoButton.tsx
View file

@ -1,10 +1,21 @@
import { useCallback, useRef } from "react";
import { MdOndemandVideo } from "react-icons/md";
import { createLogger } from "../logger";
import { liveConnectionStore } from "../state/liveConnectionStore";
import { usePlaybackActions, useRecording } from "./RecordingProvider";
import { createDemoStreamingRecording } from "../stream/demoStreaming";
import styles from "./LoadDemoButton.module.css";
export function LoadDemoButton() {
const log = createLogger("LoadDemoButton");
export function LoadDemoButton({
isActive = false,
choosingMap = false,
onCancelChoosingMap,
}: {
isActive?: boolean;
choosingMap?: boolean;
onCancelChoosingMap?: () => void;
}) {
const recording = useRecording();
const isDemoLoaded = recording?.source === "demo";
const { setRecording } = usePlaybackActions();
@ -12,14 +23,18 @@ export function LoadDemoButton() {
const parseTokenRef = useRef(0);
const handleClick = useCallback(() => {
if (choosingMap && isDemoLoaded) {
onCancelChoosingMap?.();
return;
}
if (isDemoLoaded) {
// Unload the current recording.
// Unload the recording/parser but leave entities frozen in the store.
parseTokenRef.current += 1;
setRecording(null);
return;
}
inputRef.current?.click();
}, [isDemoLoaded, setRecording]);
}, [isDemoLoaded, choosingMap, onCancelChoosingMap, setRecording]);
const handleFileChange = useCallback(
async (e: React.ChangeEvent<HTMLInputElement>) => {
@ -31,14 +46,20 @@ export function LoadDemoButton() {
const buffer = await file.arrayBuffer();
const parseToken = parseTokenRef.current + 1;
parseTokenRef.current = parseToken;
const { createDemoStreamingRecording } =
await import("../stream/demoStreaming");
const recording = await createDemoStreamingRecording(buffer);
if (parseTokenRef.current !== parseToken) {
return;
}
// Disconnect from any live server before loading the demo.
const liveState = liveConnectionStore.getState();
liveState.disconnectServer();
liveState.disconnectRelay();
// Metadata-first: mission/game-mode sync happens immediately.
setRecording(recording);
} catch (err) {
console.error("Failed to load demo:", err);
log.error("Failed to load demo: %o", err);
}
},
[setRecording],
@ -59,12 +80,16 @@ export function LoadDemoButton() {
aria-label={isDemoLoaded ? "Unload demo" : "Load demo (.rec)"}
title={isDemoLoaded ? "Unload demo" : "Load demo (.rec)"}
onClick={handleClick}
data-active={isDemoLoaded ? "true" : undefined}
disabled={recording != null && !isDemoLoaded}
data-active={isActive}
>
<MdOndemandVideo className={styles.DemoIcon} />
<span className={styles.ButtonLabel}>
{isDemoLoaded ? "Unload demo" : "Demo"}
<span className={styles.ButtonLabel}>Demo</span>
<span className={styles.ButtonHint}>
{choosingMap && isDemoLoaded
? "Return to demo"
: isDemoLoaded
? "Click to unload"
: "Load a .rec file"}
</span>
</button>
</>

9
app/page.module.css → src/components/LoadingIndicator.module.css
View file

@ -1,12 +1,3 @@
.CanvasContainer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
}
.LoadingIndicator {
position: absolute;
top: 50%;

22
src/components/LoadingIndicator.tsx Normal file
View file

@ -0,0 +1,22 @@
import styles from "./LoadingIndicator.module.css";
export function LoadingIndicator({
isLoading,
progress,
}: {
isLoading: boolean;
progress: number;
}) {
return (
<div className={styles.LoadingIndicator} data-complete={!isLoading}>
<div className={styles.Spinner} />
<div className={styles.Progress}>
<div
className={styles.ProgressBar}
style={{ width: `${progress * 100}%` }}
/>
</div>
<div className={styles.ProgressText}>{Math.round(progress * 100)}%</div>
</div>
);
}

32
src/components/MapInfoDialog.module.css
View file

@ -1,36 +1,14 @@
.Dialog {
position: relative;
composes: Dialog from "./GameDialog.module.css";
width: 800px;
height: 600px;
max-width: calc(100dvw - 40px);
max-height: calc(100dvh - 40px);
display: grid;
grid-template-columns: 100%;
grid-template-rows: 1fr auto;
background: rgba(20, 37, 38, 0.8);
border: 1px solid rgba(65, 131, 139, 0.6);
border-radius: 4px;
box-shadow:
0 0 50px rgba(0, 0, 0, 0.4),
inset 0 0 60px rgba(1, 7, 13, 0.6);
color: #bccec3;
font-size: 14px;
line-height: 1.5;
overflow: hidden;
outline: none;
user-select: text;
-webkit-touch-callout: default;
}
.Overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
composes: Overlay from "./GameDialog.module.css";
}
.Body {
@ -99,7 +77,7 @@
.MapQuote cite {
font-style: normal;
font-size: 12px;
color: rgba(255, 255, 255, 0.45);
color: rgba(215, 237, 203, 0.5);
display: block;
}
@ -125,7 +103,7 @@
.MusicTrack {
margin-top: 16px;
font-size: 14px;
color: rgba(202, 208, 172, 0.5);
color: rgba(215, 237, 203, 0.5);
font-style: italic;
display: flex;
align-items: center;
@ -174,7 +152,7 @@
}
.CloseButton {
composes: DialogButton from "./DialogButton.module.css";
composes: DialogButton from "./GameDialog.module.css";
}
.Hint {

31
src/components/MapInfoDialog.tsx
View file

@ -50,7 +50,9 @@ function getBitmapUrl(
try {
const key = getStandardTextureResourceKey(`textures/gui/${bitmap}`);
return getUrlForPath(key);
} catch { /* expected */ }
} catch {
/* expected */
}
}
// Fall back to Load_<MissionName>.png convention (multiplayer missions)
try {
@ -58,7 +60,9 @@ function getBitmapUrl(
`textures/gui/Load_${missionName}`,
);
return getUrlForPath(key);
} catch { /* expected */ }
} catch {
/* expected */
}
return null;
}
@ -161,12 +165,10 @@ function MusicPlayer({ track }: { track: string }) {
}
export function MapInfoDialog({
open,
onClose,
missionName,
missionType,
}: {
open: boolean;
onClose: () => void;
missionName: string;
missionType: string;
@ -175,19 +177,18 @@ export function MapInfoDialog({
const dialogRef = useRef<HTMLDivElement>(null);
useEffect(() => {
if (open) {
dialogRef.current?.focus();
try {
document.exitPointerLock();
} catch { /* expected */ }
dialogRef.current?.focus();
try {
document.exitPointerLock();
} catch {
/* expected */
}
}, [open]);
}, []);
// While open: block keyboard events from reaching drei, and handle close keys.
useEffect(() => {
if (!open) return;
const handleKeyDown = (e: KeyboardEvent) => {
if (e.code === "KeyI" || e.key === "Escape") {
if (e.key === "Escape") {
onClose();
} else if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
onClose();
@ -204,9 +205,7 @@ export function MapInfoDialog({
window.removeEventListener("keydown", handleKeyDown, { capture: true });
window.removeEventListener("keyup", handleKeyUp, { capture: true });
};
}, [open, onClose]);
if (!open) return null;
}, [onClose]);
const missionGroupProps = parsedMission
? getMissionGroupProps(parsedMission.ast)
@ -322,7 +321,7 @@ export function MapInfoDialog({
<button className={styles.CloseButton} onClick={onClose}>
Close
</button>
<span className={styles.Hint}>I or Esc to close</span>
<span className={styles.Hint}>Esc to close</span>
</div>
</div>
</div>

169
src/components/MapInspector.module.css Normal file
View file

@ -0,0 +1,169 @@
.Frame {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"sidebar toolbar"
"sidebar content"
"sidebar footer";
width: 100vw;
width: 100dvw;
height: 100vh;
height: 100dvh;
overflow: hidden;
}
.Toolbar {
display: flex;
align-items: center;
position: relative;
grid-area: toolbar;
background: rgb(25, 31, 31);
color: #fff;
border-bottom: 1px solid rgb(70, 85, 85);
box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.4);
z-index: 3;
view-transition-class: layout;
}
.CancelButton {
padding: 4px 6px;
font-size: 12px;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 3px;
background: rgba(255, 255, 255, 0.05);
color: rgba(255, 255, 255, 0.7);
cursor: pointer;
white-space: nowrap;
z-index: 1;
}
.CancelButton:hover {
background: rgba(255, 255, 255, 0.1);
color: #fff;
}
.Sidebar {
position: relative;
grid-area: sidebar;
width: 320px;
height: 100%;
min-height: 0;
overflow-y: auto;
background: rgb(25, 31, 31);
color: #fff;
border-right: 1px solid rgb(70, 85, 85);
box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.4);
z-index: 2;
}
.Content {
position: relative;
z-index: 0;
grid-area: content;
min-width: 0;
min-height: 0;
overflow: hidden;
}
.ThreeView {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
}
.PlayerBar {
position: relative;
grid-area: footer;
background: rgb(25, 31, 31);
color: #fff;
border-top: 1px solid rgb(70, 85, 85);
box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.4);
z-index: 1;
}
.ToggleSidebarButton {
flex: 0 0 auto;
display: grid;
place-content: center;
min-width: 30px;
min-height: 30px;
padding: 2px;
margin: 0 0 0 8px;
font-size: 24px;
border-radius: 4px;
background: transparent;
color: #fff;
border: 0;
cursor: pointer;
opacity: 0.6;
}
.ToggleSidebarButton[data-orientation="top"] {
display: none;
min-height: 48px;
min-width: 48px;
margin: 0;
}
.ToggleSidebarButton:not(:disabled):hover {
opacity: 1;
}
.ToggleSidebarButton svg {
pointer-events: none;
}
.Backdrop {
display: none;
}
@media (max-width: 899px) {
.Frame {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"toolbar"
"content"
"footer";
}
.Sidebar {
justify-self: center;
grid-area: content;
grid-row: content-start / footer-end;
width: auto;
max-width: 500px;
height: calc(100% + 1px);
margin: 0 -1px 0 -1px;
border: 1px solid rgb(70, 85, 85);
border-top: 0;
}
.Toolbar {
justify-content: center;
}
.ToggleSidebarButton[data-orientation="left"] {
display: none;
}
.ToggleSidebarButton[data-orientation="top"] {
display: grid;
}
.Backdrop {
display: block;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 2;
}
}

387
src/components/MapInspector.tsx Normal file
View file

@ -0,0 +1,387 @@
"use client";
import {
useState,
useEffect,
useCallback,
startTransition,
Suspense,
useRef,
lazy,
Activity,
ViewTransition,
} from "react";
import { Camera } from "three";
import { InspectorControls } from "@/src/components/InspectorControls";
import { MissionSelect } from "@/src/components/MissionSelect";
import { StreamingMissionInfo } from "@/src/components/StreamingMissionInfo";
import { SettingsProvider } from "@/src/components/SettingsProvider";
import { ObserverCamera } from "@/src/components/ObserverCamera";
import { AudioProvider } from "@/src/components/AudioContext";
import { CamerasProvider } from "@/src/components/CamerasProvider";
import {
RecordingProvider,
useRecording,
} from "@/src/components/RecordingProvider";
import { EntityScene } from "@/src/components/EntityScene";
import { TickProvider } from "@/src/components/TickProvider";
import { SceneLighting } from "@/src/components/SceneLighting";
import { useFeatures } from "@/src/components/FeaturesProvider";
import {
liveConnectionStore,
useLiveSelector,
} from "@/src/state/liveConnectionStore";
import { usePublicWindowAPI } from "@/src/components/usePublicWindowAPI";
import {
CurrentMission,
useFogQueryState,
useMissionQueryState,
} from "@/src/components/useQueryParams";
import { ThreeCanvas, InvalidateFunction } from "@/src/components/ThreeCanvas";
import { InputHandlers, InputProvider } from "./InputHandlers";
import { VisualInput } from "./VisualInput";
import { LoadingIndicator } from "./LoadingIndicator";
import { AudioEnabled } from "./AudioEnabled";
import { DebugEnabled } from "./DebugEnabled";
import { engineStore } from "../state/engineStore";
import {
gameEntityStore,
useDataSource,
useMissionName,
useMissionType,
} from "../state/gameEntityStore";
import { getMissionInfo } from "../manifest";
import {
LuPanelLeftClose,
LuPanelLeftOpen,
LuPanelTopClose,
LuPanelTopOpen,
} from "react-icons/lu";
import styles from "./MapInspector.module.css";
function createLazy(
name: string,
loader: () => Promise<{
[name]: React.ComponentType<any>;
}>,
) {
return lazy(() => loader().then((mod) => ({ default: mod[name] })));
}
const StreamingController = createLazy(
"StreamingController",
() => import("@/src/components/StreamingController"),
);
const DemoPlaybackControls = createLazy(
"DemoPlaybackControls",
() => import("@/src/components/DemoPlaybackControls"),
);
const DebugElements = createLazy(
"DebugElements",
() => import("@/src/components/DebugElements"),
);
const Mission = createLazy("Mission", () => import("@/src/components/Mission"));
const LiveObserver = createLazy(
"LiveObserver",
() => import("@/src/components/LiveObserver"),
);
const ChatSoundPlayer = createLazy(
"ChatSoundPlayer",
() => import("@/src/components/ChatSoundPlayer"),
);
const PlayerHUD = createLazy(
"PlayerHUD",
() => import("@/src/components/PlayerHUD"),
);
const MapInfoDialog = createLazy(
"MapInfoDialog",
() => import("@/src/components/MapInfoDialog"),
);
const ServerBrowser = createLazy(
"ServerBrowser",
() => import("@/src/components/ServerBrowser"),
);
export function MapInspector() {
const [currentMission, setCurrentMission] = useMissionQueryState();
const [fogEnabledOverride, setFogEnabledOverride] = useFogQueryState();
const clearFogEnabledOverride = useCallback(() => {
setFogEnabledOverride(null);
}, [setFogEnabledOverride]);
const features = useFeatures();
const { missionName, missionType } = currentMission;
const [mapInfoOpen, setMapInfoOpen] = useState(false);
const [serverBrowserOpen, setServerBrowserOpen] = useState(false);
const [sidebarOpen, setSidebarOpen] = useState(true);
const [choosingMap, setChoosingMap] = useState(false);
const [missionLoadingProgress, setMissionLoadingProgress] = useState(0);
const [showLoadingIndicator, setShowLoadingIndicator] = useState(true);
const changeMission = useCallback(
(mission: CurrentMission) => {
window.location.hash = "";
clearFogEnabledOverride();
setChoosingMap(false);
// Disconnect from any live server, unload any active recording, and
// clear stream state before loading the new mission in map mode.
const liveState = liveConnectionStore.getState();
liveState.disconnectServer();
liveState.disconnectRelay();
engineStore.getState().setRecording(null);
gameEntityStore.getState().endStreaming();
setCurrentMission(mission);
},
[setCurrentMission, clearFogEnabledOverride],
);
usePublicWindowAPI({ onChangeMission: changeMission });
const recording = useRecording();
const dataSource = useDataSource();
const hasStreamData = dataSource === "demo" || dataSource === "live";
const hasLiveAdapter = useLiveSelector((s) => s.adapter != null);
// Sync the mission query param when streaming data provides a mission name.
const streamMissionName = useMissionName();
const streamMissionType = useMissionType();
useEffect(() => {
if (!hasStreamData || !streamMissionName) return;
try {
const info = getMissionInfo(streamMissionName);
const matchedType =
streamMissionType && info.missionTypes.includes(streamMissionType)
? streamMissionType
: undefined;
setCurrentMission({
missionName: streamMissionName,
missionType: matchedType,
});
} catch {
// Mission not in manifest — remove the query param.
setCurrentMission(null);
}
}, [hasStreamData, streamMissionName, streamMissionType, setCurrentMission]);
// Cancel "choosing map" when a new recording loads.
useEffect(() => {
if (recording) {
setChoosingMap(false);
}
}, [recording]);
const loadingProgress = missionLoadingProgress;
const isLoading = loadingProgress < 1;
// Keep the loading indicator visible briefly after reaching 100%
useEffect(() => {
if (isLoading) {
setShowLoadingIndicator(true);
} else {
const timer = setTimeout(() => setShowLoadingIndicator(false), 500);
return () => clearTimeout(timer);
}
}, [isLoading]);
const handleLoadingChange = useCallback(
(_loading: boolean, progress: number = 0) => {
setMissionLoadingProgress(progress);
},
[],
);
const cameraRef = useRef<Camera | null>(null);
const invalidateRef = useRef<InvalidateFunction | null>(null);
return (
<main className={styles.Frame}>
<RecordingProvider>
<SettingsProvider
fogEnabledOverride={fogEnabledOverride}
onClearFogEnabledOverride={clearFogEnabledOverride}
>
<header
className={styles.Toolbar}
onKeyDown={(e) => e.stopPropagation()}
onPointerDown={(e) => e.stopPropagation()}
onClick={(e) => e.stopPropagation()}
>
<button
type="button"
className={styles.ToggleSidebarButton}
data-orientation="top"
aria-label={sidebarOpen ? "Close sidebar" : "Open sidebar"}
title={sidebarOpen ? "Close sidebar" : "Open sidebar"}
onClick={(event) => {
startTransition(() => setSidebarOpen((open) => !open));
}}
>
{sidebarOpen ? <LuPanelTopClose /> : <LuPanelTopOpen />}
</button>
<button
type="button"
className={styles.ToggleSidebarButton}
data-orientation="left"
aria-label={sidebarOpen ? "Close sidebar" : "Open sidebar"}
title={sidebarOpen ? "Close sidebar" : "Open sidebar"}
onClick={(event) => {
startTransition(() => setSidebarOpen((open) => !open));
}}
>
{sidebarOpen ? <LuPanelLeftClose /> : <LuPanelLeftOpen />}
</button>
<Activity
mode={hasStreamData && !choosingMap ? "visible" : "hidden"}
>
<StreamingMissionInfo />
</Activity>
<Activity
mode={!hasStreamData || choosingMap ? "visible" : "hidden"}
>
<MissionSelect
value={choosingMap ? "" : missionName}
missionType={choosingMap ? "" : missionType}
onChange={changeMission}
autoFocus={choosingMap}
/>
{choosingMap && (
<button
type="button"
className={styles.CancelButton}
onClick={() => {
setChoosingMap(false);
}}
>
Cancel
</button>
)}
</Activity>
</header>
{sidebarOpen ? <div className={styles.Backdrop} /> : null}
<Activity mode={sidebarOpen ? "visible" : "hidden"}>
<ViewTransition>
<div
className={styles.Sidebar}
onKeyDown={(e) => e.stopPropagation()}
onPointerDown={(e) => e.stopPropagation()}
onClick={(e) => e.stopPropagation()}
data-open={sidebarOpen}
>
<InspectorControls
missionName={missionName}
missionType={missionType}
onOpenMapInfo={() => setMapInfoOpen(true)}
onOpenServerBrowser={
features.live ? () => setServerBrowserOpen(true) : undefined
}
onChooseMap={
hasStreamData
? () => {
setChoosingMap(true);
}
: undefined
}
onCancelChoosingMap={() => {
setChoosingMap(false);
}}
choosingMap={choosingMap}
cameraRef={cameraRef}
invalidateRef={invalidateRef}
/>
</div>
</ViewTransition>
</Activity>
<InputProvider>
<div className={styles.Content}>
<div className={styles.ThreeView}>
<ThreeCanvas
dpr={mapInfoOpen || serverBrowserOpen ? 0.25 : undefined}
onCreated={(state) => {
cameraRef.current = state.camera;
invalidateRef.current = state.invalidate;
}}
>
<TickProvider>
<CamerasProvider>
<InputHandlers />
<AudioProvider>
<SceneLighting />
<Suspense>
<EntityScene />
</Suspense>
<ObserverCamera />
<AudioEnabled>
<ChatSoundPlayer />
</AudioEnabled>
<DebugEnabled>
<DebugElements />
</DebugEnabled>
{recording ? (
<Suspense>
<StreamingController recording={recording} />
</Suspense>
) : null}
{!hasStreamData ? (
<Suspense>
<Mission
key={`${missionName}~${missionType}`}
name={missionName}
missionType={missionType}
onLoadingChange={handleLoadingChange}
/>
</Suspense>
) : null}
{hasLiveAdapter ? (
<Suspense>
<LiveObserver />
</Suspense>
) : null}
</AudioProvider>
</CamerasProvider>
</TickProvider>
</ThreeCanvas>
</div>
{hasStreamData ? (
<Suspense>
<PlayerHUD />
</Suspense>
) : null}
<VisualInput />
{showLoadingIndicator && (
<LoadingIndicator
isLoading={isLoading}
progress={loadingProgress}
/>
)}
</div>
</InputProvider>
<footer
className={styles.PlayerBar}
onKeyDown={(e) => e.stopPropagation()}
onPointerDown={(e) => e.stopPropagation()}
onClick={(e) => e.stopPropagation()}
>
{recording?.source === "demo" ? (
<Suspense>
<DemoPlaybackControls />
</Suspense>
) : null}
</footer>
{mapInfoOpen ? (
<Suspense>
<MapInfoDialog
onClose={() => setMapInfoOpen(false)}
missionName={missionName}
missionType={missionType ?? ""}
/>
</Suspense>
) : null}
{serverBrowserOpen ? (
<Suspense>
<ServerBrowser onClose={() => setServerBrowserOpen(false)} />
</Suspense>
) : null}
</SettingsProvider>
</RecordingProvider>
</main>
);
}

18
src/components/Mission.tsx
View file

@ -19,9 +19,13 @@ import {
getSourceAndPath,
} from "../manifest";
import { MissionProvider } from "./MissionContext";
import { engineStore, gameEntityStore } from "../state";
import { engineStore } from "../state/engineStore";
import { gameEntityStore } from "../state/gameEntityStore";
import { ignoreScripts } from "../torqueScript/ignoreScripts";
import { walkMissionTree } from "../stream/missionEntityBridge";
import { createLogger } from "../logger";
const log = createLogger("Mission");
const loadScript = createScriptLoader();
// Shared cache for parsed scripts - survives runtime restarts
@ -105,8 +109,16 @@ function useExecutedMission(
engineStore.getState().setRuntime(runtime);
const missionGroup = runtime.getObjectByName("MissionGroup");
if (missionGroup) {
const gameEntities = walkMissionTree(missionGroup, runtime);
const gameEntities = walkMissionTree(
missionGroup,
runtime,
missionType,
);
gameEntityStore.getState().setAllEntities(gameEntities);
gameEntityStore.getState().setMissionInfo({
missionName,
missionType: missionType ?? undefined,
});
}
setState({ ready: true, runtime, progress: 1 });
})
@ -114,7 +126,7 @@ function useExecutedMission(
if (err instanceof Error && err.name === "AbortError") {
return;
}
console.error("Mission runtime failed to become ready:", err);
log.error("Mission runtime failed to become ready: %o", err);
});
// Subscribe as soon as the runtime exists so no mutation batches are missed

19
src/components/MissionSelect.module.css
View file

@ -2,6 +2,8 @@
position: relative;
display: flex;
align-items: center;
margin: 10px 10px 10px 4px;
z-index: 2;
}
.Shortcut {
@ -41,7 +43,10 @@
}
.Input::placeholder {
color: transparent;
font-size: 12px;
font-family: inherit;
color: #777;
/* color: transparent; */
}
.SelectedValue {
@ -63,6 +68,7 @@
color: #fff;
font-weight: 600;
font-size: 14px;
line-height: calc(18 / 14);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@ -158,6 +164,7 @@
.ItemType {
font-size: 10px;
font-weight: 600;
line-height: calc(13 / 10);
padding: 2px 5px;
border-radius: 3px;
background: rgba(255, 157, 0, 0.4);
@ -179,3 +186,13 @@
color: rgba(255, 255, 255, 0.5);
text-align: center;
}
.Backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1;
}

34
src/components/MissionSelect.tsx
View file

@ -1,4 +1,5 @@
import {
Activity,
Fragment,
startTransition,
useEffect,
@ -15,6 +16,7 @@ import {
ComboboxGroup,
ComboboxGroupLabel,
useComboboxStore,
useStoreState,
} from "@ariakit/react";
import { matchSorter } from "match-sorter";
import { getMissionInfo, getMissionList, getSourceAndPath } from "../manifest";
@ -154,6 +156,7 @@ export function MissionSelect({
missionType,
onChange,
disabled,
autoFocus,
}: {
value: string;
missionType: string;
@ -165,6 +168,7 @@ export function MissionSelect({
missionType: string | undefined;
}) => void;
disabled?: boolean;
autoFocus?: boolean;
}) {
const [searchValue, setSearchValue] = useState("");
const inputRef = useRef<HTMLInputElement>(null);
@ -195,6 +199,8 @@ export function MissionSelect({
},
});
const isOpen = useStoreState(combobox, "open");
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
@ -264,17 +270,23 @@ export function MissionSelect({
return (
<ComboboxProvider store={combobox}>
<Activity mode={isOpen ? "visible" : "hidden"}>
<div className={styles.Backdrop} />
</Activity>
<div className={styles.InputWrapper}>
<Combobox
ref={inputRef}
autoSelect
autoFocus={autoFocus}
disabled={disabled}
placeholder={displayValue}
placeholder={selectedMission ? undefined : "Choose a map…"}
className={styles.Input}
onFocus={() => {
try {
document.exitPointerLock();
} catch { /* expected */ }
} catch {
/* expected */
}
combobox.show();
}}
onKeyDown={(e) => {
@ -283,14 +295,16 @@ export function MissionSelect({
}
}}
/>
<div className={styles.SelectedValue}>
<span className={styles.SelectedName}>{displayValue}</span>
{missionType && (
<span className={styles.ItemType} data-mission-type={missionType}>
{missionType}
</span>
)}
</div>
{selectedMission && (
<div className={styles.SelectedValue}>
<span className={styles.SelectedName}>{displayValue}</span>
{missionType && (
<span className={styles.ItemType} data-mission-type={missionType}>
{missionType}
</span>
)}
</div>
)}
<kbd className={styles.Shortcut}>{isMac ? "⌘K" : "^K"}</kbd>
</div>
<ComboboxPopover

105
src/components/ParticleEffects.tsx
View file

@ -36,10 +36,10 @@ import {
particleFragmentShader,
} from "../particles/shaders";
import type { EmitterDataResolved } from "../particles/types";
import type {
StreamSnapshot,
StreamingPlayback,
} from "../stream/types";
import type { StreamSnapshot, StreamingPlayback } from "../stream/types";
import { createLogger } from "../logger";
const log = createLogger("ParticleEffects");
import { useDebug, useSettings } from "./SettingsProvider";
import { useAudio } from "./AudioContext";
import {
@ -50,7 +50,7 @@ import {
trackSound,
untrackSound,
} from "./AudioEmitter";
import { effectNow, engineStore } from "../state";
import { effectNow, engineStore } from "../state/engineStore";
// ── Constants ──
@ -96,9 +96,15 @@ function getParticleTexture(textureName: string): Texture {
// ── Debug geometry (reusable) ──
const _debugOriginGeo = new SphereGeometry(1, 6, 6);
const _debugOriginMat = new MeshBasicMaterial({ color: 0xff0000, wireframe: true });
const _debugOriginMat = new MeshBasicMaterial({
color: 0xff0000,
wireframe: true,
});
const _debugParticleGeo = new BoxGeometry(0.3, 0.3, 0.3);
const _debugParticleMat = new MeshBasicMaterial({ color: 0x00ff00, wireframe: true });
const _debugParticleMat = new MeshBasicMaterial({
color: 0x00ff00,
wireframe: true,
});
// ── Explosion wireframe sphere geometry (reusable) ──
@ -116,7 +122,10 @@ interface ActiveExplosionSphere {
}
/** Create a text label sprite for an explosion sphere. */
function createExplosionLabel(text: string, color: number): { sprite: Sprite; material: SpriteMaterial } {
function createExplosionLabel(
text: string,
color: number,
): { sprite: Sprite; material: SpriteMaterial } {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d")!;
const fontSize = 32;
@ -431,10 +440,10 @@ function getExplosionColor(dataBlock: string | undefined): number {
* Each entry is `{x, y, z}` with values in range 0–16000 (scale multiplier).
* Falls back to `particleRadius` or a default of 5.
*/
function getExplosionRadius(
expBlock: Record<string, unknown>,
): number {
const sizes = expBlock.sizes as Array<{ x: number; y: number; z: number }> | undefined;
function getExplosionRadius(expBlock: Record<string, unknown>): number {
const sizes = expBlock.sizes as
| Array<{ x: number; y: number; z: number }>
| undefined;
if (Array.isArray(sizes) && sizes.length > 0) {
let maxVal = 0;
for (const s of sizes) {
@ -552,14 +561,17 @@ function checkShaderCompilation(
material: ShaderMaterial,
label: string,
): void {
const props = renderer.properties.get(material) as { currentProgram?: { program: WebGLProgram } };
const props = renderer.properties.get(material) as {
currentProgram?: { program: WebGLProgram };
};
const program = props.currentProgram;
if (!program) return; // Not yet compiled.
const glProgram = program!.program;
const glContext = renderer.getContext();
if (!glContext.getProgramParameter(glProgram, glContext.LINK_STATUS)) {
console.error(
`[ParticleFX] Shader LINK ERROR (${label}):`,
log.error(
"Shader LINK ERROR (%s): %s",
label,
glContext.getProgramInfoLog(glProgram),
);
}
@ -847,7 +859,8 @@ export function ParticleEffects({
group.add(sphereMesh);
const labelText = `${entity.id}: ${entity.dataBlock ?? `expId:${entity.explosionDataBlockId}`}`;
const { sprite: labelSprite, material: labelMat } = createExplosionLabel(labelText, color);
const { sprite: labelSprite, material: labelMat } =
createExplosionLabel(labelText, color);
labelSprite.position.set(origin[1], origin[2] + radius + 2, origin[0]);
labelSprite.frustumCulled = false;
group.add(labelSprite);
@ -891,9 +904,8 @@ export function ParticleEffects({
}
// Clamp denormalized velocity values (parser bug workaround).
const initVelocity = Math.abs(swData.velocity) > 1e-10
? swData.velocity
: 0;
const initVelocity =
Math.abs(swData.velocity) > 1e-10 ? swData.velocity : 0;
activeShockwavesRef.current.push({
entityId: entity.id as string,
@ -910,7 +922,6 @@ export function ParticleEffects({
});
}
}
}
// Detect projectile entities with trail emitters (maintainEmitterId).
@ -918,7 +929,10 @@ export function ParticleEffects({
for (const entity of snapshot.entities) {
currentEntityIds.add(entity.id);
if (!entity.maintainEmitterId || trailEntitiesRef.current.has(entity.id)) {
if (
!entity.maintainEmitterId ||
trailEntitiesRef.current.has(entity.id)
) {
continue;
}
trailEntitiesRef.current.add(entity.id);
@ -933,7 +947,10 @@ export function ParticleEffects({
? [...entity.position]
: [0, 0, 0];
const emitter = new EmitterInstance(emitterData, MAX_PARTICLES_PER_EMITTER);
const emitter = new EmitterInstance(
emitterData,
MAX_PARTICLES_PER_EMITTER,
);
const texture = getParticleTexture(emitterData.particles.textureName);
const geometry = createParticleGeometry(MAX_PARTICLES_PER_EMITTER);
@ -980,7 +997,11 @@ export function ParticleEffects({
// One-time shader compilation check.
if (!entry.shaderChecked) {
checkShaderCompilation(gl, entry.material, entry.isBurst ? "burst" : "stream");
checkShaderCompilation(
gl,
entry.material,
entry.isBurst ? "burst" : "stream",
);
entry.shaderChecked = true;
}
@ -1166,7 +1187,13 @@ export function ParticleEffects({
// ── Audio: explosion impact sounds ──
// Only process new audio events while playing to avoid triggering
// sounds during pause (existing sounds are frozen via AudioContext.suspend).
if (isPlaying && audioEnabled && audioLoader && audioListener && groupRef.current) {
if (
isPlaying &&
audioEnabled &&
audioLoader &&
audioListener &&
groupRef.current
) {
for (const entity of snapshot.entities) {
if (
entity.type !== "Explosion" ||
@ -1205,7 +1232,11 @@ export function ParticleEffects({
const projSounds = projectileSoundsRef.current;
for (const entity of snapshot.entities) {
if (entity.type !== "Projectile" || !entity.dataBlockId || !entity.position) {
if (
entity.type !== "Projectile" ||
!entity.dataBlockId ||
!entity.position
) {
continue;
}
if (projSounds.has(entity.id)) {
@ -1268,8 +1299,16 @@ export function ParticleEffects({
for (const [entityId, sound] of projSounds) {
if (!currentEntityIds.has(entityId)) {
untrackSound(sound);
try { sound.stop(); } catch { /* already stopped */ }
try { sound.disconnect(); } catch { /* already disconnected */ }
try {
sound.stop();
} catch {
/* already stopped */
}
try {
sound.disconnect();
} catch {
/* already disconnected */
}
groupRef.current?.remove(sound);
projSounds.delete(entityId);
}
@ -1360,8 +1399,16 @@ export function ParticleEffects({
// Clean up projectile sounds.
for (const [, sound] of projectileSoundsRef.current) {
untrackSound(sound);
try { sound.stop(); } catch { /* already stopped */ }
try { sound.disconnect(); } catch { /* already disconnected */ }
try {
sound.stop();
} catch {
/* already stopped */
}
try {
sound.disconnect();
} catch {
/* already disconnected */
}
if (group) group.remove(sound);
}
projectileSoundsRef.current.clear();

103
src/components/PlayerHUD.module.css
View file

@ -8,12 +8,10 @@
pointer-events: none;
}
/* ── Top-right cluster: compass + bars ── */
.TopRight {
position: absolute;
top: 56px;
right: 8px;
top: 10px;
right: 10px;
display: flex;
align-items: flex-start;
gap: 6px;
@ -87,103 +85,12 @@
height: 6px;
}
/* ── Chat Window (top-left) ── */
.ChatContainer {
position: absolute;
top: 56px;
left: 0;
max-width: 420px;
display: flex;
flex-direction: column;
pointer-events: auto;
border: 1px solid rgba(44, 172, 181, 0.4);
}
.ChatWindow {
max-width: 450px;
max-height: 12.5em;
overflow-y: auto;
background: rgba(0, 50, 60, 0.65);
padding: 6px 8px;
user-select: text;
font-size: 12px;
line-height: 1.333333;
/* Thin scrollbar that doesn't take much space. */
scrollbar-width: thin;
scrollbar-color: rgba(44, 172, 181, 0.4) transparent;
}
.ChatMessage {
padding: 1px 0;
/* Default to \c0 (GuiChatHudProfile fontColor) for untagged messages. */
color: rgb(44, 172, 181);
}
.ChatInputForm {
display: flex;
}
.ChatInput {
width: 100%;
background: rgba(0, 50, 60, 0.8);
border: 0;
border-top: 1px solid rgba(78, 179, 167, 0.2);
border-radius: 0;
color: rgb(40, 231, 240);
font-family: inherit;
font-size: 12px;
margin: 0;
padding: 6px 8px;
outline: none;
}
.ChatInput::placeholder {
color: rgba(44, 172, 181, 0.5);
}
.ChatInput:focus {
background: rgba(0, 50, 60, 0.9);
}
/* T2 GuiChatHudProfile fontColors palette (\c0–\c9). */
.ChatColor0 {
color: rgb(44, 172, 181);
}
.ChatColor1 {
color: rgb(4, 235, 105);
}
.ChatColor2 {
color: rgb(219, 200, 128);
}
.ChatColor3 {
color: rgb(77, 253, 95);
}
.ChatColor4 {
color: rgb(40, 231, 240);
}
.ChatColor5 {
color: rgb(200, 200, 50);
}
.ChatColor6 {
color: rgb(200, 200, 200);
}
.ChatColor7 {
color: rgb(220, 220, 20);
}
.ChatColor8 {
color: rgb(150, 150, 250);
}
.ChatColor9 {
color: rgb(60, 220, 150);
}
/* ── Team Scores (bottom-left) ── */
.TeamScores {
position: absolute;
bottom: 130px;
left: 0;
bottom: 8px;
left: 8px;
font-family: monospace;
font-size: 12px;
}
@ -226,7 +133,7 @@
.PackInventoryHUD {
position: absolute;
bottom: 100px;
bottom: 8px;
right: 8px;
display: flex;
align-items: center;

189
src/components/PlayerHUD.tsx
View file

@ -1,20 +1,16 @@
import { useRef, useEffect, useState, useCallback } from "react";
import { useRecording } from "./RecordingProvider";
import { useEngineSelector } from "../state";
import { useEngineSelector } from "../state/engineStore";
import { textureToUrl } from "../loaders";
import { liveConnectionStore } from "../state/liveConnectionStore";
import type {
ChatSegment,
ChatMessage,
StreamEntity,
TeamScore,
WeaponsHudSlot,
} from "../stream/types";
import type { StreamEntity, TeamScore, WeaponsHudSlot } from "../stream/types";
import styles from "./PlayerHUD.module.css";
// ── Compass ──
import { ChatWindow } from "./ChatWindow";
const COMPASS_URL = textureToUrl("gui/hud_new_compass");
const NSEW_URL = textureToUrl("gui/hud_new_NSEW");
function Compass({ yaw }: { yaw: number | undefined }) {
function Compass() {
const yaw = useEngineSelector(
(state) => state.playback.streamSnapshot?.camera?.yaw,
);
if (yaw == null) return null;
// The ring notch is the fixed heading indicator (always "forward" at top).
// The NSEW letters rotate to show world cardinal directions relative to
@ -33,41 +29,51 @@ function Compass({ yaw }: { yaw: number | undefined }) {
</div>
);
}
// ── Health / Energy bars ──
function HealthBar({ value }: { value: number }) {
const pct = Math.max(0, Math.min(100, value * 100));
function HealthBar() {
const health = useEngineSelector(
(state) => state.playback.streamSnapshot?.status?.health,
);
if (health == null) return null;
const pct = Math.max(0, Math.min(100, health * 100));
return (
<div className={styles.BarTrack}>
<div className={styles.BarFillHealth} style={{ width: `${pct}%` }} />
</div>
);
}
function EnergyBar({ value }: { value: number }) {
const pct = Math.max(0, Math.min(100, value * 100));
function EnergyBar() {
const energy = useEngineSelector(
(state) => state.playback.streamSnapshot?.status?.energy,
);
if (energy == null) return null;
const pct = Math.max(0, Math.min(100, energy * 100));
return (
<div className={styles.BarTrack}>
<div className={styles.BarFillEnergy} style={{ width: `${pct}%` }} />
</div>
);
}
// ── Reticle ──
const RETICLE_TEXTURES: Record<string, string> = {
weapon_sniper: "gui/hud_ret_sniper",
weapon_shocklance: "gui/hud_ret_shocklance",
weapon_targeting: "gui/hud_ret_targlaser",
};
function normalizeWeaponName(shape: string | undefined): string {
if (!shape) return "";
return shape.replace(/\.dts$/i, "").toLowerCase();
}
function Reticle() {
const weaponShape = useEngineSelector((state) => {
const snap = state.playback.streamSnapshot;
if (!snap || snap.camera?.mode !== "first-person") return undefined;
const ctrl = snap.controlPlayerGhostId;
if (!ctrl) return undefined;
return snap.entities.find((e: StreamEntity) => e.id === ctrl)
?.weaponShape;
return snap.entities.find((e: StreamEntity) => e.id === ctrl)?.weaponShape;
});
if (weaponShape === undefined) return null;
const weapon = normalizeWeaponName(weaponShape);
@ -75,7 +81,6 @@ function Reticle() {
if (textureName) {
return (
<div className={styles.Reticle}>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
src={textureToUrl(textureName)}
alt=""
@ -90,7 +95,7 @@ function Reticle() {
</div>
);
}
// ── Weapon HUD (right side weapon list) ──
/** Maps $WeaponsHudData indices to simple icon textures (no baked background)
* and labels. Mortar uses hud_new_ because no simple variant exists. */
const WEAPON_HUD_SLOTS: Record<number, { icon: string; label: string }> = {
@ -114,6 +119,7 @@ const WEAPON_HUD_SLOTS: Record<number, { icon: string; label: string }> = {
16: { icon: "gui/hud_shocklance", label: "Shocklance" },
17: { icon: "gui/hud_new_mortar", label: "Mortar" },
};
// Precompute URLs so we don't call textureToUrl on every render.
const WEAPON_HUD_ICON_URLS = new Map(
Object.entries(WEAPON_HUD_SLOTS).map(([idx, w]) => [
@ -121,9 +127,11 @@ const WEAPON_HUD_ICON_URLS = new Map(
textureToUrl(w.icon),
]),
);
/** Targeting laser HUD indices (standard + TR2 variants). */
const TARGETING_LASER_INDICES = new Set([9, 14, 15]);
const INFINITY_ICON_URL = textureToUrl("gui/hud_infinity");
function WeaponSlotIcon({
slot,
isSelected,
@ -138,14 +146,12 @@ function WeaponSlotIcon({
<div
className={`${styles.PackInvItem} ${isSelected ? styles.PackInvItemActive : styles.PackInvItemDim}`}
>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
src={WEAPON_HUD_ICON_URLS.get(slot.index)!}
alt={info.label}
className={styles.PackInvIcon}
/>
{isInfinite ? (
// eslint-disable-next-line @next/next/no-img-element
<img
src={INFINITY_ICON_URL}
alt="\u221E"
@ -157,6 +163,7 @@ function WeaponSlotIcon({
</div>
);
}
function WeaponHUD() {
const weaponsHud = useEngineSelector(
(state) => state.playback.streamSnapshot?.weaponsHud,
@ -191,7 +198,7 @@ function WeaponHUD() {
</div>
);
}
// ── Team Scores (bottom-left) ──
/** Default team names from serverDefaults.cs. */
const DEFAULT_TEAM_NAMES: Record<number, string> = {
1: "Storm",
@ -201,6 +208,7 @@ const DEFAULT_TEAM_NAMES: Record<number, string> = {
5: "Blood Eagle",
6: "Phoenix",
};
function TeamScores() {
const teamScores = useEngineSelector(
(state) => state.playback.streamSnapshot?.teamScores,
@ -242,101 +250,7 @@ function TeamScores() {
</div>
);
}
// ── Chat Window (top-left) ──
/** Map a colorCode to a CSS module class name (c0–c9 GuiChatHudProfile). */
const CHAT_COLOR_CLASSES: Record<number, string> = {
0: styles.ChatColor0,
1: styles.ChatColor1,
2: styles.ChatColor2,
3: styles.ChatColor3,
4: styles.ChatColor4,
5: styles.ChatColor5,
6: styles.ChatColor6,
7: styles.ChatColor7,
8: styles.ChatColor8,
9: styles.ChatColor9,
};
function segmentColorClass(colorCode: number): string {
return CHAT_COLOR_CLASSES[colorCode] ?? CHAT_COLOR_CLASSES[0];
}
function chatColorClass(msg: ChatMessage): string {
if (msg.colorCode != null && CHAT_COLOR_CLASSES[msg.colorCode]) {
return CHAT_COLOR_CLASSES[msg.colorCode];
}
// Fallback: default to \c0 (teal). Messages with detected codes (like \c2
// for flag events) will match above; \c0 kill messages may lose their null
// byte color code, so the correct default for server messages is c0.
return CHAT_COLOR_CLASSES[0];
}
function ChatWindow({ isLive }: { isLive: boolean }) {
const messages = useEngineSelector(
(state) => state.playback.streamSnapshot?.chatMessages,
);
const scrollRef = useRef<HTMLDivElement>(null);
const prevCountRef = useRef(0);
const [chatText, setChatText] = useState("");
// Auto-scroll to bottom when new messages arrive.
const msgCount = messages?.length ?? 0;
useEffect(() => {
if (msgCount > prevCountRef.current && scrollRef.current) {
scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
}
prevCountRef.current = msgCount;
}, [msgCount]);
const handleSubmit = useCallback(
(e: React.FormEvent) => {
e.preventDefault();
const text = chatText.trim();
if (!text) return;
liveConnectionStore.getState().sendCommand("messageSent", text);
setChatText("");
},
[chatText],
);
const hasMessages = !!messages?.length;
return (
<div className={styles.ChatContainer}>
{hasMessages && (
<div ref={scrollRef} className={styles.ChatWindow}>
{messages!.map((msg: ChatMessage, i: number) => (
<div key={msg.id} className={styles.ChatMessage}>
{msg.segments ? (
msg.segments.map((seg: ChatSegment, j: number) => (
<span key={j} className={segmentColorClass(seg.colorCode)}>
{seg.text}
</span>
))
) : (
<span className={chatColorClass(msg)}>
{msg.sender ? `${msg.sender}: ` : ""}
{msg.text}
</span>
)}
</div>
))}
</div>
)}
{isLive && (
<form className={styles.ChatInputForm} onSubmit={handleSubmit}>
<input
className={styles.ChatInput}
type="text"
placeholder="Say something…"
value={chatText}
onChange={(e) => setChatText(e.target.value)}
onKeyDown={(e) => e.stopPropagation()}
onKeyUp={(e) => e.stopPropagation()}
maxLength={255}
/>
</form>
)}
</div>
);
}
// ── Backpack + Inventory HUD (bottom-right) ──
/** Maps $BackpackHudData indices to icon textures. */
const BACKPACK_ICONS: Record<number, string> = {
@ -429,7 +343,6 @@ function PackAndInventoryHUD() {
<div
className={`${styles.PackInvItem} ${backpackHud!.active ? styles.PackInvItemActive : ""}`}
>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={packIconUrl} alt="" className={styles.PackInvIcon} />
<span className={styles.PackInvCount}>
{backpackHud!.text || "\u00A0"}
@ -442,7 +355,6 @@ function PackAndInventoryHUD() {
if (!info || !iconUrl) return null;
return (
<div key={slotId} className={styles.PackInvItem}>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
src={iconUrl}
alt={info.label}
@ -457,32 +369,31 @@ function PackAndInventoryHUD() {
</div>
);
}
// ── Main HUD ──
export function PlayerHUD({ isLive = false }: { isLive?: boolean } = {}) {
const recording = useRecording();
const streamSnapshot = useEngineSelector(
(state) => state.playback.streamSnapshot,
export function PlayerHUD() {
const hasControlPlayer = useEngineSelector(
(state) => !!state.playback.streamSnapshot?.controlPlayerGhostId,
);
if (!recording && !isLive) return null;
const status = streamSnapshot?.status;
return (
<div className={styles.PlayerHUD}>
<ChatWindow isLive={isLive} />
{status && (
<>
<div className={styles.TopRight}>
<div className={styles.Bars}>
<HealthBar value={status.health} />
<EnergyBar value={status.energy} />
</div>
<Compass yaw={streamSnapshot?.camera?.yaw} />
<ChatWindow />
<div className={styles.TopRight}>
{hasControlPlayer && (
<div className={styles.Bars}>
<HealthBar />
<EnergyBar />
</div>
)}
<Compass />
</div>
{hasControlPlayer && (
<>
<WeaponHUD />
<PackAndInventoryHUD />
<TeamScores />
<Reticle />
</>
)}
<TeamScores />
</div>
);
}

302
src/components/PlayerModel.tsx
View file

@ -1,4 +1,4 @@
import { Suspense, useEffect, useMemo, useRef, useState } from "react";
import { useEffect, useMemo, useRef, useState } from "react";
import type { MutableRefObject } from "react";
import { useFrame } from "@react-three/fiber";
import {
@ -26,8 +26,9 @@ import { pickMoveAnimation } from "../stream/playerAnimation";
import { WeaponImageStateMachine } from "../stream/weaponStateMachine";
import type { WeaponAnimState } from "../stream/weaponStateMachine";
import { getAliasedActions } from "../torqueScript/shapeConstructor";
import { useStaticShape } from "./GenericShape";
import { ShapeErrorBoundary } from "./EntityScene";
import { useStaticShape, ShapePlaceholder } from "./GenericShape";
import { ShapeErrorBoundary } from "./ShapeErrorBoundary";
import { DebugSuspense } from "./DebugSuspense";
import { useAudio } from "./AudioContext";
import {
resolveAudioProfile,
@ -39,7 +40,7 @@ import {
} from "./AudioEmitter";
import { audioToUrl } from "../loaders";
import { useSettings } from "./SettingsProvider";
import { useEngineStoreApi, useEngineSelector } from "../state";
import { useEngineStoreApi, useEngineSelector } from "../state/engineStore";
import { streamPlaybackStore } from "../state/streamPlaybackStore";
import type { PlayerEntity } from "../state/gameEntityTypes";
@ -60,8 +61,16 @@ function getArmThread(weaponShape: string | undefined): string {
const NUM_TABLE_ACTION_ANIMS = 8;
/** Table action names in engine order (indices 0-7). */
const TABLE_ACTION_NAMES = ["root", "run", "back", "side", "fall", "jet", "jump", "land"];
const TABLE_ACTION_NAMES = [
"root",
"run",
"back",
"side",
"fall",
"jet",
"jump",
"land",
];
interface ActionAnimEntry {
/** GLB clip name (lowercase, e.g. "diehead"). */
@ -90,7 +99,10 @@ function buildActionAnimMap(
const spaceIdx = entry.indexOf(" ");
if (spaceIdx === -1) continue;
const dsqFile = entry.slice(0, spaceIdx).toLowerCase();
const alias = entry.slice(spaceIdx + 1).trim().toLowerCase();
const alias = entry
.slice(spaceIdx + 1)
.trim()
.toLowerCase();
if (!alias || !dsqFile.startsWith(shapePrefix) || !dsqFile.endsWith(".dsq"))
continue;
const clipName = dsqFile.slice(shapePrefix.length, -4);
@ -131,8 +143,16 @@ function stopLoopingSound(
const sound = soundRef.current;
if (!sound) return;
untrackSound(sound);
try { sound.stop(); } catch { /* already stopped */ }
try { sound.disconnect(); } catch { /* already disconnected */ }
try {
sound.stop();
} catch {
/* already stopped */
}
try {
sound.disconnect();
} catch {
/* already disconnected */
}
parent?.remove(sound);
soundRef.current = null;
stateRef.current = -1;
@ -152,36 +172,44 @@ export function PlayerModel({ entity }: { entity: PlayerEntity }) {
const gltf = useStaticShape(shapeName!);
const shapeAliases = useEngineSelector((state) => {
const sn = shapeName?.toLowerCase();
return sn
? state.runtime.sequenceAliases.get(sn)
: undefined;
return sn ? state.runtime.sequenceAliases.get(sn) : undefined;
});
// Clone scene preserving skeleton bindings, create mixer, find mount bones.
const { clonedScene, mixer, mount0, mount1, iflInitializers } = useMemo(() => {
const scene = SkeletonUtils.clone(gltf.scene) as Group;
const iflInits = processShapeScene(scene);
const { clonedScene, mixer, mount0, mount1, mount2, iflInitializers } =
useMemo(() => {
const scene = SkeletonUtils.clone(gltf.scene) as Group;
const iflInits = processShapeScene(scene);
// Use front-face-only rendering so the camera can see out from inside the
// model in first-person (backface culling hides interior faces).
scene.traverse((n: any) => {
if (n.isMesh && n.material) {
const mats = Array.isArray(n.material) ? n.material : [n.material];
for (const m of mats) m.side = FrontSide;
}
});
// Use front-face-only rendering so the camera can see out from inside the
// model in first-person (backface culling hides interior faces).
scene.traverse((n: any) => {
if (n.isMesh && n.material) {
const mats = Array.isArray(n.material) ? n.material : [n.material];
for (const m of mats) m.side = FrontSide;
}
});
const mix = new AnimationMixer(scene);
const mix = new AnimationMixer(scene);
let m0: Object3D | null = null;
let m1: Object3D | null = null;
scene.traverse((n) => {
if (!m0 && n.name === "Mount0") m0 = n;
if (!m1 && n.name === "Mount1") m1 = n;
});
let m0: Object3D | null = null;
let m1: Object3D | null = null;
let m2: Object3D | null = null;
scene.traverse((n) => {
if (!m0 && n.name === "Mount0") m0 = n;
if (!m1 && n.name === "Mount1") m1 = n;
if (!m2 && n.name === "Mount2") m2 = n;
});
return { clonedScene: scene, mixer: mix, mount0: m0, mount1: m1, iflInitializers: iflInits };
}, [gltf]);
return {
clonedScene: scene,
mixer: mix,
mount0: m0,
mount1: m1,
mount2: m2,
iflInitializers: iflInits,
};
}, [gltf]);
// Build case-insensitive clip lookup with alias support.
const animActionsRef = useRef(new Map<string, AnimationAction>());
@ -226,7 +254,10 @@ export function PlayerModel({ entity }: { entity: PlayerEntity }) {
// place) since multiple player entities share the same GLTF cache.
// Head blend actions.
const blendRefs: typeof blendActionsRef.current = { head: null, headside: null };
const blendRefs: typeof blendActionsRef.current = {
head: null,
headside: null,
};
for (const { key, names } of [
{ key: "head" as const, names: ["head"] },
{ key: "headside" as const, names: ["headside"] },
@ -318,6 +349,8 @@ export function PlayerModel({ entity }: { entity: PlayerEntity }) {
);
const packShapeRef = useRef(entity.packShape);
const [currentPackShape, setCurrentPackShape] = useState(entity.packShape);
const flagShapeRef = useRef(entity.flagShape);
const [currentFlagShape, setCurrentFlagShape] = useState(entity.flagShape);
// Per-frame animation selection and mixer update.
useFrame((_, delta) => {
@ -329,6 +362,10 @@ export function PlayerModel({ entity }: { entity: PlayerEntity }) {
packShapeRef.current = entity.packShape;
setCurrentPackShape(entity.packShape);
}
if (entity.flagShape !== flagShapeRef.current) {
flagShapeRef.current = entity.flagShape;
setCurrentFlagShape(entity.flagShape);
}
const playback = engineStore.getState().playback;
const isPlaying = playback.status === "playing";
const time = streamPlaybackStore.getState().time;
@ -343,9 +380,8 @@ export function PlayerModel({ entity }: { entity: PlayerEntity }) {
isDeadRef.current = true;
// The server sends the death animation as an actionAnim index.
const deathEntry = kf.actionAnim != null
? actionAnimMap.get(kf.actionAnim)
: undefined;
const deathEntry =
kf.actionAnim != null ? actionAnimMap.get(kf.actionAnim) : undefined;
if (deathEntry) {
const deathAction = actions.get(deathEntry.clipName);
if (deathAction) {
@ -368,7 +404,9 @@ export function PlayerModel({ entity }: { entity: PlayerEntity }) {
isDeadRef.current = false;
actionAnimRef.current = undefined;
const deathAction = actions.get(currentAnimRef.current.name.toLowerCase());
const deathAction = actions.get(
currentAnimRef.current.name.toLowerCase(),
);
if (deathAction) {
deathAction.stop();
deathAction.setLoop(LoopRepeat, Infinity);
@ -386,8 +424,10 @@ export function PlayerModel({ entity }: { entity: PlayerEntity }) {
const prevActionAnim = actionAnimRef.current;
if (!isDeadRef.current && actionAnim !== prevActionAnim) {
actionAnimRef.current = actionAnim;
const isNonTableAction = actionAnim != null && actionAnim >= NUM_TABLE_ACTION_ANIMS;
const wasNonTableAction = prevActionAnim != null && prevActionAnim >= NUM_TABLE_ACTION_ANIMS;
const isNonTableAction =
actionAnim != null && actionAnim >= NUM_TABLE_ACTION_ANIMS;
const wasNonTableAction =
prevActionAnim != null && prevActionAnim >= NUM_TABLE_ACTION_ANIMS;
if (isNonTableAction) {
// Start or change action animation.
@ -395,7 +435,9 @@ export function PlayerModel({ entity }: { entity: PlayerEntity }) {
if (entry) {
const actionAction = actions.get(entry.clipName);
if (actionAction) {
const prevAction = actions.get(currentAnimRef.current.name.toLowerCase());
const prevAction = actions.get(
currentAnimRef.current.name.toLowerCase(),
);
if (prevAction) prevAction.fadeOut(ANIM_TRANSITION_TIME);
actionAction.setLoop(LoopOnce, 1);
actionAction.clampWhenFinished = true;
@ -421,7 +463,11 @@ export function PlayerModel({ entity }: { entity: PlayerEntity }) {
}
// If atEnd, clamp the action animation at its final frame.
if (actionAnim != null && actionAnim >= NUM_TABLE_ACTION_ANIMS && kf?.actionAtEnd) {
if (
actionAnim != null &&
actionAnim >= NUM_TABLE_ACTION_ANIMS &&
kf?.actionAtEnd
) {
const entry = actionAnimMap.get(actionAnim);
if (entry) {
const actionAction = actions.get(entry.clipName);
@ -432,7 +478,8 @@ export function PlayerModel({ entity }: { entity: PlayerEntity }) {
}
// Movement animation selection (skip while dead or playing action anim).
const playingActionAnim = actionAnimRef.current != null &&
const playingActionAnim =
actionAnimRef.current != null &&
actionAnimRef.current >= NUM_TABLE_ACTION_ANIMS;
if (!isDeadRef.current && !playingActionAnim) {
const anim = pickMoveAnimation(
@ -518,24 +565,52 @@ export function PlayerModel({ entity }: { entity: PlayerEntity }) {
<primitive object={clonedScene} />
</group>
{currentWeaponShape && mount0 && (
<ShapeErrorBoundary key={currentWeaponShape} fallback={null}>
<Suspense fallback={null}>
<AnimatedWeaponModel
<ShapeErrorBoundary
key={currentWeaponShape}
fallback={<ShapePlaceholder color="red" label={currentWeaponShape} />}
>
<DebugSuspense
label={`Weapon:${entity.id}/${currentWeaponShape}`}
fallback={
<ShapePlaceholder color="cyan" label={currentWeaponShape} />
}
>
<WeaponModel
entity={entity}
weaponShape={currentWeaponShape}
mount0={mount0}
/>
</Suspense>
</DebugSuspense>
</ShapeErrorBoundary>
)}
{currentPackShape && mount1 && (
<ShapeErrorBoundary key={currentPackShape} fallback={null}>
<Suspense fallback={null}>
<MountedPackModel
packShape={currentPackShape}
mountBone={mount1}
/>
</Suspense>
<ShapeErrorBoundary
key={currentPackShape}
fallback={<ShapePlaceholder color="red" label={currentPackShape} />}
>
<DebugSuspense
label={`Pack:${entity.id}/${currentPackShape}`}
fallback={
<ShapePlaceholder color="cyan" label={currentPackShape} />
}
>
<PackModel packShape={currentPackShape} mountBone={mount1} />
</DebugSuspense>
</ShapeErrorBoundary>
)}
{currentFlagShape && mount2 && (
<ShapeErrorBoundary
key={currentFlagShape}
fallback={<ShapePlaceholder color="red" label={currentFlagShape} />}
>
<DebugSuspense
label={`Flag:${entity.id}/${currentFlagShape}`}
fallback={
<ShapePlaceholder color="cyan" label={currentFlagShape} />
}
>
<PackModel packShape={currentFlagShape} mountBone={mount2} />
</DebugSuspense>
</ShapeErrorBoundary>
)}
</>
@ -556,7 +631,9 @@ function buildSeqIndexToName(
try {
const names: string[] = JSON.parse(raw);
return names.map((n) => n.toLowerCase());
} catch { /* fall through */ }
} catch {
/* fall through */
}
}
return animations.map((a) => a.name.toLowerCase());
}
@ -571,7 +648,7 @@ function buildSeqIndexToName(
* from the entity inside useFrame, since these fields are mutated per-tick
* without triggering React re-renders.
*/
function AnimatedWeaponModel({
function WeaponModel({
entity,
weaponShape,
mount0,
@ -584,55 +661,60 @@ function AnimatedWeaponModel({
const weaponGltf = useStaticShape(weaponShape);
// Clone weapon with skeleton bindings, create dedicated mixer.
const { weaponClone, weaponMixer, seqIndexToName, visNodesBySequence, weaponIflInitializers } =
useMemo(() => {
const clone = SkeletonUtils.clone(weaponGltf.scene) as Group;
const iflInits = processShapeScene(clone);
const {
weaponClone,
weaponMixer,
seqIndexToName,
visNodesBySequence,
weaponIflInitializers,
} = useMemo(() => {
const clone = SkeletonUtils.clone(weaponGltf.scene) as Group;
const iflInits = processShapeScene(clone);
// Compute Mountpoint inverse offset so the weapon's grip aligns to Mount0.
const mp = getPosedNodeTransform(
weaponGltf.scene,
weaponGltf.animations,
"Mountpoint",
);
if (mp) {
const invQuat = mp.quaternion.clone().invert();
const invPos = mp.position.clone().negate().applyQuaternion(invQuat);
clone.position.copy(invPos);
clone.quaternion.copy(invQuat);
// Compute Mountpoint inverse offset so the weapon's grip aligns to Mount0.
const mp = getPosedNodeTransform(
weaponGltf.scene,
weaponGltf.animations,
"Mountpoint",
);
if (mp) {
const invQuat = mp.quaternion.clone().invert();
const invPos = mp.position.clone().negate().applyQuaternion(invQuat);
clone.position.copy(invPos);
clone.quaternion.copy(invQuat);
}
// Collect vis-animated meshes grouped by controlling sequence name.
// E.g. the disc launcher's Disc mesh has vis_sequence="discSpin" and is
// hidden by default (vis=0). When "discSpin" plays, the mesh becomes
// visible; when a different sequence plays, it hides again.
const visBySeq = new Map<string, Object3D[]>();
clone.traverse((node: any) => {
if (!node.isMesh) return;
const ud = node.userData;
const seqName = (ud?.vis_sequence ?? "").toLowerCase();
if (!seqName) return;
let list = visBySeq.get(seqName);
if (!list) {
list = [];
visBySeq.set(seqName, list);
}
list.push(node);
});
// Collect vis-animated meshes grouped by controlling sequence name.
// E.g. the disc launcher's Disc mesh has vis_sequence="discSpin" and is
// hidden by default (vis=0). When "discSpin" plays, the mesh becomes
// visible; when a different sequence plays, it hides again.
const visBySeq = new Map<string, Object3D[]>();
clone.traverse((node: any) => {
if (!node.isMesh) return;
const ud = node.userData;
const seqName = (ud?.vis_sequence ?? "").toLowerCase();
if (!seqName) return;
let list = visBySeq.get(seqName);
if (!list) {
list = [];
visBySeq.set(seqName, list);
}
list.push(node);
});
const mix = new AnimationMixer(clone);
const seq = buildSeqIndexToName(
weaponGltf.scene as Group,
weaponGltf.animations,
);
return {
weaponClone: clone,
weaponMixer: mix,
seqIndexToName: seq,
visNodesBySequence: visBySeq,
weaponIflInitializers: iflInits,
};
}, [weaponGltf]);
const mix = new AnimationMixer(clone);
const seq = buildSeqIndexToName(
weaponGltf.scene as Group,
weaponGltf.animations,
);
return {
weaponClone: clone,
weaponMixer: mix,
seqIndexToName: seq,
visNodesBySequence: visBySeq,
weaponIflInitializers: iflInits,
};
}, [weaponGltf]);
// Build case-insensitive action map for weapon animations.
const weaponActionsRef = useRef(new Map<string, AnimationAction>());
@ -760,8 +842,10 @@ function AnimatedWeaponModel({
audioListener &&
animState.soundDataBlockIds.length > 0
) {
const getDb = playback.recording?.streamingPlayback.getDataBlockData
.bind(playback.recording.streamingPlayback);
const getDb =
playback.recording?.streamingPlayback.getDataBlockData.bind(
playback.recording.streamingPlayback,
);
if (getDb) {
for (const soundDbId of animState.soundDataBlockIds) {
const resolved = resolveAudioProfile(soundDbId, getDb);
@ -795,7 +879,9 @@ function AnimatedWeaponModel({
loopingSoundRef.current = sound;
loopingSoundStateRef.current = currentIdx;
});
} catch { /* expected */ }
} catch {
/* expected */
}
}
} else {
playOneShotSound(
@ -814,7 +900,6 @@ function AnimatedWeaponModel({
if (spinActionRef.current) {
spinActionRef.current.timeScale = animState.spinTimeScale;
}
}
// Advance the weapon mixer.
@ -898,9 +983,8 @@ function applyWeaponAnim(
// Scale animation to fit the state timeout if requested.
if (animState.scaleAnimation && animState.timeoutValue > 0) {
const clipDuration = action.getClip().duration;
action.timeScale = clipDuration > 0
? clipDuration / animState.timeoutValue
: 1;
action.timeScale =
clipDuration > 0 ? clipDuration / animState.timeoutValue : 1;
} else {
action.timeScale = animState.reverse ? -1 : 1;
}
@ -921,7 +1005,7 @@ function applyWeaponAnim(
* mounted images (no state machine or animation) — just positioned via
* the pack shape's Mountpoint node inverse offset, same as weapons.
*/
function MountedPackModel({
function PackModel({
packShape,
mountBone,
}: {

7
src/components/PlayerNameplate.tsx
View file

@ -29,7 +29,7 @@ const _tmpVec = new Vector3();
*/
export function PlayerNameplate({ entity }: { entity: PlayerEntity }) {
const gltf = useStaticShape((entity.shapeName ?? entity.dataBlock)!);
const { camera } = useThree();
const camera = useThree((state) => state.camera);
const groupRef = useRef<Object3D>(null);
const iffContainerRef = useRef<HTMLDivElement>(null);
const nameContainerRef = useRef<HTMLDivElement>(null);
@ -75,7 +75,10 @@ export function PlayerNameplate({ entity }: { entity: PlayerEntity }) {
if (!shouldBeVisible) return;
// Hide nameplate when player is dead.
const kf = getKeyframeAtTime(keyframes, streamPlaybackStore.getState().time);
const kf = getKeyframeAtTime(
keyframes,
streamPlaybackStore.getState().time,
);
const health = kf?.health ?? 1;
if (kf?.damageState != null && kf.damageState >= 1) {
if (iffContainerRef.current) iffContainerRef.current.style.opacity = "0";

50
src/components/Projectiles.tsx
View file

@ -16,7 +16,7 @@ import {
setQuaternionFromDir,
} from "../stream/playbackUtils";
import { textureToUrl } from "../loaders";
import type { TracerVisual, SpriteVisual } from "../stream/types";
import { SpriteEntity, TracerEntity } from "../state/gameEntityTypes";
const _tracerDir = new Vector3();
const _tracerDirFromCam = new Vector3();
@ -26,7 +26,8 @@ const _tracerEnd = new Vector3();
const _tracerWorldPos = new Vector3();
const _upY = new Vector3(0, 1, 0);
export function SpriteProjectile({ visual }: { visual: SpriteVisual }) {
export function SpriteProjectile({ entity }: { entity: SpriteEntity }) {
const { visual } = entity;
const url = textureToUrl(visual.texture);
const texture = useTexture(url, (tex) => {
const t = Array.isArray(tex) ? tex[0] : tex;
@ -37,7 +38,12 @@ export function SpriteProjectile({ visual }: { visual: SpriteVisual }) {
// Convert sRGB datablock color to linear for Three.js material.
const color = useMemo(
() =>
new Color().setRGB(visual.color.r, visual.color.g, visual.color.b, SRGBColorSpace),
new Color().setRGB(
visual.color.r,
visual.color.g,
visual.color.b,
SRGBColorSpace,
),
[visual.color.r, visual.color.g, visual.color.b],
);
@ -55,13 +61,8 @@ export function SpriteProjectile({ visual }: { visual: SpriteVisual }) {
);
}
export function TracerProjectile({
entity,
visual,
}: {
entity: { keyframes?: Array<{ position?: [number, number, number]; velocity?: [number, number, number] }>; direction?: [number, number, number] };
visual: TracerVisual;
}) {
export function TracerProjectile({ entity }: { entity: TracerEntity }) {
const { visual } = entity;
const tracerRef = useRef<Mesh>(null);
const tracerPosRef = useRef<BufferAttribute>(null);
const crossRef = useRef<Mesh>(null);
@ -167,14 +168,12 @@ export function TracerProjectile({
/>
<bufferAttribute
attach="attributes-uv"
args={[
new Float32Array([
0, 0, 0, 1, 1, 1, 1, 0,
]),
2,
]}
args={[new Float32Array([0, 0, 0, 1, 1, 1, 1, 0]), 2]}
/>
<bufferAttribute
attach="index"
args={[new Uint16Array([0, 1, 2, 0, 2, 3]), 1]}
/>
<bufferAttribute attach="index" args={[new Uint16Array([0, 1, 2, 0, 2, 3]), 1]} />
</bufferGeometry>
<meshBasicMaterial
map={tracerTexture}
@ -192,24 +191,19 @@ export function TracerProjectile({
attach="attributes-position"
args={[
new Float32Array([
-0.5, 0, -0.5,
0.5, 0, -0.5,
0.5, 0, 0.5,
-0.5, 0, 0.5,
-0.5, 0, -0.5, 0.5, 0, -0.5, 0.5, 0, 0.5, -0.5, 0, 0.5,
]),
3,
]}
/>
<bufferAttribute
attach="attributes-uv"
args={[
new Float32Array([
0, 0, 0, 1, 1, 1, 1, 0,
]),
2,
]}
args={[new Float32Array([0, 0, 0, 1, 1, 1, 1, 0]), 2]}
/>
<bufferAttribute
attach="index"
args={[new Uint16Array([0, 1, 2, 0, 2, 3]), 1]}
/>
<bufferAttribute attach="index" args={[new Uint16Array([0, 1, 2, 0, 2, 3]), 1]} />
</bufferGeometry>
<meshBasicMaterial
map={crossTexture}

2
src/components/RecordingProvider.tsx
View file

@ -1,6 +1,6 @@
import { useCallback, type ReactNode } from "react";
import type { StreamRecording } from "../stream/types";
import { useEngineSelector } from "../state";
import { useEngineSelector } from "../state/engineStore";
export function RecordingProvider({ children }: { children: ReactNode }) {
return <>{children}</>;

2
src/components/RuntimeProvider.tsx
View file

@ -1,7 +1,6 @@
import { createContext, ReactNode, useContext } from "react";
import type { TorqueRuntime } from "../torqueScript";
const RuntimeContext = createContext<TorqueRuntime | null>(null);
export interface RuntimeProviderProps {
@ -24,4 +23,3 @@ export function useRuntime(): TorqueRuntime {
}
return runtime;
}

28
src/components/SceneLighting.tsx
View file

@ -1,9 +1,12 @@
import { useEffect, useMemo } from "react";
import { Color, Vector3 } from "three";
import { createLogger } from "../logger";
import { useSceneSun } from "../state/gameEntityStore";
import { torqueToThree } from "../scene/coordinates";
import { updateGlobalSunUniforms } from "../globalSunUniforms";
const log = createLogger("SceneLighting");
/**
* Renders scene-global lights (directional sun + ambient) derived from the
* Sun entity in the game entity store. Rendered outside EntityScene so that
@ -14,6 +17,25 @@ import { updateGlobalSunUniforms } from "../globalSunUniforms";
export function SceneLighting() {
const sunData = useSceneSun();
useEffect(() => {
if (sunData) {
log.debug(
"sunData: dir=(%s, %s, %s) color=(%s, %s, %s) ambient=(%s, %s, %s)",
sunData.direction.x.toFixed(3),
sunData.direction.y.toFixed(3),
sunData.direction.z.toFixed(3),
sunData.color.r.toFixed(3),
sunData.color.g.toFixed(3),
sunData.color.b.toFixed(3),
sunData.ambient.r.toFixed(3),
sunData.ambient.g.toFixed(3),
sunData.ambient.b.toFixed(3),
);
} else {
log.debug("No sunData — using fallback ambient #888");
}
}, [sunData]);
if (!sunData) {
// Fallback lighting when no Sun entity exists yet
return <ambientLight color="#888888" intensity={1.0} />;
@ -22,7 +44,11 @@ export function SceneLighting() {
return <SunLighting sunData={sunData} />;
}
function SunLighting({ sunData }: { sunData: NonNullable<ReturnType<typeof useSceneSun>> }) {
function SunLighting({
sunData,
}: {
sunData: NonNullable<ReturnType<typeof useSceneSun>>;
}) {
const direction = useMemo(() => {
const [x, y, z] = torqueToThree(sunData.direction);
const len = Math.sqrt(x * x + y * y + z * z);

57
src/components/ServerBrowser.module.css
View file

@ -1,36 +1,14 @@
.Dialog {
position: relative;
composes: Dialog from "./GameDialog.module.css";
width: 860px;
height: 560px;
max-width: calc(100dvw - 40px);
max-height: calc(100dvh - 40px);
display: grid;
grid-template-columns: 100%;
grid-template-rows: auto 1fr auto;
background: rgba(20, 37, 38, 0.8);
border: 1px solid rgba(65, 131, 139, 0.6);
border-radius: 4px;
box-shadow:
0 0 50px rgba(0, 0, 0, 0.4),
inset 0 0 60px rgba(1, 7, 13, 0.6);
color: #b0d5c9;
font-size: 14px;
line-height: 1.5;
overflow: hidden;
outline: none;
user-select: text;
-webkit-touch-callout: default;
}
.Overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
composes: Overlay from "./GameDialog.module.css";
}
.Header {
@ -50,8 +28,18 @@
flex: 1;
}
.HiddenRadio {
position: absolute;
width: 0;
height: 0;
opacity: 0;
z-index: -1;
overflow: hidden;
pointer-events: none;
}
.RefreshButton {
composes: DialogButton from "./DialogButton.module.css";
composes: DialogButton from "./GameDialog.module.css";
padding: 3px 14px;
font-size: 12px;
}
@ -74,6 +62,7 @@
.Table th {
position: sticky;
z-index: 1;
top: 0;
background: rgba(10, 25, 26, 0.95);
padding: 6px 12px;
@ -100,6 +89,8 @@
}
.Table td {
position: relative;
z-index: 0;
padding: 3px 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
white-space: nowrap;
@ -109,15 +100,19 @@
font-weight: 500;
}
.Table tbody tr {
.Table td.EmptyServer {
opacity: 0.4;
}
.Table tbody tr:not(.Empty) {
cursor: pointer;
}
.Table tbody tr:hover {
.Table tbody tr:not(.Empty):hover {
background: rgba(65, 131, 139, 0.12);
}
.Selected {
.Table tbody tr:has(input:checked) {
background: rgba(93, 255, 225, 0.9) !important;
color: #1e2828;
}
@ -128,7 +123,7 @@
font-size: 11px;
}
.Empty {
.Empty td {
text-align: center;
color: rgba(201, 220, 216, 0.3);
padding: 32px 12px !important;
@ -146,12 +141,12 @@
}
.JoinButton {
composes: DialogButton from "./DialogButton.module.css";
composes: DialogButton from "./GameDialog.module.css";
min-width: 100px;
}
.CloseButton {
composes: Secondary from "./DialogButton.module.css";
composes: Secondary from "./GameDialog.module.css";
}
.WarriorField {

234
src/components/ServerBrowser.tsx
View file

@ -1,57 +1,47 @@
import { useState, useEffect, useCallback, useRef, useMemo } from "react";
import type { ServerInfo } from "../../relay/types";
import styles from "./ServerBrowser.module.css";
export function ServerBrowser({
open,
onClose,
servers,
loading,
onRefresh,
onJoin,
wsPing,
warriorName,
onWarriorNameChange,
}: {
open: boolean;
onClose: () => void;
servers: ServerInfo[];
loading: boolean;
onRefresh: () => void;
onJoin: (address: string) => void;
/** Browser↔relay RTT to add to server pings for effective latency. */
wsPing?: number | null;
warriorName: string;
onWarriorNameChange: (name: string) => void;
}) {
import { useLiveSelector } from "../state/liveConnectionStore";
import { useSettings } from "./SettingsProvider";
export function ServerBrowser({ onClose }: { onClose: () => void }) {
const servers = useLiveSelector((s) => s.servers);
const serversLoading = useLiveSelector((s) => s.serversLoading);
const browserToRelayPing = useLiveSelector((s) => s.browserToRelayPing);
const listServers = useLiveSelector((s) => s.listServers);
const joinServer = useLiveSelector((s) => s.joinServer);
const { warriorName, setWarriorName } = useSettings();
const [selectedAddress, setSelectedAddress] = useState<string | null>(null);
const handleJoinSelected = () => {
if (selectedAddress) {
joinServer(selectedAddress, warriorName);
onClose();
}
};
const handleJoin = (address: string) => {
joinServer(address, warriorName);
onClose();
};
const [sortKey, setSortKey] = useState<keyof ServerInfo>("ping");
const [sortDir, setSortDir] = useState<"asc" | "desc">("asc");
const dialogRef = useRef<HTMLDivElement>(null);
const onRefreshRef = useRef(onRefresh);
onRefreshRef.current = onRefresh;
const didAutoRefreshRef = useRef(false);
useEffect(() => {
if (open) {
dialogRef.current?.focus();
try {
document.exitPointerLock();
} catch {
/* expected */
}
} else {
didAutoRefreshRef.current = false;
dialogRef.current?.focus();
try {
document.exitPointerLock();
} catch {
/* expected */
}
}, [open]);
// Refresh on open if no servers cached
}, []);
useEffect(() => {
if (open && servers.length === 0 && !didAutoRefreshRef.current) {
didAutoRefreshRef.current = true;
onRefreshRef.current();
}
}, [open]); // eslint-disable-line react-hooks/exhaustive-deps
listServers();
}, [listServers]);
// Block keyboard events from reaching Three.js while open
useEffect(() => {
if (!open) return;
const handleKeyDown = (e: KeyboardEvent) => {
e.stopPropagation();
if (e.key === "Escape") {
@ -60,7 +50,8 @@ export function ServerBrowser({
};
window.addEventListener("keydown", handleKeyDown, true);
return () => window.removeEventListener("keydown", handleKeyDown, true);
}, [open, onClose]);
}, [onClose]);
const handleSort = useCallback(
(key: keyof ServerInfo) => {
if (sortKey === key) {
@ -85,15 +76,6 @@ export function ServerBrowser({
});
}, [servers, sortDir, sortKey]);
const handleJoin = useCallback(() => {
if (selectedAddress) {
onJoin(selectedAddress);
onClose();
}
}, [selectedAddress, onJoin, onClose]);
if (!open) return null;
return (
<div className={styles.Overlay} onClick={onClose}>
<div
@ -109,75 +91,93 @@ export function ServerBrowser({
</span>
<button
className={styles.RefreshButton}
onClick={onRefresh}
disabled={loading}
onClick={listServers}
disabled={serversLoading}
>
{loading ? "Refreshing..." : "Refresh"}
Refresh
</button>
</div>
<div className={styles.TableWrapper}>
<table className={styles.Table}>
<thead>
<tr>
<th onClick={() => handleSort("name")}>Server Name</th>
<th onClick={() => handleSort("playerCount")}>Players</th>
<th onClick={() => handleSort("ping")}>Ping</th>
<th onClick={() => handleSort("mapName")}>Map</th>
<th onClick={() => handleSort("gameType")}>Type</th>
<th onClick={() => handleSort("mod")}>Mod</th>
</tr>
</thead>
<tbody>
{sorted.map((server) => (
<tr
key={server.address}
className={
selectedAddress === server.address
? styles.Selected
: undefined
}
onClick={() => setSelectedAddress(server.address)}
onDoubleClick={() => {
setSelectedAddress(server.address);
onJoin(server.address);
onClose();
}}
>
<td>
{server.passwordRequired && (
<span className={styles.PasswordIcon}>&#x1F512;</span>
)}
{server.name}
</td>
<td>
{server.playerCount}/{server.maxPlayers}
</td>
<td>
{wsPing != null
? (server.ping + wsPing).toLocaleString()
: "\u2014"}
</td>
<td>{server.mapName}</td>
<td>{server.gameType}</td>
<td>{server.mod}</td>
</tr>
))}
{sorted.length === 0 && !loading && (
<form name="serverList" onSubmit={handleJoinSelected}>
<table className={styles.Table}>
<thead>
<tr>
<td colSpan={6} className={styles.Empty}>
No servers found
</td>
<th onClick={() => handleSort("name")}>Server Name</th>
<th onClick={() => handleSort("playerCount")}>Players</th>
<th onClick={() => handleSort("ping")}>Ping</th>
<th onClick={() => handleSort("mapName")}>Map</th>
<th onClick={() => handleSort("gameType")}>Type</th>
<th onClick={() => handleSort("mod")}>Mod</th>
</tr>
)}
{loading && sorted.length === 0 && (
<tr>
<td colSpan={6} className={styles.Empty}>
Querying master server...
</td>
</tr>
)}
</tbody>
</table>
</thead>
<tbody>
{sorted.map((server) => (
<tr
key={server.address}
onClick={() => {
setSelectedAddress(server.address);
const form = document.forms["serverList"];
const inputs: RadioNodeList =
form.elements["serverAddress"];
const input = Array.from(inputs).find(
(input) => input.value === server.address,
);
input.focus();
}}
onDoubleClick={() => {
setSelectedAddress(server.address);
handleJoin(server.address);
onClose();
}}
>
<td>
<input
type="radio"
className={styles.HiddenRadio}
name="serverAddress"
value={server.address}
checked={selectedAddress === server.address}
onChange={(event) => {
setSelectedAddress(event.target.value);
}}
/>
{server.passwordRequired && (
<span className={styles.PasswordIcon}>&#x1F512;</span>
)}
{server.name}
</td>
<td
className={
server.playerCount === 0
? styles.EmptyServer
: undefined
}
>
{server.playerCount}&thinsp;/&thinsp;{server.maxPlayers}
</td>
<td>
{browserToRelayPing != null
? (server.ping + browserToRelayPing).toLocaleString()
: "\u2014"}
</td>
<td>{server.mapName}</td>
<td>{server.gameType}</td>
<td>{server.mod}</td>
</tr>
))}
{sorted.length === 0 && !serversLoading && (
<tr className={styles.Empty}>
<td colSpan={6}>No servers found</td>
</tr>
)}
{serversLoading && sorted.length === 0 && (
<tr className={styles.Empty}>
<td colSpan={6}>Querying master server…</td>
</tr>
)}
</tbody>
</table>
</form>
</div>
<div className={styles.Footer}>
<div className={styles.WarriorField}>
@ -189,7 +189,7 @@ export function ServerBrowser({
className={styles.WarriorInput}
type="text"
value={warriorName}
onChange={(e) => onWarriorNameChange(e.target.value)}
onChange={(e) => setWarriorName(e.target.value)}
placeholder="Name thyself…"
maxLength={24}
/>
@ -199,7 +199,7 @@ export function ServerBrowser({
Cancel
</button>
<button
onClick={handleJoin}
onClick={handleJoinSelected}
disabled={!selectedAddress}
className={styles.JoinButton}
>

80
src/components/SettingsProvider.tsx
View file

@ -27,11 +27,15 @@ type SettingsContext = {
setAnimationEnabled: StateSetter<boolean>;
warriorName: string;
setWarriorName: StateSetter<string>;
audioVolume: number;
setAudioVolume: StateSetter<number>;
};
type DebugContext = {
debugMode: boolean;
setDebugMode: StateSetter<boolean>;
renderOnDemand: boolean;
setRenderOnDemand: StateSetter<boolean>;
};
type ControlsContext = {
@ -39,6 +43,12 @@ type ControlsContext = {
setSpeedMultiplier: StateSetter<number>;
touchMode: TouchMode;
setTouchMode: StateSetter<TouchMode>;
invertScroll: boolean;
setInvertScroll: StateSetter<boolean>;
invertDrag: boolean;
setInvertDrag: StateSetter<boolean>;
invertJoystick: boolean;
setInvertJoystick: StateSetter<boolean>;
};
const SettingsContext = createContext<SettingsContext | null>(null);
@ -55,6 +65,10 @@ type PersistedSettings = {
debugMode?: boolean;
touchMode?: TouchMode;
warriorName?: string;
audioVolume?: number;
invertScroll?: boolean;
invertDrag?: boolean;
invertJoystick?: boolean;
};
export function useSettings() {
@ -83,10 +97,15 @@ export function SettingsProvider({
const [speedMultiplier, setSpeedMultiplier] = useState(1);
const [fov, setFov] = useState(90);
const [audioEnabled, setAudioEnabled] = useState(false);
const [audioVolume, setAudioVolume] = useState(0.75);
const [animationEnabled, setAnimationEnabled] = useState(true);
const [debugMode, setDebugMode] = useState(false);
const [touchMode, setTouchMode] = useState<TouchMode>("moveLookStick");
const [warriorName, setWarriorName] = useState("MapGenius");
const [invertScroll, setInvertScroll] = useState(false);
const [invertDrag, setInvertDrag] = useState(false);
const [invertJoystick, setInvertJoystick] = useState(false);
const [renderOnDemand, setRenderOnDemand] = useState(false);
const setFogEnabledWithoutOverride: StateSetter<boolean> = useCallback(
(value) => {
@ -110,6 +129,8 @@ export function SettingsProvider({
setAnimationEnabled,
warriorName,
setWarriorName,
audioVolume,
setAudioVolume,
}),
[
fogEnabled,
@ -120,21 +141,46 @@ export function SettingsProvider({
audioEnabled,
animationEnabled,
warriorName,
audioVolume,
],
);
const debugContext: DebugContext = useMemo(
() => ({ debugMode, setDebugMode }),
[debugMode, setDebugMode],
() => ({
debugMode,
setDebugMode,
renderOnDemand,
setRenderOnDemand,
}),
[debugMode, setDebugMode, renderOnDemand],
);
const controlsContext: ControlsContext = useMemo(
() => ({ speedMultiplier, setSpeedMultiplier, touchMode, setTouchMode }),
[speedMultiplier, setSpeedMultiplier, touchMode, setTouchMode],
() => ({
speedMultiplier,
setSpeedMultiplier,
touchMode,
setTouchMode,
invertScroll,
setInvertScroll,
invertDrag,
setInvertDrag,
invertJoystick,
setInvertJoystick,
}),
[
speedMultiplier,
setSpeedMultiplier,
touchMode,
setTouchMode,
invertScroll,
invertDrag,
invertJoystick,
],
);
// Read persisted settings from localStorage.
useLayoutEffect(() => {
useEffect(() => {
let savedSettings: PersistedSettings = {};
try {
savedSettings = JSON.parse(localStorage.getItem("settings")) || {};
@ -157,7 +203,9 @@ export function SettingsProvider({
setHighQualityFog(savedSettings.highQualityFog);
}
if (savedSettings.speedMultiplier != null) {
setSpeedMultiplier(savedSettings.speedMultiplier);
setSpeedMultiplier(
Math.max(0, Math.min(1, savedSettings.speedMultiplier)),
);
}
if (savedSettings.fov != null) {
setFov(savedSettings.fov);
@ -168,6 +216,18 @@ export function SettingsProvider({
if (savedSettings.warriorName != null) {
setWarriorName(savedSettings.warriorName);
}
if (savedSettings.audioVolume != null) {
setAudioVolume(savedSettings.audioVolume);
}
if (savedSettings.invertScroll != null) {
setInvertScroll(savedSettings.invertScroll);
}
if (savedSettings.invertDrag != null) {
setInvertDrag(savedSettings.invertDrag);
}
if (savedSettings.invertJoystick != null) {
setInvertJoystick(savedSettings.invertJoystick);
}
}, []);
// Persist settings to localStorage with debouncing to avoid excessive writes
@ -191,6 +251,10 @@ export function SettingsProvider({
debugMode,
touchMode,
warriorName,
audioVolume,
invertScroll,
invertDrag,
invertJoystick,
};
try {
localStorage.setItem("settings", JSON.stringify(settingsToSave));
@ -214,6 +278,10 @@ export function SettingsProvider({
debugMode,
touchMode,
warriorName,
audioVolume,
invertScroll,
invertDrag,
invertJoystick,
]);
return (

28
src/components/ShapeErrorBoundary.tsx Normal file
View file

@ -0,0 +1,28 @@
import { Component } from "react";
import type { ErrorInfo, ReactNode } from "react";
import { createLogger } from "../logger";
const log = createLogger("ShapeErrorBoundary");
/** Error boundary that renders a fallback when shape loading fails. */
export class ShapeErrorBoundary extends Component<
{ children: ReactNode; fallback: ReactNode },
{ hasError: boolean }
> {
state = { hasError: false };
static getDerivedStateFromError() {
return { hasError: true };
}
componentDidCatch(error: Error, info: ErrorInfo) {
log.error("Shape load failed: %s %s", error.message, info.componentStack);
}
render() {
if (this.state.hasError) {
return this.props.fallback;
}
return this.props.children;
}
}

61
src/components/ShapeModel.tsx
View file

@ -1,13 +1,8 @@
import { useEffect, useMemo, useRef } from "react";
import { useFrame } from "@react-three/fiber";
import {
AnimationMixer,
LoopOnce,
Quaternion,
Vector3,
} from "three";
import { AnimationMixer, LoopOnce, Quaternion, Vector3 } from "three";
import type { Group, Material } from "three";
import { effectNow, engineStore } from "../state";
import { effectNow, engineStore } from "../state/engineStore";
import * as SkeletonUtils from "three/examples/jsm/utils/SkeletonUtils.js";
import {
_r90,
@ -21,14 +16,11 @@ import {
updateAtlasFrame,
} from "./useIflTexture";
import type { IflAtlas } from "./useIflTexture";
import {
ShapeRenderer,
useStaticShape,
} from "./GenericShape";
import { ShapeRenderer, useStaticShape } from "./GenericShape";
import { ShapeInfoProvider } from "./ShapeInfoProvider";
import type { TorqueObject } from "../torqueScript";
import type { StreamEntity } from "../stream/types";
import type { StreamingPlayback } from "../stream/types";
import type { ExplosionEntity } from "../state/gameEntityTypes";
import { streamPlaybackStore } from "../state/streamPlaybackStore";
/**
* Map weapon shape to the arm blend animation (armThread).
@ -167,7 +159,13 @@ function extractSizeKeyframes(expBlock: Record<string, unknown>): {
const rawTimes = expBlock.times as number[] | undefined;
if (!Array.isArray(rawSizes) || rawSizes.length === 0) {
return { times: [0, 1], sizes: [[1, 1, 1], [1, 1, 1]] };
return {
times: [0, 1],
sizes: [
[1, 1, 1],
[1, 1, 1],
],
};
}
// sizes are packed as value*100 integers on the wire; divide by 100.
@ -210,14 +208,9 @@ function interpolateSize(
* Renders an explosion DTS shape using useStaticShape (shared GLTF cache)
* with custom rendering for faceViewer, vis/IFL animation, and size keyframes.
*/
export function ExplosionShape({
entity,
playback,
}: {
entity: StreamEntity;
playback: StreamingPlayback;
}) {
const gltf = useStaticShape(entity.dataBlock!);
export function ExplosionShape({ entity }: { entity: ExplosionEntity }) {
const playback = streamPlaybackStore.getState().playback;
const gltf = useStaticShape(entity.shapeName!);
const groupRef = useRef<Group>(null);
const startTimeRef = useRef(effectNow());
// eslint-disable-next-line react-hooks/purity
@ -256,7 +249,9 @@ export function ExplosionShape({
const iflInfos: IflInfo[] = [];
scene.traverse((node: any) => {
if (!node.isMesh || !node.material) return;
const mat = Array.isArray(node.material) ? node.material[0] : node.material;
const mat = Array.isArray(node.material)
? node.material[0]
: node.material;
if (!mat?.userData) return;
const flags = new Set<string>(mat.userData.flag_names ?? []);
const rp: string | undefined = mat.userData.resource_path;
@ -270,12 +265,13 @@ export function ExplosionShape({
: undefined,
duration: ud?.ifl_duration ? Number(ud.ifl_duration) : undefined,
cyclic: ud?.ifl_sequence ? !!ud.ifl_cyclic : undefined,
toolBegin: ud?.ifl_tool_begin != null ? Number(ud.ifl_tool_begin) : undefined,
toolBegin:
ud?.ifl_tool_begin != null ? Number(ud.ifl_tool_begin) : undefined,
});
}
});
processShapeScene(scene, entity.dataBlock);
processShapeScene(scene, entity.shapeName);
// Collect vis-animated nodes keyed by sequence name.
const visNodes: VisNode[] = [];
@ -290,7 +286,12 @@ export function ExplosionShape({
return;
// Only include vis nodes tied to the "ambient" sequence.
if (seqName === "ambient") {
visNodes.push({ mesh: node, keyframes: kf, duration: dur, cyclic: !!ud.vis_cyclic });
visNodes.push({
mesh: node,
keyframes: kf,
duration: dur,
cyclic: !!ud.vis_cyclic,
});
}
});
@ -340,7 +341,9 @@ export function ExplosionShape({
});
// Disable frustum culling (explosion may scale beyond bounds).
scene.traverse((child) => { child.frustumCulled = false; });
scene.traverse((child) => {
child.frustumCulled = false;
});
return { scene, mixer, visNodes, iflInfos, materials };
}, [gltf, expBlock]);
@ -369,8 +372,8 @@ export function ExplosionShape({
if (!group) return;
const playbackState = engineStore.getState().playback;
const effectDelta = playbackState.status === "playing"
? delta * playbackState.rate : 0;
const effectDelta =
playbackState.status === "playing" ? delta * playbackState.rate : 0;
const elapsed = effectNow() - startTimeRef.current;
const t = Math.min(elapsed / lifetimeMS, 1);

16
src/components/ShapeSelect.tsx
View file

@ -1,10 +1,4 @@
import {
startTransition,
useEffect,
useMemo,
useRef,
useState,
} from "react";
import { startTransition, useEffect, useMemo, useRef, useState } from "react";
import {
Combobox,
ComboboxItem,
@ -166,7 +160,9 @@ export function ShapeSelect({
onFocus={() => {
try {
document.exitPointerLock();
} catch { /* expected */ }
} catch {
/* expected */
}
combobox.show();
}}
onKeyDown={(e) => {
@ -197,9 +193,7 @@ export function ShapeSelect({
{shapes.map(renderItem)}
</ComboboxGroup>
))}
{noResults && (
<div className={styles.NoResults}>No shapes found</div>
)}
{noResults && <div className={styles.NoResults}>No shapes found</div>}
</ComboboxList>
</ComboboxPopover>
</ComboboxProvider>

76
src/components/Sky.tsx
View file

@ -1,9 +1,9 @@
import { Suspense, useMemo, useEffect, useRef } from "react";
import { memo, Suspense, useMemo, useEffect, useRef } from "react";
import { useQuery } from "@tanstack/react-query";
import { useThree, useFrame } from "@react-three/fiber";
import { useCubeTexture } from "@react-three/drei";
import { Color, Fog } from "three";
import type { SceneSky } from "../scene/types";
import { createLogger } from "../logger";
import { useSettings } from "./SettingsProvider";
import { loadDetailMapList, textureToUrl } from "../loaders";
import { CloudLayers } from "./CloudLayers";
@ -16,10 +16,13 @@ import {
resetGlobalFogUniforms,
} from "../globalFogUniforms";
const log = createLogger("Sky");
// Track if fog shader has been installed (idempotent installation)
let fogShaderInstalled = false;
import type { Color3 } from "../scene/types";
import { SkyEntity } from "../state/gameEntityTypes";
/** Convert a Color3 to [sRGB Color, linear Color]. */
function color3ToThree(c: Color3): [Color, Color] {
@ -33,10 +36,25 @@ function color3ToThree(c: Color3): [Color, Color] {
* Load a .dml file, used to list the textures for different faces of a skybox.
*/
function useDetailMapList(name: string) {
return useQuery({
const result = useQuery({
queryKey: ["detailMapList", name],
queryFn: () => loadDetailMapList(name),
queryFn: () => {
log.debug("Loading detail map list: %s", name);
return loadDetailMapList(name);
},
});
useEffect(() => {
log.debug(
"DML query status: %s%s%s file=%s",
result.status,
result.error ? ` error=${result.error.message}` : "",
result.data ? ` (${result.data.length} entries)` : " (no data)",
name,
);
}, [result.status, result.error, result.data, name]);
return result;
}
/**
@ -56,7 +74,7 @@ function SkyBoxTexture({
fogColor?: Color;
fogState?: FogState;
}) {
const { camera } = useThree();
const camera = useThree((state) => state.camera);
const skyBox = useCubeTexture(skyBoxFiles, { path: "" });
const enableFog = !!fogColor;
@ -320,7 +338,7 @@ function SolidColorSky({
fogColor?: Color;
fogState?: FogState;
}) {
const { camera } = useThree();
const camera = useThree((state) => state.camera);
const enableFog = !!fogColor;
@ -515,7 +533,8 @@ function DynamicFog({
fogState: FogState;
enabled: boolean;
}) {
const { scene, camera } = useThree();
const scene = useThree((state) => state.scene);
const camera = useThree((state) => state.camera);
const fogRef = useRef<Fog | null>(null);
// Pack fog volume data once (it doesn't change during runtime)
@ -594,29 +613,43 @@ function DynamicFog({
return null;
}
export function Sky({ scene }: { scene: SceneSky }) {
export const Sky = memo(function Sky({ entity }: { entity: SkyEntity }) {
const { skyData } = entity;
log.debug(
"Rendering: materialList=%s, useSkyTextures=%s",
skyData.materialList,
skyData.useSkyTextures,
);
const { fogEnabled } = useSettings();
// Skybox textures
const materialList = scene.materialList || undefined;
const materialList = skyData.materialList || undefined;
const skySolidColor = useMemo(
() => color3ToThree(scene.skySolidColor),
[scene.skySolidColor],
() => color3ToThree(skyData.skySolidColor),
[skyData.skySolidColor],
);
const useSkyTextures = scene.useSkyTextures;
const useSkyTextures = skyData.useSkyTextures;
// Parse full fog state from typed scene sky
const fogState = useMemo(
() => fogStateFromScene(scene),
[scene],
const fogState = useMemo(() => fogStateFromScene(skyData), [skyData]);
log.debug(
"fogState: fogColor=(%s, %s, %s) visibleDistance=%d fogDistance=%d enabled=%s volumes=%d",
skyData.fogColor.r.toFixed(3),
skyData.fogColor.g.toFixed(3),
skyData.fogColor.b.toFixed(3),
skyData.visibleDistance,
skyData.fogDistance,
fogState.enabled,
fogState.fogVolumes.length,
);
// Get sRGB fog color for background
const fogColor = useMemo(
() => color3ToThree(scene.fogColor),
[scene.fogColor],
() => color3ToThree(skyData.fogColor),
[skyData.fogColor],
);
const skyColor = skySolidColor || fogColor;
@ -629,7 +662,8 @@ export function Sky({ scene }: { scene: SceneSky }) {
// Set scene background color directly using useThree
// This ensures the gap between fogged terrain and skybox blends correctly
const { scene: threeScene, gl } = useThree();
const threeScene = useThree((state) => state.scene);
const gl = useThree((state) => state.gl);
useEffect(() => {
if (hasFogParams) {
// Use effective fog color for background (matches terrain fog)
@ -655,7 +689,7 @@ export function Sky({ scene }: { scene: SceneSky }) {
return (
<>
{materialList && useSkyTextures && materialList.length > 0 ? (
<Suspense fallback={null}>
<Suspense>
{/* Key forces remount when mission changes to clear texture caches */}
<SkyBox
key={materialList}
@ -674,7 +708,7 @@ export function Sky({ scene }: { scene: SceneSky }) {
) : null}
{/* Cloud layers render independently of skybox textures */}
<Suspense>
<CloudLayers scene={scene} />
<CloudLayers scene={skyData} />
</Suspense>
{/* Always render DynamicFog when mission has fog params.
Pass fogEnabled to control visibility - this avoids shader recompilation
@ -684,4 +718,4 @@ export function Sky({ scene }: { scene: SceneSky }) {
) : null}
</>
);
}
});

9
src/components/StreamPlayback.tsx
View file

@ -1,9 +0,0 @@
import { useRecording } from "./RecordingProvider";
import { StreamingController } from "./StreamingController";
export function StreamPlayback() {
const recording = useRecording();
if (!recording) return null;
return <StreamingController recording={recording} />;
}

158
src/components/StreamingController.tsx
View file

@ -1,10 +1,7 @@
import { Suspense, useCallback, useEffect, useRef, useState } from "react";
import { useFrame } from "@react-three/fiber";
import { useGLTF } from "@react-three/drei";
import {
Quaternion,
Vector3,
} from "three";
import { Quaternion, Vector3 } from "three";
import {
DEFAULT_EYE_HEIGHT,
STREAM_TICK_SEC,
@ -14,7 +11,7 @@ import { shapeToUrl } from "../loaders";
import { ParticleEffects } from "./ParticleEffects";
import { PlayerEyeOffset } from "./PlayerModel";
import { stopAllTrackedSounds } from "./AudioEmitter";
import { useEngineStoreApi, advanceEffectClock } from "../state";
import { useEngineStoreApi, advanceEffectClock } from "../state/engineStore";
import { gameEntityStore } from "../state/gameEntityStore";
import {
streamPlaybackStore,
@ -33,7 +30,9 @@ type EntityById = Map<string, StreamEntity>;
/** Safely access a field that exists only on some GameEntity variants. */
function getField(entity: GameEntity, field: string): string | undefined {
return (entity as unknown as Record<string, unknown>)[field] as string | undefined;
return (entity as unknown as Record<string, unknown>)[field] as
| string
| undefined;
}
/** Mutate render-affecting fields on an entity in-place from stream data.
@ -49,6 +48,7 @@ function mutateRenderFields(
e.threads = stream.threads;
e.weaponShape = stream.weaponShape;
e.packShape = stream.packShape;
e.flagShape = stream.flagShape;
e.falling = stream.falling;
e.jetting = stream.jetting;
e.weaponImageState = stream.weaponImageState;
@ -98,8 +98,11 @@ const _billboardFlip = new Quaternion(0, 1, 0, 0); // 180° around Y
const _orbitDir = new Vector3();
const _orbitTarget = new Vector3();
const _orbitCandidate = new Vector3();
export function StreamingController({ recording }: { recording: StreamRecording }) {
export function StreamingController({
recording,
}: {
recording: StreamRecording;
}) {
const engineStore = useEngineStoreApi();
const playbackClockRef = useRef(0);
const prevTickSnapshotRef = useRef<StreamSnapshot | null>(null);
@ -117,30 +120,42 @@ export function StreamingController({ recording }: { recording: StreamRecording
const prevMap = entityMapRef.current;
const nextMap = new Map<string, GameEntity>();
let shouldRebuild = false;
for (const entity of snapshot.entities) {
let renderEntity = prevMap.get(entity.id);
// Identity change -> new component (unmount/remount).
// Compare fields that, when changed, require a full entity rebuild.
// Only compare shapeName for entity types that actually use it.
// Scene entities (Terrain, Interior, Sky, etc.), ForceFieldBare,
// AudioEmitter, WayPoint, and Camera don't have shapeName on their
// GameEntity, so comparing against entity.dataBlock would always
// mismatch and trigger a needless rebuild every frame.
const hasShapeName =
renderEntity &&
(renderEntity.renderType === "Shape" ||
renderEntity.renderType === "Player" ||
renderEntity.renderType === "Explosion");
const needsNewIdentity =
!renderEntity ||
renderEntity.className !== (entity.className ?? entity.type) ||
renderEntity.ghostIndex !== entity.ghostIndex ||
renderEntity.dataBlockId !== entity.dataBlockId ||
renderEntity.shapeHint !== entity.shapeHint ||
getField(renderEntity, "shapeName") !== entity.dataBlock ||
(hasShapeName &&
entity.dataBlock != null &&
getField(renderEntity, "shapeName") !== entity.dataBlock) ||
// weaponShape changes only force rebuild for non-Player shapes
// (turrets, vehicles). Players handle weapon changes internally
// via PlayerModel's Mount0 bone, and rebuilding on weapon change
// would lose animation state (death animations, etc.).
(renderEntity.renderType !== "Player" &&
hasShapeName &&
getField(renderEntity, "weaponShape") !== entity.weaponShape);
if (needsNewIdentity) {
renderEntity = streamEntityToGameEntity(entity, snapshot.timeSec);
shouldRebuild = true;
} else {
// Mutate render fields in-place on the existing entity object.
// Components read these imperatively in useFrame — no React
@ -153,7 +168,8 @@ export function StreamingController({ recording }: { recording: StreamRecording
// Keyframe update (mutable -- used for fallback position for
// retained explosion entities and per-frame reads in useFrame).
// Scene entities and None don't have keyframes.
if (isSceneEntity(renderEntity) || renderEntity.renderType === "None") continue;
if (isSceneEntity(renderEntity) || renderEntity.renderType === "None")
continue;
const keyframes = renderEntity.keyframes!;
if (keyframes.length === 0) {
keyframes.push({
@ -189,12 +205,12 @@ export function StreamingController({ recording }: { recording: StreamRecording
continue;
}
}
// Entity removed (or retention expired).
shouldRebuild = true;
}
// Detect new entities added.
if (nextMap.size !== prevMap.size) shouldRebuild = true;
// Only push to store when the entity set changed (adds/removes).
const shouldRebuild =
nextMap.size !== prevMap.size ||
[...nextMap.keys()].some((id) => !prevMap.has(id));
entityMapRef.current = nextMap;
if (shouldRebuild) {
@ -202,7 +218,10 @@ export function StreamingController({ recording }: { recording: StreamRecording
}
let nextFirstPersonShape: string | null = null;
if (snapshot.camera?.mode === "first-person" && snapshot.camera.controlEntityId) {
if (
snapshot.camera?.mode === "first-person" &&
snapshot.camera.controlEntityId
) {
const entity = nextMap.get(snapshot.camera.controlEntityId);
const sn = entity ? getField(entity, "shapeName") : undefined;
if (sn) {
@ -231,13 +250,31 @@ export function StreamingController({ recording }: { recording: StreamRecording
const stream = streamRef.current;
streamPlaybackStore.setState({ playback: stream });
gameEntityStore.getState().beginStreaming();
gameEntityStore.getState().beginStreaming(recording.source);
if (!stream) {
engineStore.getState().setPlaybackStreamSnapshot(null);
return;
}
// Update gameEntityStore when mission info arrives via server messages
// (MsgMissionDropInfo, MsgLoadInfo, MsgClientReady).
stream.onMissionInfoChange = () => {
gameEntityStore.getState().setMissionInfo({
missionDisplayName: stream.missionDisplayName ?? undefined,
missionTypeDisplayName: stream.missionTypeDisplayName ?? undefined,
gameClassName: stream.gameClassName ?? undefined,
recorderName: stream.connectedPlayerName ?? undefined,
});
};
// Save pre-populated mission info before reset clears it.
const savedMissionDisplayName = stream.missionDisplayName;
const savedMissionTypeDisplayName = stream.missionTypeDisplayName;
const savedGameClassName = stream.gameClassName;
const savedServerDisplayName = stream.serverDisplayName;
const savedConnectedPlayerName = stream.connectedPlayerName;
// Reset the stream cursor for demo playback (replay from the beginning).
// For live streams, skip reset — the adapter is already receiving packets
// and has accumulated protocol state (net strings, target info, sensor
@ -245,6 +282,26 @@ export function StreamingController({ recording }: { recording: StreamRecording
if (recording.source !== "live") {
stream.reset();
}
// Restore mission info fields that were parsed from the initial block
// (demoValues) — reset() clears them but they won't be re-sent.
stream.missionDisplayName = savedMissionDisplayName;
stream.missionTypeDisplayName = savedMissionTypeDisplayName;
stream.gameClassName = savedGameClassName;
stream.serverDisplayName = savedServerDisplayName;
stream.connectedPlayerName = savedConnectedPlayerName;
gameEntityStore.getState().setMissionInfo({
missionName: recording.missionName ?? undefined,
missionTypeDisplayName: recording.gameType ?? undefined,
missionDisplayName: savedMissionDisplayName ?? undefined,
gameClassName: savedGameClassName ?? undefined,
serverDisplayName:
savedServerDisplayName ?? recording.serverDisplayName ?? undefined,
recorderName:
savedConnectedPlayerName ?? recording.recorderName ?? undefined,
recordingDate: recording.recordingDate ?? undefined,
});
// Preload weapon effect shapes (explosions) so they're cached before
// the first projectile detonates -- otherwise the GLB fetch latency
// causes the short-lived explosion entity to expire before it renders.
@ -264,9 +321,11 @@ export function StreamingController({ recording }: { recording: StreamRecording
return () => {
stopAllTrackedSounds();
gameEntityStore.getState().endStreaming();
// Null out streamRef so useFrame stops syncing entities.
streamRef.current = null;
// Don't call endStreaming() or clear the snapshot — leave entities,
// HUD, and chat in place as a frozen snapshot after disconnect.
resetStreamPlayback();
engineStore.getState().setPlaybackStreamSnapshot(null);
};
}, [recording, engineStore, syncRenderableEntities]);
@ -279,9 +338,11 @@ export function StreamingController({ recording }: { recording: StreamRecording
const isPlaying = playback.status === "playing";
const requestedTimeSec = playback.timeMs / 1000;
const externalSeekWhilePaused =
!isPlaying && Math.abs(requestedTimeSec - playbackClockRef.current) > 0.0005;
!isPlaying &&
Math.abs(requestedTimeSec - playbackClockRef.current) > 0.0005;
const externalSeekWhilePlaying =
isPlaying && Math.abs(requestedTimeSec - streamPlaybackStore.getState().time) > 0.05;
isPlaying &&
Math.abs(requestedTimeSec - streamPlaybackStore.getState().time) > 0.05;
const isSeeking = externalSeekWhilePaused || externalSeekWhilePlaying;
if (isSeeking) {
// Sync stream cursor to UI/programmatic seek.
@ -334,7 +395,10 @@ export function StreamingController({ recording }: { recording: StreamRecording
streamPlaybackStore.setState({ time: playbackClockRef.current });
if (snapshot.exhausted && isPlaying) {
playbackClockRef.current = Math.min(playbackClockRef.current, snapshot.timeSec);
playbackClockRef.current = Math.min(
playbackClockRef.current,
snapshot.timeSec,
);
}
syncRenderableEntities(renderCurrent);
@ -404,7 +468,8 @@ export function StreamingController({ recording }: { recording: StreamRecording
const perspectiveCamera = state.camera as any;
const fovValue =
previousCamera && Number.isFinite(previousCamera.fov)
? previousCamera.fov + (currentCamera.fov - previousCamera.fov) * interpT
? previousCamera.fov +
(currentCamera.fov - previousCamera.fov) * interpT
: currentCamera.fov;
const verticalFov = torqueHorizontalFovToThreeVerticalFov(
fovValue,
@ -436,7 +501,10 @@ export function StreamingController({ recording }: { recording: StreamRecording
// snapshot lifetime) won't be in the snapshot entity map. Fall back
// to their last-known keyframe position from the render entity.
if (!entity) {
const kfs = renderEntity && "keyframes" in renderEntity ? renderEntity.keyframes : undefined;
const kfs =
renderEntity && "keyframes" in renderEntity
? renderEntity.keyframes
: undefined;
if (kfs?.[0]?.position) {
const kf = kfs[0];
child.visible = true;
@ -463,11 +531,17 @@ export function StreamingController({ recording }: { recording: StreamRecording
const iz = pz + (cz - pz) * interpT;
child.position.set(iy, iz, ix);
} else {
child.position.set(entity.position[1], entity.position[2], entity.position[0]);
child.position.set(
entity.position[1],
entity.position[2],
entity.position[0],
);
}
if (entity.faceViewer) {
child.quaternion.copy(state.camera.quaternion).multiply(_billboardFlip);
child.quaternion
.copy(state.camera.quaternion)
.multiply(_billboardFlip);
} else if (entity.visual?.kind === "tracer") {
child.quaternion.identity();
} else if (entity.rotation) {
@ -486,7 +560,13 @@ export function StreamingController({ recording }: { recording: StreamRecording
const mode = currentCamera?.mode;
// In live mode, LiveObserver handles orbit positioning from predicted
// angles so the orbit responds at frame rate. Skip here to avoid fighting.
if (!freeFly && !isLive && mode === "third-person" && root && currentCamera?.orbitTargetId) {
if (
!freeFly &&
!isLive &&
mode === "third-person" &&
root &&
currentCamera?.orbitTargetId
) {
const targetGroup = root.children.find(
(child) => child.name === currentCamera.orbitTargetId,
);
@ -530,7 +610,9 @@ export function StreamingController({ recording }: { recording: StreamRecording
if (hasDirection) {
_orbitDir.normalize();
const orbitDistance = Math.max(0.1, currentCamera.orbitDistance ?? 4);
_orbitCandidate.copy(_orbitTarget).addScaledVector(_orbitDir, orbitDistance);
_orbitCandidate
.copy(_orbitTarget)
.addScaledVector(_orbitDir, orbitDistance);
state.camera.position.copy(_orbitCandidate);
state.camera.lookAt(_orbitTarget);
@ -538,12 +620,19 @@ export function StreamingController({ recording }: { recording: StreamRecording
}
}
if (!freeFly && mode === "first-person" && root && currentCamera?.controlEntityId) {
if (
!freeFly &&
mode === "first-person" &&
root &&
currentCamera?.controlEntityId
) {
const playerGroup = root.children.find(
(child) => child.name === currentCamera.controlEntityId,
);
if (playerGroup) {
_tmpVec.copy(eyeOffsetRef.current).applyQuaternion(playerGroup.quaternion);
_tmpVec
.copy(eyeOffsetRef.current)
.applyQuaternion(playerGroup.quaternion);
state.camera.position.add(_tmpVec);
} else {
state.camera.position.y += eyeOffsetRef.current.y;
@ -567,8 +656,11 @@ export function StreamingController({ recording }: { recording: StreamRecording
snapshotRef={currentTickSnapshotRef}
/>
{firstPersonShape && (
<Suspense fallback={null}>
<PlayerEyeOffset shapeName={firstPersonShape} eyeOffsetRef={eyeOffsetRef} />
<Suspense>
<PlayerEyeOffset
shapeName={firstPersonShape}
eyeOffsetRef={eyeOffsetRef}
/>
</Suspense>
)}
</>

90
src/components/StreamingMissionInfo.module.css Normal file
View file

@ -0,0 +1,90 @@
.Header {
flex: 1 1 auto;
display: flex;
align-items: center;
}
.MissionInfo {
display: flex;
align-items: center;
gap: 6px;
margin: 10px auto 10px 4px;
border: 1px solid rgba(255, 255, 255, 0);
border-radius: 3px;
background: rgba(0, 0, 0, 0);
color: #fff;
padding: 5px 8px;
}
.MissionName {
composes: SelectedName from "./MissionSelect.module.css";
}
.MissionType {
composes: ItemType from "./MissionSelect.module.css";
pointer-events: none;
}
.MissionTypeDisplayName {
font-size: 12px;
opacity: 0.5;
}
.Metadata {
display: flex;
flex-direction: column;
gap: 2px;
font-size: 12px;
line-height: calc(14 / 12);
text-align: right;
padding: 8px 12px;
margin: 0 0 0 auto;
}
.Attribution,
.ServerInfo {
color: #83938b;
}
.PlayerName,
.RecordingDate,
.ServerName {
color: #eceae7;
}
.ActionButton {
composes: IconButton from "./InspectorControls.module.css";
flex: 0 0 auto;
margin: 0 10px 0 0;
font-size: 16px;
min-width: 28px;
min-height: 28px;
padding: 2px;
/* display: flex;
align-items: center;
justify-content: center;
margin-right: 12px;
padding: 6px;
font-size: 18px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 3px;
background: rgba(255, 255, 255, 0.05);
color: rgba(255, 255, 255, 0.6);
cursor: pointer; */
}
/* .ActionButton:hover {
background: rgba(255, 255, 255, 0.1);
color: #fff;
} */
.EjectIcon {
font-size: 21px;
margin-top: -0.5px;
}
@media (max-width: 899px) {
.Metadata {
display: none;
}
}

118
src/components/StreamingMissionInfo.tsx Normal file
View file

@ -0,0 +1,118 @@
import { useCallback } from "react";
import {
useDataSource,
useMissionDisplayName,
useMissionType,
useMissionTypeDisplayName,
useRecorderName,
useRecordingDate,
useServerDisplayName,
} from "../state/gameEntityStore";
import { engineStore } from "../state/engineStore";
import {
liveConnectionStore,
useLiveSelector,
} from "../state/liveConnectionStore";
import { useRecording } from "./RecordingProvider";
import { LuCircleArrowOutUpLeft } from "react-icons/lu";
import { BiSolidEject } from "react-icons/bi";
import styles from "./StreamingMissionInfo.module.css";
export function StreamingMissionInfo() {
const dataSource = useDataSource();
const missionDisplayName = useMissionDisplayName();
const missionType = useMissionType();
const missionTypeDisplayName = useMissionTypeDisplayName();
const serverName = useServerDisplayName();
const playerName = useRecorderName();
const dateString = useRecordingDate();
const [datePart, timePart] = dateString
? dateString.split(" ")
: [null, null];
const isLive = dataSource === "live";
const recording = useRecording();
const isLiveConnected = useLiveSelector(
(s) => s.gameStatus === "connected" || s.gameStatus === "authenticating",
);
const handleEject = useCallback(() => {
engineStore.getState().setRecording(null);
}, []);
const handleDisconnect = useCallback(() => {
const liveState = liveConnectionStore.getState();
liveState.disconnectServer();
liveState.disconnectRelay();
engineStore.getState().setRecording(null);
}, []);
return (
<div className={styles.Header}>
<div className={styles.MissionInfo}>
{missionDisplayName && missionType ? (
<>
<span className={styles.MissionName}>{missionDisplayName}</span>
{missionType && (
<>
{" "}
<span
className={styles.MissionType}
data-mission-type={missionType}
>
{missionTypeDisplayName === "LCTF" ? "LCTF" : missionType}
</span>
</>
)}
</>
) : null}
</div>
<div className={styles.Metadata}>
{isLive ? (
playerName ? (
<div className={styles.Attribution}>
Connected as{" "}
<span className={styles.PlayerName}>{playerName}</span>
</div>
) : null
) : playerName && dateString ? (
<div className={styles.Attribution}>
Recorded by <span className={styles.PlayerName}>{playerName}</span>{" "}
on{" "}
<span className={styles.RecordingDate}>
{datePart.replace(/-/g, " ")}
</span>{" "}
at <span className={styles.RecordingDate}>{timePart}</span>
</div>
) : null}
{serverName ? (
<div className={styles.ServerInfo}>
Server: <span className={styles.ServerName}>{serverName}</span>
</div>
) : null}
</div>
{dataSource === "demo" ? (
<button
type="button"
className={styles.ActionButton}
title="Unload demo"
aria-label="Unload demo"
onClick={handleEject}
disabled={!recording}
>
<BiSolidEject className={styles.EjectIcon} />
</button>
) : isLive ? (
<button
type="button"
className={styles.ActionButton}
title="Disconnect"
aria-label="Disconnect"
onClick={handleDisconnect}
disabled={!isLiveConnected}
>
<LuCircleArrowOutUpLeft />
</button>
) : null}
</div>
);
}

8
src/components/TSStatic.tsx
View file

@ -1,5 +1,8 @@
import { useMemo } from "react";
import { createLogger } from "../logger";
import type { SceneTSStatic } from "../scene/types";
const log = createLogger("TSStatic");
import {
torqueToThree,
torqueScaleToThree,
@ -18,10 +21,7 @@ export function TSStatic({ scene }: { scene: SceneTSStatic }) {
);
const scale = useMemo(() => torqueScaleToThree(scene.scale), [scene.scale]);
if (!scene.shapeName) {
console.error(
"<TSStatic> missing shapeName for ghostIndex",
scene.ghostIndex,
);
log.error("TSStatic missing shapeName for ghostIndex %d", scene.ghostIndex);
}
return (
<ShapeInfoProvider type="TSStatic" shapeName={scene.shapeName}>

29
src/components/TerrainBlock.tsx
View file

@ -17,7 +17,10 @@ import {
Vector3,
} from "three";
import type { SceneTerrainBlock } from "../scene/types";
import { createLogger } from "../logger";
import { torqueToThree } from "../scene/coordinates";
const log = createLogger("TerrainBlock");
import { useSceneSky, useSceneSun } from "../state/gameEntityStore";
import { loadTerrain } from "../loaders";
import { uint16ToFloat32 } from "../arrayUtils";
@ -413,10 +416,25 @@ function generateTerrainLightmap(
* Load a .ter file, used for terrain heightmap and texture info.
*/
function useTerrain(terrainFile: string) {
return useQuery({
const result = useQuery({
queryKey: ["terrain", terrainFile],
queryFn: () => loadTerrain(terrainFile),
queryFn: () => {
log.debug("Loading terrain: %s", terrainFile);
return loadTerrain(terrainFile);
},
});
useEffect(() => {
log.debug(
"Query status: %s%s%s file=%s",
result.status,
result.error ? ` error=${result.error.message}` : "",
result.data ? " (data ready)" : " (no data)",
terrainFile,
);
}, [result.status, result.error, result.data, terrainFile]);
return result;
}
/**
* Get visibleDistance from the Sky scene object, used to determine how far
@ -607,6 +625,13 @@ export const TerrainBlock = memo(function TerrainBlock({
!sharedDisplacementMap ||
!sharedAlphaTextures
) {
log.debug(
"Not ready: terrain=%s geometry=%s displacement=%s alpha=%s",
!!terrain,
!!sharedGeometry,
!!sharedDisplacementMap,
!!sharedAlphaTextures,
);
return null;
}
return (

41
src/components/ThreeCanvas.tsx Normal file
View file

@ -0,0 +1,41 @@
import { ReactNode } from "react";
import { Canvas, GLProps, RootState } from "@react-three/fiber";
import { NoToneMapping, PCFShadowMap, SRGBColorSpace } from "three";
import { useDebug } from "./SettingsProvider";
export type InvalidateFunction = RootState["invalidate"];
// Renderer settings to match Tribes 2's simple rendering pipeline.
// Tribes 2 (Torque engine, 2001) worked entirely in gamma/sRGB space with no HDR
// or tone mapping. We disable tone mapping and ensure proper sRGB output.
const glSettings: GLProps = {
toneMapping: NoToneMapping,
outputColorSpace: SRGBColorSpace,
};
export function ThreeCanvas({
children,
renderOnDemand: renderOnDemandFromProps = false,
dpr: dprFromProps,
onCreated,
}: {
children?: ReactNode;
dpr?: number;
renderOnDemand?: boolean;
onCreated?: (state: RootState) => void;
}) {
const { renderOnDemand: renderOnDemandFromSettings } = useDebug();
const renderOnDemand = renderOnDemandFromProps || renderOnDemandFromSettings;
return (
<Canvas
frameloop={renderOnDemand ? "demand" : "always"}
dpr={dprFromProps}
gl={glSettings}
shadows={{ type: PCFShadowMap }}
onCreated={onCreated}
>
{children}
</Canvas>
);
}

338
src/components/TouchControls.tsx
View file

@ -1,338 +0,0 @@
import { useEffect, useRef, type RefObject } from "react";
import { Euler, Vector3 } from "three";
import { useFrame, useThree } from "@react-three/fiber";
import type nipplejs from "nipplejs";
import { useControls } from "./SettingsProvider";
import styles from "./TouchControls.module.css";
/** Apply styles to nipplejs-generated `.back` and `.front` elements imperatively. */
function applyNippleStyles(zone: HTMLElement) {
const back = zone.querySelector<HTMLElement>(".back");
if (back) {
back.style.background = "rgba(3, 79, 76, 0.6)";
back.style.border = "1px solid rgba(0, 219, 223, 0.5)";
back.style.boxShadow = "inset 0 0 10px rgba(0, 0, 0, 0.7)";
}
const front = zone.querySelector<HTMLElement>(".front");
if (front) {
front.style.background =
"radial-gradient(circle at 50% 50%, rgba(23, 247, 198, 0.9) 0%, rgba(9, 184, 170, 0.95) 100%)";
front.style.border = "2px solid rgba(255, 255, 255, 0.4)";
front.style.boxShadow =
"0 2px 4px rgba(0, 0, 0, 0.5), 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 -1px 2px rgba(0, 0, 0, 0.3)";
}
}
const BASE_SPEED = 80;
const LOOK_SENSITIVITY = 0.004;
const STICK_LOOK_SENSITIVITY = 2.5;
const DUAL_MOVE_DEADZONE = 0.08;
const DUAL_LOOK_DEADZONE = 0.15;
const SINGLE_STICK_DEADZONE = 0.15;
const MAX_PITCH = Math.PI / 2 - 0.01; // ~89°
export type JoystickState = {
angle: number;
force: number;
};
type SharedProps = {
joystickState: RefObject<JoystickState>;
joystickZone: RefObject<HTMLDivElement | null>;
lookJoystickState: RefObject<JoystickState>;
lookJoystickZone: RefObject<HTMLDivElement | null>;
};
/** Renders the joystick zone(s). Place inside canvasContainer, outside Canvas. */
export function TouchJoystick({
joystickState,
joystickZone,
lookJoystickState,
lookJoystickZone,
}: SharedProps) {
const { touchMode } = useControls();
// Move joystick
useEffect(() => {
const zone = joystickZone.current;
if (!zone) return;
let manager: nipplejs.JoystickManager | null = null;
let cancelled = false;
import("nipplejs").then((mod) => {
if (cancelled) return;
manager = mod.default.create({
zone,
mode: "static",
position: { left: "70px", bottom: "70px" },
size: 120,
restOpacity: 0.9,
});
applyNippleStyles(zone);
manager.on("move", (_event, data) => {
joystickState.current.angle = data.angle.radian;
joystickState.current.force = Math.min(1, data.force);
});
manager.on("end", () => {
joystickState.current.force = 0;
});
});
return () => {
cancelled = true;
manager?.destroy();
};
}, [joystickState, joystickZone, touchMode]);
// Look joystick (dual stick mode only)
useEffect(() => {
if (touchMode !== "dualStick") return;
const zone = lookJoystickZone.current;
if (!zone) return;
let manager: nipplejs.JoystickManager | null = null;
let cancelled = false;
import("nipplejs").then((mod) => {
if (cancelled) return;
manager = mod.default.create({
zone,
mode: "static",
position: { right: "70px", bottom: "70px" },
size: 120,
restOpacity: 0.9,
});
applyNippleStyles(zone);
manager.on("move", (_event, data) => {
lookJoystickState.current.angle = data.angle.radian;
lookJoystickState.current.force = Math.min(1, data.force);
});
manager.on("end", () => {
lookJoystickState.current.force = 0;
});
});
return () => {
cancelled = true;
manager?.destroy();
};
}, [touchMode, lookJoystickState, lookJoystickZone]);
const blurActiveElement = () => {
if (document.activeElement instanceof HTMLElement) {
document.activeElement.blur();
}
};
if (touchMode === "dualStick") {
return (
<>
<div
ref={joystickZone}
className={styles.Left}
onContextMenu={(e) => e.preventDefault()}
onTouchStart={blurActiveElement}
/>
<div
ref={lookJoystickZone}
className={styles.Right}
onContextMenu={(e) => e.preventDefault()}
onTouchStart={blurActiveElement}
/>
</>
);
}
return (
<div
ref={joystickZone}
className={styles.Joystick}
onContextMenu={(e) => e.preventDefault()}
onTouchStart={blurActiveElement}
/>
);
}
/** Handles touch look and joystick-driven movement. Place inside Canvas. */
export function TouchCameraMovement({
joystickState,
joystickZone,
lookJoystickState,
}: SharedProps) {
const { speedMultiplier, touchMode } = useControls();
const { camera, gl } = useThree();
// Touch look state
const euler = useRef(new Euler(0, 0, 0, "YXZ"));
const lookTouchId = useRef<number | null>(null);
const lastTouchPos = useRef({ x: 0, y: 0 });
// Scratch vectors
const forwardVec = useRef(new Vector3());
const sideVec = useRef(new Vector3());
const moveVec = useRef(new Vector3());
// Initialize euler from current camera rotation on mount
useEffect(() => {
euler.current.setFromQuaternion(camera.quaternion, "YXZ");
}, [camera]);
// Touch-drag look handling (moveLookStick mode)
useEffect(() => {
if (touchMode !== "moveLookStick") return;
const canvas = gl.domElement;
const isTouchOnJoystick = (touch: Touch) => {
const zone = joystickZone.current;
if (!zone) return false;
const rect = zone.getBoundingClientRect();
return (
touch.clientX >= rect.left &&
touch.clientX <= rect.right &&
touch.clientY >= rect.top &&
touch.clientY <= rect.bottom
);
};
const handleTouchStart = (e: TouchEvent) => {
if (lookTouchId.current !== null) return;
for (let i = 0; i < e.changedTouches.length; i++) {
const touch = e.changedTouches[i];
if (!isTouchOnJoystick(touch)) {
lookTouchId.current = touch.identifier;
lastTouchPos.current = { x: touch.clientX, y: touch.clientY };
break;
}
}
};
const handleTouchMove = (e: TouchEvent) => {
if (lookTouchId.current === null) return;
for (let i = 0; i < e.changedTouches.length; i++) {
const touch = e.changedTouches[i];
if (touch.identifier === lookTouchId.current) {
const dx = touch.clientX - lastTouchPos.current.x;
const dy = touch.clientY - lastTouchPos.current.y;
lastTouchPos.current = { x: touch.clientX, y: touch.clientY };
euler.current.setFromQuaternion(camera.quaternion, "YXZ");
euler.current.y -= dx * LOOK_SENSITIVITY;
euler.current.x -= dy * LOOK_SENSITIVITY;
euler.current.x = Math.max(
-MAX_PITCH,
Math.min(MAX_PITCH, euler.current.x),
);
camera.quaternion.setFromEuler(euler.current);
break;
}
}
};
const handleTouchEnd = (e: TouchEvent) => {
for (let i = 0; i < e.changedTouches.length; i++) {
if (e.changedTouches[i].identifier === lookTouchId.current) {
lookTouchId.current = null;
break;
}
}
};
canvas.addEventListener("touchstart", handleTouchStart, { passive: true });
canvas.addEventListener("touchmove", handleTouchMove, { passive: true });
canvas.addEventListener("touchend", handleTouchEnd, { passive: true });
canvas.addEventListener("touchcancel", handleTouchEnd, { passive: true });
return () => {
canvas.removeEventListener("touchstart", handleTouchStart);
canvas.removeEventListener("touchmove", handleTouchMove);
canvas.removeEventListener("touchend", handleTouchEnd);
canvas.removeEventListener("touchcancel", handleTouchEnd);
lookTouchId.current = null;
};
}, [camera, gl.domElement, joystickZone, touchMode]);
useFrame((_state, delta) => {
const { force, angle } = joystickState.current;
if (touchMode === "dualStick") {
// Right stick → camera rotation
const look = lookJoystickState.current;
if (look.force > DUAL_LOOK_DEADZONE) {
const lookForce =
(look.force - DUAL_LOOK_DEADZONE) / (1 - DUAL_LOOK_DEADZONE);
const lookX = Math.cos(look.angle);
const lookY = Math.sin(look.angle);
euler.current.setFromQuaternion(camera.quaternion, "YXZ");
euler.current.y -= lookX * lookForce * STICK_LOOK_SENSITIVITY * delta;
euler.current.x += lookY * lookForce * STICK_LOOK_SENSITIVITY * delta;
euler.current.x = Math.max(
-MAX_PITCH,
Math.min(MAX_PITCH, euler.current.x),
);
camera.quaternion.setFromEuler(euler.current);
}
// Left stick → movement
if (force > DUAL_MOVE_DEADZONE) {
const moveForce =
(force - DUAL_MOVE_DEADZONE) / (1 - DUAL_MOVE_DEADZONE);
const speed = BASE_SPEED * speedMultiplier * moveForce;
const joyX = Math.cos(angle);
const joyY = Math.sin(angle);
camera.getWorldDirection(forwardVec.current);
forwardVec.current.normalize();
sideVec.current.crossVectors(camera.up, forwardVec.current).normalize();
moveVec.current
.set(0, 0, 0)
.addScaledVector(forwardVec.current, joyY)
.addScaledVector(sideVec.current, -joyX);
if (moveVec.current.lengthSq() > 0) {
moveVec.current.normalize().multiplyScalar(speed * delta);
camera.position.add(moveVec.current);
}
}
} else if (touchMode === "moveLookStick") {
if (force > 0) {
// Move forward at half the configured speed.
const speed = BASE_SPEED * speedMultiplier * 0.5;
camera.getWorldDirection(forwardVec.current);
forwardVec.current.normalize();
moveVec.current.copy(forwardVec.current).multiplyScalar(speed * delta);
camera.position.add(moveVec.current);
if (force >= SINGLE_STICK_DEADZONE) {
// Outer zone: also control camera look (yaw + pitch).
const lookX = Math.cos(angle);
const lookY = Math.sin(angle);
const lookForce =
(force - SINGLE_STICK_DEADZONE) / (1 - SINGLE_STICK_DEADZONE);
euler.current.setFromQuaternion(camera.quaternion, "YXZ");
euler.current.y -=
lookX * lookForce * STICK_LOOK_SENSITIVITY * 0.5 * delta;
euler.current.x +=
lookY * lookForce * STICK_LOOK_SENSITIVITY * 0.5 * delta;
euler.current.x = Math.max(
-MAX_PITCH,
Math.min(MAX_PITCH, euler.current.x),
);
camera.quaternion.setFromEuler(euler.current);
}
}
}
});
return null;
}

Some files were not shown because too many files have changed in this diff Show more