update howtoplay, add some localstorage functionality

resources/js/components/HowToPlay.vue

@@ -35,8 +35,10 @@
             <GuessWord :correctness="4">Acronym</GuessWord>
           </div>
 
+          If you manage to figure out a letter in its correct position you unlock a mini wordle for that specific word. Press the word if it has a white outline to launch it!
+
           If you have any feedback, <a style="text-decoration: underline;" href="mailto:peter@sc0tt.org">
-          let me know in an email</a>, or create a <a style="text-decoration: underline;" href='https://gitea.sc0tt.org/Belupeti/TLA/pulls'>pull request</a>
+          let me know in an email</a>, or create an <a style="text-decoration: underline;" href='https://gitea.sc0tt.org/Belupeti/TLA/pulls'>issue</a>
           
       </template>
     </UModal>

resources/js/components/Wordle.vue

@@ -4,7 +4,6 @@
         <br>
         <div class="flex-container-a gap-1.5">
             <template v-for="i in max_guesses">
-
                 <WordleRow v-if="guesses.length > i" :guess="guesses[i]" :length="correct.length" :correct="correct"/>
 
                 <UForm @submit="onsubmit" v-if="guesses.length == i">
@@ -20,6 +19,10 @@
                 <WordleRow v-if="guesses.length < i" :length="correct.length"/>
             </template>
         </div>
+
+        <UButton @click="onsubmit" class="m-1.5">
+            Submit
+        </UButton>
     </Modal>
 
 </template>
@@ -50,13 +53,7 @@
             
         },
         mounted() {
-            if (localStorage.getItem('guesses')) {
-                try {
-                    this.guesses = JSON.parse(localStorage.getItem('guesses'));
-                } catch(e) {
-                    localStorage.removeItem('guesses');
-                }
-            }
+            this.guesses = JSON.parse(localStorage.getItem('guesses-' + this.index) || '[""]');
         },
         methods: {
             onsubmit () {
@@ -64,7 +61,7 @@
                     this.guesses.push(this.guess);
                     this.guess = '';
 
-                    localStorage.guesses[this.index] = this.guesses;
+                    localStorage.setItem('guesses-' + this.index, JSON.stringify(this.guesses));
                 }
             }
         },

resources/js/pages/HomeView.vue

@@ -23,7 +23,9 @@ import Wordle from '../components/Wordle.vue';
         maxGuesses: 10,
         correct: false,
         no_tla: false,
-        wordle_open: [false, false, false]
+        wordle_open: [false, false, false],
+        wordle_dontshow: false,
+        wordle_hint: false,
       };
     },
     
@@ -42,6 +44,10 @@ import Wordle from '../components/Wordle.vue';
             this.correct_words = response.data.tla_array;
           }
         });
+
+        if (localStorage.wordle_dontshow) {
+          this.wordle_dontshow = localStorage.wordle_dontshow;
+        }
     },
     
     methods: {
@@ -76,6 +82,10 @@ import Wordle from '../components/Wordle.vue';
       },
       onkeyup() {
         this.words = this.guess.trim().split(/\s+/);
+      },
+      wordle_disable() {
+        this.wordle_dontshow = true;
+        localStorage.wordle_dontshow = true;
       }
     }
   }
@@ -99,8 +109,7 @@ import Wordle from '../components/Wordle.vue';
             <GuessWord @pressed_wordle="wordle_open[i-1] = true" :correctness="Number(guess[i+2])" :index="i-1">
               {{ guess[i-1] }}
             </GuessWord>
-
-            <Wordle v-model:open="wordle_open[i-1]" :correct="correct_words[i-1]"/>
+            <Wordle v-model:open="wordle_open[i-1]" :correct="correct_words[i-1]" :index="i"/>
           </template>
         </div>
       </template> 
@@ -158,6 +167,28 @@ import Wordle from '../components/Wordle.vue';
           <h3>The context of todays TLA:</h3>
           {{ context }}
     </Modal>
+
+    <br>
+
+    <UForm @submit="wordle_disable" v-if="!wordle_dontshow">
+      <UAlert
+        title="Press the word if the starting letter is correct to launch a mini wordle!"
+        color="success"
+        style="text-align: left; margin-top: 10px;"
+        variant="subtle"
+        orientation="horizontal"
+        :actions="[
+          {
+            label: 'Don\'t show again',
+            color: 'warning',
+            type: 'submit',
+            variant: 'subtle'
+          }
+        ]"
+      />
+    </UForm>
+
+
 </template>
 
 <style>