add some fixes

resources/js/components/Wordle.vue

@@ -1,17 +1,25 @@
 <template>
     <Modal v-model:open="open">
-        <template v-for="i in max_guesses">
-            <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>
+        <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"/>
+            </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>