resources/js/components/GuessWord.vue

@@ -22,8 +22,6 @@ import { Transition } from 'vue';
     .v-enter-active {
         transition: opacity 0.5s ease;
     }
-
-    
     .gw-div::first-letter {
         font-weight: bold;
     }

resources/js/components/Wordle.vue

@@ -1,17 +1,25 @@
 <template>
     <Modal v-model:open="open">
-        <template v-for="i in max_guesses">
+        <div class="flex-container-a gap-1.5">
-            <WordleRow v-if="guesses.length >= i" guess="dsaf"/>
+            <template v-for="i in max_guesses">
-            <UPinInput v-if="guesses.length == i" default class="mb-2" v-model="guess" color="neutral" size="xl" :length="length"/>
+                <WordleRow v-if="guesses.length >= i" :guess="guesses[i-1]"/>
-        </template>
+                <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"/>
+            </template>
+        </div>
     </Modal>
 
 </template>
 
 <script setup lang="ts">
     import Modal from './Modal.vue';
-import WordleRow from './WordleRow.vue';
+    import WordleRow from './WordleRow.vue';
 </script>
 <script lang="ts">
     export default {
@@ -21,8 +29,23 @@ import WordleRow from './WordleRow.vue';
                 open: true,
                 guess: '',
                 length: 8,
-                guesses: ['asdf', 'asdf'],
+                guesses: [''],
             }
-        }
+        },
+        methods: {
+            onsubmit () {
+                this.guesses.push(this.guess);
+                this.guess = '';
+            }
+        },
     }
-</script>
+</script>
+
+<style scoped>
+    .flex-container-a {
+        display: flex;
+        flex-direction: column;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+</style>

resources/js/components/WordleRow.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
+import { empty } from 'valibot';
+
 
 </script>
 
 <template>
-    <div class="flex-container">
+    <div class="flex-container gap-1.5">
-        <div v-for="i in guess" class="wr-div">
+        <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}">
-            {{ i }}
+            {{ getGuess[i-1] }}
+            {{ correct[i-1] }}
         </div>
     </div>
 </template> 
@@ -14,31 +17,60 @@
     export default {
         data() {
             return {
-                guess: '',
+
             }
         },
         props: {
-            guess: '',
+            correct: {
-            guess_count: 0,
+                type: String,
-            index: 0,
+                default: 'testword',
-            length: 6,
+            },
-        }
+            guess: {
+                type: String,
+                default: '',
+            },
+            index: Number,
+        },
+
+        computed: {
+            getGuess() {
+                let guess = '';
+                if (this.guess.length == 0)
+                {
+                    for (let i = 0; i < length; i++) {
+                        guess += ' ';
+                    }
+                }
+                return guess;
+            },
+            getCorrectness() : number[] {
+                let correctness = [];
+                for (let i = 0; i < this.guess.length; i++) {
+                    if (this.guess[i] == this.correct[i]) {
+                        correctness.push(2);
+                    }
+                }
+                return correctness;
+            }
+        },
     }
 </script>
 
 <style scoped>
-    .flex-container {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        justify-content: center;
-    }
     .wr-div {
         justify-content: center;
         border-radius: 6px;
-        width: 40px;
+        width: 36px;
-        height: 40px;
+        height: 36px;
-        line-height: 24px;
+        line-height: 22px;
-        background-color: red;
+        background-color: transparent;
+        text-transform: uppercase;
+        font-weight: bold;
+    }
+    .correct {
+        background-color: rgb(0, 126, 2);
+    }
+    .wrong-place {
+        background-color: rgb(37, 43, 154);
     }
 </style>