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 = '';
+                }
             }
         },
     }

resources/js/components/WordleRow.vue

@@ -1,15 +1,12 @@
 <script setup lang="ts">
-import { empty } from 'valibot';
-
 
 </script>
 
 <template>
     <div class="flex-container gap-1.5">
-        <div v-for="i in getGuess.length" class="border border-default wr-div" :class="{'correct' : getCorrectness[i-1]==2, 'wrong-place' : correctness[i-1]==1}">
-            {{ getGuess[i-1] }}
-            {{ correct[i-1] }}
-        </div>
+            <div v-for="i in length" class="border border-default wr-div" :class="{'correct' : getCorrectness[i-1]==2, 'wrong-place' : getCorrectness[i-1]==1}">
+                {{ guess[i-1] }}
+            </div>
     </div>
 </template> 
 
@@ -17,7 +14,6 @@ import { empty } from 'valibot';
     export default {
         data() {
             return {
-
             }
         },
         props: {
@@ -30,26 +26,33 @@ import { empty } from 'valibot';
                 default: '',
             },
             index: Number,
+            empty: {
+                type: Boolean,
+                default: false,
+            },
+            length: Number,
         },
 
         computed: {
-            getGuess() {
-                let guess = '';
-                if (this.guess.length == 0)
-                {
-                    for (let i = 0; i < length; i++) {
-                        guess += ' ';
-                    }
-                }
-                return guess;
-            },
             getCorrectness() : number[] {
+                let correctness_alt = [];
                 let correctness = [];
                 for (let i = 0; i < this.guess.length; i++) {
                     if (this.guess[i] == this.correct[i]) {
                         correctness.push(2);
+                    } else correctness.push(0);
+                }
+                correctness_alt = correctness.slice();
+
+                for (let i = 0; i < this.guess.length; i++) {
+                    for (let j = 0; j < this.correct.length; j++) {
+                        if (this.guess[i] == this.correct[j] && correctness[i] == 0 && correctness_alt[j] == 0) {
+                            correctness[i] = 1;
+                            correctness_alt[j] = 1;
+                        }
                     }
                 }
+
                 return correctness;
             }
         },
@@ -73,4 +76,7 @@ import { empty } from 'valibot';
     .wrong-place {
         background-color: rgb(37, 43, 154);
     }
+    .empty {
+        background-color: rgb(93, 93, 93);
+    }
 </style>

resources/js/pages/HomeView.vue

@@ -147,7 +147,7 @@ import Wordle from '../components/Wordle.vue';
           {{ context }}
     </Modal>
 
-    <Wordle/>
+    <Wordle correct="testword"/>
     
 
 </template>