+ `;
+ }).join('');
- const body = document.createElement('div');
- body.className = 'scoreboard-item-body';
-
- const topRow = document.createElement('div');
- topRow.className = 'scoreboard-topline';
-
- const name = document.createElement('strong');
- name.className = 'scoreboard-name';
- name.textContent = entry.player_name || 'Player';
-
- const scoreValue = document.createElement('span');
- scoreValue.className = 'scoreboard-score';
- scoreValue.textContent = `${Number(entry.score || 0).toLocaleString()} pts`;
-
- topRow.appendChild(name);
- topRow.appendChild(scoreValue);
-
- const meta = document.createElement('div');
- meta.className = 'scoreboard-meta';
- const linesLabel = Number(entry.lines || 0) === 1 ? 'line' : 'lines';
- const dateValue = entry.created_at ? new Date(String(entry.created_at).replace(' ', 'T') + 'Z') : null;
- const dateLabel = dateValue && !Number.isNaN(dateValue.getTime()) ? dateValue.toLocaleDateString() : 'Today';
- const modeLabel = entry.mode === 'multiplayer' ? 'Multiplayer' : 'Solo';
- meta.textContent = `Level ${entry.level} · ${entry.lines} ${linesLabel} · ${formatDurationFromSeconds(entry.duration_seconds)} · ${modeLabel} · ${dateLabel}`;
-
- body.appendChild(topRow);
- body.appendChild(meta);
- item.appendChild(rank);
- item.appendChild(body);
- ui.scoreboardList.appendChild(item);
+ ui.historyList.querySelectorAll('[data-run-id]').forEach((button) => {
+ button.addEventListener('click', () => {
+ selectedRunId = button.getAttribute('data-run-id');
+ renderHistory();
+ });
});
+
+ ui.selectedScore.textContent = Number(selectedRun.score || 0).toLocaleString();
+ ui.selectedLevel.textContent = Number(selectedRun.level || 0).toString();
+ ui.selectedLines.textContent = Number(selectedRun.lines || 0).toString();
+ ui.selectedDuration.textContent = selectedRun.duration || '00:00';
+ ui.selectedFinished.textContent = selectedRun.finishedAt
+ ? new Date(selectedRun.finishedAt).toLocaleString([], {
+ year: 'numeric',
+ month: 'short',
+ day: 'numeric',
+ hour: '2-digit',
+ minute: '2-digit'
+ })
+ : 'Just now';
}
- async function loadScoreboard() {
+ async function loadScoreboard(options = {}) {
if (!ui.scoreboardStatus) return;
- ui.scoreboardStatus.textContent = 'Loading…';
+ const preserveOnError = Boolean(options.preserveOnError);
+ ui.scoreboardStatus.textContent = "Loading…";
const controller = new AbortController();
const timeoutId = window.setTimeout(() => controller.abort(), SCOREBOARD_TIMEOUT_MS);
try {
- const response = await fetch(`${SCOREBOARD_API_URL}?limit=10`, {
- cache: 'no-store',
+ const response = await fetch(SCOREBOARD_API_URL + "?limit=10", {
+ cache: "no-store",
signal: controller.signal
});
const payload = await response.json();
if (!response.ok || !payload.success) {
- throw new Error(payload.error || 'Unable to load scoreboard.');
+ throw new Error(payload.error || "Unable to load scoreboard.");
}
scoreboardEntries = Array.isArray(payload.scores) ? payload.scores : [];
renderScoreboard();
+ ui.scoreboardStatus.textContent = scoreboardEntries.length > 0 ? "Top " + scoreboardEntries.length : "Offline";
} catch (error) {
- console.warn('Scoreboard load error', error);
- scoreboardEntries = [];
+ if (error && error.name === "AbortError") {
+ if (!preserveOnError && scoreboardEntries.length === 0 && ui.scoreboardStatus) {
+ ui.scoreboardStatus.textContent = "Offline";
+ }
+ return;
+ }
+ console.warn("Scoreboard load error", error);
+ if (!preserveOnError) {
+ scoreboardEntries = [];
+ }
renderScoreboard();
- ui.scoreboardStatus.textContent = 'Offline';
+ ui.scoreboardStatus.textContent = scoreboardEntries.length > 0 ? "Top " + scoreboardEntries.length : "Offline";
} finally {
window.clearTimeout(timeoutId);
}
}
- async function saveScoreToDatabase(run) {
+ function getPreferredPlayerName() {
+ // Prefer multiplayer display name (if available), otherwise use the solo input value.
+ let name =
+ (multiplayer && multiplayer.displayName ? multiplayer.displayName : "")
+ || (ui && ui.playerNameInput ? ui.playerNameInput.value : "")
+ || (sessionStorage ? sessionStorage.getItem(MULTI_STORAGE_KEYS.name) : "")
+ || "";
+
+ name = String(name).trim();
+ name = name.replace(/\s+/g, " ");
+
+ // Keep it short; backend will also normalize/sanitize.
+ if (name.length > 48) name = name.slice(0, 48);
+ return name || "Player";
+ }
+
+ function buildScoreboardPayload(run) {
+ return {
+ action: 'save_score',
+ player_name: getPreferredPlayerName(),
+ score: run.score,
+ lines: run.lines,
+ level: run.level,
+ pieces_placed: run.piecesPlaced,
+ duration_seconds: run.durationSeconds,
+ room_code: multiplayer.roomCode || null
+ };
+ }
+
+ function queuePendingScoreSave(payload) {
+ if (!payload) return;
+ try {
+ const raw = localStorage.getItem(SCOREBOARD_PENDING_KEY);
+ const list = raw ? JSON.parse(raw) : [];
+ const safeList = Array.isArray(list) ? list : [];
+ safeList.unshift(payload);
+ localStorage.setItem(SCOREBOARD_PENDING_KEY, JSON.stringify(safeList.slice(0, 10)));
+ } catch (error) {
+ console.warn("Failed to queue pending scoreboard save", error);
+ }
+ }
+ async function flushPendingScoreSaves() {
+ let pending = [];
+ try {
+ const raw = localStorage.getItem(SCOREBOARD_PENDING_KEY);
+ const parsed = raw ? JSON.parse(raw) : [];
+ pending = Array.isArray(parsed) ? parsed : [];
+ } catch (error) {
+ console.warn("Failed to read pending scoreboard saves", error);
+ return;
+ }
+
+ if (pending.length === 0) return;
+
+ // Stored newest -> oldest. Send oldest -> newest.
+ const toSend = pending.slice(0, 10).reverse();
+ const keep = [];
+
+ for (let i = 0; i < toSend.length; i++) {
+ const payload = toSend[i];
+ const controller = new AbortController();
+ const timeoutId = window.setTimeout(() => controller.abort(), 2500);
+ try {
+ const response = await fetch(SCOREBOARD_API_URL, {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ keepalive: true,
+ cache: "no-store",
+ signal: controller.signal,
+ body: JSON.stringify(payload)
+ });
+
+ const responsePayload = await response.json().catch(() => null);
+ const ok = response.ok && responsePayload && responsePayload.success;
+ if (!ok) {
+ keep.push(payload);
+ }
+ } catch (error) {
+ // Network down / timeout: keep this + the rest (will retry later).
+ if (error && error.name === "AbortError") keep.push(payload);
+ else keep.push(payload);
+ for (let j = i + 1; j < toSend.length; j++) keep.push(toSend[j]);
+ break;
+ } finally {
+ window.clearTimeout(timeoutId);
+ }
+ }
+
+ try {
+ // Write newest -> oldest back to storage.
+ const keepNewestFirst = keep.slice().reverse().slice(0, 10);
+ localStorage.setItem(SCOREBOARD_PENDING_KEY, JSON.stringify(keepNewestFirst));
+ } catch (error) {
+ console.warn("Failed to update pending scoreboard saves", error);
+ }
+ }
+
+async function saveScoreToDatabase(run) {
+ const payload = buildScoreboardPayload(run);
try {
const response = await fetch(SCOREBOARD_API_URL, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({
- action: 'save_score',
- player_name: getPreferredPlayerName(),
- score: run.score,
- lines: run.lines,
- level: run.level,
- pieces_placed: run.piecesPlaced,
- duration_seconds: run.durationSeconds,
- room_code: multiplayer.roomCode || null
- })
+ keepalive: true,
+ body: JSON.stringify(payload)
});
- const payload = await response.json();
- if (!response.ok || !payload.success) {
- throw new Error(payload.error || 'Unable to save scoreboard entry.');
+ const responsePayload = await response.json();
+ if (!response.ok || !responsePayload.success) {
+ throw new Error(responsePayload.error || 'Unable to save scoreboard entry.');
}
- await loadScoreboard();
- if (payload.placement) {
- showToast(`Run saved to the database scoreboard. Rank #${payload.placement}.`);
+
+ const savedEntry = responsePayload.entry || {
+ id: run.id,
+ player_name: payload.player_name,
+ score: payload.score,
+ lines: payload.lines,
+ level: payload.level,
+ pieces_placed: payload.pieces_placed,
+ duration_seconds: payload.duration_seconds,
+ mode: payload.room_code ? 'multiplayer' : 'solo',
+ room_code: payload.room_code,
+ created_at: new Date().toISOString().slice(0, 19).replace('T', ' ')
+ };
+ scoreboardEntries = [savedEntry, ...scoreboardEntries.filter((entry) => Number(entry.id) !== Number(savedEntry.id))].slice(0, 10);
+ renderScoreboard();
+ if (responsePayload.placement) {
+ showToast(`Run saved to the database scoreboard. Rank #${responsePayload.placement}.`);
} else {
showToast('Run saved to the database scoreboard.');
}
+ void loadScoreboard({ preserveOnError: true });
} catch (error) {
console.warn('Scoreboard save error', error);
- showToast('Run saved locally. Database scoreboard was unavailable.');
+ queuePendingScoreSave(payload);
+ showToast('Run saved locally. It will sync to the database scoreboard when the connection returns.');
if (ui.scoreboardStatus) {
ui.scoreboardStatus.textContent = 'Offline';
}
@@ -982,6 +1057,17 @@ document.addEventListener('DOMContentLoaded', () => {
}
function handleKeydown(event) {
+ const target = event.target;
+ const isTypingTarget = Boolean(target && (
+ target.tagName === 'INPUT' ||
+ target.tagName === 'TEXTAREA' ||
+ target.isContentEditable
+ ));
+
+ if (isTypingTarget) {
+ return;
+ }
+
const code = event.code;
const gameKeys = ['ArrowLeft', 'ArrowRight', 'ArrowDown', 'ArrowUp', 'KeyX', 'KeyZ', 'Space', 'KeyP', 'KeyR', 'Enter'];
if (gameKeys.includes(code)) {
@@ -1118,6 +1204,7 @@ document.addEventListener('DOMContentLoaded', () => {
renderHistory();
void loadScoreboard();
+ void flushPendingScoreSaves();
updateStats();
updateMultiplayerUI();
showOverlay('Stack clean. Clear fast.', 'Use the keyboard to play a faithful Tetris loop with local history and a database scoreboard.', 'Press Enter to start');