resources/js/components/Wordle.vue

@@ -1,20 +1,27 @@
 <template>
-    <Modal>
+    <Modal v-model:open="open">
         <template v-for="i in max_guesses">
-            <WordleRow/> 
+            <WordleRow v-if="guesses.length >= i" guess="dsaf"/>
+            <UPinInput v-if="guesses.length == i" default class="mb-2" v-model="guess" color="neutral" size="xl" :length="length"/>
         </template>
+
     </Modal>
 
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
     import Modal from './Modal.vue';
 import WordleRow from './WordleRow.vue';
-
+</script>
+<script lang="ts">
     export default {
         data() {
             return {
                 max_guesses: 5,
+                open: true,
+                guess: '',
+                length: 8,
+                guesses: ['asdf', 'asdf'],
             }
         }
     }

resources/js/components/WordleRow.vue

@@ -1,4 +1,44 @@
-<template>
+<script setup lang="ts">
-    asdf
 
+</script>
+
+<template>
+    <div class="flex-container">
+        <div v-for="i in guess" class="wr-div">
+            {{ i }}
+        </div>
+    </div>
 </template> 
+
+<script lang="ts">
+    export default {
+        data() {
+            return {
+                guess: '',
+            }
+        },
+        props: {
+            guess: '',
+            guess_count: 0,
+            index: 0,
+            length: 6,
+        }
+    }
+</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;
+        height: 40px;
+        line-height: 24px;
+        background-color: red;
+    }
+</style>

resources/js/pages/HomeView.vue

@@ -147,6 +147,8 @@ import Wordle from '../components/Wordle.vue';
           {{ context }}
     </Modal>
 
+    <Wordle/>
+    
 
 </template>