diff --git a/app.js b/app.js index aff7da3..d2ff3c6 100644 --- a/app.js +++ b/app.js @@ -3,6 +3,7 @@ const SETUP_PAGE = "application.html"; const STORAGE_KEY = "chesscubing-arena-state-v2"; const WINDOW_NAME_KEY = "chesscubing-arena-state-v2:"; +const ASSET_TOKEN_STORAGE_KEY = "chesscubing-arena-asset-token"; const DEFAULT_BLOCK_DURATION_MS = 180000; const DEFAULT_MOVE_LIMIT_MS = 20000; const TIME_MODE_INITIAL_CLOCK_MS = 600000; @@ -114,6 +115,7 @@ function initSetupPage() { const summary = document.querySelector("#setupSummary"); const loadDemoButton = document.querySelector("#loadDemoButton"); const resumeCard = document.querySelector("#resumeCard"); + const refreshAppButton = document.querySelector("#refreshAppButton"); const competitionModeInput = document.querySelector("#competitionMode"); const competitionFields = Array.from(document.querySelectorAll("[data-competition-field]")); const moveSecondsField = document.querySelector("#moveSecondsField"); @@ -244,6 +246,15 @@ function initSetupPage() { form.addEventListener("input", renderSummary); loadDemoButton.addEventListener("click", () => loadDemo(form, renderSummary)); + refreshAppButton?.addEventListener("click", async () => { + if (!(refreshAppButton instanceof HTMLButtonElement)) { + return; + } + + refreshAppButton.disabled = true; + refreshAppButton.textContent = "Mise a jour..."; + await forceRefreshToLatest(SETUP_PAGE); + }); form.addEventListener("submit", (event) => { event.preventDefault(); @@ -1939,6 +1950,39 @@ function clearMatch() { persistMatch(); } +async function forceRefreshToLatest(path = SETUP_PAGE) { + const refreshToken = `${Date.now()}`; + + try { + window.sessionStorage.setItem(ASSET_TOKEN_STORAGE_KEY, refreshToken); + } catch { + // Ignore storage failures in restricted browsers. + } + + if ("caches" in window) { + try { + const cacheKeys = await window.caches.keys(); + await Promise.all(cacheKeys.map((cacheKey) => window.caches.delete(cacheKey))); + } catch { + // Ignore cache API failures when unavailable. + } + } + + if ("serviceWorker" in navigator) { + try { + const registrations = await navigator.serviceWorker.getRegistrations(); + await Promise.all(registrations.map((registration) => registration.update().catch(() => undefined))); + await Promise.all(registrations.map((registration) => registration.unregister().catch(() => undefined))); + } catch { + // Ignore service worker failures when none are registered. + } + } + + const targetUrl = new URL(path, window.location.href); + targetUrl.searchParams.set("refresh", refreshToken); + window.location.replace(targetUrl.toString()); +} + function toggleModal(element, open) { if (!element) { return; diff --git a/application.html b/application.html index 0b19b97..c35e132 100644 --- a/application.html +++ b/application.html @@ -18,7 +18,45 @@ - +
@@ -267,8 +305,19 @@ + + - + diff --git a/chrono.html b/chrono.html index b159c69..8fbae8c 100644 --- a/chrono.html +++ b/chrono.html @@ -18,7 +18,45 @@ - +
@@ -151,6 +189,11 @@ - + diff --git a/cube.html b/cube.html index 89a600e..4bcb9c5 100644 --- a/cube.html +++ b/cube.html @@ -18,7 +18,45 @@ - +
@@ -189,6 +227,11 @@ - + diff --git a/styles.css b/styles.css index f44d687..cbbf178 100644 --- a/styles.css +++ b/styles.css @@ -331,6 +331,38 @@ p { margin-top: 1.2rem; } +.setup-refresh-footer { + display: flex; + justify-content: center; + margin-top: 0.9rem; + padding-bottom: 0.35rem; +} + +.refresh-link-button { + appearance: none; + border: 0; + padding: 0.3rem 0.45rem; + background: transparent; + color: var(--muted); + font: inherit; + font-size: 0.72rem; + font-weight: 700; + letter-spacing: 0.08em; + text-transform: uppercase; + cursor: pointer; + opacity: 0.86; +} + +.refresh-link-button:hover { + color: var(--text); + text-decoration: underline; +} + +.refresh-link-button:disabled { + opacity: 0.56; + cursor: wait; +} + .panel { padding: 1.35rem; }