frontend changes

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,35 +21,43 @@
           this.hint = response.data.hint;
           this.guesses = response.data.guesses;
         });
-    } 
+    },
+    
+    methods: {
+      onSubmit() {
+        console.log('adsf')
+      },
+      onkeyup() {
+        this.words = this.guess.split(" ");
+      }
+    }
   }
-
-  async function onSubmit(event: FormSubmitEvent<Schema>) {
-    console.log(event.data)
-  }
-  
+ 
 </script>
 
 <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>
+      
+      <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>