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
155 lines
4.8 KiB
HTML
155 lines
4.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 — Leaderboard</title>
|
|
<link rel="stylesheet" href="./styles/main.css" />
|
|
<link rel="stylesheet" href="./styles/leader.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="index.html" class="nav__link">Home</a>
|
|
<a href="lobby.html" class="nav__cta">Play again →</a>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<div class="container lb-page">
|
|
<div class="lb-inner">
|
|
|
|
<div class="lb-head">
|
|
<div>
|
|
<p class="section-label">Top players</p>
|
|
<h1 class="lb-title">Leader<em>board</em></h1>
|
|
</div>
|
|
<div class="lb-actions">
|
|
<a href="lobby.html" class="btn btn--primary btn--sm">Play again →</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="lb-table" id="lb-table">
|
|
<div class="lb-table-head">
|
|
<span class="lb-th">#</span>
|
|
<span class="lb-th">Player</span>
|
|
<span class="lb-th hide-sm right">Rounds</span>
|
|
<span class="lb-th hide-sm right">Date</span>
|
|
<span class="lb-th right">Score</span>
|
|
</div>
|
|
<div class="lb-body" id="lb-body">
|
|
<!-- filled by JS -->
|
|
</div>
|
|
</div>
|
|
|
|
<div id="your-bar" class="your-score-bar" style="display:none">
|
|
<p class="your-score-bar__text">Your latest: <strong id="your-bar-name">—</strong></p>
|
|
<p class="your-score-bar__text">Score: <strong id="your-bar-score" style="color:var(--sea)">—</strong> / 300</p>
|
|
</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>
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
const currentPlayer = Storage.getPlayerName();
|
|
const body = document.getElementById("lb-body");
|
|
|
|
function render() {
|
|
const board = Storage.getLeaderboard();
|
|
body.innerHTML = "";
|
|
|
|
if (!board.length) {
|
|
body.innerHTML = `
|
|
<div class="lb-empty">
|
|
<div class="lb-empty__icon">🏁</div>
|
|
<p class="lb-empty__text">No games played yet. Be the first on the board!</p>
|
|
<a href="lobby.html" class="btn btn--primary btn--sm">Play now →</a>
|
|
</div>`;
|
|
return;
|
|
}
|
|
|
|
const medals = ["🥇","🥈","🥉"];
|
|
const scoreClasses = ["gold","silver","bronze"];
|
|
|
|
board.forEach((entry, i) => {
|
|
const rank = i + 1;
|
|
const isYou = entry.name === currentPlayer;
|
|
const date = entry.date
|
|
? new Date(entry.date).toLocaleDateString("en-CH", { day:"2-digit", month:"short" })
|
|
: "—";
|
|
const rounds = (entry.scores || []).join(" · ") || "—";
|
|
|
|
const row = document.createElement("div");
|
|
row.className = `lb-row${rank <= 3 ? ` rank-${rank}` : ""}`;
|
|
row.style.animationDelay = `${i * 0.05}s`;
|
|
|
|
row.innerHTML = `
|
|
<span class="lb-rank">${rank <= 3 ? `<span class="lb-medal">${medals[rank-1]}</span>` : rank}</span>
|
|
<span class="lb-name${isYou ? " is-you" : ""}">${escHtml(entry.name)}</span>
|
|
<span class="lb-rounds hide-sm">${escHtml(rounds)}</span>
|
|
<span class="lb-date hide-sm">${date}</span>
|
|
<span class="lb-score${rank <= 3 ? " " + scoreClasses[rank-1] : ""}">${entry.totalScore}</span>
|
|
`;
|
|
body.appendChild(row);
|
|
});
|
|
|
|
// Your latest score bar
|
|
const latest = board.find(e => e.name === currentPlayer);
|
|
if (latest) {
|
|
document.getElementById("your-bar").style.display = "flex";
|
|
document.getElementById("your-bar-name").textContent = latest.name;
|
|
document.getElementById("your-bar-score").textContent = latest.totalScore;
|
|
}
|
|
}
|
|
|
|
function escHtml(str) {
|
|
return String(str)
|
|
.replace(/&/g,"&")
|
|
.replace(/</g,"<")
|
|
.replace(/>/g,">");
|
|
}
|
|
|
|
render();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|