backend validation change, frontend changes

app/Http/Controllers/TlaController.php

@@ -34,19 +34,7 @@ class TlaController extends Controller
         
         if ( !in_array($language, $allowedLanguages) ) $language = 'en';
 
-        $tla = Tla::where('used', date("Y-m-d"))
-            ->where('language', $language)
-            ->first();
-
-        if ( is_null($tla) ) {
-            $tla = Tla::where('language', $language)
-                ->where('used', NULL)
-                ->inRandomOrder()
-                ->first();
-
-            $tla->used = date("Y-m-d");
-            $tla->save();
-        }
+        $tla = Tla::GetCurrentTla($language);
 
         return response()->json([
             'hint' => $tla->hint,
@@ -62,18 +50,41 @@ class TlaController extends Controller
 
         $guess = $request->all()['guess'];
 
-        $guess_array = explode(' ', $guess);
+        $tla = explode(' ', Tla::GetCurrentTla($language)->abbreviation);
+
+        $guess_array = explode(' ', $guess);
+        $proposal = [];
+
+        for ($i = 0; $i < 3; $i++) {
+            for ($j = 0; $j < 3; $j++) {
+                if ( $guess_array[$j] == $tla[$i] ) {
+                    $proposal[$i][$j] = $i-$j != 0 ? 3 : 4;
+                } 
+                else if ( $guess_array[$j][0] == $tla[$i][0] ) {
+                    $proposal[$i][$j] = $i-$j != 0 ? 1 : 2;
+                }
+                else $proposal[$i][$j] = 0;
+            }
+
+            if ($proposal[$i][0] <= $proposal[$i][1] || $proposal[$i][0] <= $proposal[$i][2]) $proposal[$i][0] = 0;
+            if ($proposal[$i][1] <= $proposal[$i][2] || $proposal[$i][1] <= $proposal[$i][0]) $proposal[$i][1] = 0;
+            if ($proposal[$i][2] <= $proposal[$i][0] || $proposal[$i][2] <= $proposal[$i][1]) $proposal[$i][2] = 0;
+        }
+
+        for ($i = 0; $i < 3; $i++) {
+            array_push($guess_array, max($proposal[0][$i], $proposal[1][$i], $proposal[2][$i]));
+        }
 
-        array_push($guess_array, 1);
-        array_push($guess_array, 2);
-        array_push($guess_array, 3);
 
         if ( $request->session()->get('guesses-'.$language, NULL) == NULL ) $request->session()->put('guesses-'.$language, [$guess_array]);
         else $request->session()->push('guesses-'.$language, $guess_array);
 
         $guesses = $request->session()->get('guesses-'.$language, NULL);
 
-        return $guesses;
+        return response()->json([
+            'guesses' => $request->session()->get('guesses-'.$language, NULL),
+            'real' => $tla
+        ]);
     }
 
     public function update(Request $request, Tla $tla): RedirectResponse

app/Models/Tla.php

@@ -12,4 +12,23 @@ class Tla extends Model
     use HasFactory;
 
     protected $fillable = ['abbreviation', 'hint', 'used'];
+
+    public static function GetCurrentTla( string $language ) : Tla {
+        $tla = Tla::where('used', date("Y-m-d"))
+            ->where('language', $language)
+            ->first();
+
+        if ( is_null($tla) ) {
+            $tla = Tla::where('language', $language)
+                ->where('used', NULL)
+                ->inRandomOrder()
+                ->first();
+
+            $tla->used = date("Y-m-d");
+            $tla->save();
+        }
+
+
+        return $tla;
+    }
 }

database/factories/TlaFactory.php

@@ -19,7 +19,7 @@ class TlaFactory extends Factory
     {
         return [
             'abbreviation' => fake()->word() . ' ' . fake()->word() . ' ' . fake()->word(),
-            'hint' => fake()->word(),
+            'hint' => fake()->sentence(),
             'language' => fake()->randomElement(['hu', 'en']),
         ];
     }

resources/css/app.css

@@ -8,3 +8,11 @@
     --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
         'Segoe UI Symbol', 'Noto Color Emoji';
 }
+
+.main {
+    text-align: center;
+}
+h1 {
+    font-size: 3vh;
+    font-weight: bolder;
+}

resources/js/App.vue

@@ -20,7 +20,19 @@
 <template>
 
     <UApp>
-    <UMain>
+    <UHeader>
+    <template #title>
+      TLAdle
+    </template>
+
+
+    <template #right>
+      <UColorModeButton />
+
+
+    </template>
+  </UHeader>
+    <UMain class="main">
         <NuxtLayout>
             <router-view v-slot="{ Component,route }">
                 <component :is="Component" />

resources/js/components/GuessWord.vue

@@ -1,16 +1,36 @@
 <template>
-    <div class="gw-div">
+    <div class="gw-div" :class="{ 'default': correctness==0, 'cw-cp': correctness==4, 'cw-ip': correctness==3, 'cf-cp': correctness==2, 'cf-ip': correctness==1 }">
         <slot></slot>
     </div>
 </template>
 
+<script lang="ts">
+
+    export default {
+        props: {
+            correctness: {
+                type: Number,
+                default: 0,
+            }, 
+        }
+    }
+</script>
+
 <style scoped>
+    
+    .gw-div::first-letter {
+        font-weight: bold;
+    }
     .gw-div {
         border-radius: 5px;
         padding: 5px;
         margin: 5px;
         justify-content: center;
         background-color: grey;
+        color: white;
+    }
+    .default {
+        background-color: red;
     }
     .cw-cp {
         background-color: rgb(0, 122, 2);

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>
@@ -68,3 +76,15 @@
     </template>
   </UCard>
 </template>
+
+<style>
+  .flex-container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+  .hidden {
+    color: transparent;
+  }
+</style>