${gear.description}

`; button.addEventListener("mouseenter", () => showGearDetails(gear)); button.addEventListener("focus", () => showGearDetails(gear)); button.addEventListener("click", () => buyGear(gear.id)); list.appendChild(button); }); updateGearStoreButtons(); toggleGearStore(false); const toggleBtn = document.getElementById("gearToggleBtn"); if (toggleBtn) { toggleBtn.addEventListener("click", () => toggleGearStore()); } } function toggleGearStore(forceState) { const list = document.getElementById("gearList"); const toggleBtn = document.getElementById("gearToggleBtn"); if (!list) return; const isOpen = list.classList.contains("open"); const nextState = typeof forceState === "boolean" ? forceState : !isOpen; list.classList.toggle("open", nextState); if (toggleBtn) { toggleBtn.textContent = nextState ? "Hide Outfitters" : "Show Outfitters"; toggleBtn.setAttribute("aria-expanded", String(nextState)); } if (nextState && !S) { setGearDetails("Start a run to spend cash on gear."); } } function buyGear(id) { if (!S) return; const item = GEAR_ITEMS.find((gear) => gear.id === id); if (!item) return; if (S.gear.includes(id)) { log(`You already own ${item.name}.`); return; } if (S.cash < item.cost) { log("Not enough cash for that gear."); return; } S.cash -= item.cost; S.gear.push(id); S.gearMods = computeGearMods(S.gear); log(`You purchased ${item.name}.`); showGearDetails(item, { owned: true }); flashGearToast(`${item.name} equipped`); playSfx("gear"); trackEvent("gear_purchase", { id: item.id, day: S.day }); updateGearStoreButtons(); sync(); } function updateGearStoreButtons() { const buttons = document.querySelectorAll(".gear-button"); buttons.forEach((button) => { if (!S) { button.disabled = true; button.classList.remove("purchased"); button.dataset.state = "locked"; return; } const gearId = button.dataset.gearId; const item = GEAR_ITEMS.find((gear) => gear.id === gearId); const owned = S.gear.includes(gearId); const affordable = (item?.cost || Infinity) <= S.cash; button.disabled = owned || !affordable; button.classList.toggle("purchased", owned); button.dataset.state = owned ? "owned" : affordable ? "available" : "locked"; }); const owned = document.getElementById("gearOwned"); if (owned) { owned.textContent = S && S.gear.length ? S.gear.map((id) => GEAR_ITEMS.find((gear) => gear.id === id)?.name || id).join(", ") : "None"; } } function showGearDetails(gear, { owned = false } = {}) { const panel = document.getElementById("gearDetails"); if (!panel || !gear) return; panel.innerHTML = `${gear.name} — ${gear.description}${ owned ? " (Owned)" : "" }`; } function setGearDetails(message) { const panel = document.getElementById("gearDetails"); if (panel) panel.textContent = message; } function flashGearToast(message) { const toast = document.getElementById("gearToast"); if (!toast) return; toast.textContent = message; toast.classList.add("show"); setTimeout(() => toast.classList.remove("show"), 1500); } function setLeaderboardStatus(message, tone = "info") { const label = document.getElementById("leaderboardStatus"); if (!label) return; label.textContent = message; label.classList.remove("ok", "warning", "error", "info"); label.classList.add(tone); } function renderLeaderboard(entries = []) { const list = document.getElementById("leaderboardList"); if (!list) return; list.innerHTML = ""; if (!entries.length) { const li = document.createElement("li"); li.className = "leaderboard-entry"; li.textContent = leaderboardState.authorized === false ? "Sign in to track the leaderboard." : "No champions yet. Finish a run to claim the top spot."; list.appendChild(li); return; } entries.forEach((entry, index) => { const li = document.createElement("li"); li.className = `leaderboard-entry${entry.isYou ? " you" : ""}`; const display = entry.player?.display || entry.player?.username || "Player"; const detail = entry.cityName ? `${entry.cityName} • ${entry.daysSurvived} days` : `${entry.daysSurvived} days`; li.innerHTML = `

#${index + 1} · ${display}
${detail}

${entry.daysSurvived}d `; list.appendChild(li); }); } function renderSelfBest(score) { const panel = document.getElementById("leaderboardSelf"); if (!panel) return; if (!score) { panel.classList.add("empty"); panel.textContent = leaderboardState.authorized === false ? "Sign in to save your best runs." : "No recorded runs yet. Stay warm and set a record."; return; } panel.classList.remove("empty"); panel.textContent = `Your best: ${score.daysSurvived} days in ${score.cityName} (${new Date( score.createdAt ).toLocaleDateString()})`; } function queueLeaderboardRefresh(cityId) { leaderboardState.cityId = cityId || null; if (leaderboardRefreshHandle) { clearTimeout(leaderboardRefreshHandle); } leaderboardRefreshHandle = setTimeout(() => { refreshLeaderboard(cityId); }, 200); } async function refreshLeaderboard(cityId = selectedCityId) { const targetCity = cityId || leaderboardState.cityId; const url = targetCity && typeof URL === "function" ? `${SCORE_API}?cityId=${encodeURIComponent(targetCity)}` : SCORE_API; leaderboardState.loading = true; setLeaderboardStatus("Loading leaderboard…", "info"); try { const res = await fetch(url, { credentials: "include", }); if (res.status === 401) { leaderboardState.authorized = false; renderLeaderboard([]); renderSelfBest(null); setLeaderboardStatus( "Sign in with your Grizzly Trail Tech account to save scores.", "warning" ); return; } const data = await res.json(); leaderboardState.authorized = true; renderLeaderboard(Array.isArray(data.leaders) ? data.leaders : []); renderSelfBest(data.selfBest || null); if (data.leaders?.length) { setLeaderboardStatus("Leaderboard updated.", "ok"); } else { setLeaderboardStatus("No survivors yet for this city.", "info"); } } catch (error) { console.error("Failed to load leaderboard", error); setLeaderboardStatus("Unable to load leaderboard right now.", "error"); } finally { leaderboardState.loading = false; } } async function submitScore(summary) { if (leaderboardState.authorized === false) { return; } try { const res = await fetch(SCORE_API, { method: "POST", headers: { "Content-Type": "application/json" }, credentials: "include", body: JSON.stringify(summary), }); if (res.status === 401) { leaderboardState.authorized = false; setLeaderboardStatus( "Sign in to keep saving your runs to the leaderboard.", "warning" ); return; } const data = await res.json(); if (data?.ok) { setLeaderboardStatus("Score saved! Leaderboard refreshed.", "ok"); refreshLeaderboard(summary.cityId); } else { setLeaderboardStatus(data?.error || "Score rejected.", "error"); } } catch (error) { console.error("Failed to submit score", error); setLeaderboardStatus("We couldn't save that score.", "error"); } } function setupLeaderboardUi() { const refreshBtn = document.getElementById("refreshLeaderboardBtn"); if (refreshBtn) { refreshBtn.addEventListener("click", () => refreshLeaderboard()); } renderLeaderboard([]); renderSelfBest(null); setLeaderboardStatus("Loading leaderboard…", "info"); refreshLeaderboard(); } function log(message) { const container = document.getElementById("logContainer"); if (!container) return; let dayGroup = container.querySelector(`[data-day="${S.day}"]`); if (!dayGroup) { dayGroup = document.createElement("div"); dayGroup.dataset.day = S.day; dayGroup.className = "log-day-group"; dayGroup.innerHTML = `

Day ${S.day}

`; container.prepend(dayGroup); } const eventsContainer = dayGroup.querySelector(".log-day-events"); const entry = document.createElement("div"); entry.className = "log-entry-text"; entry.textContent = message; eventsContainer.prepend(entry); container.scrollTop = 0; trimLogGroups(container); } function trimLogGroups(container) { const groups = container.querySelectorAll(".log-day-group"); const MAX_GROUPS = 6; if (groups.length > MAX_GROUPS) { for (let i = MAX_GROUPS; i < groups.length; i += 1) { groups[i].remove(); } } } function sync() { document.getElementById("locationValue").textContent = S.town; document.getElementById("dayValue").textContent = `${S.day} / ${MAX_DAYS}`; document.getElementById("tempValue").textContent = `${S.temp}°C`; document.getElementById("cashValue").textContent = `$${S.cash}`; document.getElementById("warmthValue").textContent = S.warmth; const fill = document.getElementById("warmthBarFill"); const width = Math.max(0, Math.min(100, S.warmth)); fill.style.width = `${width}%`; fill.style.background = width < 30 ? "linear-gradient(90deg,#ef4444,#f97316)" : width < 60 ? "linear-gradient(90deg,#f59e0b,#22c55e)" : "linear-gradient(90deg,#3b82f6,#22c55e)"; updateGearStoreButtons(); } function copyScore() { navigator.clipboard.writeText(document.getElementById("scoreText").textContent); alert("Copied! Paste it in the group."); } async function shareScore() { if (navigator.share) { await navigator.share({ title: "Canadian Winter Survival", text: document.getElementById("scoreText").textContent, url: PUBLIC_URL }); } else { copyScore(); } } function rollTempFor(city) { const min = city.minTemp; const max = city.maxTemp; return Math.floor(Math.random() * (max - min + 1)) + min; } function randomBetween(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } function pick(array) { if (!Array.isArray(array) || !array.length) return null; return array[Math.floor(Math.random() * array.length)]; } function bootstrapGame() { renderCityOptions(); createGearStore(); setupLeaderboardUi(); document.querySelectorAll(".action-btn").forEach((button) => button.addEventListener("click", () => act(button.dataset.action)) ); document.getElementById("copyScoreBtn").addEventListener("click", copyScore); document.getElementById("shareScoreBtn").addEventListener("click", shareScore); document.getElementById("playAgainBtn").addEventListener("click", startGame); startGame(); } if (document.readyState === "loading") { document.addEventListener("DOMContentLoaded", bootstrapGame, { once: true }); } else { bootstrapGame(); }

Event Log

What do you do?

Outfitters

Leaderboard

Your Scorecard