c168da359e
- add lobby, game, leaderboard, results pages - add scripts: storage, lobby, game, drawing, scoring, countries - add styles: main, lobby, game - unify header/footer across all pages - show lobby name in lobby view - remove clear board from leaderboard
183 lines
5.8 KiB
HTML
183 lines
5.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>GeoDraw — Game</title>
|
|
<link rel="stylesheet" href="./styles/main.css" />
|
|
<link rel="stylesheet" href="./styles/game.css" />
|
|
</head>
|
|
<body>
|
|
<div class="wrap">
|
|
|
|
<header class="header">
|
|
<div class="container header__inner">
|
|
<a href="./index.html" class="logo">
|
|
<div class="logo__mark">
|
|
<svg viewBox="0 0 24 24" fill="none">
|
|
<circle cx="12" cy="12" r="9" stroke="white" stroke-width="1.6"/>
|
|
<path d="M3 12 Q8 8 12 12 Q16 16 21 12" stroke="white" stroke-width="1.4" fill="none"/>
|
|
<path d="M12 3 Q14 8 12 12 Q10 16 12 21" stroke="white" stroke-width="1.4" fill="none"/>
|
|
</svg>
|
|
</div>
|
|
<span class="logo__text">GeoDraw</span>
|
|
</a>
|
|
<nav class="nav">
|
|
<a href="lobby.html" class="nav__link">← Back to lobby</a>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<div class="container">
|
|
<div class="game-layout">
|
|
|
|
<!-- ── Top bar: round pips · country name · timer ── -->
|
|
<div class="game-topbar">
|
|
|
|
<div class="game-round">
|
|
<div class="round-pip active" id="pip-1"></div>
|
|
<div class="round-pip" id="pip-2"></div>
|
|
<div class="round-pip" id="pip-3"></div>
|
|
<span class="round-label">Round <span id="round-num">1</span> / 3</span>
|
|
</div>
|
|
|
|
<div class="game-country">
|
|
<div class="country-name" id="country-name">Loading…</div>
|
|
<div class="country-hint" id="country-hint"></div>
|
|
</div>
|
|
|
|
<div class="game-timer">
|
|
<div class="timer-display">
|
|
<span class="timer-num" id="timer-num">60</span>
|
|
<span class="timer-unit">sec</span>
|
|
</div>
|
|
<div class="timer-track">
|
|
<div class="timer-bar" id="timer-bar"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- ── Canvas + sidebar ── -->
|
|
<div class="canvas-area">
|
|
|
|
<div class="canvas-wrap" id="canvas-wrap">
|
|
<canvas id="draw-canvas"></canvas>
|
|
<div id="score-feedback"></div>
|
|
</div>
|
|
|
|
<aside class="game-sidebar">
|
|
|
|
<div class="sidebar-card">
|
|
<p class="sidebar-card__label">Player</p>
|
|
<p class="player-name-display" id="player-name-display">—</p>
|
|
</div>
|
|
|
|
<div class="sidebar-card">
|
|
<p class="sidebar-card__label">Round Scores</p>
|
|
<div class="round-scores">
|
|
<div class="rscore-row">
|
|
<span class="rscore-label">Round 1</span>
|
|
<span class="rscore-val" id="score-r1">—</span>
|
|
</div>
|
|
<div class="rscore-row">
|
|
<span class="rscore-label">Round 2</span>
|
|
<span class="rscore-val" id="score-r2">—</span>
|
|
</div>
|
|
<div class="rscore-row">
|
|
<span class="rscore-label">Round 3</span>
|
|
<span class="rscore-val" id="score-r3">—</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sidebar-card">
|
|
<p class="sidebar-card__label">How to play</p>
|
|
<p style="font-size:.82rem;color:var(--ink-soft);line-height:1.55;">
|
|
Draw the country's outline from memory. City dots are hints. Press <strong>Submit</strong> when done or wait for the timer.
|
|
</p>
|
|
</div>
|
|
|
|
</aside>
|
|
</div>
|
|
|
|
<!-- ── Controls ── -->
|
|
<div class="game-controls">
|
|
<button id="btn-clear" class="btn btn--ghost btn--sm">
|
|
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
|
|
<path d="M2 2l10 10M12 2L2 12" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
|
|
</svg>
|
|
Clear
|
|
</button>
|
|
<button id="btn-submit" class="btn btn--primary">
|
|
Submit & Next Round →
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="footer">
|
|
<div class="container footer__inner">
|
|
|
|
<div class="footer__left">
|
|
|
|
</div>
|
|
|
|
<div class="footer__center">
|
|
<a href="index.html" class="footer__brand">GeoDraw</a>
|
|
<p class="footer__sub">Browser geography game</p>
|
|
</div>
|
|
|
|
<div class="footer__right">
|
|
</div>
|
|
|
|
</div>
|
|
</footer>
|
|
|
|
</div>
|
|
|
|
<script src="scripts/storage.js"></script>
|
|
<script src="scripts/countries.js"></script>
|
|
<script src="scripts/scoring.js"></script>
|
|
<script src="scripts/drawing.js"></script>
|
|
<script>
|
|
// Init drawing on canvas element
|
|
window.addEventListener("DOMContentLoaded", () => {
|
|
Drawing.init(document.getElementById("draw-canvas"));
|
|
|
|
// Show player name
|
|
document.getElementById("player-name-display").textContent = Storage.getPlayerName();
|
|
|
|
// Track drawing for placeholder hide
|
|
const wrap = document.getElementById("canvas-wrap");
|
|
document.getElementById("draw-canvas").addEventListener("pointerdown", () => {
|
|
wrap.classList.add("has-drawing");
|
|
});
|
|
|
|
// Update round pips when round changes (game.js calls this)
|
|
window.updateRoundPips = function(round) {
|
|
for (let i = 1; i <= 3; i++) {
|
|
const pip = document.getElementById(`pip-${i}`);
|
|
pip.className = "round-pip" +
|
|
(i < round ? " done" : "") +
|
|
(i === round ? " active" : "");
|
|
}
|
|
};
|
|
|
|
// Update score display in sidebar
|
|
window.updateScoreDisplay = function(roundIdx, score) {
|
|
const el = document.getElementById(`score-r${roundIdx + 1}`);
|
|
if (el) {
|
|
el.textContent = score + "%";
|
|
el.classList.add("filled");
|
|
}
|
|
};
|
|
});
|
|
</script>
|
|
<script src="scripts/game.js"></script>
|
|
</body>
|
|
</html>
|