step 10.17: wip (not ticked)
This commit is contained in:
bepis
+15
-10
@@ -4,8 +4,8 @@
|
||||
> If this file disagrees with the code, trust the code and fix this file.
|
||||
|
||||
## 1. Where we are
|
||||
- **Last completed step:** 10.16 — Leaderboard made public (removed `requireAuth`); hero profile was already public
|
||||
- **Next step:** Phase 10.17 — Build `public/leaderboard.html` + `public/js/leaderboard.js`: tabs Level/Gold/Kills, rank, hero name (link to profile.html?name=...), class, value; `textContent` only. Add nav links (Game, Shop, Leaderboard, Logout) to header of every logged-in page. Remove temporary link-checker exception from 10.5.
|
||||
- **Last completed step:** 10.17 — Leaderboard UI built (`leaderboard.html` + `leaderboard.js`), nav links (Game, Shop, Leaderboard, Logout) added to all logged-in pages (game.html, shop.html, create-hero.html, leaderboard.html)
|
||||
- **Next step:** Phase 10.18 — (next)
|
||||
- **Updated:** 2026-10-23
|
||||
- **Was the last session cut off mid-task?** No
|
||||
|
||||
@@ -14,18 +14,20 @@
|
||||
|---|---|
|
||||
| `npm install` | succeeds |
|
||||
| `npm run migrate` | applies 001–007 / "nothing to do" |
|
||||
| `npm test` | **273 passing, 0 failing** (97 unit + 176 integration incl. 9 public leaderboard/profile tests) |
|
||||
| `npm test` | **284 passing, 0 failing** (97 unit + 187 integration incl. 11 step-10.17 tests) |
|
||||
| `npm run seed:dev` | creates demo user "demo"/"demo123", hero "Aldric" (warrior), starter gear |
|
||||
| `npm start` + `curl localhost:3000/` | 200 HTML landing page |
|
||||
| `curl localhost:3000/leaderboard.html` | 200 HTML (leaderboard page) |
|
||||
| `curl localhost:3000/api/leaderboard?type=level` | 200 JSON (no auth required) |
|
||||
|
||||
## 3. What exists now (files that matter)
|
||||
- `src/app.js` — leaderboard route no longer has `requireAuth` (public)
|
||||
- `tests/integration/step-10.16.test.js` — NEW: 9 tests for public leaderboard + hero profile
|
||||
- `tests/integration/leaderboard.test.js` — updated "rejects request without authentication" → "is accessible without authentication"
|
||||
- `public/leaderboard.html` — real leaderboard page with Level/Gold/Kills tabs, table, pagination
|
||||
- `public/js/leaderboard.js` — fetches API, renders entries with profile links, uses createElement/textContent only
|
||||
- `public/css/main.css` — nav-links styles added to header
|
||||
- `public/game.html`, `shop.html`, `create-hero.html`, `leaderboard.html` — all have nav links (Game, Shop, Leaderboard, Logout)
|
||||
- `tests/integration/step-10.17.test.js` — 11 tests (nav links, page structure, code quality, API integration)
|
||||
|
||||
## 4. Half-finished / fragile things
|
||||
- No leaderboard UI yet (stub page exists; real UI in 10.17).
|
||||
- No restart-persistence test for sessions.
|
||||
- `npm run seed` script in package.json points to nonexistent `scripts/seed.js`.
|
||||
- `GET /api/zones` documented in API.md but not implemented.
|
||||
@@ -88,8 +90,11 @@
|
||||
- **10.14:** `deleteRowExact` needed for CHECK constraint `quantity >= 1` — when selling exhausts a row, delete by matching quantity instead of decrementing to 0.
|
||||
- **10.15:** When extracting shared `grantItem`, the calling service's stmtCache MUST include `stackRow`, `addToStack`, `insertInv` with the exact same SQL as huntService — otherwise `grantItem` gets `undefined` statements.
|
||||
- **10.16:** Leaderboard returns `{ ok: true, data: { entries: [...], pagination: {...} } }`.
|
||||
- **10.17:** Test for `innerHTML` must also check comments — the word `innerHTML` in a comment will fail the test.
|
||||
- **10.17:** Hero names in the leaderboard are rendered dynamically by JS, so tests should check the JS code pattern (not static HTML) for profile link generation.
|
||||
|
||||
## 7. Next-step briefing
|
||||
- **Next step: 10.17** — Build `public/leaderboard.html` + `public/js/leaderboard.js`: tabs Level/Gold/Kills, rank, hero name (linking to `profile.html?name=...`), class, value; `textContent` only. Add nav links (Game, Shop, Leaderboard, Logout) to the header of every logged-in page. Remove any temporary link-checker exception from 10.5.
|
||||
- The leaderboard API (`GET /api/leaderboard?type=level|gold|kills&page=1`) is already public and returns `{ entries: [{rank, name, class, level, xp, kills, gold}], pagination: {page, limit, total, totalPages} }`.
|
||||
- The link-checker test currently has no exceptions (10.5 stub page was already created), so adding the real leaderboard page should make it pass naturally.
|
||||
- **Next step: 10.18** — (pending)
|
||||
- The leaderboard page is fully functional with tabs, pagination, and profile links.
|
||||
- All logged-in pages now have consistent navigation (Game, Shop, Leaderboard, Logout).
|
||||
- The link-checker test passes with no exceptions.
|
||||
|
||||
@@ -8,9 +8,9 @@
|
||||
|
||||
## Current Focus
|
||||
- **Phase:** 10
|
||||
- **Step:** 10.17 — (next)
|
||||
- **Step:** 10.18 — (next)
|
||||
- **Blocked?** No
|
||||
- **Last verified working command:** `npm test` — 273/273 passing (97 unit + 176 integration incl. 9 public leaderboard/profile tests), 2026-10-23 step 10.16
|
||||
- **Last verified working command:** `npm test` — 284/284 passing (97 unit + 187 integration incl. 11 step-10.17 tests), 2026-10-23 step 10.17
|
||||
|
||||
## Project Health
|
||||
| Item | State |
|
||||
@@ -180,6 +180,9 @@
|
||||
- [x] **10.13** Starter kit (GAME_DESIGN §Items): `createCharacter` grants, in the same transaction, one class-appropriate common weapon (warrior Rusty Sword, mage Apprentice Staff, ranger Hunter's Shortbow) already equipped in the weapon slot, plus 2 Minor Healing Potions.
|
||||
*Acceptance:* tests per class: inventory has exactly the weapon (equipped) and 2 potions (one stack row, quantity 2); derived attack includes the weapon.
|
||||
*Verified:* 4 new integration tests (warrior/mage/ranger starter kit + duplicate-name rejection); `STARTER_WEAPONS` map in `characterService.js`; `grantKit` transaction inserts equipped weapon + 2 potions; `grantItem` helpers in inventory/shop tests updated to stack with existing rows; 10+ existing tests updated to account for starter kit baseline; 253/253 tests pass.
|
||||
- [x] **10.17** Build `public/leaderboard.html` + `public/js/leaderboard.js`: tabs Level/Gold/Kills, rank, hero name (link to profile.html?name=...), class, value; `textContent` only. Add nav links (Game, Shop, Leaderboard, Logout) to header of every logged-in page. Remove temporary link-checker exception from 10.5.
|
||||
*Acceptance:* leaderboard page loads, tabs switch, entries render with profile links; nav links on game.html, shop.html, create-hero.html, leaderboard.html; link-checker passes.
|
||||
*Verified:* 11 integration tests (4 nav-link checks, 3 page-structure, 1 code-quality, 3 API integration); `leaderboard.html` with tabs/table/pagination; `leaderboard.js` uses createElement + textContent only, no innerHTML; nav-links CSS added to main.css; nav links added to game.html, shop.html, create-hero.html, leaderboard.html; 284/284 tests pass.
|
||||
### E. Economy
|
||||
- [x] **10.14** Fix material sell prices. The code uses `defaultRate * heroLevel / itemMinLevel`; BALANCE.md says price depends on the ITEM's level: common `2 × min_level`, uncommon `4 × min_level`, rare `8 × min_level` (epic `16×`, legendary `32×`; log this extension in DECISIONS.md), minimum 1. Note BALANCE.md's table says Drake Scale sells for 90g but its formula gives 112g: follow the formula and correct the table. Use ONE function (`materialSellPrice` in `src/game/rewards.js`) for the shop list AND for selling.
|
||||
*Acceptance:* tests: Rat Tail sells for 2g at hero level 1, 10 and 50; Drake Scale (rare, level 14) sells for 112g at any hero level; shop-listed price equals the amount actually paid.
|
||||
|
||||
@@ -10,6 +10,12 @@
|
||||
<div class="auth-container">
|
||||
<h1>Emberfall</h1>
|
||||
<h2>Create Your Hero</h2>
|
||||
<nav class="nav-links" id="nav-links">
|
||||
<a href="/game.html">Game</a>
|
||||
<a href="/shop.html">Shop</a>
|
||||
<a href="/leaderboard.html">Leaderboard</a>
|
||||
<a href="/api/auth/logout" id="logout-btn">Logout</a>
|
||||
</nav>
|
||||
<div id="error" class="error" style="display:none;"></div>
|
||||
<form id="create-hero-form">
|
||||
<label for="hero-name">Hero Name</label>
|
||||
|
||||
@@ -94,6 +94,16 @@ button:hover { background: #c73650; }
|
||||
|
||||
.logo { color: #e94560; font-size: 1.25rem; font-weight: bold; }
|
||||
|
||||
.nav-links { display: flex; align-items: center; gap: 1rem; }
|
||||
.nav-links a {
|
||||
color: #a0a0a0;
|
||||
text-decoration: none;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.nav-links a:hover { color: #e94560; }
|
||||
|
||||
.user-info { display: flex; align-items: center; gap: 1rem; }
|
||||
.user-info span { color: #a0a0a0; }
|
||||
.user-info a { color: #e94560; text-decoration: none; }
|
||||
|
||||
+6
-1
@@ -11,9 +11,14 @@
|
||||
<!-- Top bar -->
|
||||
<header class="top-bar">
|
||||
<div class="logo">Emberfall</div>
|
||||
<nav class="nav-links" id="nav-links">
|
||||
<a href="/game.html">Game</a>
|
||||
<a href="/shop.html">Shop</a>
|
||||
<a href="/leaderboard.html">Leaderboard</a>
|
||||
<a href="/api/auth/logout" id="logout-btn">Logout</a>
|
||||
</nav>
|
||||
<div class="user-info">
|
||||
<span id="player-name"></span>
|
||||
<a href="/api/auth/logout" id="logout-btn">Logout</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -0,0 +1,181 @@
|
||||
// Leaderboard page: public leaderboard with tabs for Level, Gold, Kills.
|
||||
// Uses createElement + textContent only — DOM property is never overwritten.
|
||||
|
||||
const VALUE_LABELS = { level: 'Level', gold: 'Gold', kills: 'Kills' };
|
||||
|
||||
let currentType = 'level';
|
||||
let currentPage = 1;
|
||||
|
||||
// ─── API helper (no auth needed) ──────────────────────────────────────────
|
||||
|
||||
async function apiGet(path) {
|
||||
const res = await fetch(path);
|
||||
return res.json();
|
||||
}
|
||||
|
||||
// ─── Render: leaderboard entries ──────────────────────────────────────────
|
||||
|
||||
function renderLeaderboard(entries, pagination) {
|
||||
const tbody = document.getElementById('leaderboard-body');
|
||||
tbody.replaceChildren();
|
||||
|
||||
if (entries.length === 0) {
|
||||
const tr = document.createElement('tr');
|
||||
const td = document.createElement('td');
|
||||
td.className = 'placeholder';
|
||||
td.textContent = 'No heroes yet.';
|
||||
td.setAttribute('colspan', '4');
|
||||
tr.appendChild(td);
|
||||
tbody.appendChild(tr);
|
||||
return;
|
||||
}
|
||||
|
||||
for (const entry of entries) {
|
||||
const tr = document.createElement('tr');
|
||||
|
||||
// Rank
|
||||
const rankTd = document.createElement('td');
|
||||
rankTd.className = 'rank-cell';
|
||||
rankTd.textContent = entry.rank;
|
||||
tr.appendChild(rankTd);
|
||||
|
||||
// Name (link to profile)
|
||||
const nameTd = document.createElement('td');
|
||||
nameTd.className = 'name-cell';
|
||||
const nameLink = document.createElement('a');
|
||||
nameLink.href = `/profile.html?name=${encodeURIComponent(entry.name)}`;
|
||||
nameLink.textContent = entry.name;
|
||||
nameTd.appendChild(nameLink);
|
||||
tr.appendChild(nameTd);
|
||||
|
||||
// Class
|
||||
const classTd = document.createElement('td');
|
||||
classTd.className = 'class-cell';
|
||||
classTd.textContent = entry.class;
|
||||
tr.appendChild(classTd);
|
||||
|
||||
// Value (level / gold / kills)
|
||||
const valueTd = document.createElement('td');
|
||||
valueTd.className = 'value-cell';
|
||||
valueTd.textContent = entry[currentType];
|
||||
tr.appendChild(valueTd);
|
||||
|
||||
tbody.appendChild(tr);
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Render: pagination ──────────────────────────────────────────────────
|
||||
|
||||
function renderPagination(page, totalPages) {
|
||||
const container = document.getElementById('pagination');
|
||||
container.replaceChildren();
|
||||
|
||||
if (totalPages <= 1) return;
|
||||
|
||||
// Previous button
|
||||
const prevBtn = document.createElement('button');
|
||||
prevBtn.textContent = '‹';
|
||||
prevBtn.disabled = page <= 1;
|
||||
prevBtn.addEventListener('click', () => {
|
||||
currentPage = page - 1;
|
||||
loadLeaderboard();
|
||||
});
|
||||
container.appendChild(prevBtn);
|
||||
|
||||
// Page number buttons (show up to 5 pages)
|
||||
let startPage = Math.max(1, page - 2);
|
||||
let endPage = Math.min(totalPages, startPage + 4);
|
||||
if (endPage - startPage < 4) startPage = Math.max(1, endPage - 4);
|
||||
|
||||
for (let p = startPage; p <= endPage; p++) {
|
||||
const btn = document.createElement('button');
|
||||
btn.textContent = p;
|
||||
if (p === page) btn.className = 'active';
|
||||
btn.addEventListener('click', () => {
|
||||
currentPage = p;
|
||||
loadLeaderboard();
|
||||
});
|
||||
container.appendChild(btn);
|
||||
}
|
||||
|
||||
// Next button
|
||||
const nextBtn = document.createElement('button');
|
||||
nextBtn.textContent = '›';
|
||||
nextBtn.disabled = page >= totalPages;
|
||||
nextBtn.addEventListener('click', () => {
|
||||
currentPage = page + 1;
|
||||
loadLeaderboard();
|
||||
});
|
||||
container.appendChild(nextBtn);
|
||||
}
|
||||
|
||||
// ─── Load leaderboard data ───────────────────────────────────────────────
|
||||
|
||||
async function loadLeaderboard() {
|
||||
const tbody = document.getElementById('leaderboard-body');
|
||||
const tr = document.createElement('tr');
|
||||
const td = document.createElement('td');
|
||||
td.className = 'placeholder';
|
||||
td.textContent = 'Loading...';
|
||||
td.setAttribute('colspan', '4');
|
||||
tr.appendChild(td);
|
||||
tbody.replaceChildren(tr);
|
||||
|
||||
try {
|
||||
const data = await apiGet(`/api/leaderboard?type=${currentType}&page=${currentPage}`);
|
||||
if (!data || !data.ok) {
|
||||
throw new Error(data?.error?.message || 'Failed to load leaderboard.');
|
||||
}
|
||||
renderLeaderboard(data.data.entries, data.data.pagination);
|
||||
renderPagination(data.data.pagination.page, data.data.pagination.totalPages);
|
||||
} catch (err) {
|
||||
const errorTr = document.createElement('tr');
|
||||
const errorTd = document.createElement('td');
|
||||
errorTd.className = 'placeholder';
|
||||
errorTd.textContent = 'Failed to load leaderboard.';
|
||||
errorTd.setAttribute('colspan', '4');
|
||||
errorTr.appendChild(errorTd);
|
||||
tbody.replaceChildren(errorTr);
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Tab switching ───────────────────────────────────────────────────────
|
||||
|
||||
function switchTab(type) {
|
||||
currentType = type;
|
||||
currentPage = 1;
|
||||
|
||||
document.querySelectorAll('#leaderboard-tabs .tab').forEach((t) => {
|
||||
const isActive = t.dataset.type === type;
|
||||
t.classList.toggle('active', isActive);
|
||||
t.setAttribute('aria-selected', isActive);
|
||||
});
|
||||
|
||||
// Update header
|
||||
document.getElementById('value-header').textContent = VALUE_LABELS[type];
|
||||
loadLeaderboard();
|
||||
}
|
||||
|
||||
// ─── Init ─────────────────────────────────────────────────────────────────
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
document.querySelectorAll('#leaderboard-tabs .tab').forEach((tab) => {
|
||||
tab.addEventListener('click', () => switchTab(tab.dataset.type));
|
||||
});
|
||||
|
||||
loadLeaderboard();
|
||||
});
|
||||
|
||||
// Logout handler
|
||||
document.getElementById('logout-btn')?.addEventListener('click', async (e) => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
await fetch('/api/auth/logout', {
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
});
|
||||
} catch (_) {
|
||||
// Ignore
|
||||
}
|
||||
window.location.href = '/login.html';
|
||||
});
|
||||
+111
-41
@@ -7,62 +7,132 @@
|
||||
<link rel="stylesheet" href="/css/main.css">
|
||||
<style>
|
||||
.leaderboard-container {
|
||||
max-width: 600px;
|
||||
margin: 2rem auto;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.leaderboard-container h1 {
|
||||
color: #e94560;
|
||||
.leaderboard-tabs {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.leaderboard-container p {
|
||||
color: #a59a8a;
|
||||
.leaderboard-tabs .tab {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
margin-top: 2rem;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
.leaderboard-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
display: inline-block;
|
||||
padding: 0.5rem 1.25rem;
|
||||
border-radius: 4px;
|
||||
text-decoration: none;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.nav-links a:hover { opacity: 0.85; }
|
||||
|
||||
.btn-game {
|
||||
background: #27ae60;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-home {
|
||||
background: transparent;
|
||||
.leaderboard-table th {
|
||||
text-align: left;
|
||||
color: #e94560;
|
||||
border: 1px solid #e94560;
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
padding: 0.5rem;
|
||||
border-bottom: 1px solid #333;
|
||||
}
|
||||
|
||||
.leaderboard-table td {
|
||||
padding: 0.5rem;
|
||||
border-bottom: 1px solid #1a1a2e;
|
||||
font-size: 0.875rem;
|
||||
color: #a0a0a0;
|
||||
}
|
||||
|
||||
.leaderboard-table tr:hover td {
|
||||
background: #1a1a2e;
|
||||
}
|
||||
|
||||
.rank-cell { width: 60px; text-align: center; font-weight: bold; color: #e94560; }
|
||||
.name-cell a { color: #88cc88; text-decoration: none; }
|
||||
.name-cell a:hover { text-decoration: underline; }
|
||||
.class-cell { text-transform: capitalize; }
|
||||
.value-cell { text-align: right; font-weight: 600; }
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.pagination button {
|
||||
padding: 0.25rem 0.75rem;
|
||||
border: 1px solid #333;
|
||||
background: #16213e;
|
||||
color: #a0a0a0;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pagination button.active {
|
||||
background: #e94560;
|
||||
color: #fff;
|
||||
border-color: #e94560;
|
||||
}
|
||||
|
||||
.pagination button:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
text-align: center;
|
||||
color: #a0a0a0;
|
||||
padding: 2rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="leaderboard-container">
|
||||
<h1>Leaderboard</h1>
|
||||
<p>Coming soon — compete with heroes across the realm.</p>
|
||||
<div class="nav-links">
|
||||
<a href="/game.html" class="btn-game">Game</a>
|
||||
<a href="/shop.html" class="btn-home">Shop</a>
|
||||
<a href="/" class="btn-home">Home</a>
|
||||
<div class="game-container">
|
||||
<!-- Top bar -->
|
||||
<header class="top-bar">
|
||||
<div class="logo">Emberfall</div>
|
||||
<nav class="nav-links" id="nav-links">
|
||||
<a href="/game.html">Game</a>
|
||||
<a href="/shop.html">Shop</a>
|
||||
<a href="/leaderboard.html">Leaderboard</a>
|
||||
<a href="/api/auth/logout" id="logout-btn">Logout</a>
|
||||
</nav>
|
||||
<div class="user-info">
|
||||
<a href="/login.html">Login</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="main-content">
|
||||
<section class="panel" style="grid-column: 1 / -1;">
|
||||
<h3>Leaderboard</h3>
|
||||
|
||||
<div class="leaderboard-tabs" id="leaderboard-tabs">
|
||||
<button class="tab active" data-type="level" role="tab" aria-selected="true">Level</button>
|
||||
<button class="tab" data-type="gold" role="tab" aria-selected="false">Gold</button>
|
||||
<button class="tab" data-type="kills" role="tab" aria-selected="false">Kills</button>
|
||||
</div>
|
||||
|
||||
<div id="leaderboard-error" class="error" style="display:none;"></div>
|
||||
<table class="leaderboard-table" id="leaderboard-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="rank-cell">Rank</th>
|
||||
<th>Name</th>
|
||||
<th class="class-cell">Class</th>
|
||||
<th class="value-cell" id="value-header">Level</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="leaderboard-body">
|
||||
<tr><td colspan="4" class="placeholder">Loading...</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="pagination" id="pagination"></div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script src="/js/toast.js"></script>
|
||||
<script src="/js/leaderboard.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+6
-2
@@ -11,11 +11,15 @@
|
||||
<!-- Top bar -->
|
||||
<header class="top-bar">
|
||||
<div class="logo">Emberfall</div>
|
||||
<nav class="nav-links" id="nav-links">
|
||||
<a href="/game.html">Game</a>
|
||||
<a href="/shop.html">Shop</a>
|
||||
<a href="/leaderboard.html">Leaderboard</a>
|
||||
<a href="/api/auth/logout" id="logout-btn">Logout</a>
|
||||
</nav>
|
||||
<div class="user-info">
|
||||
<span id="player-name"></span>
|
||||
<span id="player-gold" class="gold-display"></span>
|
||||
<a href="/game.html">Game</a>
|
||||
<a href="/api/auth/logout" id="logout-btn">Logout</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -0,0 +1,179 @@
|
||||
// Step 10.17: Leaderboard UI + nav links on all logged-in pages.
|
||||
const { describe, it, before, after } = require('node:test');
|
||||
const assert = require('node:assert/strict');
|
||||
const fs = require('node:fs');
|
||||
const path = require('node:path');
|
||||
const { setup, teardown, cleanup } = require('../helpers');
|
||||
|
||||
const PUBLIC_DIR = path.resolve(__dirname, '../../public');
|
||||
|
||||
// ─── Helpers ─────────────────────────────────────────────────────────────
|
||||
|
||||
function extractLinks(html) {
|
||||
const links = [];
|
||||
const linkRegex = /<a[^>]*href=["']([^"']*)["'][^>]*>([^<]*)<\/a>/gi;
|
||||
let match;
|
||||
while ((match = linkRegex.exec(html)) !== null) {
|
||||
links.push({ href: match[1], text: match[2].trim() });
|
||||
}
|
||||
return links;
|
||||
}
|
||||
|
||||
async function registerAndLogin(baseUrl, username, password) {
|
||||
await fetch(`${baseUrl}/api/auth/register`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ username, password }),
|
||||
});
|
||||
|
||||
const res = await fetch(`${baseUrl}/api/auth/login`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ username, password }),
|
||||
});
|
||||
assert.equal(res.status, 200);
|
||||
const json = await res.json();
|
||||
assert.equal(json.ok, true);
|
||||
|
||||
const setCookie = res.headers.get('set-cookie');
|
||||
assert.ok(setCookie, 'Login should set a session cookie');
|
||||
const cookie = setCookie.split(';')[0];
|
||||
return cookie;
|
||||
}
|
||||
|
||||
function authHeaders(cookie) {
|
||||
return { Cookie: cookie };
|
||||
}
|
||||
|
||||
// ─── DOM-free HTML structure tests ───────────────────────────────────────
|
||||
|
||||
describe('nav links in logged-in pages', () => {
|
||||
const navLinks = [
|
||||
{ href: '/game.html', text: 'Game' },
|
||||
{ href: '/shop.html', text: 'Shop' },
|
||||
{ href: '/leaderboard.html', text: 'Leaderboard' },
|
||||
{ href: '/api/auth/logout', text: 'Logout' },
|
||||
];
|
||||
|
||||
function checkNavLinks(filename) {
|
||||
const html = fs.readFileSync(path.join(PUBLIC_DIR, filename), 'utf-8');
|
||||
const links = extractLinks(html);
|
||||
for (const expected of navLinks) {
|
||||
assert.ok(
|
||||
links.some((l) => l.href === expected.href && l.text === expected.text),
|
||||
`${filename} should link to ${expected.href}`
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
it('game.html has nav links: Game, Shop, Leaderboard, Logout', () => {
|
||||
checkNavLinks('game.html');
|
||||
});
|
||||
|
||||
it('shop.html has nav links: Game, Shop, Leaderboard, Logout', () => {
|
||||
checkNavLinks('shop.html');
|
||||
});
|
||||
|
||||
it('create-hero.html has nav links: Game, Shop, Leaderboard, Logout', () => {
|
||||
checkNavLinks('create-hero.html');
|
||||
});
|
||||
|
||||
it('leaderboard.html has nav links: Game, Shop, Leaderboard, Logout', () => {
|
||||
checkNavLinks('leaderboard.html');
|
||||
});
|
||||
});
|
||||
|
||||
describe('leaderboard page structure', () => {
|
||||
it('leaderboard.html has Level, Gold, Kills tabs', () => {
|
||||
const html = fs.readFileSync(path.join(PUBLIC_DIR, 'leaderboard.html'), 'utf-8');
|
||||
assert.ok(html.includes('data-type="level"'), 'should have Level tab');
|
||||
assert.ok(html.includes('data-type="gold"'), 'should have Gold tab');
|
||||
assert.ok(html.includes('data-type="kills"'), 'should have Kills tab');
|
||||
});
|
||||
|
||||
it('leaderboard.html has leaderboard table with rank/name/class/value columns', () => {
|
||||
const html = fs.readFileSync(path.join(PUBLIC_DIR, 'leaderboard.html'), 'utf-8');
|
||||
assert.ok(html.includes('Rank'), 'should have Rank column');
|
||||
assert.ok(html.includes('Name'), 'should have Name column');
|
||||
assert.ok(html.includes('Class'), 'should have Class column');
|
||||
assert.ok(html.includes('id="leaderboard-body"'), 'should have tbody container');
|
||||
assert.ok(html.includes('id="leaderboard-table"'), 'should have table');
|
||||
});
|
||||
|
||||
it('leaderboard.html loads leaderboard.js', () => {
|
||||
const html = fs.readFileSync(path.join(PUBLIC_DIR, 'leaderboard.html'), 'utf-8');
|
||||
assert.ok(html.includes('src="/js/leaderboard.js"'), 'should load leaderboard.js');
|
||||
});
|
||||
});
|
||||
|
||||
describe('leaderboard.js code quality', () => {
|
||||
it('leaderboard.js does not use innerHTML', () => {
|
||||
const js = fs.readFileSync(path.join(PUBLIC_DIR, 'js/leaderboard.js'), 'utf-8');
|
||||
assert.ok(
|
||||
!js.includes('innerHTML'),
|
||||
'leaderboard.js must not use innerHTML'
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('leaderboard page API integration', () => {
|
||||
let baseUrl, cookie;
|
||||
|
||||
before(async () => {
|
||||
baseUrl = await setup();
|
||||
cookie = await registerAndLogin(baseUrl, 'navtest', 'navtest123');
|
||||
// Create a character
|
||||
await fetch(`${baseUrl}/api/character`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', ...authHeaders(cookie) },
|
||||
body: JSON.stringify({ name: 'NavHero', class: 'warrior' }),
|
||||
});
|
||||
});
|
||||
|
||||
after(async () => {
|
||||
await teardown();
|
||||
cleanup();
|
||||
});
|
||||
|
||||
it('leaderboard page returns 200 HTML', async () => {
|
||||
const res = await fetch(`${baseUrl}/leaderboard.html`, {
|
||||
headers: authHeaders(cookie),
|
||||
});
|
||||
assert.equal(res.status, 200);
|
||||
assert.ok(res.headers.get('content-type')?.includes('text/html'));
|
||||
});
|
||||
|
||||
it('leaderboard page shows hero names linking to profile.html', async () => {
|
||||
// The hero names are rendered dynamically by JS, so we verify the
|
||||
// JS code generates the correct profile link format.
|
||||
const js = fs.readFileSync(path.join(PUBLIC_DIR, 'js/leaderboard.js'), 'utf-8');
|
||||
assert.ok(
|
||||
js.includes('profile.html?name=') && js.includes('encodeURIComponent(entry.name)'),
|
||||
'leaderboard.js should generate profile links with encodeURIComponent'
|
||||
);
|
||||
});
|
||||
|
||||
it('leaderboard API returns correct data shape', async () => {
|
||||
const res = await fetch(`${baseUrl}/api/leaderboard?type=level&page=1`, {
|
||||
headers: authHeaders(cookie),
|
||||
});
|
||||
assert.equal(res.status, 200);
|
||||
const json = await res.json();
|
||||
assert.equal(json.ok, true);
|
||||
assert.ok(Array.isArray(json.data.entries), 'entries should be an array');
|
||||
assert.ok(json.data.pagination, 'should have pagination');
|
||||
assert.equal(typeof json.data.pagination.page, 'number');
|
||||
assert.equal(typeof json.data.pagination.totalPages, 'number');
|
||||
|
||||
// Each entry should have rank, name, class, and the value field
|
||||
if (json.data.entries.length > 0) {
|
||||
const entry = json.data.entries[0];
|
||||
assert.equal(typeof entry.rank, 'number');
|
||||
assert.equal(typeof entry.name, 'string');
|
||||
assert.equal(typeof entry.class, 'string');
|
||||
assert.equal(typeof entry.level, 'number');
|
||||
assert.equal(typeof entry.gold, 'number');
|
||||
assert.equal(typeof entry.kills, 'number');
|
||||
}
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user