css variables, change max_guesses behaviour in wordle

resources/js/components/GuessWord.vue

@@ -56,7 +56,7 @@
     }
     
     .default {
-        background-color: rgb(79, 79, 79);
+        background-color: var(--incorrect-guess)
     }
     .more {
         background-color: rgb(255, 0, 0);
@@ -65,13 +65,13 @@
         background-color: rgb(129, 112, 0);
     }
     .cw-cp {
-        background-color: rgb(0, 126, 2);
+        background-color: var(--correct-guess)
     }
     .cw-ip {
         background-color: rgb(98, 175, 99);
     }
     .cf-cp {
-        background-color: rgb(37, 43, 154);
+        background-color: var(--partial-correct-guess);
         border: solid white;
     }
     .cf-cp.hover {

resources/js/components/Wordle.vue

@@ -1,6 +1,6 @@
 <template>
     <Modal v-model:open="open">
-        <h1>Wordle for the tired</h1>
+        <h1>Wordle for word {{ index }}</h1>
         <br>
         <div class="flex-container-a gap-1.5">
             <template v-for="i in max_guesses">
@@ -18,9 +18,13 @@
 
                 <WordleRow v-if="guesses.length < i" :length="correct.length"/>
             </template>
+
+            <template v-if="guesses[guesses.length-1].toString().replace(/\,/gi, '') == correct">
+                You guessed word #{{ index }}! It was '{{ correct }}'
+            </template>
         </div>
 
-        <UButton @click="onsubmit" class="m-1.5">
+        <UButton @click="onsubmit" class="m-1.5" v-if="guesses[guesses.length-1].toString().replace(/\,/gi, '') != correct">
             Submit
         </UButton>
     </Modal>
@@ -54,6 +58,7 @@
         },
         mounted() {
             this.guesses = JSON.parse(localStorage.getItem('guesses-' + this.index) || '[""]');
+            this.max_guesses = this.correct.length > 5 ? this.correct.length : 6
         },
         methods: {
             onsubmit () {

resources/js/components/WordleRow.vue

@@ -4,7 +4,7 @@
 
 <template>
     <div class="flex-container gap-1.5">
-        <div v-for="i in length" class="border border-default wr-div" :class="{'correct' : getCorrectness[i-1]==2, 'wrong-place' : getCorrectness[i-1]==1}">
+        <div v-for="i in length" class="border border-default wr-div" :class="{'correct' : getCorrectness[i-1]==2, 'wrong-place' : getCorrectness[i-1]==1, 'incorrect' : getCorrectness[i-1]==0}" >
             {{ guess[i-1] }}
         </div>
     </div>
@@ -73,10 +73,13 @@
     .correct {
         background-color: rgb(0, 126, 2);
     }
+    .incorrect {
+        background-color: var(--incorrect-guess);
+    }
     .wrong-place {
-        background-color: rgb(37, 43, 154);
+        background-color: var(--partial-correct-guess);
     }
     .empty {
-        background-color: rgb(93, 93, 93);
+        background-color: var(--incorrect-guess);
     }
 </style>