frontend changes

package-lock.json

@@ -8,6 +8,7 @@
                 "@nuxt/ui": "^4.10.0",
                 "@vitejs/plugin-vue": "^6.0.8",
                 "axios": "^1.19.0",
+                "valibot": "^1.4.2",
                 "vue": "^3.5.41",
                 "vue-router": "^5.2.0"
             },
@@ -5464,6 +5465,20 @@
                 "untyped": "dist/cli.mjs"
             }
         },
+        "node_modules/valibot": {
+            "version": "1.4.2",
+            "resolved": "https://registry.npmjs.org/valibot/-/valibot-1.4.2.tgz",
+            "integrity": "sha512-gjdCvJ6d3RyHAneqxMYMW9QMCwYMb3jpOO0IyHZV1bnRHFBHrX3VkIILt5XYR0WhwHiH7Mty8ovuPZ/O3gamrg==",
+            "license": "MIT",
+            "peerDependencies": {
+                "typescript": ">=5"
+            },
+            "peerDependenciesMeta": {
+                "typescript": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/vaul-vue": {
             "version": "0.4.1",
             "resolved": "https://registry.npmjs.org/vaul-vue/-/vaul-vue-0.4.1.tgz",

package.json

@@ -17,6 +17,7 @@
         "@nuxt/ui": "^4.10.0",
         "@vitejs/plugin-vue": "^6.0.8",
         "axios": "^1.19.0",
+        "valibot": "^1.4.2",
         "vue": "^3.5.41",
         "vue-router": "^5.2.0"
     }

resources/js/components/GuessWord.vue

@@ -0,0 +1,15 @@
+<template>
+    <div class="gw-div">
+        <slot></slot>
+    </div>
+</template>
+
+<style scoped>
+    .gw-div {
+        border-radius: 5px;
+        padding: 5px;
+        margin: 5px;
+        justify-content: center;
+        background-color: grey;
+    }
+</style>

resources/js/pages/HomeView.vue

@@ -1,13 +1,16 @@
-<script lang="ts">
-  import vue from '@vitejs/plugin-vue';
-  import type { FormSubmitEvent } from '@nuxt/ui';
+<script setup lang="ts">
   import axios from 'axios';
+  import GuessWord from '../components/GuessWord.vue';
+</script>
 
+<script lang="ts">
   export default {
     data() {
       return {
-        hint: '',
-        guesses: [],
+        hint: ' ',
+        guesses: [' '],
+        words: [' '],
+        guess: '',
       };
     },
     
@@ -18,11 +21,16 @@
           this.hint = response.data.hint;
           this.guesses = response.data.guesses;
         });
-    } 
-  }
+    },
     
-  async function onSubmit(event: FormSubmitEvent<Schema>) {
-    console.log(event.data)
+    methods: {
+      onSubmit() {
+        console.log('adsf')
+      },
+      onkeyup() {
+        this.words = this.guess.split(" ");
+      }
+    }
   }
  
 </script>
@@ -30,23 +38,26 @@
 <template>
   <UCard>
     <template #header>
-      {{ this.hint }}
+      {{ hint }}
     </template>
 
       <template v-for="guess in guesses">
         {{ guess }}
       </template>
 
-    <template #footer>
-      <UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
-          <UInput
-            placeholder="Three Letter Abbreviation"
-          />
       
-        <UButton type="submit">
-          Submit
-        </UButton>
-      </UForm>
+    <template #footer>
+      
+      <div  style="display: flex; flex-direction: row;">
+        <template v-for="word in words">
+          <GuessWord>
+              {{ word }}
+          </GuessWord>
+        </template>
+      </div>
+      <form @submit="onSubmit" onsubmit="return false">
+        <input type="text" @keyup="onkeyup" v-model="guess">
+      </form>
 
     </template>
   </UCard>