QR code & clickable URL on TV lobby, BOOST card-only, remove METEOR_STRIKE/TELEPORT, fix vite base paths for production, Dockerfile with frontend builds, Makefile with podman

This commit is contained in:
2026-06-24 20:32:34 +02:00
parent 5e2ab43ca3
commit 8531864b25
30 changed files with 3036 additions and 629 deletions
+25 -13
View File
@@ -4,14 +4,24 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<title>SpaceRace - Controller</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="/src/style.css" />
</head>
<body>
<div id="app">
<button id="audio-toggle" class="audio-toggle" aria-label="Toggle sound" title="Toggle sound">
<span class="audio-icon-on">🔊</span>
<span class="audio-icon-off">🔇</span>
</button>
<div id="screen-join" class="screen active">
<h1>🚀 SpaceRace</h1>
<p class="join-sub">Pilot your ship to victory</p>
<div class="join-form">
<input type="text" id="room-input" placeholder="Room Code" maxlength="4" autocomplete="off" />
<label for="room-input">Room Code</label>
<input type="text" id="room-input" placeholder="ABCD" maxlength="4" autocomplete="off" />
<label for="name-input">Callsign</label>
<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>
@@ -23,9 +33,10 @@
<div class="planning-header">
<div class="header-left">
<span id="color-dot" class="color-dot"></span>
<span id="round-label">Round 1</span>
<span id="player-name" class="player-name">Pilot</span>
</div>
<div class="header-center">
<span id="round-label">Round 1</span>
<span id="timer-label">45s</span>
</div>
<div class="header-right">
@@ -55,20 +66,17 @@
<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 class="action-queue-label">Action Sequence</div>
<div id="queue-list" class="queue-list"></div>
</div>
<!-- Card hand -->
<div id="card-hand" class="card-hand">
<div class="card-hand-label">Tactical Cards</div>
<div id="card-list" class="card-list"></div>
</div>
@@ -80,20 +88,24 @@
</div>
<div id="screen-waiting" class="screen">
<h2>Executing...</h2>
<p id="waiting-message">Watch the TV!</p>
<div class="tv-icon"></div>
<h2>Executing…</h2>
<p id="waiting-message">Watch the TV screen</p>
</div>
<div id="screen-spectator" class="screen">
<h2>💀 Eliminated</h2>
<h2 id="spectator-title">💀 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>
<h2>Mission Lobby</h2>
<div class="lobby-room-badge">
<span class="lobby-room-label">Room Code</span>
<span id="lobby-room" class="lobby-room-code">----</span>
</div>
<div id="lobby-players">
<h3>Players</h3>
<h3>Crew Manifest</h3>
<ul id="lobby-player-list"></ul>
</div>
<p id="lobby-waiting">Waiting for host to start...</p>