Refactor loading logic

Author: nshafer

docs/notes.txt

@@ -0,0 +1,59 @@
+http://localhost:3000
+
+
+12/7
+#Wordle536 3/6* Grade: B
+⬛⬛⬛⬛⬛ AMBER F
+🟨🟨⬛⬛⬛ STING D
+🟩🟩🟩🟩🟩 JOUST A+
+http://localhost:3000/#SLv0YX9thxeBvJKz
+
+
+12/6
+#Wordle535 6/6* Grade: F
+
+⬛⬛⬛🟩⬛ WOKEN F
+⬛⬛🟨🟩⬛ STREP F
+⬛🟨⬛🟩⬛ CRUEL F
+⬛⬛⬛🟩🟩 HIDER F
+⬛🟨🟨🟩🟩 GAMER A
+🟩🟩🟩🟩🟩 AMBER A+
+http://localhost:3000/#aliBRW82gb5wbiv4fRX95pqbGZx73
+
+
+CRANE (Fail)
+#Wordle X/6 Grade: F
+
+🟨🟨🟨⬛⬛ ||`RENTS`|| B-
+⬛🟩⬛⬛⬛ ||`PROUD`|| F
+🟨⬛⬛🟨⬛ ||`ADIEU`|| C
+⬛⬛⬛⬛⬛ ||`PLOTS`|| F
+⬛🟨⬛⬛⬛ ||`HELLO`|| F
+🟨⬛⬛⬛🟩 ||`APPLE`|| C
+
+http://localhost:3000/#1l2K15JcbqhQ1YPBC7Sh9YVx836rq2o
+
+
+JOUST
+#Wordle 5/6* Grade: C
+
+⬛⬛⬛⬛⬛ >!CRANE!< F  
+⬛🟩⬛⬛🟨 >!FOLDS!< C  
+🟨🟩⬛⬛⬛ >!SORRY!< F  
+🟩🟩⬛🟩🟩 >!JOIST!< A+  
+🟩🟩🟩🟩🟩 >!JOUST!< A+  
+
+http://localhost:3000/#fEUfOHgXn3lDGsviZjvXEv
+
+
+12/1 (Fail)
+#Wordle530 X/6 Grade: F
+
+⬛⬛⬛⬛⬛ >!FARMS!< F  
+🟨⬛⬛⬛🟨 >!CRANE!< C  
+⬛⬛⬛⬛🟩 >!PLANT!< C  
+⬛⬛⬛⬛🟩 >!BOOST!< F  
+⬛⬛⬛⬛⬛ >!MOLDY!< F  
+⬛⬛⬛⬛⬛ >!FAILS!< F  
+
+http://localhost:3000/#alipBEpkg48knhPGWs8KvzCs1aMee

src/components/AnswerPicker.vue

@@ -12,8 +12,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-    (e: 'update:date', value: Date | undefined): void,
-    (e: 'update:answer', value: string): void,
+    (e: 'updated', answer: string, date: Date | undefined): void,
 }>();
 
 // Toggle between setting answer by date or manually inputting
@@ -32,6 +31,7 @@ function setManualInput() {
 
 // Set initial type and values
 onMounted(() => {
+    // console.log("AnswerPicker onMounted", props.date, props.answer);
     if (props.date) {
         inputType.value = "date";
         dateInput.value = isoDateString(props.date);
@@ -40,9 +40,6 @@ onMounted(() => {
         manualInput.value = props.answer;
         // Set the date input's value to today so it doesn't throw "invalid date" error
         dateInput.value = isoDateString(new Date());
-    } else {
-        // Set today's date as the default value
-        dateInput.value = isoDateString(new Date());
     }
 });
 
@@ -86,12 +83,26 @@ async function maxDateTimer() {
 }
 
 function updateMaxDate() {
-    const newDate = maxDateWithAnswer();
+    let max;
+
+    // Set the maxDate to today unless our answer list hasn't been updated
+    const today = new Date();
+    const maxAnswerDate = maxDateWithAnswer();
+
+    if (maxAnswerDate >= today) {
+        max = today;
+    } else {
+        max = maxAnswerDate;
+    }
+
+    // If there is a dateMax in localStorage, which is the number of days to offset the maxDate, then adjust
     const dateMax = localStorage.getItem('dateMax');
     if (dateMax !== null) {
-        newDate.setDate(newDate.getDate() + Number(dateMax))
+        max.setDate(max.getDate() + Number(dateMax))
     }
-    maxDate.value = newDate;
+
+    // Update the maxDate
+    maxDate.value = max;
 }
 
 onMounted(async () => {
@@ -148,13 +159,11 @@ const inputError = computed(() => {
     }
 });
 
-watch(pickedAnswer, (answer) => {
-    emit("update:answer", answer);
+watch([pickedAnswer, pickedDate], ([newPickedAnswer, newPickedDate]) => {
+    // console.log("AnswerPicker emit updated", newPickedAnswer, newPickedDate)
+    emit("updated", newPickedAnswer, newPickedDate);
 });
 
-watch(pickedDate, (date) => {
-    emit("update:date", date);
-});
 
 watch(() => props.answer, (newAnswer, oldAnswer) => {
     if (inputType.value == "manual" && newAnswer) {

src/components/MainInterface.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, onBeforeMount, onMounted, onUnmounted, computed, watch } from 'vue';
+import { ref, reactive, onBeforeMount, onMounted, onUnmounted, computed, watch, nextTick } from 'vue';
 import { Guess } from '@/guess';
 import { encodeShareCode, decodeShareCode } from '@/encoding';
 import type { ShareData } from '@/encoding';
@@ -246,15 +246,20 @@ function guessClicked(guess?: Guess) {
 }
 
 // Load answer, date, guesses in share-code
-function loadFromShareCode(shareCode: string) {
+function loadFromShareCode(shareCode: string): boolean {
+    loading = true;
+    nextTick(() => { loading = false; });
+
     let shareData: ShareData | undefined;
     try {
         shareData = decodeShareCode(shareCode);
     } catch(e) {
         console.error("Invalid shareCode", shareCode, e);
-        return;
+        return false;
     }
 
+    console.log("Decoded share code", shareCode, shareData);
+
     // Remove existing guesses
     resetGuesses();
 
@@ -274,68 +279,108 @@ function loadFromShareCode(shareCode: string) {
     for (let word of shareData.words) {
         appendWord(word);
     }
+
+    return true;
 }
 
-function loadFromWindowLocation() {
+function loadFromWindowLocation(): boolean {
     if (window.location.hash != "") {
         let shareCode = window.location.hash;
         if (shareCode.slice(0, 1) == "#") {
             shareCode = shareCode.slice(1);
         }
+        console.log("Found share code in hash", shareCode);
 
-        loadFromShareCode(shareCode);
+        return loadFromShareCode(shareCode);
     }
+    
+    return false;
 }
 
-// If there is a hash in the URL, try to load it as a share code
+function loadPuzzleFromStorage(): boolean {
+    loading = true;
+    nextTick(() => { loading = false; });
+    
+    if (puzzleDate.value) {
+        const puzzleState = loadPuzzleByDate(puzzleDate.value);
+        if (puzzleState) {
+            console.log("Loading share code", puzzleState.shareCode, "for date", puzzleDate.value);
+            return loadFromShareCode(puzzleState.shareCode);
+        } else {
+            resetGuesses();
+            console.log("No share code found for date", puzzleDate.value, dateIndex(puzzleDate.value));
+            return false;
+        }
+    } else if (puzzleAnswer.value) {
+        const puzzleState = loadPuzzleByAnswer(puzzleAnswer.value);
+        if (puzzleState) {
+            console.log("Loading share code", puzzleState.shareCode, "for answer", puzzleAnswer.value);
+            return loadFromShareCode(puzzleState.shareCode);
+        } else {
+            resetGuesses();
+            console.log("No share code found for answer", puzzleAnswer.value);
+            return false;
+        }
+    } else {
+        console.log("No puzzle answer or date set, resetting guesses");
+        resetGuesses();
+        return false;
+    }
+}
+
+// If there is a hash in the URL, try to load it as a share code, otherwise try to load from localStorage
 onBeforeMount(() => {
-    loadFromWindowLocation();
-    loading = false;
+    let loaded = false;
+
+    // Try loading from a hash in the URL
+    loaded = loadFromWindowLocation();
+
+    // If that didn't work, set the puzzleDate to today and try loading from localStorage
+    // NOTE: We don't set the puzzleAnswer, as that will be done by AnswerPicker
+    if (!loaded) {
+        puzzleDate.value = new Date();
+        loaded = loadPuzzleFromStorage();
+    }
+
+    // If that didn't work, reset the guesses
+    if (!loaded) {
+        resetGuesses();
+    }
 });
 
 // Update the URL bar when the shareURL changes
 watch(shareURL, (newShareURL, oldShareURL) => {
-    if (loading) return;
-    // console.log(`replaceState ${oldShareURL} -> ${newShareURL}`);
-    history.replaceState(null, "", newShareURL);
+    // if (loading) return;
+    if (newShareURL !== window.location.toString()) {
+        console.log(`replaceState ${window.location} -> ${newShareURL}`);
+        history.replaceState(null, "", newShareURL);
+    }
 })
 
 // Detect if the URL hash changes and attempt to load it as a share code
 window.addEventListener("popstate", (e) => {
-    loading = true;
+    console.log("popstate", window.location);
     loadFromWindowLocation();
-    loading = false;
 });
 
-// If the answer changes attempt to load the list of guesses from local storage, or else just reset the list
-watch(puzzleAnswer, () => {
+// When the user interacts with the AnswerPicker, attempt to load the list of guesses from local storage,
+// or else just reset the list
+function answerPickerUpdated(answer: string, date?: Date) {
+    console.log("AnswerPicker updated", answer, date)
+    puzzleAnswer.value = answer;
+    puzzleDate.value = date;
     if (!loading) {
-        loading = true;
-        if (puzzleDate.value) {
-            const puzzleState = loadPuzzleByDate(puzzleDate.value);
-            if (puzzleState) {
-                loadFromShareCode(puzzleState.shareCode);
-                console.log("Loaded share code", puzzleState.shareCode, "for date", puzzleDate.value);
-            } else {
-                resetGuesses();
-                console.log("No share code found for date", puzzleDate.value);
-            }
-        } else if (puzzleAnswer.value) {
-            const puzzleState = loadPuzzleByAnswer(puzzleAnswer.value);
-            if (puzzleState) {
-                loadFromShareCode(puzzleState.shareCode);
-                console.log("Loaded share code", puzzleState.shareCode, "for answer", puzzleAnswer.value);
-            } else {
-                resetGuesses();
-                console.log("No share code found for answer", puzzleAnswer.value);
-            }
-        } else {
-            console.log("No puzzle answer or date set, resetting guesses");
-            resetGuesses();
-        }
-        loading = false;
+        loadPuzzleFromStorage();
     }
-});
+}
+
+// watch(puzzleDate, (newPuzzleDate, oldPuzzleDate) => {
+//     console.log(`puzzleDate changed ${oldPuzzleDate} -> ${newPuzzleDate} puzzleAnswer: ${puzzleAnswer.value}`);
+// });
+
+// watch(puzzleAnswer, (newPuzzleAnswer, oldPuzzleAnswer) => {
+//     console.log(`puzzleAnswer changed ${oldPuzzleAnswer} -> ${newPuzzleAnswer} puzzleDate: ${puzzleDate.value}`);
+// });
 
 // Change title when the puzzleDate or puzzleAnswer change
 const title = computed(() => {
@@ -352,6 +397,17 @@ watch(title, (newTitle) => {
     document.title = newTitle;
 });
 
+// Debug stuff
+const puzzleDebug = ref(false);
+
+onMounted(() => {
+    window.addEventListener('keyup', (e) => {
+        if (e.key == "?") {
+            puzzleDebug.value = !puzzleDebug.value;
+        }
+    })
+});
+
 </script>
 
 <template>
@@ -367,12 +423,17 @@ watch(title, (newTitle) => {
         <div class="page input-page" :class="{ show: isInputPage }"
             :style="{ transform: inputPageTransform, transition: dragTransition }">
             <div class="tools">
-                <AnswerPicker v-model:date="puzzleDate" v-model:answer="puzzleAnswer" />
+                <AnswerPicker :date="puzzleDate" :answer="puzzleAnswer" @updated="answerPickerUpdated" />
                 <button class="button icon px-3" @click.stop="resetGuesses" title="Reset">
                     <IconTrashCanUndo />
                 </button>
             </div>
 
+            <div v-if="puzzleDebug" class="puzzle-debug">
+                puzzleAnswer: {{ puzzleAnswer }}<br />
+                puzzleDate: {{ puzzleDate }}<br />
+            </div>
+
             <PuzzleInput v-if="puzzleAnswer" :guesses="guesses" :selectedGuess="selectedGuess" :puzzleAnswer="puzzleAnswer || ''"
                 :puzzleDate="puzzleDate" @appendGuess="appendGuess" @removeGuess="removeGuess"
                 @guessClicked="guessClicked" :shareCode="shareCode" :shareURL="shareURL" />
@@ -398,6 +459,12 @@ watch(title, (newTitle) => {
         background: var(--color-background);
     }
 
+    .puzzle-debug {
+        background: var(--gray-5);
+        padding: .5em;
+        margin-bottom: 1em;
+    }
+
     .tools {
         display: flex;
         flex-direction: row;

src/game.ts

@@ -10,7 +10,7 @@ export function dateIndex(d: Date = new Date()): number {
 export function maxDateWithAnswer(): Date {
     return new Date(startDate.valueOf() + ((answers.list.length - 1) * 24 * 60 * 60 * 1000));
 }
-// (window as any).maxDate = maxDate;
+// (window as any).maxDateWithAnswer = maxDateWithAnswer;
 
 export function wordIndex(d: Date = new Date()): number {
     const di = dateIndex(d);
@@ -48,6 +48,7 @@ export function getWordByDayOffset(offset: number, today: Date = new Date()): st
     const d = getDateByDayOffset(offset, today);
     return getWord(d);
 }
+// (window as any).getWordByDayOffset = getWordByDayOffset
 
 export function letterGrade(grade: number): string {
     if (grade >= 0.97) {