Spaces:

1024m
/

HF-Racing

Running

App Files Files Community

1024m commited on 1 day ago

Commit

0820aaf

verified ·

1 Parent(s): d0a5946

Upload folder using huggingface_hub

Browse files

Files changed (11) hide show

README.md +3 -0
app.py +12 -28
lobbies.py +106 -61
www/index.html +6 -7
www/js/cars.js +28 -0
www/js/main.js +48 -26
www/js/net.js +9 -10
www/js/peers.js +41 -3
www/js/track.js +106 -25
www/js/ui-menu.js +37 -98
www/js/vehicles.js +48 -33

README.md CHANGED Viewed

@@ -12,9 +12,12 @@ pinned: false
 Public **match server** + lobby board + **spectate** (no HF login).
 - **Board / status:** [`/board`](./board)
 - **Spectate:** Spectate button on a live lobby (no account)
 - **Play:** local HF Racing only (`bash start.sh` + `HF_TOKEN`) — Space rejects anonymous seat claims
 APIs: `/api/health`, `/api/lobbies`, `/api/config`
 Match WS: `/ws/match/{mode}/{lobby_id}?user=...&role=play|spectate`

 Public **match server** + lobby board + **spectate** (no HF login).
+- **URL:** https://1024m-hf-racing.hf.space
 - **Board / status:** [`/board`](./board)
 - **Spectate:** Spectate button on a live lobby (no account)
 - **Play:** local HF Racing only (`bash start.sh` + `HF_TOKEN`) — Space rejects anonymous seat claims
+Modes: **sandbox** (solo) · **mvp** (≥3 players, 30s stable roster then start)
 APIs: `/api/health`, `/api/lobbies`, `/api/config`
 Match WS: `/ws/match/{mode}/{lobby_id}?user=...&role=play|spectate`

app.py CHANGED Viewed

@@ -164,18 +164,18 @@ BOARD_HTML = """<!doctype html>
       <strong>Spectate (no HF account):</strong> click <em>Spectate</em> on a live lobby.
       <br/>In spectate: <strong>← →</strong> switch player · <strong>Esc</strong> back. Read-only camera — no driving.
       <br/><strong>Play:</strong> local HF Racing only (<code>bash start.sh</code> + <code>HF_TOKEN</code>).
-      <br/>Red = team X · Blue = team Y (grid seats).
     </div>
     <div class="nav">
-      <button type="button" class="tab active" data-mode="sandbox">Practice</button>
-      <button type="button" class="tab" data-mode="1v1">1v1</button>
-      <button type="button" class="tab" data-mode="4v4">4v4 Race</button>
     </div>
     <div id="list" class="list">Loading lobbies…</div>
     <footer>Auto-refreshes every 2s · <code>/api/lobbies</code></footer>
   </div>
   <script>
-    const KEY = { sandbox: 'sandbox', '1v1': 'duel', '4v4': 'squad' };
     let mode = 'sandbox';
     const list = document.getElementById('list');
     document.querySelectorAll('.tab').forEach((btn) => {
@@ -185,32 +185,13 @@ BOARD_HTML = """<!doctype html>
         render(window.__board);
       });
     });
-    function parseSeat(key) {
-      const m = String(key).match(/^([XYS])-(\\d+)$/i);
-      if (!m) return { team: null, n: key, cls: '' };
-      const t = m[1].toUpperCase();
-      return {
-        team: t === 'S' ? null : t,
-        n: m[2],
-        cls: t === 'X' ? 'team-x' : t === 'Y' ? 'team-y' : '',
-      };
-    }
     function seatChip(key, user) {
-      const p = parseSeat(key);
-      const label = p.team ? p.n : key.replace(/^S-/, '');
       const who = user ? `<span class="who">${user}</span>` : '';
-      return `<span class="seat ${p.cls}${user ? ' filled' : ''}">${label}${who}</span>`;
     }
     function seatsHtml(seats) {
       const entries = Object.entries(seats || {});
-      const xs = entries.filter(([k]) => /^X-/i.test(k));
-      const ys = entries.filter(([k]) => /^Y-/i.test(k));
-      if (xs.length || ys.length) {
-        return `<div class="seats-row">
-          <div class="team x">${xs.map(([k, v]) => seatChip(k, v)).join('')}</div>
-          <div class="team y">${ys.map(([k, v]) => seatChip(k, v)).join('')}</div>
-        </div>`;
-      }
       return `<div class="seats-flat">${entries.map(([k, v]) => seatChip(k, v)).join('')}</div>`;
     }
     function render(board) {
@@ -225,17 +206,20 @@ BOARD_HTML = """<!doctype html>
           ? `<span class="live">${L.status}</span>`
           : `<span class="open">${L.status}</span>`;
         const live = L.status === 'live' || L.status === 'starting';
         const href = `/?spectate=1&mode=${encodeURIComponent(mode)}&lobby=${encodeURIComponent(L.id)}`;
         const spec = live
           ? `<div class="actions">
                <a class="spec-btn" href="${href}">Spectate</a>
                <div class="hint">Read-only viewer — no HF login required.</div>
              </div>`
-          : `<div class="hint">Open — players join from the local client (HF login).</div>`;
         return `<div class="card">
           <div class="head">
             <span class="id">${L.id}</span>
-            <span class="meta">${L.filled}/${L.capacity} · ${st}</span>
           </div>
           ${seatsHtml(L.seats)}
           ${spec}

       <strong>Spectate (no HF account):</strong> click <em>Spectate</em> on a live lobby.
       <br/>In spectate: <strong>← →</strong> switch player · <strong>Esc</strong> back. Read-only camera — no driving.
       <br/><strong>Play:</strong> local HF Racing only (<code>bash start.sh</code> + <code>HF_TOKEN</code>).
+      <br/><strong>Sandbox:</strong> solo test drive. <strong>MVP:</strong> starts after 30s with the same ≥3 players (timer resets on join/leave).
+      <br/>Space: <code>https://1024m-hf-racing.hf.space</code>
     </div>
     <div class="nav">
+      <button type="button" class="tab active" data-mode="sandbox">Sandbox</button>
+      <button type="button" class="tab" data-mode="mvp">MVP</button>
     </div>
     <div id="list" class="list">Loading lobbies…</div>
     <footer>Auto-refreshes every 2s · <code>/api/lobbies</code></footer>
   </div>
   <script>
+    const KEY = { sandbox: 'sandbox', mvp: 'mvp' };
     let mode = 'sandbox';
     const list = document.getElementById('list');
     document.querySelectorAll('.tab').forEach((btn) => {
         render(window.__board);
       });
     });
     function seatChip(key, user) {
+      const label = String(key).replace(/^[SP]-/i, '');
       const who = user ? `<span class="who">${user}</span>` : '';
+      return `<span class="seat${user ? ' filled' : ''}">${label}${who}</span>`;
     }
     function seatsHtml(seats) {
       const entries = Object.entries(seats || {});
       return `<div class="seats-flat">${entries.map(([k, v]) => seatChip(k, v)).join('')}</div>`;
     }
     function render(board) {
           ? `<span class="live">${L.status}</span>`
           : `<span class="open">${L.status}</span>`;
         const live = L.status === 'live' || L.status === 'starting';
+        const cd = (L.countdown != null)
+          ? ` · starts in ${Math.ceil(L.countdown)}s`
+          : '';
         const href = `/?spectate=1&mode=${encodeURIComponent(mode)}&lobby=${encodeURIComponent(L.id)}`;
         const spec = live
           ? `<div class="actions">
                <a class="spec-btn" href="${href}">Spectate</a>
                <div class="hint">Read-only viewer — no HF login required.</div>
              </div>`
+          : `<div class="hint">Open — players join from the local client (HF login).${cd ? ' ' + cd.trim() : ''}</div>`;
         return `<div class="card">
           <div class="head">
             <span class="id">${L.id}</span>
+            <span class="meta">${L.filled}/${L.capacity} · ${st}${cd}</span>
           </div>
           ${seatsHtml(L.seats)}
           ${spec}

lobbies.py CHANGED Viewed

@@ -1,28 +1,39 @@
-"""Fixed lobby board: sandbox, 1v1, 4v4. Seat claims are server-authoritative."""
 from __future__ import annotations
 import string
 import time
 from typing import Any, Optional
-# Lobby IDs: 0A–0X, 1A–1H, 4A–4H (category is already in the mode UI)
 _LETTERS = string.ascii_uppercase
 SANDBOX_IDS = [f"0{ch}" for ch in _LETTERS[:10]]  # 0A … 0J
-DUEL_IDS = [f"1{ch}" for ch in _LETTERS[:8]]  # 1A … 1H
-SQUAD_IDS = [f"4{ch}" for ch in _LETTERS[:8]]  # 4A … 4H
-SANDBOX_CAP = 1  # one seat per sandbox lobby
-DUEL_CAP = 2
-SQUAD_CAP = 8  # 4 + 4
-# 4v4: start if full, or idle 60s with ≥1 per side
-SQUAD_IDLE_START_SEC = 60.0
 SEAT_STALE_SEC = 8.0
-# Ghost matches: if nobody heartbeats, free the lobby (was locking seats forever).
 STARTING_TIMEOUT_SEC = 40.0
 LIVE_STALE_SEC = 40.0
 def _now() -> float:
     return time.time()
@@ -36,33 +47,31 @@ def _empty_sandbox(lobby_id: str) -> dict[str, Any]:
         "status": "open",  # open | starting | live
         "last_change": _now(),
         "match_id": None,
     }
-def _empty_duel(lobby_id: str) -> dict[str, Any]:
     return {
         "id": lobby_id,
-        "mode": "1v1",
-        "seats": {"X-1": None, "Y-1": None},
         "status": "open",
         "last_change": _now(),
         "match_id": None,
     }
-def _empty_squad(lobby_id: str) -> dict[str, Any]:
-    seats: dict[str, Optional[str]] = {}
-    for side in ("X", "Y"):
-        for i in range(1, 5):
-            seats[f"{side}-{i}"] = None
-    return {
-        "id": lobby_id,
-        "mode": "4v4",
-        "seats": seats,
-        "status": "open",
-        "last_change": _now(),
-        "match_id": None,
-    }
 class LobbyBoard:
@@ -70,10 +79,8 @@ class LobbyBoard:
         self.lobbies: dict[str, dict[str, Any]] = {}
         for lid in SANDBOX_IDS:
             self.lobbies[lid] = _empty_sandbox(lid)
-        for lid in DUEL_IDS:
-            self.lobbies[lid] = _empty_duel(lid)
-        for lid in SQUAD_IDS:
-            self.lobbies[lid] = _empty_squad(lid)
         # username -> (lobby_id, seat)
         self.by_user: dict[str, tuple[str, str]] = {}
@@ -81,12 +88,21 @@ class LobbyBoard:
         self._tick_stale_and_start()
         return {
             "sandbox": [self._public(self.lobbies[lid]) for lid in SANDBOX_IDS],
-            "duel": [self._public(self.lobbies[lid]) for lid in DUEL_IDS],
-            "squad": [self._public(self.lobbies[lid]) for lid in SQUAD_IDS],
             "serverTime": _now(),
         }
     def _public(self, lobby: dict[str, Any]) -> dict[str, Any]:
         return {
             "id": lobby["id"],
             "mode": lobby["mode"],
@@ -94,8 +110,9 @@ class LobbyBoard:
             "status": lobby["status"],
             "lastChange": lobby["last_change"],
             "matchId": lobby["match_id"],
-            "filled": sum(1 for v in lobby["seats"].values() if v),
             "capacity": len(lobby["seats"]),
         }
     def _clear_user(self, username: str) -> None:
@@ -108,21 +125,29 @@ class LobbyBoard:
             lobby["seats"][seat] = None
             lobby.get("_avatars", {}).pop(username, None)
             lobby.get("_hb", {}).pop(username, None)
             lobby["last_change"] = _now()
-            # Empty live/starting lobby must reset — otherwise match_id lingers
-            # and the next WS wait loop "starts" a ghost match with no players.
             if lobby["status"] in ("live", "starting") and not any(lobby["seats"].values()):
                 self._reset_lobby(lobby)
     def _reset_lobby(self, lobby: dict[str, Any]) -> None:
         mode = lobby["mode"]
         lid = lobby["id"]
         if mode == "sandbox":
             self.lobbies[lid] = _empty_sandbox(lid)
-        elif mode == "1v1":
-            self.lobbies[lid] = _empty_duel(lid)
         else:
-            self.lobbies[lid] = _empty_squad(lid)
     def leave(self, username: str) -> dict[str, Any]:
         self._clear_user(username)
@@ -149,7 +174,6 @@ class LobbyBoard:
         if lobby["seats"][seat] is not None:
             return {"ok": False, "error": "seat taken"}
-        # Move from previous seat if any
         self._clear_user(username)
         lobby["seats"][seat] = username
         lobby["last_change"] = _now()
@@ -160,6 +184,7 @@ class LobbyBoard:
         elif username not in avatars:
             avatars[username] = f"https://huggingface.co/avatars/{username}"
         self.by_user[username] = (lobby_id, seat)
         started = self._maybe_start(lobby)
         return {
             "ok": True,
@@ -173,17 +198,16 @@ class LobbyBoard:
         prev = self.by_user.get(username)
         if not prev:
             return
-        lid, seat = prev
         lobby = self.lobbies.get(lid)
         if not lobby:
             return
-        # Stash last seen on seat metadata via parallel dict
         lobby.setdefault("_hb", {})[username] = _now()
     def _tick_stale_and_start(self) -> None:
         now = _now()
         stale_users: list[str] = []
-        for username, (lid, seat) in list(self.by_user.items()):
             lobby = self.lobbies.get(lid)
             if not lobby:
                 stale_users.append(username)
@@ -193,7 +217,6 @@ class LobbyBoard:
             if status == "open" and now - hb > SEAT_STALE_SEC:
                 stale_users.append(username)
             elif status == "live" and now - hb > LIVE_STALE_SEC:
-                # Drop ghost "live" seats so the board doesn't stay unclickable forever.
                 stale_users.append(username)
             elif status == "starting" and now - lobby["last_change"] > STARTING_TIMEOUT_SEC:
                 stale_users.append(username)
@@ -220,31 +243,53 @@ class LobbyBoard:
         filled = [s for s, u in seats.items() if u]
         if mode == "sandbox":
-            # Start as soon as anyone joins
             if filled:
                 return self._mark_starting(lobby)
             return False
-        if mode == "1v1":
-            if seats.get("X-1") and seats.get("Y-1"):
                 return self._mark_starting(lobby)
             return False
-        # 4v4
-        team_x = [s for s, u in seats.items() if u and s.startswith("X-")]
-        team_y = [s for s, u in seats.items() if u and s.startswith("Y-")]
-        if len(filled) >= SQUAD_CAP:
-            return self._mark_starting(lobby)
-        if team_x and team_y and (_now() - lobby["last_change"]) >= SQUAD_IDLE_START_SEC:
-            return self._mark_starting(lobby)
         return False
-    def _mark_starting(self, lobby: dict[str, Any]) -> bool:
-        import uuid
         lobby["status"] = "starting"
         lobby["match_id"] = str(uuid.uuid4())
         lobby["last_change"] = _now()
         return True
     def mark_live(self, lobby_id: str) -> None:
@@ -257,19 +302,19 @@ class LobbyBoard:
         if not lobby:
             return []
         avatars = lobby.get("_avatars") or {}
         out = []
         for seat, user in lobby["seats"].items():
             if user:
-                side = "ffa"
-                if seat.startswith("X-"):
-                    side = "X"
-                elif seat.startswith("Y-"):
-                    side = "Y"
                 out.append(
                     {
                         "username": user,
                         "seat": seat,
-                        "side": side,
                         "avatarUrl": avatars.get(user)
                         or f"https://huggingface.co/avatars/{user}",
                     }

+"""Lobby board: sandbox (solo) + mvp (multiplayer). Seat claims are server-authoritative."""
 from __future__ import annotations
+import random
 import string
 import time
+import uuid
 from typing import Any, Optional
 _LETTERS = string.ascii_uppercase
 SANDBOX_IDS = [f"0{ch}" for ch in _LETTERS[:10]]  # 0A … 0J
+MVP_IDS = [f"M{ch}" for ch in _LETTERS[:8]]  # MA … MH
+SANDBOX_CAP = 1
+MVP_CAP = 8
+# MVP: start only after roster (>2 players) is unchanged for this long.
+MVP_MIN_PLAYERS = 3  # more than 2
+MVP_STABLE_SEC = 30.0
 SEAT_STALE_SEC = 8.0
 STARTING_TIMEOUT_SEC = 40.0
 LIVE_STALE_SEC = 40.0
+# Car assets under assets/cars/<id>.glb
+CAR_IDS = [
+    "porsche_gt2rs",
+    "corvette_zr1",
+    "ford_gt",
+    "lambo_sc18",
+    "mclaren_600lt",
+    "mustang_roush",
+]
+DEFAULT_CAR = "porsche_gt2rs"
 def _now() -> float:
     return time.time()
         "status": "open",  # open | starting | live
         "last_change": _now(),
         "match_id": None,
+        "_stable_since": None,
+        "_roster_sig": "",
+        "_cars": {},
     }
+def _empty_mvp(lobby_id: str) -> dict[str, Any]:
+    seats: dict[str, Optional[str]] = {f"P-{i}": None for i in range(1, MVP_CAP + 1)}
     return {
         "id": lobby_id,
+        "mode": "mvp",
+        "seats": seats,
         "status": "open",
         "last_change": _now(),
         "match_id": None,
+        "_stable_since": None,
+        "_roster_sig": "",
+        "_cars": {},
     }
+def _roster_sig(seats: dict[str, Any]) -> str:
+    """Stable signature of who occupies which seat."""
+    parts = [f"{seat}={user or ''}" for seat, user in sorted(seats.items())]
+    return "|".join(parts)
 class LobbyBoard:
         self.lobbies: dict[str, dict[str, Any]] = {}
         for lid in SANDBOX_IDS:
             self.lobbies[lid] = _empty_sandbox(lid)
+        for lid in MVP_IDS:
+            self.lobbies[lid] = _empty_mvp(lid)
         # username -> (lobby_id, seat)
         self.by_user: dict[str, tuple[str, str]] = {}
         self._tick_stale_and_start()
         return {
             "sandbox": [self._public(self.lobbies[lid]) for lid in SANDBOX_IDS],
+            "mvp": [self._public(self.lobbies[lid]) for lid in MVP_IDS],
             "serverTime": _now(),
         }
     def _public(self, lobby: dict[str, Any]) -> dict[str, Any]:
+        filled = sum(1 for v in lobby["seats"].values() if v)
+        countdown = None
+        if (
+            lobby["mode"] == "mvp"
+            and lobby["status"] == "open"
+            and filled >= MVP_MIN_PLAYERS
+            and lobby.get("_stable_since") is not None
+        ):
+            remaining = MVP_STABLE_SEC - (_now() - float(lobby["_stable_since"]))
+            countdown = max(0.0, round(remaining, 1))
         return {
             "id": lobby["id"],
             "mode": lobby["mode"],
             "status": lobby["status"],
             "lastChange": lobby["last_change"],
             "matchId": lobby["match_id"],
+            "filled": filled,
             "capacity": len(lobby["seats"]),
+            "countdown": countdown,
         }
     def _clear_user(self, username: str) -> None:
             lobby["seats"][seat] = None
             lobby.get("_avatars", {}).pop(username, None)
             lobby.get("_hb", {}).pop(username, None)
+            lobby.get("_cars", {}).pop(username, None)
             lobby["last_change"] = _now()
+            self._note_roster_change(lobby)
             if lobby["status"] in ("live", "starting") and not any(lobby["seats"].values()):
                 self._reset_lobby(lobby)
+    def _note_roster_change(self, lobby: dict[str, Any]) -> None:
+        """Join/leave resets MVP stability timer."""
+        sig = _roster_sig(lobby["seats"])
+        lobby["_roster_sig"] = sig
+        filled = sum(1 for v in lobby["seats"].values() if v)
+        if lobby["mode"] == "mvp" and lobby["status"] == "open" and filled >= MVP_MIN_PLAYERS:
+            lobby["_stable_since"] = _now()
+        else:
+            lobby["_stable_since"] = None
     def _reset_lobby(self, lobby: dict[str, Any]) -> None:
         mode = lobby["mode"]
         lid = lobby["id"]
         if mode == "sandbox":
             self.lobbies[lid] = _empty_sandbox(lid)
         else:
+            self.lobbies[lid] = _empty_mvp(lid)
     def leave(self, username: str) -> dict[str, Any]:
         self._clear_user(username)
         if lobby["seats"][seat] is not None:
             return {"ok": False, "error": "seat taken"}
         self._clear_user(username)
         lobby["seats"][seat] = username
         lobby["last_change"] = _now()
         elif username not in avatars:
             avatars[username] = f"https://huggingface.co/avatars/{username}"
         self.by_user[username] = (lobby_id, seat)
+        self._note_roster_change(lobby)
         started = self._maybe_start(lobby)
         return {
             "ok": True,
         prev = self.by_user.get(username)
         if not prev:
             return
+        lid, _seat = prev
         lobby = self.lobbies.get(lid)
         if not lobby:
             return
         lobby.setdefault("_hb", {})[username] = _now()
     def _tick_stale_and_start(self) -> None:
         now = _now()
         stale_users: list[str] = []
+        for username, (lid, _seat) in list(self.by_user.items()):
             lobby = self.lobbies.get(lid)
             if not lobby:
                 stale_users.append(username)
             if status == "open" and now - hb > SEAT_STALE_SEC:
                 stale_users.append(username)
             elif status == "live" and now - hb > LIVE_STALE_SEC:
                 stale_users.append(username)
             elif status == "starting" and now - lobby["last_change"] > STARTING_TIMEOUT_SEC:
                 stale_users.append(username)
         filled = [s for s, u in seats.items() if u]
         if mode == "sandbox":
             if filled:
                 return self._mark_starting(lobby)
             return False
+        # MVP: >2 players in the same seats for MVP_STABLE_SEC without join/leave.
+        if mode == "mvp":
+            n = len(filled)
+            if n < MVP_MIN_PLAYERS:
+                lobby["_stable_since"] = None
+                return False
+            sig = _roster_sig(seats)
+            if sig != lobby.get("_roster_sig"):
+                lobby["_roster_sig"] = sig
+                lobby["_stable_since"] = _now()
+                return False
+            if lobby.get("_stable_since") is None:
+                lobby["_stable_since"] = _now()
+                return False
+            if (_now() - float(lobby["_stable_since"])) >= MVP_STABLE_SEC:
                 return self._mark_starting(lobby)
             return False
         return False
+    def _assign_cars(self, lobby: dict[str, Any]) -> None:
+        cars = lobby.setdefault("_cars", {})
+        if lobby["mode"] == "sandbox":
+            for user in lobby["seats"].values():
+                if user:
+                    cars[user] = DEFAULT_CAR
+            return
+        # MVP: random unique cars when possible, then recycle.
+        pool = CAR_IDS[:]
+        random.shuffle(pool)
+        i = 0
+        for user in lobby["seats"].values():
+            if not user:
+                continue
+            cars[user] = pool[i % len(pool)]
+            i += 1
+    def _mark_starting(self, lobby: dict[str, Any]) -> bool:
         lobby["status"] = "starting"
         lobby["match_id"] = str(uuid.uuid4())
         lobby["last_change"] = _now()
+        lobby["_stable_since"] = None
+        self._assign_cars(lobby)
         return True
     def mark_live(self, lobby_id: str) -> None:
         if not lobby:
             return []
         avatars = lobby.get("_avatars") or {}
+        cars = lobby.get("_cars") or {}
         out = []
         for seat, user in lobby["seats"].items():
             if user:
+                car_id = cars.get(user) or (
+                    DEFAULT_CAR if lobby["mode"] == "sandbox" else random.choice(CAR_IDS)
+                )
                 out.append(
                     {
                         "username": user,
                         "seat": seat,
+                        "side": "ffa",
+                        "carId": car_id,
                         "avatarUrl": avatars.get(user)
                         or f"https://huggingface.co/avatars/{user}",
                     }

www/index.html CHANGED Viewed

@@ -4,7 +4,7 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>HF Racing</title>
-  <link rel="stylesheet" href="css/style.css?v=1" />
 </head>
 <body>
   <div id="menu-root" class="menu-root menu-open">
@@ -13,11 +13,10 @@
     <section id="menu-start" class="menu-panel">
       <h1 class="menu-brand">HF Racing</h1>
-      <p class="menu-sub">Practice · 1v1 · 4v4 Race</p>
       <div class="menu-actions">
-        <button type="button" id="btn-mode-sandbox" class="menu-btn">Practice</button>
-        <button type="button" id="btn-mode-1v1" class="menu-btn">1v1</button>
-        <button type="button" id="btn-mode-4v4" class="menu-btn">4v4 Race</button>
       </div>
     </section>
@@ -55,7 +54,7 @@
   </div>
   <footer id="controls-footer">
-    <span id="footer-text">Waiting for cars &amp; maps…</span>
   </footer>
   <script type="importmap">
@@ -66,6 +65,6 @@
     }
   }
   </script>
-  <script type="module" src="js/main.js?v=1"></script>
 </body>
 </html>

   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>HF Racing</title>
+  <link rel="stylesheet" href="css/style.css?v=2" />
 </head>
 <body>
   <div id="menu-root" class="menu-root menu-open">
     <section id="menu-start" class="menu-panel">
       <h1 class="menu-brand">HF Racing</h1>
+      <p class="menu-sub">Sandbox · MVP</p>
       <div class="menu-actions">
+        <button type="button" id="btn-mode-sandbox" class="menu-btn">Sandbox</button>
+        <button type="button" id="btn-mode-mvp" class="menu-btn">MVP</button>
       </div>
     </section>
   </div>
   <footer id="controls-footer">
+    <span id="footer-text">HF Space: https://1024m-hf-racing.hf.space</span>
   </footer>
   <script type="importmap">
     }
   }
   </script>
+  <script type="module" src="js/main.js?v=2"></script>
 </body>
 </html>

www/js/cars.js ADDED Viewed

	@@ -0,0 +1,28 @@

+/** Car catalog — files live in assets/cars/<id>.glb */
+export const CAR_IDS = [
+  'porsche_gt2rs',
+  'corvette_zr1',
+  'ford_gt',
+  'lambo_sc18',
+  'mclaren_600lt',
+  'mustang_roush',
+];
+/** Default for sandbox / practice. */
+export const DEFAULT_CAR = 'porsche_gt2rs';
+export const CAR_LABELS = {
+  porsche_gt2rs: 'Porsche 911 GT2 RS',
+  corvette_zr1: 'Corvette ZR1',
+  ford_gt: 'Ford GT Mk II',
+  lambo_sc18: 'Lamborghini SC18',
+  mclaren_600lt: 'McLaren 600LT',
+  mustang_roush: 'Roush Mustang',
+};
+export function pickRandomCar(exclude = []) {
+  const pool = CAR_IDS.filter((id) => !exclude.includes(id));
+  const list = pool.length ? pool : CAR_IDS;
+  return list[Math.floor(Math.random() * list.length)];
+}

www/js/main.js CHANGED Viewed

@@ -4,6 +4,9 @@ import { NetClient, SPAWN_OFFSETS } from './net.js';
 import { DriveControls } from './controls.js';
 import { LocalCar } from './vehicles.js';
 import { Track } from './track.js';
 const footer = document.getElementById('footer-text');
 const hud = document.getElementById('hud');
@@ -15,9 +18,9 @@ const spectateBar = document.getElementById('spectate-bar');
 const scene = new THREE.Scene();
 scene.background = new THREE.Color(0x87a0b5);
-scene.fog = new THREE.Fog(0x87a0b5, 40, 140);
-const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 500);
 camera.position.set(0, 6, -12);
 const renderer = new THREE.WebGLRenderer({ antialias: true });
@@ -40,6 +43,7 @@ let car = null;
 let inRace = false;
 let spectating = false;
 let specIndex = 0;
 const net = new NetClient({
   scene,
@@ -83,32 +87,41 @@ function setIdentityHud(identity) {
   if (playerHud) playerHud.hidden = false;
 }
-function enterRace(info) {
   inRace = true;
   spectating = !!info.spectating;
   menu.hide();
   hud.hidden = false;
   if (spectateBar) spectateBar.hidden = !spectating;
   if (!spectating) {
-    if (!car) {
-      const color = info.side === 'Y' ? 0x3b7ec4 : 0xc44b3c;
-      car = new LocalCar(scene, { color });
-      car.tryLoadModel('car').then((ok) => {
-        if (footer && ok) footer.textContent = 'Loaded assets/cars/car.glb';
-      });
     }
-    const off = SPAWN_OFFSETS[info.spawnIndex % SPAWN_OFFSETS.length];
-    car.setPose(off.x, 0.35, off.z, 0);
-  }
-  track.tryLoadMap('track').then((ok) => {
     if (footer) {
-      footer.textContent = ok
-        ? `Race live · map loaded`
-        : `Race live · placeholder track (drop GLB in assets/maps/)`;
     }
-  });
 }
 function leaveRaceToMenu() {
@@ -144,16 +157,23 @@ window.addEventListener('resize', () => {
   renderer.setSize(window.innerWidth, window.innerHeight);
 });
 function followCar(target, delta) {
   if (!target) return;
   const behind = new THREE.Vector3(
-    Math.sin(target.yaw || target.mesh?.rotation.y || 0) * -10,
-    5,
-    Math.cos(target.yaw || target.mesh?.rotation.y || 0) * -10,
   );
-  const desired = target.position.clone().add(behind);
-  camera.position.lerp(desired, Math.min(1, delta * 4));
-  camera.lookAt(target.position.x, target.position.y + 1, target.position.z);
 }
 let last = performance.now();
@@ -184,17 +204,19 @@ function frame(now) {
 }
 async function boot() {
   const identity = await net.initLocal();
   menu.setIdentity({
     username: identity.username,
-    spaceUrl: identity.spaceUrl,
     authError: identity.ok ? null : identity.error,
     playAllowed: identity.playAllowed !== false,
   });
   if (identity.ok) setIdentityHud(identity);
   if (footer) {
     footer.textContent = identity.ok
-      ? 'Pick a mode — cars/maps can be dropped into assets/ later'
       : (identity.error || 'Set HF_TOKEN in .env.local');
   }
   requestAnimationFrame(frame);

 import { DriveControls } from './controls.js';
 import { LocalCar } from './vehicles.js';
 import { Track } from './track.js';
+import { DEFAULT_CAR, CAR_LABELS } from './cars.js';
+const SPACE_URL = 'https://1024m-hf-racing.hf.space';
 const footer = document.getElementById('footer-text');
 const hud = document.getElementById('hud');
 const scene = new THREE.Scene();
 scene.background = new THREE.Color(0x87a0b5);
+scene.fog = new THREE.Fog(0x87a0b5, 80, 400);
+const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 800);
 camera.position.set(0, 6, -12);
 const renderer = new THREE.WebGLRenderer({ antialias: true });
 let inRace = false;
 let spectating = false;
 let specIndex = 0;
+let trackReady = null;
 const net = new NetClient({
   scene,
   if (playerHud) playerHud.hidden = false;
 }
+async function ensureTrack() {
+  if (!trackReady) {
+    trackReady = track.loadShanghai();
+  }
+  return trackReady;
+}
+async function enterRace(info) {
   inRace = true;
   spectating = !!info.spectating;
   menu.hide();
   hud.hidden = false;
   if (spectateBar) spectateBar.hidden = !spectating;
+  const mapOk = await ensureTrack();
+  const grid = track.getGridPose(info.spawnIndex || 0);
   if (!spectating) {
+    const carId = info.carId || (info.mode === 'sandbox' ? DEFAULT_CAR : DEFAULT_CAR);
+    if (car) {
+      car.dispose();
+      car = null;
     }
+    car = new LocalCar(scene);
+    const loaded = await car.loadModel(carId);
+    car.setPose(grid.x, grid.y, grid.z, grid.yaw);
+    const label = CAR_LABELS[carId] || carId;
     if (footer) {
+      footer.textContent = loaded
+        ? `Race live · ${label}${mapOk ? ' · Shanghai' : ' · map fallback'}`
+        : `Race live · car missing (${carId})`;
     }
+  } else if (footer) {
+    footer.textContent = `Spectating · ${info.mode}`;
+  }
 }
 function leaveRaceToMenu() {
   renderer.setSize(window.innerWidth, window.innerHeight);
 });
+/** GTA-style chase cam — behind and above, looking at car rear/cabin. */
 function followCar(target, delta) {
   if (!target) return;
+  const yaw = target.yaw ?? target.mesh?.rotation.y ?? 0;
+  const pos = target.position;
+  const dist = 9.5;
+  const height = 3.2;
+  const lookLift = 1.15;
   const behind = new THREE.Vector3(
+    -Math.sin(yaw) * dist,
+    height,
+    -Math.cos(yaw) * dist,
   );
+  const desired = pos.clone().add(behind);
+  camera.position.lerp(desired, Math.min(1, delta * 6));
+  const look = new THREE.Vector3(pos.x, pos.y + lookLift, pos.z);
+  camera.lookAt(look);
 }
 let last = performance.now();
 }
 async function boot() {
+  if (footer) footer.textContent = `Space: ${SPACE_URL} · loading…`;
+  ensureTrack(); // warm map load in background
   const identity = await net.initLocal();
   menu.setIdentity({
     username: identity.username,
+    spaceUrl: identity.spaceUrl || SPACE_URL,
     authError: identity.ok ? null : identity.error,
     playAllowed: identity.playAllowed !== false,
   });
   if (identity.ok) setIdentityHud(identity);
   if (footer) {
     footer.textContent = identity.ok
+      ? `Signed in · Space ${SPACE_URL}`
       : (identity.error || 'Set HF_TOKEN in .env.local');
   }
   requestAnimationFrame(frame);

www/js/net.js CHANGED Viewed

@@ -45,6 +45,7 @@ export class NetClient {
     this._spawnIndex = 0;
     this.players = [];
     this.spectating = false;
   }
   async initLocal() {
@@ -83,7 +84,7 @@ export class NetClient {
     const res = await fetch(`${this._lobbyBase()}/api/lobbies`);
     if (!res.ok) throw new Error(`Lobby server ${res.status}`);
     const board = await res.json();
-    if (!board?.duel && !board?.sandbox) throw new Error('Bad lobby payload');
     return board;
   }
@@ -264,6 +265,8 @@ export class NetClient {
         !!msg.spectating || this.spectating || !this.playAllowed || this.host === 'space';
       this.seat = this.spectating ? null : (msg.seat || this.seat);
       this.side = this.spectating ? 'ffa' : seatSide(this.seat);
       const hideSelf = this.spectating ? null : this.username;
       this.peers.syncPlayers(this.players, hideSelf);
       this._spawnIndex = this.spectating ? 0 : spawnIndexFor(this.seat, this.mode, this.players);
@@ -274,6 +277,7 @@ export class NetClient {
         players: this.players,
         spawnIndex: this._spawnIndex,
         spectating: this.spectating,
       });
       this.onStatus(this.spectating ? `Spectating ${this.mode} · ${this.lobbyId}` : `Race live — ${this.mode}`);
       return;
@@ -323,16 +327,11 @@ function seatSide(seat) {
 }
 export function spawnIndexFor(seat, mode, players) {
-  if (mode === '1v1') {
-    return seat === 'Y-1' ? 1 : 0;
-  }
-  if (mode === '4v4') {
-    const m = String(seat).match(/^([XY])-(\d)$/i);
-    if (!m) return 0;
-    const side = m[1].toUpperCase() === 'Y' ? 4 : 0;
-    const n = Number(m[2]);
-    return side + Math.max(0, Math.min(3, n - 1));
   }
   const names = (players || []).map((p) => p.username).sort();
   const me = (players || []).find((p) => p.seat === seat)?.username;
   const idx = Math.max(0, names.indexOf(me));

     this._spawnIndex = 0;
     this.players = [];
     this.spectating = false;
+    this.carId = null;
   }
   async initLocal() {
     const res = await fetch(`${this._lobbyBase()}/api/lobbies`);
     if (!res.ok) throw new Error(`Lobby server ${res.status}`);
     const board = await res.json();
+    if (!board?.mvp && !board?.sandbox) throw new Error('Bad lobby payload');
     return board;
   }
         !!msg.spectating || this.spectating || !this.playAllowed || this.host === 'space';
       this.seat = this.spectating ? null : (msg.seat || this.seat);
       this.side = this.spectating ? 'ffa' : seatSide(this.seat);
+      const me = (this.players || []).find((p) => p.username === this.username);
+      this.carId = this.spectating ? null : (me?.carId || null);
       const hideSelf = this.spectating ? null : this.username;
       this.peers.syncPlayers(this.players, hideSelf);
       this._spawnIndex = this.spectating ? 0 : spawnIndexFor(this.seat, this.mode, this.players);
         players: this.players,
         spawnIndex: this._spawnIndex,
         spectating: this.spectating,
+        carId: this.carId,
       });
       this.onStatus(this.spectating ? `Spectating ${this.mode} · ${this.lobbyId}` : `Race live — ${this.mode}`);
       return;
 }
 export function spawnIndexFor(seat, mode, players) {
+  if (mode === 'mvp') {
+    const m = String(seat).match(/^P-(\d+)$/i);
+    if (m) return Math.max(0, Math.min(7, Number(m[1]) - 1));
   }
+  // sandbox / fallback: index among seated players
   const names = (players || []).map((p) => p.username).sort();
   const me = (players || []).find((p) => p.seat === seat)?.username;
   const idx = Math.max(0, names.indexOf(me));

www/js/peers.js CHANGED Viewed

@@ -1,11 +1,43 @@
 /** Remote racers — placeholder meshes until car GLBs land in assets/cars/. */
 import * as THREE from 'three';
 export class PeerManager {
   constructor(scene) {
     this.scene = scene;
     this.peers = new Map(); // username -> { mesh, side, targetPos, targetYaw }
   }
   syncPlayers(players, hideUsername = null) {
@@ -15,7 +47,7 @@ export class PeerManager {
       keep.add(p.username);
       let entry = this.peers.get(p.username);
       if (!entry) {
-        const color = p.side === 'Y' ? 0x3b7ec4 : p.side === 'X' ? 0xc44b3c : 0xd8d0c6;
         const mesh = new THREE.Mesh(
           new THREE.BoxGeometry(1.6, 0.55, 3.2),
           new THREE.MeshStandardMaterial({ color, metalness: 0.35, roughness: 0.45 }),
@@ -25,14 +57,20 @@ export class PeerManager {
         this.scene.add(mesh);
         entry = {
           mesh,
-          side: p.side || 'ffa',
           targetPos: new THREE.Vector3(),
           targetYaw: 0,
           speed: 0,
         };
         this.peers.set(p.username, entry);
       } else {
-        entry.side = p.side || entry.side;
       }
     }
     for (const [user, entry] of [...this.peers.entries()]) {

 /** Remote racers — placeholder meshes until car GLBs land in assets/cars/. */
 import * as THREE from 'three';
+import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 export class PeerManager {
   constructor(scene) {
     this.scene = scene;
     this.peers = new Map(); // username -> { mesh, side, targetPos, targetYaw }
+    this._loader = new GLTFLoader();
+  }
+  async _tryLoadCar(entry, carId) {
+    try {
+      const gltf = await this._loader.loadAsync(`assets/cars/${carId}.glb`);
+      const model = gltf.scene;
+      model.traverse((o) => {
+        if (o.isMesh) {
+          o.castShadow = true;
+          o.receiveShadow = true;
+        }
+      });
+      const box = new THREE.Box3().setFromObject(model);
+      const size = box.getSize(new THREE.Vector3());
+      const center = box.getCenter(new THREE.Vector3());
+      model.position.sub(center);
+      model.position.y += size.y / 2;
+      const old = entry.mesh;
+      const wrap = new THREE.Group();
+      wrap.add(model);
+      wrap.position.copy(old.position);
+      wrap.rotation.y = old.rotation.y;
+      this.scene.add(wrap);
+      this.scene.remove(old);
+      old.geometry?.dispose?.();
+      old.material?.dispose?.();
+      entry.mesh = wrap;
+    } catch {
+      // keep box placeholder
+    }
   }
   syncPlayers(players, hideUsername = null) {
       keep.add(p.username);
       let entry = this.peers.get(p.username);
       if (!entry) {
+        const color = 0xd8d0c6;
         const mesh = new THREE.Mesh(
           new THREE.BoxGeometry(1.6, 0.55, 3.2),
           new THREE.MeshStandardMaterial({ color, metalness: 0.35, roughness: 0.45 }),
         this.scene.add(mesh);
         entry = {
           mesh,
+          side: 'ffa',
+          carId: p.carId || null,
           targetPos: new THREE.Vector3(),
           targetYaw: 0,
           speed: 0,
         };
         this.peers.set(p.username, entry);
+        if (p.carId) this._tryLoadCar(entry, p.carId);
       } else {
+        entry.side = 'ffa';
+        if (p.carId && p.carId !== entry.carId) {
+          entry.carId = p.carId;
+          this._tryLoadCar(entry, p.carId);
+        }
       }
     }
     for (const [user, entry] of [...this.peers.entries()]) {

www/js/track.js CHANGED Viewed

@@ -1,11 +1,12 @@
 /**
- * Track / map loader — placeholder ground until maps land in assets/maps/.
- * Load path convention: assets/maps/<id>.glb
  */
 import * as THREE from 'three';
 import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 export class Track {
   constructor(scene) {
     this.scene = scene;
@@ -13,48 +14,128 @@ export class Track {
     scene.add(this.root);
     this._loader = new GLTFLoader();
     this.mapId = null;
     const ground = new THREE.Mesh(
-      new THREE.PlaneGeometry(120, 120),
       new THREE.MeshStandardMaterial({ color: 0x2a2622, roughness: 0.95 }),
     );
     ground.rotation.x = -Math.PI / 2;
     ground.receiveShadow = true;
     this.root.add(ground);
-    // Simple start grid marks
-    for (let i = 0; i < 8; i++) {
-      const mark = new THREE.Mesh(
-        new THREE.BoxGeometry(1.2, 0.05, 2.4),
-        new THREE.MeshStandardMaterial({ color: i % 2 ? 0xffffff : 0x222222 }),
-      );
-      const col = i % 4;
-      const row = Math.floor(i / 4);
-      mark.position.set(-6 + col * 4, 0.03, -row * 6);
-      this.root.add(mark);
-    }
   }
-  async tryLoadMap(id = 'track') {
-    const url = `assets/maps/${id}.glb`;
     try {
-      const gltf = await this._loader.loadAsync(url);
-      // Replace placeholder children with map
       while (this.root.children.length) {
-        const c = this.root.children[0];
-        this.root.remove(c);
       }
-      gltf.scene.traverse((o) => {
         if (o.isMesh) {
           o.castShadow = true;
           o.receiveShadow = true;
         }
       });
-      this.root.add(gltf.scene);
-      this.mapId = id;
       return true;
-    } catch {
       return false;
     }
   }
 }

 /**
+ * Shanghai International Circuit loader + start/grid poses.
  */
 import * as THREE from 'three';
 import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+const MAP_URL = 'assets/maps/shanghai/track.glb';
 export class Track {
   constructor(scene) {
     this.scene = scene;
     scene.add(this.root);
     this._loader = new GLTFLoader();
     this.mapId = null;
+    this.ready = false;
+    this.start = { x: 0, y: 0.4, z: 0, yaw: 0 };
+    this._bbox = null;
+    // Temporary ground until map loads
     const ground = new THREE.Mesh(
+      new THREE.PlaneGeometry(200, 200),
       new THREE.MeshStandardMaterial({ color: 0x2a2622, roughness: 0.95 }),
     );
     ground.rotation.x = -Math.PI / 2;
     ground.receiveShadow = true;
+    ground.name = '__placeholder';
     this.root.add(ground);
   }
+  async loadShanghai() {
     try {
+      const gltf = await this._loader.loadAsync(MAP_URL);
       while (this.root.children.length) {
+        this.root.remove(this.root.children[0]);
       }
+      const model = gltf.scene;
+      model.traverse((o) => {
         if (o.isMesh) {
           o.castShadow = true;
           o.receiveShadow = true;
         }
       });
+      this.root.add(model);
+      this.mapId = 'shanghai';
+      this.ready = true;
+      this._deriveStartFromMap(model);
       return true;
+    } catch (err) {
+      console.warn('map load failed', err);
+      this.ready = false;
       return false;
     }
   }
+  /**
+   * Find start/finish / pit / grid cues in node names; else use asphalt AABB heuristic.
+   * Shanghai SIC start/finish sits near the pit straight — we prefer named nodes,
+   * then fall back to the longest thin asphalt-ish bounds.
+   */
+  _deriveStartFromMap(model) {
+    const nameHits = [];
+    const meshes = [];
+    model.updateWorldMatrix(true, true);
+    model.traverse((o) => {
+      if (!o.isMesh) return;
+      meshes.push(o);
+      const n = `${o.name || ''} ${o.parent?.name || ''}`.toLowerCase();
+      if (
+        n.includes('start') ||
+        n.includes('finish') ||
+        n.includes('grid') ||
+        n.includes('pit') ||
+        n.includes('s/f') ||
+        n.includes('sf_')
+      ) {
+        nameHits.push(o);
+      }
+    });
+    let anchor = null;
+    let yaw = 0;
+    if (nameHits.length) {
+      const box = new THREE.Box3();
+      for (const m of nameHits) box.expandByObject(m);
+      const c = box.getCenter(new THREE.Vector3());
+      const size = box.getSize(new THREE.Vector3());
+      anchor = c;
+      // Face along the longer horizontal axis of the start strip.
+      yaw = size.x >= size.z ? 0 : Math.PI / 2;
+    } else {
+      // Fallback: whole-map center shifted toward a long strip (pit straight guess).
+      const box = new THREE.Box3().setFromObject(model);
+      this._bbox = box;
+      const c = box.getCenter(new THREE.Vector3());
+      const size = box.getSize(new THREE.Vector3());
+      // Shanghai-like: start straight often near one end of the long axis.
+      if (size.x >= size.z) {
+        anchor = new THREE.Vector3(c.x + size.x * 0.12, box.min.y, c.z);
+        yaw = 0;
+      } else {
+        anchor = new THREE.Vector3(c.x, box.min.y, c.z + size.z * 0.12);
+        yaw = Math.PI / 2;
+      }
+    }
+    const groundY = (() => {
+      const box = new THREE.Box3().setFromObject(model);
+      return box.min.y;
+    })();
+    this.start = {
+      x: anchor.x,
+      y: groundY + 0.35,
+      z: anchor.z,
+      yaw,
+    };
+  }
+  /** Grid slot relative to start line (GTA-style staggered pairs). */
+  getGridPose(index = 0) {
+    const i = Math.max(0, index | 0);
+    const row = Math.floor(i / 2);
+    const side = i % 2 === 0 ? -1 : 1;
+    const lateral = side * 3.2;
+    const back = -row * 7.5;
+    const yaw = this.start.yaw;
+    const fx = Math.sin(yaw);
+    const fz = Math.cos(yaw);
+    const rx = Math.cos(yaw);
+    const rz = -Math.sin(yaw);
+    return {
+      x: this.start.x + fx * back + rx * lateral,
+      y: this.start.y,
+      z: this.start.z + fz * back + rz * lateral,
+      yaw,
+    };
+  }
 }

www/js/ui-menu.js CHANGED Viewed

@@ -3,7 +3,6 @@
 export class GameMenu {
   constructor({
     root,
-    onSandbox,
     onOpenMode,
     onBack,
     onClaim,
@@ -12,7 +11,6 @@ export class GameMenu {
     onSpectate,
   }) {
     this.root = root;
-    this.onSandbox = onSandbox;
     this.onOpenMode = onOpenMode;
     this.onBack = onBack;
     this.onClaim = onClaim;
@@ -41,8 +39,7 @@ export class GameMenu {
     };
     root.querySelector('#btn-mode-sandbox')?.addEventListener('click', () => this._pickMode('sandbox'));
-    root.querySelector('#btn-mode-1v1')?.addEventListener('click', () => this._pickMode('1v1'));
-    root.querySelector('#btn-mode-4v4')?.addEventListener('click', () => this._pickMode('4v4'));
     this.els.btnBack?.addEventListener('click', () => {
       this.showStart();
       this.onBack?.();
@@ -72,18 +69,16 @@ export class GameMenu {
     const sub = this.root.querySelector('.menu-sub');
     if (sub) {
       sub.textContent = this.playAllowed
-        ? 'Practice · 1v1 · 4v4 Race'
-        : 'Spectate only — no HF login · play is local-only'
     }
-    // Space / spectate host: hide play mode buttons; lobbies are spectate pickers only.
-    for (const id of ['btn-mode-sandbox', 'btn-mode-1v1', 'btn-mode-4v4']) {
       const btn = this.root.querySelector(`#${id}`);
       if (btn) btn.hidden = !this.playAllowed;
     }
     if (!this.playAllowed && this.els.start) {
-      // Keep brand; modes hidden. Auto-open sandbox spectate list.
-      this.showLobby('sandbox');
-      this.onOpenMode?.('sandbox');
     }
   }
@@ -116,7 +111,7 @@ export class GameMenu {
     if (this.els.start) this.els.start.hidden = true;
     if (this.els.lobby) this.els.lobby.hidden = false;
     if (this.els.lobbyTitle) {
-      const titles = { sandbox: 'Practice lobbies', '1v1': '1v1 lobbies', '4v4': '4v4 Race lobbies' };
       this.els.lobbyTitle.textContent = titles[mode] || mode;
     }
   }
@@ -126,13 +121,6 @@ export class GameMenu {
       this._setError(this.authError || 'Set HF_TOKEN in .env.local');
       return;
     }
-    if (!this.playAllowed) {
-      // Spectate-only host: still browse lobbies to pick Spectate.
-      this._setError('');
-      this.showLobby(mode);
-      this.onOpenMode?.(mode);
-      return;
-    }
     this._setError('');
     this.showLobby(mode);
     this.onOpenMode?.(mode);
@@ -146,14 +134,9 @@ export class GameMenu {
   }
   _seatLabel(seatKey) {
-    const m = String(seatKey).match(/^([XYS])-(\d+)$/i);
     if (!m) return { team: null, label: seatKey, cls: '' };
-    const t = m[1].toUpperCase();
-    return {
-      team: t === 'S' ? null : t,
-      label: m[2],
-      cls: t === 'X' ? 'team-x' : t === 'Y' ? 'team-y' : '',
-    };
   }
   _makeSeatBtn(mode, lobby, seat, user) {
@@ -169,7 +152,7 @@ export class GameMenu {
     btn.disabled = locked;
     btn.title = locked
       ? (lobby.status === 'live' || lobby.status === 'starting'
-        ? `${lobby.id} is ${lobby.status} — pick another lobby or wait ~20s for it to free`
         : (user ? `${user} is seated` : 'Spectate only'))
       : seat;
     btn.innerHTML = user
@@ -188,10 +171,6 @@ export class GameMenu {
           this._setError(err.message || String(err));
         }
       });
-    } else if (locked) {
-      btn.addEventListener('click', () => {
-        this._setError(btn.title || 'Seat locked');
-      });
     }
     return btn;
   }
@@ -208,7 +187,7 @@ export class GameMenu {
       return;
     }
     this._setError('');
-    const key = mode === 'sandbox' ? 'sandbox' : mode === '1v1' ? 'duel' : 'squad';
     const lobbies = board[key] || [];
     list.innerHTML = '';
@@ -219,69 +198,32 @@ export class GameMenu {
       const head = document.createElement('div');
       head.className = 'lobby-card-head';
-      head.innerHTML = `<strong>${lobby.id}</strong><span>${lobby.filled}/${lobby.capacity} · ${lobby.status}</span>`;
       card.appendChild(head);
-      const seatEntries = Object.entries(lobby.seats || {});
-      const xs = seatEntries.filter(([k]) => /^X-/i.test(k));
-      const ys = seatEntries.filter(([k]) => /^Y-/i.test(k));
-      if (xs.length || ys.length) {
-        const row = document.createElement('div');
-        row.className = 'lobby-seats teams';
-        const left = document.createElement('div');
-        left.className = 'team-col team-x';
-        const right = document.createElement('div');
-        right.className = 'team-col team-y';
-        for (const [seat, user] of xs) left.appendChild(this._makeSeatBtn(mode, lobby, seat, user));
-        for (const [seat, user] of ys) right.appendChild(this._makeSeatBtn(mode, lobby, seat, user));
-        row.appendChild(left);
-        if (lobby.status === 'live' || lobby.status === 'starting') {
-          const mid = document.createElement('div');
-          mid.className = 'team-mid';
-          const spec = document.createElement('button');
-          spec.type = 'button';
-          spec.className = 'seat-btn spectate-btn';
-          spec.textContent = 'Spectate';
-          spec.addEventListener('click', async () => {
-            try {
-              this._setError('');
-              this.selectedLobby = lobby.id;
-              await this.onSpectate?.(mode, lobby.id);
-            } catch (err) {
-              this._setError(err.message || String(err));
-            }
-          });
-          mid.appendChild(spec);
-          row.appendChild(mid);
-        }
-        row.appendChild(right);
-        card.appendChild(row);
-      } else {
-        const seats = document.createElement('div');
-        seats.className = 'lobby-seats';
-        for (const [seat, user] of seatEntries) {
-          seats.appendChild(this._makeSeatBtn(mode, lobby, seat, user));
-        }
-        if (lobby.status === 'live' || lobby.status === 'starting') {
-          const spec = document.createElement('button');
-          spec.type = 'button';
-          spec.className = 'seat-btn spectate-btn';
-          spec.textContent = 'Spectate';
-          spec.addEventListener('click', async () => {
-            try {
-              this._setError('');
-              this.selectedLobby = lobby.id;
-              await this.onSpectate?.(mode, lobby.id);
-            } catch (err) {
-              this._setError(err.message || String(err));
-            }
-          });
-          seats.appendChild(spec);
-        }
-        card.appendChild(seats);
       }
       list.appendChild(card);
     }
@@ -289,15 +231,12 @@ export class GameMenu {
       if (!this.playAllowed) {
         this.els.lobbyMeta.textContent =
           'Spectate only — click Spectate on a live lobby. No HF login required.';
-      } else if (mode === '1v1') {
-        this.els.lobbyMeta.textContent =
-          'Red vs blue — race starts when both grid seats are filled. Spectate is read-only.';
-      } else if (mode === '4v4') {
         this.els.lobbyMeta.textContent =
-          'Red (left) vs blue (right). Starts when full, or after 60s idle with ≥1 per side.';
       } else {
         this.els.lobbyMeta.textContent =
-          'Practice starts when you join. Spectate watches a live race without taking a seat.';
       }
     }
   }

 export class GameMenu {
   constructor({
     root,
     onOpenMode,
     onBack,
     onClaim,
     onSpectate,
   }) {
     this.root = root;
     this.onOpenMode = onOpenMode;
     this.onBack = onBack;
     this.onClaim = onClaim;
     };
     root.querySelector('#btn-mode-sandbox')?.addEventListener('click', () => this._pickMode('sandbox'));
+    root.querySelector('#btn-mode-mvp')?.addEventListener('click', () => this._pickMode('mvp'));
     this.els.btnBack?.addEventListener('click', () => {
       this.showStart();
       this.onBack?.();
     const sub = this.root.querySelector('.menu-sub');
     if (sub) {
       sub.textContent = this.playAllowed
+        ? 'Sandbox · MVP'
+        : 'Spectate only — no HF login · play is local-only';
     }
+    for (const id of ['btn-mode-sandbox', 'btn-mode-mvp']) {
       const btn = this.root.querySelector(`#${id}`);
       if (btn) btn.hidden = !this.playAllowed;
     }
     if (!this.playAllowed && this.els.start) {
+      this.showLobby('mvp');
+      this.onOpenMode?.('mvp');
     }
   }
     if (this.els.start) this.els.start.hidden = true;
     if (this.els.lobby) this.els.lobby.hidden = false;
     if (this.els.lobbyTitle) {
+      const titles = { sandbox: 'Sandbox lobbies', mvp: 'MVP lobbies' };
       this.els.lobbyTitle.textContent = titles[mode] || mode;
     }
   }
       this._setError(this.authError || 'Set HF_TOKEN in .env.local');
       return;
     }
     this._setError('');
     this.showLobby(mode);
     this.onOpenMode?.(mode);
   }
   _seatLabel(seatKey) {
+    const m = String(seatKey).match(/^([SP])-(\d+)$/i);
     if (!m) return { team: null, label: seatKey, cls: '' };
+    return { team: null, label: m[2], cls: '' };
   }
   _makeSeatBtn(mode, lobby, seat, user) {
     btn.disabled = locked;
     btn.title = locked
       ? (lobby.status === 'live' || lobby.status === 'starting'
+        ? `${lobby.id} is ${lobby.status} — pick another lobby or wait`
         : (user ? `${user} is seated` : 'Spectate only'))
       : seat;
     btn.innerHTML = user
           this._setError(err.message || String(err));
         }
       });
     }
     return btn;
   }
       return;
     }
     this._setError('');
+    const key = mode === 'mvp' ? 'mvp' : 'sandbox';
     const lobbies = board[key] || [];
     list.innerHTML = '';
       const head = document.createElement('div');
       head.className = 'lobby-card-head';
+      const cd = lobby.countdown != null ? ` · ${Math.ceil(lobby.countdown)}s` : '';
+      head.innerHTML = `<strong>${lobby.id}</strong><span>${lobby.filled}/${lobby.capacity} · ${lobby.status}${cd}</span>`;
       card.appendChild(head);
+      const seats = document.createElement('div');
+      seats.className = 'lobby-seats';
+      for (const [seat, user] of Object.entries(lobby.seats || {})) {
+        seats.appendChild(this._makeSeatBtn(mode, lobby, seat, user));
       }
+      if (lobby.status === 'live' || lobby.status === 'starting') {
+        const spec = document.createElement('button');
+        spec.type = 'button';
+        spec.className = 'seat-btn spectate-btn';
+        spec.textContent = 'Spectate';
+        spec.addEventListener('click', async () => {
+          try {
+            this._setError('');
+            this.selectedLobby = lobby.id;
+            await this.onSpectate?.(mode, lobby.id);
+          } catch (err) {
+            this._setError(err.message || String(err));
+          }
+        });
+        seats.appendChild(spec);
+      }
+      card.appendChild(seats);
       list.appendChild(card);
     }
       if (!this.playAllowed) {
         this.els.lobbyMeta.textContent =
           'Spectate only — click Spectate on a live lobby. No HF login required.';
+      } else if (mode === 'mvp') {
         this.els.lobbyMeta.textContent =
+          'MVP: needs ≥3 players. 30s countdown starts when the seat roster is stable — join/leave resets the timer. Cars assigned randomly.';
       } else {
         this.els.lobbyMeta.textContent =
+          'Sandbox: solo test drive. Starts when you take a seat. Default car: Porsche GT2 RS.';
       }
     }
   }

www/js/vehicles.js CHANGED Viewed

@@ -1,36 +1,39 @@
 /**
- * Local car — box placeholder until GLBs land in assets/cars/.
- * Load path convention: assets/cars/<id>.glb
  */
 import * as THREE from 'three';
 import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
-const MAX_SPEED = 42;
-const ACCEL = 28;
-const BRAKE = 40;
-const DRAG = 6;
-const TURN_RATE = 2.1;
 export class LocalCar {
-  constructor(scene, { color = 0xc44b3c } = {}) {
     this.scene = scene;
     this.speed = 0;
     this.yaw = 0;
-    this.mesh = new THREE.Mesh(
-      new THREE.BoxGeometry(1.6, 0.55, 3.2),
-      new THREE.MeshStandardMaterial({ color, metalness: 0.4, roughness: 0.4 }),
-    );
-    this.mesh.castShadow = true;
-    this.mesh.position.set(0, 0.35, 0);
-    this.position = this.mesh.position;
-    scene.add(this.mesh);
     this._loader = new GLTFLoader();
     this.modelId = null;
   }
-  /** Try loading assets/cars/<id>.glb; keep box if missing. */
-  async tryLoadModel(id = 'car') {
     const url = `assets/cars/${id}.glb`;
     try {
       const gltf = await this._loader.loadAsync(url);
@@ -41,23 +44,33 @@ export class LocalCar {
           o.receiveShadow = true;
         }
       });
-      this.scene.remove(this.mesh);
-      this.mesh.geometry?.dispose?.();
-      this.mesh.material?.dispose?.();
-      this.mesh = model;
-      this.position = this.mesh.position;
-      this.scene.add(this.mesh);
       this.modelId = id;
       return true;
-    } catch {
       return false;
     }
   }
   setPose(x, y, z, yaw = 0) {
-    this.mesh.position.set(x, y, z);
     this.yaw = yaw;
-    this.mesh.rotation.y = yaw;
     this.speed = 0;
   }
@@ -66,21 +79,23 @@ export class LocalCar {
     const steer = input?.steer || 0;
     const brake = input?.brake || 0;
-    if (brake) {
-      this.speed = THREE.MathUtils.lerp(this.speed, 0, Math.min(1, brake * BRAKE * delta / Math.max(1, Math.abs(this.speed))));
     } else {
       this.speed += throttle * ACCEL * delta;
     }
     this.speed -= Math.sign(this.speed) * DRAG * delta;
     this.speed = THREE.MathUtils.clamp(this.speed, -MAX_SPEED * 0.35, MAX_SPEED);
     if (Math.abs(this.speed) > 0.4) {
       this.yaw += steer * TURN_RATE * (this.speed / MAX_SPEED) * delta;
     }
-    this.mesh.rotation.y = this.yaw;
-    this.mesh.position.x += Math.sin(this.yaw) * this.speed * delta;
-    this.mesh.position.z += Math.cos(this.yaw) * this.speed * delta;
   }
   speedKmh() {
@@ -88,6 +103,6 @@ export class LocalCar {
   }
   dispose() {
-    this.scene.remove(this.mesh);
   }
 }

 /**
+ * Local car — loads assets/cars/<id>.glb
  */
 import * as THREE from 'three';
 import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+import { DEFAULT_CAR } from './cars.js';
+const MAX_SPEED = 48;
+const ACCEL = 32;
+const BRAKE = 48;
+const DRAG = 7;
+const TURN_RATE = 2.2;
 export class LocalCar {
+  constructor(scene) {
     this.scene = scene;
     this.speed = 0;
     this.yaw = 0;
+    this.root = new THREE.Group();
+    this.mesh = this.root;
+    this.position = this.root.position;
+    scene.add(this.root);
     this._loader = new GLTFLoader();
     this.modelId = null;
+    this._placeholder = new THREE.Mesh(
+      new THREE.BoxGeometry(1.6, 0.55, 3.2),
+      new THREE.MeshStandardMaterial({ color: 0xc44b3c, metalness: 0.4, roughness: 0.4 }),
+    );
+    this._placeholder.castShadow = true;
+    this._placeholder.position.y = 0.35;
+    this.root.add(this._placeholder);
+    this._model = null;
   }
+  async loadModel(id = DEFAULT_CAR) {
     const url = `assets/cars/${id}.glb`;
     try {
       const gltf = await this._loader.loadAsync(url);
           o.receiveShadow = true;
         }
       });
+      // Normalize: sit on ground, facing +Z forward for our yaw convention.
+      const box = new THREE.Box3().setFromObject(model);
+      const size = box.getSize(new THREE.Vector3());
+      const center = box.getCenter(new THREE.Vector3());
+      model.position.sub(center);
+      model.position.y += size.y / 2;
+      if (this._placeholder) {
+        this.root.remove(this._placeholder);
+        this._placeholder.geometry?.dispose?.();
+        this._placeholder.material?.dispose?.();
+        this._placeholder = null;
+      }
+      if (this._model) this.root.remove(this._model);
+      this._model = model;
+      this.root.add(model);
       this.modelId = id;
       return true;
+    } catch (err) {
+      console.warn('car load failed', id, err);
       return false;
     }
   }
   setPose(x, y, z, yaw = 0) {
+    this.root.position.set(x, y, z);
     this.yaw = yaw;
+    this.root.rotation.y = yaw;
     this.speed = 0;
   }
     const steer = input?.steer || 0;
     const brake = input?.brake || 0;
+    if (brake > 0 && throttle <= 0) {
+      const factor = Math.min(1, (BRAKE * delta) / Math.max(1, Math.abs(this.speed)));
+      this.speed = THREE.MathUtils.lerp(this.speed, 0, factor);
     } else {
       this.speed += throttle * ACCEL * delta;
     }
     this.speed -= Math.sign(this.speed) * DRAG * delta;
+    if (Math.abs(this.speed) < 0.05) this.speed = 0;
     this.speed = THREE.MathUtils.clamp(this.speed, -MAX_SPEED * 0.35, MAX_SPEED);
     if (Math.abs(this.speed) > 0.4) {
       this.yaw += steer * TURN_RATE * (this.speed / MAX_SPEED) * delta;
     }
+    this.root.rotation.y = this.yaw;
+    this.root.position.x += Math.sin(this.yaw) * this.speed * delta;
+    this.root.position.z += Math.cos(this.yaw) * this.speed * delta;
   }
   speedKmh() {
   }
   dispose() {
+    this.scene.remove(this.root);
   }
 }