186 lines
6.1 KiB
HTML
186 lines
6.1 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>
|
||
<noscript>
|
||
<p class="noscript-msg">GeoDraw requires JavaScript. Please enable it in your browser settings.</p>
|
||
</noscript>
|
||
<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" aria-hidden="true">
|
||
<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" aria-label="Main navigation">
|
||
<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" role="application" aria-label="Drawing canvas – sketch the country border here"></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" aria-hidden="true">
|
||
<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>
|