wordle part kind of working

resources/js/components/Wordle.vue

@@ -1,16 +1,23 @@
 <template>
     <Modal v-model:open="open">
+        <h1>Wordle for the tired</h1>
+        <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-1]"/>
-                <UForm @submit="onsubmit" v-if="guesses.length == i">
-                    <UPinInput default class="mb-2" autofocus v-model="guess" color="neutral" size="lg" :length="length"/>
 
-                    <UButton type="submit" style="display: none;">
-                        Submit
-                    </UButton>
-                </UForm>
-                <WordleRow v-if="guesses.length < i"/>
+                <WordleRow v-if="guesses.length > i" :guess="guesses[i]" :length="length" :correct="correct"/>
+
+                    <UForm @submit="onsubmit" v-if="guesses.length == i">
+                        
+                        <UPinInput v-if="guesses[guesses.length-1].toString().replace(/\,/gi, '') != correct" default class="mb-2" autofocus v-model="guess" color="neutral" :length="length" size="lg" :correct="correct" />
+
+                        <WordleRow v-else :length="length"/>
+
+                        <UButton type="submit" style="display: none;">
+                            Submit
+                        </UButton>
+                    </UForm>
+                    <WordleRow v-if="guesses.length < i" :length="length"/>
             </template>
         </div>
     </Modal>
@@ -25,17 +32,25 @@
     export default {
         data() {
             return {
-                max_guesses: 5,
+                max_guesses: 10,
                 open: true,
                 guess: '',
                 length: 8,
                 guesses: [''],
             }
         },
+        props: {
+            correct: {
+                type: String,
+                default: 'nagyonhosszezugyselesz'
+            }
+        },
         methods: {
             onsubmit () {
-                this.guesses.push(this.guess);
-                this.guess = '';
+                if (this.guess.length == this.length) {
+                    this.guesses.push(this.guess);
+                    this.guess = '';
+                }
             }
         },
     }