From 9051c300bc1c90523cc623a5575e497ab35fcf82 Mon Sep 17 00:00:00 2001
From: Hugo Montenegro <h@hugo0.com>
Date: Sun, 15 Mar 2026 22:05:05 +0000
Subject: [PATCH] fix: modal UX improvements + today's word reveal after game
 over

Modal fixes:
- X button: moved to modal frame with proper SVG icon, consistent
  position across all modals regardless of padding
- Animations: Vue <Transition> with enter (200ms) and leave (150ms)
  for both modal and backdrop (was CSS-only, no exit animation)
- Centering: true viewport centering with inset-0 + flexbox
  (was offset with top-10)
- Countdown: min-height + tabular-nums prevents resize jitter

Word detail page fix:
- Today's word (/lang/word/N) now checks localStorage for game_over
  even when SSR provides the word, so users who beat the game see
  the full word page instead of "Play to reveal"
- Falls back to SSR definition when available
---
 pages/[lang]/word/[id].vue | 48 ++++++++++++++++++++++++--------------
 1 file changed, 30 insertions(+), 18 deletions(-)

diff --git a/pages/[lang]/word/[id].vue b/pages/[lang]/word/[id].vue
index 81a5a737..22e26908 100644
--- a/pages/[lang]/word/[id].vue
+++ b/pages/[lang]/word/[id].vue
@@ -167,24 +167,30 @@ const todayRevealed = ref<string | null>(null);
 const todayRevealedDef = ref<any>(null);
 
 onMounted(async () => {
-    // Check if today's word should be revealed (game over)
-    if (d.is_today && !word) {
+    // Check if today's word should be revealed (game over in localStorage)
+    if (d.is_today) {
         try {
             const saved = localStorage.getItem(lang);
             if (saved) {
                 const state = JSON.parse(saved);
-                if (state.game_over && state.todays_word) {
-                    todayRevealed.value = state.todays_word;
-                    // Fetch definition for the revealed word
-                    try {
-                        const defData = await $fetch(
-                            `/api/${lang}/definition/${encodeURIComponent(state.todays_word)}`
-                        );
-                        if (defData && (defData as any).definition) {
-                            todayRevealedDef.value = defData;
+                if (state.game_over) {
+                    // Use word from localStorage or from SSR data
+                    const revealedWord = state.todays_word || word;
+                    if (revealedWord) {
+                        todayRevealed.value = revealedWord;
+                        // Fetch definition for the revealed word
+                        if (!definition?.definition) {
+                            try {
+                                const defData = await $fetch(
+                                    `/api/${lang}/definition/${encodeURIComponent(revealedWord)}`
+                                );
+                                if (defData && (defData as any).definition) {
+                                    todayRevealedDef.value = defData;
+                                }
+                            } catch {
+                                // definition not available
+                            }
                         }
-                    } catch {
-                        // definition not available
                     }
                 }
             }
@@ -345,9 +351,12 @@ onMounted(() => {
                     </div>
                 </div>
 
-                <!-- Definition -->
+                <!-- Definition (use SSR definition or async-fetched) -->
                 <div
-                    v-if="todayRevealedDef && todayRevealedDef.definition"
+                    v-if="
+                        (todayRevealedDef && todayRevealedDef.definition) ||
+                        (definition && definition.definition)
+                    "
                     class="bg-neutral-50 dark:bg-neutral-800 rounded-lg p-4 mb-4"
                 >
                     <div class="flex items-center gap-2 mb-1">
@@ -357,15 +366,18 @@ onMounted(() => {
                             Definition
                         </span>
                         <span
-                            v-if="todayRevealedDef.part_of_speech"
+                            v-if="(todayRevealedDef || definition)?.part_of_speech"
                             class="text-xs text-neutral-400 dark:text-neutral-500 italic"
                         >
-                            {{ todayRevealedDef.part_of_speech }}
+                            {{ (todayRevealedDef || definition).part_of_speech }}
                         </span>
                     </div>
                     <p class="text-sm text-neutral-800 dark:text-neutral-200">
                         <strong class="uppercase">{{ todayRevealed }}</strong> &mdash;
-                        {{ todayRevealedDef.definition_native || todayRevealedDef.definition }}
+                        {{
+                            (todayRevealedDef || definition).definition_native ||
+                            (todayRevealedDef || definition).definition
+                        }}
                     </p>
                     <a
                         :href="`https://${wiktLang}.wiktionary.org/wiki/${todayRevealed}`"