105 lines
3.4 KiB
HTML
105 lines
3.4 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="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>
|