117 lines
4.2 KiB
HTML
117 lines
4.2 KiB
HTML
<!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="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">
|
|
<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>
|
|
</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="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">
|
|
<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>
|
|
</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>
|
|
|
|
<!-- 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">
|
|
<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 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>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>Crew Manifest</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>
|