sy_digger

sys_digger/game.js

@@ -189,11 +189,67 @@ function restartGame() {
     document.getElementById('name-form').style.display = 'flex';
     document.getElementById('overlay').classList.remove('active');
     document.getElementById('intro').classList.remove('hidden');
+    startIdleTimer();
     initAnchors();
     updateCystinstein();
 }
 
+// ─── Attract mode ────────────────────────────────────────────────────────────
+const ATTRACT_DELAY = 30_000;
+let idleTimer = null;
+
+function startIdleTimer() {
+    clearTimeout(idleTimer);
+    idleTimer = setTimeout(showAttract, ATTRACT_DELAY);
+}
+
+function showAttract() {
+    document.getElementById('intro').classList.add('hidden');
+    renderAttractLeaderboard();
+    document.getElementById('attract').classList.remove('hidden');
+}
+
+function showIntro() {
+    document.getElementById('attract').classList.add('hidden');
+    document.getElementById('intro').classList.remove('hidden');
+    startIdleTimer();
+}
+
+function renderAttractLeaderboard() {
+    const board = loadLeaderboard();
+    const tbody = document.getElementById('attract-rows');
+    tbody.innerHTML = '';
+
+    if (board.length === 0) {
+        tbody.innerHTML = `<tr><td colspan="3" style="color:#555;text-align:center;padding:16px">No scores yet — be the first!</td></tr>`;
+        return;
+    }
+
+    board.forEach((entry, i) => {
+        const tr = document.createElement('tr');
+        if      (i === 0) tr.classList.add('rank-1');
+        else if (i === 1) tr.classList.add('rank-2');
+        else if (i === 2) tr.classList.add('rank-3');
+        const medal = i === 0 ? '🥇' : i === 1 ? '🥈' : i === 2 ? '🥉' : i + 1;
+        tr.innerHTML = `
+            <td class="rank-num">${medal}</td>
+            <td style="text-align:left">${escapeHtml(entry.name)}</td>
+            <td style="text-align:right">${entry.score}</td>`;
+        tbody.appendChild(tr);
+    });
+}
+
+function dismissAttract() {
+    if (!document.getElementById('attract').classList.contains('hidden')) {
+        showIntro();
+    }
+}
+
+document.addEventListener('keydown', dismissAttract);
+document.addEventListener('click',   dismissAttract);
+
 function startGame() {
+    clearTimeout(idleTimer);
     gameStarted = true;
     document.getElementById('intro').classList.add('hidden');
 }
@@ -229,10 +285,10 @@ function gameLoop(ts) {
 }
 
 // ─── Boot ────────────────────────────────────────────────────────────────────
-// Fill dynamic value in intro text
 document.getElementById('intro').innerHTML =
     document.getElementById('intro').innerHTML.replace('${MAX_DOCKS}', MAX_DOCKS);
 updateHudBest(topScore());
+startIdleTimer();
 initAnchors();
 updateCystinstein();
 requestAnimationFrame(gameLoop);