nico/SpaceRace
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

SpaceRace: Full-width TV field, death line scrolling, camera following leader, jump fix, path never fully blocked, player color on controller

Browse Source
This commit is contained in:
nico
2026-06-24 16:41:37 +02:00
commit 5e2ab43ca3
46 changed files with 6581 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
controller/index.html
+104
View File
@@ -0,0 +1,104 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<title>SpaceRace - Controller</title>
<link rel="stylesheet" href="/src/style.css" />
</head>
<body>
<div id="app">
<div id="screen-join" class="screen active">
<h1>🚀 SpaceRace</h1>
<div class="join-form">
<input type="text" id="room-input" placeholder="Room Code" maxlength="4" autocomplete="off" />
<input type="text" id="name-input" placeholder="Your Name" maxlength="12" autocomplete="off" />
<button id="join-btn">Join Race</button>
<p id="join-error" class="error"></p>
</div>
<div id="qr-container"></div>
</div>
<div id="screen-planning" class="screen">
<div class="planning-header">
<div class="header-left">
<span id="color-dot" class="color-dot"></span>
<span id="round-label">Round 1</span>
</div>
<div class="header-center">
<span id="timer-label">45s</span>
</div>
<div class="header-right">
<span id="ap-label">AP: 0/4</span>
</div>
</div>
<!-- AP bar -->
<div class="ap-bar">
<div id="ap-fill" class="ap-fill"></div>
</div>
<!-- Action buttons grid -->
<div id="action-grid" class="action-grid">
<button class="act-btn" data-action="TURN_LEFT">
<span class="act-icon">↰</span>
<span class="act-label">Left</span>
<span class="act-cost">1 AP</span>
</button>
<button class="act-btn primary" data-action="MOVE_FORWARD">
<span class="act-icon">↑</span>
<span class="act-label">Forward</span>
<span class="act-cost">1 AP</span>
</button>
<button class="act-btn" data-action="TURN_RIGHT">
<span class="act-icon">↱</span>
<span class="act-label">Right</span>
<span class="act-cost">1 AP</span>
</button>
<button class="act-btn accent" data-action="BOOST">
<span class="act-icon">⚡</span>
<span class="act-label">Boost</span>
<span class="act-cost">2 AP</span>
</button>
</div>
<!-- Action queue -->
<div id="action-queue" class="action-queue">
<div id="queue-list" class="queue-list"></div>
</div>
<!-- Card hand -->
<div id="card-hand" class="card-hand">
<div id="card-list" class="card-list"></div>
</div>
<!-- Bottom buttons -->
<div class="planning-bottom">
<button id="clear-plan-btn" class="btn-clear">✕ Clear</button>
<button id="submit-plan-btn" class="btn-submit" disabled>GO!</button>
</div>
</div>
<div id="screen-waiting" class="screen">
<h2>Executing...</h2>
<p id="waiting-message">Watch the TV!</p>
</div>
<div id="screen-spectator" class="screen">
<h2>💀 Eliminated</h2>
<p>You're out! Watch the TV to see who wins.</p>
</div>
<div id="screen-lobby" class="screen">
<h2>Lobby</h2>
<p id="lobby-room">Room: ----</p>
<div id="lobby-players">
<h3>Players</h3>
<ul id="lobby-player-list"></ul>
</div>
<p id="lobby-waiting">Waiting for host to start...</p>
</div>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>