Add VR client functionality: Implement app.js for the VR client, including WebSocket connection handling, scene setup with Three.js, and basic event listeners for VR interaction. This file lays the groundwork for character mode selection and input handl

VR/client/app.js

@@ -0,0 +1,175 @@
+import * as THREE from "three";
+import { VRButton } from "three/addons/webxr/VRButton.js";
+import { CHARACTER_MODES_REGISTRY } from "./modes/modes_registry.js";
+
+const statusEl = document.getElementById("status");
+const startButton = document.getElementById("start-btn");
+const joinPanel = document.getElementById("join-panel");
+const joinButton = document.getElementById("join-btn");
+const characterModeSelect = document.getElementById("character-mode");
+let selectedCharacterMode = "demo-spline";
+
+const searchParams = new URLSearchParams(window.location.search);
+const defaultWsScheme = window.location.protocol === "https:" ? "wss" : "ws";
+const defaultWsHost = window.location.hostname || "127.0.0.1";
+const defaultWsPort = searchParams.get("ws_port") ?? "8765";
+const serverHost =
+  searchParams.get("ws") ??
+  `${defaultWsScheme}://${defaultWsHost}:${defaultWsPort}`;
+
+const calibrationOffset = new THREE.Vector3(
+  Number(searchParams.get("ox") ?? 0.0),
+  Number(searchParams.get("oy") ?? 0.0),
+  Number(searchParams.get("oz") ?? 0.0)
+);
+
+let socket = null;
+let userId = null;
+let sessionRole = "vr_client";
+let sessionMode = "vr_client";
+
+const scene = new THREE.Scene();
+scene.background = new THREE.Color(0x1a1f2b);
+const worldRoot = new THREE.Group();
+worldRoot.position.copy(calibrationOffset);
+scene.add(worldRoot);
+
+const camera = new THREE.PerspectiveCamera(
+  70,
+  window.innerWidth / window.innerHeight,
+  0.01,
+  50
+);
+camera.position.set(0, 1.4, 2.0);
+
+const renderer = new THREE.WebGLRenderer({ antialias: true });
+renderer.setSize(window.innerWidth, window.innerHeight);
+renderer.xr.enabled = true;
+document.body.appendChild(renderer.domElement);
+
+const hemi = new THREE.HemisphereLight(0xffffff, 0x223344, 1.2);
+scene.add(hemi);
+
+const grid = new THREE.GridHelper(8, 16, 0x6c757d, 0x495057);
+grid.position.y = 0;
+worldRoot.add(grid);
+const worldAxes = new THREE.AxesHelper(0.3);
+worldRoot.add(worldAxes);
+
+function setStatus(text) {
+  statusEl.textContent = text;
+}
+
+function applyCharacterMode(modeKey) {
+  // TODO: Implement character mode selection
+}
+
+function connect(joinConfig) {
+  socket = new WebSocket(serverHost);
+  sessionRole = joinConfig.serverRole ?? joinConfig.role;
+  sessionMode = joinConfig.role;
+
+  socket.onopen = () => {
+    setStatus(`connected: ${serverHost}`);
+    socket.send(
+      JSON.stringify({
+        version: 1,
+        type: "hello",
+        payload: {
+          client: "sparc-webxr",
+          role: sessionRole,
+        },
+      })
+    );
+  };
+
+  socket.onclose = (event) => {
+    setStatus(`disconnected: ${serverHost} (code=${event.code})`);
+  };
+  socket.onerror = () => {
+    setStatus(`error: failed to connect ${serverHost}`);
+  };
+
+  socket.onmessage = (event) => {
+    // TODO: Implement message handling
+
+    const message = JSON.parse(event.data);
+
+    if (message.type === "error") {
+      setStatus(`server error: ${message.payload?.reason ?? "unknown"}`);
+    }
+
+  };
+}
+
+function sendXRInput(frame) {
+  // TODO: Implement XR input sending
+}
+
+function animate() {
+  // TODO: Implement animation loop
+  let lastTime = performance.now() / 1000;
+  renderer.setAnimationLoop((_, frame) => {
+    const now = performance.now() / 1000;
+    const dt = Math.min(0.05, now - lastTime);
+    lastTime = now;
+
+    if (frame) sendXRInput(frame);
+
+    renderer.render(scene, camera);
+  });
+}
+
+startButton.addEventListener("click", () => {
+  document.body.appendChild(VRButton.createButton(renderer));
+  startButton.remove();
+});
+
+window.addEventListener("resize", () => {
+  camera.aspect = window.innerWidth / window.innerHeight;
+  camera.updateProjectionMatrix();
+  renderer.setSize(window.innerWidth, window.innerHeight);
+});
+
+/* TODO: Implement key handling for desktop mode */
+window.addEventListener("keydown", (event) => {
+  const key = event.key.toLowerCase();
+  // TODO: Implement key handling
+});
+
+window.addEventListener("keyup", (event) => {
+  const key = event.key.toLowerCase();
+  // TODO: Implement key handling
+});
+/* TODO */
+
+renderer.domElement.addEventListener("click", () => {
+  if (!renderer.xr.isPresenting && document.pointerLockElement !== renderer.domElement) {
+    renderer.domElement.requestPointerLock();
+  }
+});
+
+document.addEventListener("mousemove", (event) => {
+  if (document.pointerLockElement !== renderer.domElement) return;
+  if (renderer.xr.isPresenting) return;
+
+  // TODO: Implement desktop mode mouse movement handling
+});
+
+function setupJoinPanel() {
+  // TODO: Implement join panel setup
+}
+
+function populateCharacterModeSelect() {
+  characterModeSelect.replaceChildren();
+  for (const { id, label } of CHARACTER_MODES_REGISTRY) {
+    const opt = document.createElement("option");
+    opt.value = id;
+    opt.textContent = label;
+    characterModeSelect.appendChild(opt);
+  }
+}
+
+populateCharacterModeSelect();
+setupJoinPanel();
+animate();

VR/client/index.html

@@ -0,0 +1,118 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>SPARC VR Client</title>
+  <style>
+    html,
+    body,
+    canvas {
+      margin: 0;
+      padding: 0;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+    }
+
+    #status {
+      position: fixed;
+      top: 12px;
+      left: 12px;
+      padding: 8px 12px;
+      color: #f9f9f9;
+      background: rgba(0, 0, 0, 0.6);
+      font-family: Menlo, monospace;
+      z-index: 10;
+      border-radius: 6px;
+    }
+
+    #start-btn {
+      position: fixed;
+      top: 52px;
+      left: 12px;
+      z-index: 10;
+      padding: 8px 12px;
+      border: 0;
+      border-radius: 6px;
+      background: #1c7ed6;
+      color: white;
+      font-family: Menlo, monospace;
+      cursor: pointer;
+    }
+
+    #join-panel,
+    #arm-camera-panel {
+      position: fixed;
+      right: 12px;
+      z-index: 10;
+      padding: 10px;
+      border-radius: 8px;
+      background: rgba(0, 0, 0, 0.68);
+      color: #f9f9f9;
+      font-family: Menlo, monospace;
+      display: grid;
+      gap: 6px;
+      min-width: 190px;
+    }
+
+    #join-panel {
+      top: 12px;
+    }
+
+    #arm-camera-panel {
+      top: 188px;
+      display: none;
+    }
+
+    #join-panel select,
+    #join-panel button,
+    #arm-camera-panel select {
+      font-family: Menlo, monospace;
+      padding: 5px 6px;
+      border-radius: 4px;
+      border: none;
+    }
+
+    #join-panel button {
+      background: #2f9e44;
+      color: white;
+      cursor: pointer;
+    }
+
+    #spectate-btn {
+      background: #6c757d;
+    }
+
+    #arm-camera-btn {
+      background: #1971c2;
+    }
+
+    .panel-caption {
+      font-size: 12px;
+      color: #ced4da;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="status">disconnected</div>
+  <div id="join-panel">
+    <label for="character-mode">Character</label>
+    <select id="character-mode"></select>
+    <button id="join-btn">Join Field</button>
+  </div>
+  <button id="start-btn">Enter VR</button>
+  <script type="importmap">
+    {
+      "imports": {
+        "three": "https://unpkg.com/three@0.165.0/build/three.module.js",
+        "three/addons/": "https://unpkg.com/three@0.165.0/examples/jsm/"
+      }
+    }
+  </script>
+  <script type="module" src="./app.js"></script>
+</body>
+
+</html>

VR/client/modes/modes_registry.js

@@ -0,0 +1,10 @@
+/**
+ * Ordered character modes shown in the join UI. Keep in sync with server
+ * `SUPPORTED_CHARACTER_MODES` and `characterModes` in app.js.
+ */
+export const CHARACTER_MODES_REGISTRY = Object.freeze([
+  { id: "demo-spline", label: "Demo-spline" },
+  { id: "two-cr", label: "Two CR" },
+  { id: "two-gcr", label: "Two GCR" },
+  { id: "noel-c4", label: "Noel-C4" },
+]);