first kind of stable version

app/Http/Controllers/TlaController.php

@@ -45,14 +45,13 @@ class TlaController extends Controller
     public function check_tla(Request $request, ?string $language = 'en')
     {
         $request->validate([
-            'guess' => 'required',
+            'guess' => 'required|array|size:3',
         ]);
 
-        $guess = $request->all()['guess'];
-
         $tla = explode(' ', Tla::GetCurrentTla($language)->abbreviation);
 
-        $guess_array = explode(' ', $guess);
+        $guess_array = $request->all()['guess'];
+
         $proposal = [];
 
         for ($i = 0; $i < 3; $i++) {

resources/js/components/GuessWord.vue

@@ -1,10 +1,14 @@
 <template>
-    <div class="gw-div" :class="{ 'default': correctness==0, 'cw-cp': correctness==4, 'cw-ip': correctness==3, 'cf-cp': correctness==2, 'cf-ip': correctness==1 }">
+    <Transition appear>
+        <div v-if="true" class="gw-div" :class="{ 'less': correctness==-3, 'more': correctness==-2, 'default': correctness==0, 'cw-cp': correctness==4, 'cw-ip': correctness==3, 'cf-cp': correctness==2, 'cf-ip': correctness==1 }">
             <slot></slot>
         </div>
+    </Transition>
 </template>
 
 <script lang="ts">
+import { Transition } from 'vue';
+
 
     export default {
         props: {
@@ -17,6 +21,10 @@
 </script>
 
 <style scoped>
+    .v-enter-active {
+        transition: opacity 0.5s ease;
+    }
+
     
     .gw-div::first-letter {
         font-weight: bold;
@@ -30,7 +38,13 @@
         color: white;
     }
     .default {
-        background-color: red;
+        background-color: rgb(79, 79, 79);
+    }
+    .more {
+        background-color: rgb(255, 0, 0);
+    }
+    .less {
+        background-color: rgb(129, 112, 0);
     }
     .cw-cp {
         background-color: rgb(0, 122, 2);

resources/js/pages/HomeView.vue

@@ -25,17 +25,21 @@
     
     methods: {
       onSubmit() {
+
+        if (this.words.length == 3) {
+          console.log(this.words)
           axios
           .post("/api/check_tla/en", {
-          guess: this.guess,
+            guess: this.words,
           })
           .then((response) => {
             console.log(response.data);
             this.guesses = response.data.guesses;
           })
+        }
       },
       onkeyup() {
-        this.words = this.guess.trim().split(" ");
+        this.words = this.guess.trim().split(/\W+/);
       }
     }
   }
@@ -64,13 +68,13 @@
       
       <div class="flex-container">
         <template v-for="word in words">
-          <GuessWord :correctness="-1">
+          <GuessWord :correctness="words.length == 3 ? -1 : (words.length > 3 ? -2 : -3)">
               {{ word }}
           </GuessWord>
         </template>
       </div>
       <form @submit="onSubmit" onsubmit="return false">
-        <input type="text" @keyup="onkeyup" v-model="guess">
+        <input type="text" @keyup="onkeyup()" v-model="guess">
       </form>
 
     </template>