170 lines
6.7 KiB
HTML
170 lines
6.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Riddle Racer 🏎️</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
|
|
<!-- ═══════════════════════════════════════════
|
|
HOME SCREEN
|
|
═══════════════════════════════════════════ -->
|
|
<div id="home-screen" class="screen active">
|
|
<div class="home-wrapper">
|
|
<div class="home-logo">
|
|
<div class="logo-cars">🏎️ 🚗 🚙</div>
|
|
<h1>Riddle Racer</h1>
|
|
<p class="tagline">Answer riddles. Move your car. Win the race!</p>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<label class="input-label">Your Racing Name</label>
|
|
<input type="text" id="name-input" placeholder="e.g. SpeedDemon99" maxlength="20" autocomplete="off" />
|
|
|
|
<div class="tabs">
|
|
<button class="tab-btn active" data-tab="create">Create Room</button>
|
|
<button class="tab-btn" data-tab="join">Join Room</button>
|
|
</div>
|
|
|
|
<div id="create-tab" class="tab-content active">
|
|
<p class="tab-desc">Start a new race and invite friends with your room code.</p>
|
|
<button id="create-btn" class="btn btn-red">🚀 Create Race Room</button>
|
|
</div>
|
|
|
|
<div id="join-tab" class="tab-content">
|
|
<p class="tab-desc">Enter the room code your friend shared with you.</p>
|
|
<input type="text" id="code-input" placeholder="Room code (e.g. ABC123)" maxlength="6"
|
|
autocomplete="off" style="text-transform:uppercase; letter-spacing: 4px; font-size: 1.2rem;" />
|
|
<button id="join-btn" class="btn btn-blue">🚗 Join Race</button>
|
|
</div>
|
|
|
|
<div id="error-msg" class="error-msg"></div>
|
|
</div>
|
|
|
|
<p class="home-footer">Up to 8 players • Answer 10 riddles to cross the finish line</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ═══════════════════════════════════════════
|
|
LOBBY SCREEN
|
|
═══════════════════════════════════════════ -->
|
|
<div id="lobby-screen" class="screen">
|
|
<div class="lobby-wrapper">
|
|
<div class="lobby-header">
|
|
<h1>🏎️ Riddle Racer</h1>
|
|
<div class="room-code-box">
|
|
<span class="room-code-label">Room Code</span>
|
|
<span id="room-code" class="room-code-val"></span>
|
|
<button id="copy-btn" class="btn-icon" title="Copy code">📋</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h3>Racers in the Lobby <span id="player-count" class="count-badge">0</span></h3>
|
|
<div id="player-list" class="player-list"></div>
|
|
|
|
<div class="lobby-actions">
|
|
<button id="start-btn" class="btn btn-green" style="display:none">🏁 Start the Race!</button>
|
|
<p id="waiting-msg" class="waiting-text" style="display:none">
|
|
⏳ Waiting for the host to start the race...
|
|
</p>
|
|
<p class="lobby-hint">Share the room code so friends can join!</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="race-rules">
|
|
<div class="rule">🧩 Answer riddles correctly to move forward</div>
|
|
<div class="rule">🏎️ First to answer 10 riddles wins!</div>
|
|
<div class="rule">🏁 Race continues until everyone finishes</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ═══════════════════════════════════════════
|
|
GAME SCREEN
|
|
═══════════════════════════════════════════ -->
|
|
<div id="game-screen" class="screen">
|
|
<div class="game-wrapper">
|
|
|
|
<div class="game-topbar">
|
|
<span class="topbar-title">🏎️ Riddle Racer</span>
|
|
<span id="game-room-badge" class="room-badge"></span>
|
|
</div>
|
|
|
|
<!-- Race Track -->
|
|
<div class="track-section">
|
|
<div id="race-track" class="race-track"></div>
|
|
</div>
|
|
|
|
<!-- Riddle Panel (hidden when player finishes) -->
|
|
<div id="riddle-panel" class="riddle-panel">
|
|
<div class="riddle-header">
|
|
<span class="riddle-counter">🧩 Riddle <span id="riddle-num">1</span> of <span id="riddle-total">10</span></span>
|
|
<div class="progress-outer">
|
|
<div id="progress-fill" class="progress-fill" style="width:0%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<p id="riddle-question" class="riddle-question"></p>
|
|
|
|
<div class="answer-row">
|
|
<input type="text" id="answer-input" class="answer-input"
|
|
placeholder="Type your answer here..." autocomplete="off" />
|
|
<button id="submit-btn" class="btn btn-green submit-btn">Submit ➤</button>
|
|
</div>
|
|
|
|
<div class="riddle-footer">
|
|
<button id="hint-btn" class="btn btn-hint">💡 Hint</button>
|
|
<span id="feedback" class="feedback"></span>
|
|
</div>
|
|
|
|
<div id="hint-box" class="hint-box" style="display:none">
|
|
<span class="hint-label">💡 Hint:</span>
|
|
<span id="hint-text"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Shown when this player finishes -->
|
|
<div id="finished-banner" class="finished-banner" style="display:none">
|
|
<div class="finished-inner">
|
|
<div class="finished-trophy" id="finished-trophy"></div>
|
|
<p id="finished-text"></p>
|
|
<p class="finished-sub">Watching others finish... 🍿</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ═══════════════════════════════════════════
|
|
RESULTS SCREEN
|
|
═══════════════════════════════════════════ -->
|
|
<div id="results-screen" class="screen">
|
|
<div class="results-wrapper">
|
|
<div class="results-header">
|
|
<div class="results-flags">🏁 🏁 🏁</div>
|
|
<h1>Race Complete!</h1>
|
|
<p class="results-sub">Final Standings</p>
|
|
</div>
|
|
|
|
<div id="results-list" class="results-list"></div>
|
|
|
|
<div class="results-actions">
|
|
<button id="play-again-btn" class="btn btn-red" style="display:none">🔄 Race Again!</button>
|
|
<p id="host-only-msg" class="waiting-text" style="display:none">
|
|
Waiting for the host to start a new race...
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Notification container -->
|
|
<div id="notif-container"></div>
|
|
|
|
<script src="/socket.io/socket.io.js"></script>
|
|
<script src="game.js"></script>
|
|
</body>
|
|
</html>
|