Fix: Intro re-load

2026-06-06 00:26:56 -04:00
parent 9edaa3e351
commit 84ba3c92b7
4 changed files with 43 additions and 3 deletions
@@ -10,7 +10,7 @@
  <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
  <script src="word-data.js?v=5" defer></script>
  <script src="supabase-config.js?v=1" defer></script>
-  <script src="script.js?v=9" defer></script>
+  <script src="script.js?v=10" defer></script>
 </head>
 <body class="intro-active dark-theme">
  <section class="intro-overlay" id="intro-overlay" aria-label="Animated Wordle intro" role="dialog" aria-modal="true">
@@ -10,7 +10,7 @@
  <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
  <script src="word-data.js?v=5" defer></script>
  <script src="supabase-config.js?v=1" defer></script>
-  <script src="script.js?v=9" defer></script>
+  <script src="script.js?v=10" defer></script>
 </head>
 <body class="intro-active dark-theme">
  <section class="intro-overlay" id="intro-overlay" aria-label="Animated Wordle intro" role="dialog" aria-modal="true">
@@ -29,6 +29,7 @@ const STATS_KEY = "fancy-wordle-stats-v2"
 const LOCAL_ROUND_KEY = "fancy-wordle-hourly-round-v1"
 const PLAY_INTERVAL_MS = 60 * 60 * 1000
 const GUESS_TIMEOUT_MS = 10000
+const INTRO_SEEN_KEY = "fancy-wordle-intro-seen-v1"
 const INTRO_DURATION_MS = 5200
 const INTRO_LETTER_SETS = [
  ["D", "E", "S", "I", "G", "N"],
@@ -168,6 +169,14 @@ function initializeIntro() {

  if (introOverlay.dataset.initialized) return
  introOverlay.dataset.initialized = "true"
+
+  if (hasSeenIntro()) {
+    introDismissed = true
+    introOverlay.hidden = true
+    document.body.classList.remove("intro-active")
+    return
+  }
+
  introDismissed = false
  document.body.classList.add("intro-active")
  introSkipButton?.addEventListener("click", dismissIntro)
@@ -187,6 +196,22 @@ function prefersReducedMotion() {
  return window.matchMedia?.("(prefers-reduced-motion: reduce)").matches
 }

+function hasSeenIntro() {
+  try {
+    return sessionStorage.getItem(INTRO_SEEN_KEY) === "true"
+  } catch {
+    return false
+  }
+}
+
+function rememberIntroSeen() {
+  try {
+    sessionStorage.setItem(INTRO_SEEN_KEY, "true")
+  } catch {
+    // If storage is unavailable, the intro still dismisses for the current page load.
+  }
+}
+
 function setIntroTile(tile, letter, status) {
  const letterElement = tile.querySelector(".intro-letter")
  tile.dataset.status = status
@@ -248,6 +273,7 @@ function dismissIntro() {
  if (introDismissed) return

  introDismissed = true
+  rememberIntroSeen()
  clearIntroTimers()
  setIntroFrame(INTRO_LETTER_SETS.length - 1, false)
  introTileRow?.classList.add("is-solved", "is-logo")
@@ -17,6 +17,12 @@ async function skipIntro(page) {
  await expect(page.locator("[data-key]")).toHaveCount(26)
 }

+async function expectGameReadyWithoutIntro(page) {
+  await expect(page.locator("#intro-overlay")).toBeHidden()
+  await expect(page.locator("[data-guess-grid] .tile")).toHaveCount(30)
+  await expect(page.locator("[data-key]")).toHaveCount(26)
+}
+
 test("loads the intro and reveals the game board", async ({ page }) => {
  await openApp(page)

@@ -36,10 +42,18 @@ test("uses dark mode by default and preserves a light preference", async ({ page
  await expect(page.locator("#theme-button")).toHaveAttribute("aria-label", "Switch to dark mode")

  await page.reload()
-  await skipIntro(page)
+  await expectGameReadyWithoutIntro(page)
  await expect(page.locator("body")).not.toHaveClass(/dark-theme/)
 })

+test("does not replay the intro after a same-tab reload", async ({ page }) => {
+  await openApp(page)
+  await skipIntro(page)
+
+  await page.reload()
+  await expectGameReadyWithoutIntro(page)
+})
+
 test("pressing Enter after changing theme does not re-trigger the theme button", async ({ page }) => {
  await openApp(page)
  await skipIntro(page)