wordle frontend almost done

app/Http/Controllers/TlaController.php

@@ -43,7 +43,7 @@ class TlaController extends Controller
             'context' => $session->get('tla-'.$language) == $tla->acronym ? $tla->context : NULL,
             'submitter' => $tla->submitter,
             'correct' => $session->get('correct-'.$language),
-            'tla_array' => ['','',''],
+            'tla_array' => $session->get('tla-array-'.$language),
         ]);
     } 
 

resources/js/components/GuessWord.vue

@@ -1,18 +1,18 @@
 <template>
-        <button v-if="true"
-                @click="onclick"
-                class="gw-div"
-                :class="{
-                    'less': correctness==-3,
-                    'more': correctness==-2,
-                    'default': correctness==0,
-                    'cw-cp': correctness==4,
-                    'cw-ip': correctness==3,
-                    'cf-cp': correctness==2,
-                    'cf-ip': correctness==1
-                }">
-            <slot></slot>
-        </button>
+    <button v-if="true"
+            @click="onclick"
+            class="gw-div"
+            :class="{
+                'less': correctness==-3,
+                'more': correctness==-2,
+                'default': correctness==0,
+                'cw-cp': correctness==4,
+                'cw-ip': correctness==3,
+                'cf-cp': correctness==2,
+                'cf-ip': correctness==1
+            }">
+        <slot></slot>
+    </button>
 </template>
 
 <script lang="ts">
@@ -26,15 +26,11 @@
             correctness: {
                 type: Number,
                 default: 0,
-                correct: {
-                    type: String,
-                    default: ''
-                }
             }, 
         },
         methods: {
             onclick () {
-                if (this.correctness == 2) this.modal_open = true;
+                if (this.correctness == 2) this.$emit('pressed_wordle');
             }
         },
         
@@ -56,6 +52,9 @@
         background-color: grey;
         color: white;
     }
+    .gw-button {
+    }
+    
     .default {
         background-color: rgb(79, 79, 79);
     }
@@ -73,6 +72,13 @@
     }
     .cf-cp {
         background-color: rgb(37, 43, 154);
+        border: solid white;
+    }
+    .cf-cp.hover {
+        background-color: #4CAF50; /* Green */
+    }
+    .cf-cp.focus {
+        background-color: red;
     }
     .cf-ip {
         background-color: rgb(106, 108, 160);

resources/js/components/Wordle.vue

@@ -43,13 +43,28 @@
                 type: String,
                 default: 'nagyonhosszezugyselesz'
             },
+            index: {
+                type: Number,
+                default: 0,
+            } 
             
         },
+        mounted() {
+            if (localStorage.getItem('guesses')) {
+                try {
+                    this.guesses = JSON.parse(localStorage.getItem('guesses'));
+                } catch(e) {
+                    localStorage.removeItem('guesses');
+                }
+            }
+        },
         methods: {
             onsubmit () {
                 if (this.guess.length == this.correct.length) {
                     this.guesses.push(this.guess);
                     this.guess = '';
+
+                    localStorage.guesses[this.index] = this.guesses;
                 }
             }
         },

resources/js/pages/HomeView.vue

@@ -23,6 +23,7 @@ import Wordle from '../components/Wordle.vue';
         maxGuesses: 10,
         correct: false,
         no_tla: false,
+        wordle_open: [false, false, false]
       };
     },
     
@@ -38,6 +39,7 @@ import Wordle from '../components/Wordle.vue';
             this.tla = response.data.tla;
             this.context = response.data.context;
             this.correct = response.data.correct;
+            this.correct_words = response.data.tla_array;
           }
         });
     },
@@ -54,6 +56,7 @@ import Wordle from '../components/Wordle.vue';
             this.guesses = response.data.guesses;
             this.guess = '';
             this.words = [];
+            this.correct_words = response.data.tla_array;
 
             let current_guess = response.data.guesses[response.data.guesses.length-1]
             if (Number(current_guess[3]) + Number(current_guess[4]) + Number(current_guess[5]) == 12) {
@@ -93,14 +96,15 @@ import Wordle from '../components/Wordle.vue';
       <template v-for="guess in guesses" v-if="guesses.length>1">
         <div class="flex-container">
           <template v-for="i in 3">
-            <GuessWord :correctness="Number(guess[i+2])" :correct="correct_words[i-1]">
+            <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]"/>
           </template>
         </div>
       </template> 
       
-      
       <template v-if="guesses.length < maxGuesses && !correct && !no_tla">
         <div class="flex-container" v-if="guess.length > 0">
           <template v-for="word in words">
@@ -154,8 +158,6 @@ import Wordle from '../components/Wordle.vue';
           <h3>The context of todays TLA:</h3>
           {{ context }}
     </Modal>
-    <Wordle correct="sadf"/>
-
 </template>
 
 <style>