backend validation change, frontend changes

resources/js/pages/HomeView.vue

@@ -31,10 +31,11 @@
         })
         .then((response) => {
           console.log(response.data);
+          this.guesses = response.data.guesses;
         })
       },
       onkeyup() {
-        this.words = this.guess.split(" ");
+        this.words = this.guess.trim().split(" ");
       }
     }
   }
@@ -44,19 +45,26 @@
 <template>
   <UCard>
     <template #header>
+      <h1>Motto:</h1>
       {{ hint }}
     </template>
 
       <template v-for="guess in guesses">
-        {{ guess }}
+        <div class="flex-container">
+          <template v-for="i in 3">
+            <GuessWord :correctness="Number(guess[i+2])">
+              {{ guess[i-1] }}
+            </GuessWord>
+          </template>
+        </div>
       </template>
 
       
     <template #footer>
       
-      <div  style="display: flex; flex-direction: row;">
+      <div class="flex-container">
         <template v-for="word in words">
-          <GuessWord>
+          <GuessWord :correctness="-1">
               {{ word }}
           </GuessWord>
         </template>
@@ -67,4 +75,16 @@
 
     </template>
   </UCard>
-</template>
+</template>
+
+<style>
+  .flex-container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+  .hidden {
+    color: transparent;
+  }
+</style>