diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 00000000..12fd26d5
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1,147 @@
+# flyctl launch added from .gitignore
+# Logs
+**/logs
+**/*.log
+**/npm-debug.log*
+**/yarn-debug.log*
+**/yarn-error.log*
+**/lerna-debug.log*
+**/.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+**/report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+**/pids
+**/*.pid
+**/*.seed
+**/*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+**/lib-cov
+
+# Coverage directory used by tools like istanbul
+**/coverage
+**/*.lcov
+
+# nyc test coverage
+**/.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+**/.grunt
+
+# Bower dependency directory (https://bower.io/)
+**/bower_components
+
+# node-waf configuration
+**/.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+**/build/Release
+
+# Dependency directories
+**/node_modules
+**/jspm_packages
+
+# Snowpack dependency directory (https://snowpack.dev/)
+**/web_modules
+
+# TypeScript cache
+**/*.tsbuildinfo
+
+# Optional npm cache directory
+**/.npm
+
+# Optional eslint cache
+**/.eslintcache
+
+# Optional stylelint cache
+**/.stylelintcache
+
+# Microbundle cache
+**/.rpt2_cache
+**/.rts2_cache_cjs
+**/.rts2_cache_es
+**/.rts2_cache_umd
+
+# Optional REPL history
+**/.node_repl_history
+
+# Output of 'npm pack'
+**/*.tgz
+
+# Yarn Integrity file
+**/.yarn-integrity
+
+# dotenv environment variable files
+**/.env
+**/.env.development.local
+**/.env.test.local
+**/.env.production.local
+**/.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+**/.cache
+**/.parcel-cache
+
+# Next.js build output
+**/.next
+**/out
+
+# Nuxt.js build / generate output
+**/.nuxt
+**/dist
+!.yalc/**/dist
+
+# Gatsby files
+**/.cache
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+**/.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+**/.temp
+**/.cache
+
+# Docusaurus cache and generated files
+**/.docusaurus
+
+# Serverless directories
+**/.serverless
+
+# FuseBox cache
+**/.fusebox
+
+# DynamoDB Local files
+**/.dynamodb
+
+# TernJS port file
+**/.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+**/.vscode-test
+
+# yarn v2
+**/.yarn/cache
+**/.yarn/unplugged
+**/.yarn/build-state.yml
+**/.yarn/install-state.gz
+**/.pnp.*
+
+**/.DS_Store
+**/.tshy
+
+# yalc
+#**/.yalc
+
+# GameData folder with actual .vl2 files (unextracted) in it. Some scripts like
+# `extract-assets` and `generate-manifest` look at this to extract or build the
+# list of files. Once someone builds this, it's not really necessary for other
+# developers to have this folder.
+**/GameData
+
+**/docs/dev
+fly.toml
diff --git a/.env.example b/.env.example
new file mode 100644
index 00000000..1852c903
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,26 @@
+# Tribes 2 account credentials.
+# Only username and password are needed — run `npm run login` to download
+# the certificate and encrypted key from the TribesNext auth server.
+# The login script writes everything to .env.local automatically.
+T2_ACCOUNT_NAME=
+T2_ACCOUNT_PASSWORD=
+
+# These are populated automatically by `npm run login`:
+# T2_ACCOUNT_CERTIFICATE=
+# T2_ACCOUNT_ENCRYPTED_KEY=
+
+# Server addresses (defaults shown)
+# T2_AUTH_SERVER=tribesnext.thyth.com:60659
+# T2_MASTER_SERVER=master.tribesnext.com
+
+# Relay WebSocket port (default: 8765)
+# RELAY_PORT=8765
+
+# Path to game assets (default: docs/base relative to relay/)
+# GAME_BASE_PATH=/data/base
+
+# Path to manifest.json (default: public/manifest.json relative to project root)
+# MANIFEST_PATH=/app/public/manifest.json
+
+# Relay URL for the browser client (default: ws://localhost:8765)
+# NEXT_PUBLIC_RELAY_URL=ws://localhost:8765
diff --git a/.gitignore b/.gitignore
index f4e29066..6014a181 100644
--- a/.gitignore
+++ b/.gitignore
@@ -76,6 +76,7 @@ web_modules/
.env
.env.development.local
.env.test.local
+.env.production
.env.production.local
.env.local
@@ -132,6 +133,9 @@ dist
.DS_Store
.tshy
+# yalc
+.yalc
+
# GameData folder with actual .vl2 files (unextracted) in it. Some scripts like
# `extract-assets` and `generate-manifest` look at this to extract or build the
# list of files. Once someone builds this, it's not really necessary for other
diff --git a/CLAUDE.md b/CLAUDE.md
index 97037129..f81bf6c6 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -81,6 +81,20 @@ to a React component tree.
more). Refer to official documentation or the actual Torque3D SDK, which
contains the official grammar and source code. Check the `TorqueEngineResources`
folder for related materials.
+- Normally, most TorqueScript `.cs` files live in VL2 files (deflate encoded,
+ basically .zip) inside Tribes 2's various folders. For this project, since we
+ don't want to have to decompress those VL2 files all the time, they've been
+ pre-extracted. You can find these under the `docs/base` folder.
+
+### t2-demo-parser
+
+- This is a custom package developed locally and published via `yalc`.
+- If you need to see how it works, I don't recommend reading its `dist` files;
+ instead focus on its `src` files and README.
+- You may update it, but be careful. Verify any changes you make carefully and
+ add regression tests.
+- To make changes visible to `t2-mapper`, make sure you run `npm run build` and
+ `yalc push` in `t2-demo-parser`.
## Code Conventions
diff --git a/README.md b/README.md
index be1dbf04..38e3a348 100644
--- a/README.md
+++ b/README.md
@@ -39,6 +39,93 @@ Run the dev server:
npm start
```
+### Relay Server
+
+The relay server bridges WebSocket connections from the browser to Tribes 2 game
+servers via UDP. This is necessary because browsers can't open UDP sockets
+directly.
+
+#### Local development
+
+First, obtain TribesNext account credentials:
+
+```console
+npm run login
+```
+
+This prompts for your TribesNext username and password, downloads the account
+certificate and encrypted key, and writes them to `.env.local`.
+
+Then run the relay (or use `npm run start:both` to run it alongside the Next.js
+dev server):
+
+```console
+npm run relay:dev
+```
+
+#### Deploying to Fly.io
+
+The relay is configured for [Fly.io](https://fly.io) deployment via
+`relay/Dockerfile` and `fly.toml`. It needs a persistent volume to hold game
+assets (~1.5 GB) used for the CRC integrity check.
+
+**1. Create the app and volume:**
+
+```console
+fly launch # creates the app (adjust app name in fly.toml if needed)
+fly volumes create gamedata --region ord --size 3
+```
+
+**2. Set account credentials as secrets:**
+
+Run `npm run login` locally first if you haven't already, then copy the values
+from `.env.local`:
+
+```console
+fly secrets set \
+ T2_ACCOUNT_NAME=... \
+ T2_ACCOUNT_PASSWORD=... \
+ T2_ACCOUNT_CERTIFICATE=... \
+ T2_ACCOUNT_ENCRYPTED_KEY=...
+```
+
+**3. Deploy:**
+
+```console
+fly deploy
+```
+
+**4. Populate game assets on the volume:**
+
+SSH into the running machine and clone the repo to get `docs/base/`:
+
+```console
+fly ssh console
+```
+
+Then inside the machine:
+
+```sh
+apt-get update && apt-get install -y git
+git clone --depth 1 --filter=blob:none --sparse \
+ https://github.com/exogen/t2-mapper.git /tmp/t2-mapper
+cd /tmp/t2-mapper
+git sparse-checkout set docs/base
+mv docs/base /data/base
+rm -rf /tmp/t2-mapper
+```
+
+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 |
+
### Running scripts
[tsx](https://tsx.is) is included to run TypeScript files directly.
diff --git a/app/page.tsx b/app/page.tsx
index e9c35156..669d1baf 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -30,18 +30,49 @@ import { AudioProvider } from "@/src/components/AudioContext";
import { DebugElements } from "@/src/components/DebugElements";
import { CamerasProvider } from "@/src/components/CamerasProvider";
import {
- DemoProvider,
- useDemoActions,
- useDemoRecording,
-} from "@/src/components/DemoProvider";
-import { DemoPlayback } from "@/src/components/DemoPlayback";
-import { DemoControls } from "@/src/components/DemoControls";
+ 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 { ChatSoundPlayer } from "@/src/components/ChatSoundPlayer";
+import {
+ LiveConnectionProvider,
+ useLiveConnection,
+} from "@/src/components/LiveConnection";
+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 DemoPlayback = lazy(() =>
+ import("@/src/components/DemoPlayback").then((mod) => ({
+ default: mod.DemoPlayback,
+ })),
+);
+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,
- findMissionByDemoName,
} from "@/src/manifest";
import { createParser, parseAsBoolean, useQueryState } from "nuqs";
import styles from "./page.module.css";
@@ -120,10 +151,36 @@ function MapInspector() {
);
const isTouch = useTouchDevice();
+ const features = useFeatures();
+ const live = useLiveConnection();
const { missionName, missionType } = currentMission;
const [mapInfoOpen, setMapInfoOpen] = useState(false);
- const [loadingProgress, setLoadingProgress] = useState(0);
+ 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 = live.adapter != null
+ ? live.liveReady
+ ? 1
+ : live.gameStatus === "connected" ? 0.8
+ : live.gameStatus === "authenticating" ? 0.6
+ : live.gameStatus === "challenging" ? 0.3
+ : live.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%
@@ -174,7 +231,7 @@ function MapInspector() {
const handleLoadingChange = useCallback(
(_loading: boolean, progress: number = 0) => {
- setLoadingProgress(progress);
+ setMissionLoadingProgress(progress);
},
[],
);
@@ -188,7 +245,7 @@ function MapInspector() {
return (
-
+
+
-
+
+
-
-
-
+
-
+
{isTouch && (
setMapInfoOpen(true)}
+ onOpenServerBrowser={features.live ? () => setServerBrowserOpen(true) : undefined}
cameraRef={cameraRef}
isTouch={isTouch}
/>
@@ -272,83 +331,56 @@ function MapInspector() {
/>
)}
- setServerBrowserOpen(false)}
/>
-
+
-
+
);
}
-/** Map from Tribes 2 game type display names to manifest mission type codes. */
-const GAME_TYPE_TO_MISSION_TYPE: Record = {
- "Capture the Flag": "CTF",
- "Capture and Hold": "CnH",
- Deathmatch: "DM",
- "Team Deathmatch": "TDM",
- Siege: "Siege",
- Bounty: "Bounty",
- Rabbit: "Rabbit",
-};
-
/**
- * When a demo recording is loaded, switch to the mission it was recorded on.
+ * 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 DemoMissionSync({
- changeMission,
- currentMission,
+function MissionWhenIdle({
+ missionName,
+ missionType,
+ onLoadingChange,
}: {
- changeMission: (mission: CurrentMission) => void;
- currentMission: CurrentMission;
+ missionName: string;
+ missionType: string;
+ onLoadingChange: (isLoading: boolean, progress?: number) => void;
}) {
- const recording = useDemoRecording();
+ const recording = useRecording();
+ const { adapter: liveAdapter } = useLiveConnection();
+ const isStreaming = recording != null || liveAdapter != null;
- useEffect(() => {
- if (!recording?.missionName) return;
+ if (isStreaming) return null;
- const missionName = findMissionByDemoName(recording.missionName);
- if (!missionName) {
- console.warn(
- `Demo mission "${recording.missionName}" not found in manifest`,
- );
- return;
- }
-
- const info = getMissionInfo(missionName);
- const missionTypeCode = recording.gameType
- ? GAME_TYPE_TO_MISSION_TYPE[recording.gameType]
- : undefined;
- const missionType =
- missionTypeCode && info.missionTypes.includes(missionTypeCode)
- ? missionTypeCode
- : info.missionTypes[0];
-
- // Skip if we're already on the correct mission to avoid unnecessary
- // remount cascades (e.g. after a Suspense boundary restores).
- if (
- currentMission.missionName === missionName &&
- currentMission.missionType === missionType
- ) {
- return;
- }
-
- changeMission({ missionName, missionType });
- }, [recording, changeMission, currentMission]);
-
- return null;
+ return (
+
+ );
}
/**
- * Disables observer/touch controls when a demo recording is loaded so they
- * don't fight the animated camera.
+ * In-Canvas components that depend on streaming mode. Mounts the appropriate
+ * controller (DemoPlayback or LiveObserver) and disables observer controls
+ * during streaming.
*/
-function DemoAwareControls({
+function StreamingComponents({
isTouch,
joystickStateRef,
joystickZoneRef,
@@ -361,25 +393,96 @@ function DemoAwareControls({
lookJoystickStateRef: React.RefObject;
lookJoystickZoneRef: React.RefObject;
}) {
- const recording = useDemoRecording();
- if (recording) return null;
- if (isTouch === null) return null;
- if (isTouch) {
- return (
-
- );
- }
- return ;
+ const recording = useRecording();
+ const live = useLiveConnection();
+ const isLive = live.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 && (
+
+
+
+ )}
+ {isLive && (
+
+
+
+ )}
+ {isStreaming && (
+
+
+
+ )}
+ {showObserverControls && isTouch !== null && (
+ isTouch ? (
+
+ ) : (
+
+ )
+ )}
+
+ );
+}
+
+/** HUD overlay — shown during streaming (demo or live). */
+function StreamingHUD() {
+ const recording = useRecording();
+ const live = useLiveConnection();
+ if (!recording && !live.adapter) return null;
+ return ;
+}
+
+/** Playback controls overlay — only shown during demo playback. */
+function StreamingOverlay() {
+ const recording = useRecording();
+ const live = useLiveConnection();
+ if (!recording || live.adapter != null) return null;
+ return (
+
+
+
+ );
+}
+
+/** Server browser dialog connected to live state. */
+function ServerBrowserDialog({
+ open,
+ onClose,
+}: {
+ open: boolean;
+ onClose: () => void;
+}) {
+ const live = useLiveConnection();
+ return (
+ live.joinServer(address)}
+ wsPing={live.wsPing}
+ />
+ );
}
/** Exposes `window.loadDemoRecording` for automation/testing. */
function DemoWindowAPI() {
- const { setRecording } = useDemoActions();
+ const { setRecording } = usePlaybackActions();
useEffect(() => {
window.loadDemoRecording = setRecording;
@@ -394,7 +497,11 @@ function DemoWindowAPI() {
export default function HomePage() {
return (
-
+
+
+
+
+
);
}
diff --git a/docs/404.html b/docs/404.html
index b69d086f..cfbe476a 100644
--- a/docs/404.html
+++ b/docs/404.html
@@ -1 +1 @@
-404: This page could not be found.MapGenius – Explore maps for Tribes 2
404
This page could not be found.
\ No newline at end of file
+404: This page could not be found.MapGenius – Explore maps for Tribes 2
404
This page could not be found.
\ No newline at end of file
diff --git a/docs/404/index.html b/docs/404/index.html
index b69d086f..cfbe476a 100644
--- a/docs/404/index.html
+++ b/docs/404/index.html
@@ -1 +1 @@
-404: This page could not be found.MapGenius – Explore maps for Tribes 2
404
This page could not be found.
\ No newline at end of file
+404: This page could not be found.MapGenius – Explore maps for Tribes 2