From 836c83b473889f7f0bcd604783ef8d44f062a489 Mon Sep 17 00:00:00 2001
From: Beluzsar Peter <beluzsarp@gmail.com>
Date: Fri, 28 Aug 2026 00:55:22 +0200
Subject: [PATCH] wordle frontend almost done

---
 app/Http/Controllers/TlaController.php |  2 +-
 resources/js/components/GuessWord.vue  | 44 +++++++++++++++-----------
 resources/js/components/Wordle.vue     | 15 +++++++++
 resources/js/pages/HomeView.vue        | 12 ++++---
 4 files changed, 48 insertions(+), 25 deletions(-)

diff --git a/app/Http/Controllers/TlaController.php b/app/Http/Controllers/TlaController.php
index a8af4f8..93a7089 100644
--- a/app/Http/Controllers/TlaController.php
+++ b/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),
         ]);
     } 
 
diff --git a/resources/js/components/GuessWord.vue b/resources/js/components/GuessWord.vue
index f75a108..75578e2 100644
--- a/resources/js/components/GuessWord.vue
+++ b/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);
diff --git a/resources/js/components/Wordle.vue b/resources/js/components/Wordle.vue
index 49769bd..85d75c5 100644
--- a/resources/js/components/Wordle.vue
+++ b/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;
                 }
             }
         },
diff --git a/resources/js/pages/HomeView.vue b/resources/js/pages/HomeView.vue
index 0f05514..d81107c 100644
--- a/resources/js/pages/HomeView.vue
+++ b/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,13 +96,14 @@ 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">
@@ -141,7 +145,7 @@ import Wordle from '../components/Wordle.vue';
     <UButton to="/suggestion" color="neutral" variant="subtle">
       Suggest a TLA!
     </UButton>
-   
+
     <Modal v-model:open="victory">
           <h1>Congratulations!</h1>
             Todays TLA was: {{ tla }} 
@@ -154,8 +158,6 @@ import Wordle from '../components/Wordle.vue';
           <h3>The context of todays TLA:</h3>
           {{ context }}
     </Modal>
-    <Wordle correct="sadf"/>
-
 </template>
 
 <style>