wordle frontend almost done

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;
                 }
             }
         },