finish 1.0

.gitea/workflows/build-image.yaml

@@ -7,7 +7,7 @@ jobs:
     env:
       IMAGE_NAME: tladle
       REGISTRY_NAME: gitea.sc0tt.org
-      GIT_TAG: 0.1 
+      GIT_TAG: 1.0 
     runs-on: ubuntu-latest
     steps:
       - name: Checkout

app/Http/Controllers/TlaController.php

@@ -28,17 +28,27 @@ class TlaController extends Controller
         return redirect()->route('admin')->with('success', 'Record deleted');
     }
 
+    public function session_flush(Request $request, string $language)
+    {
+        if ($request->session()->get('date', NULL) != date('Y-m-d'))
+        {
+            $request->session()->forget('guesses-'.$language);
+            $request->session()->put('date', date('Y-m-d'));
+        }
+    }
+
     public function fetch_tla(Request $request, ?string $language = 'en')
     {
         $allowedLanguages = array('hu', 'en');
-        
         if ( !in_array($language, $allowedLanguages) ) $language = 'en';
 
         $tla = Tla::GetCurrentTla($language);
+        $this->session_flush($request, $language);
 
         return response()->json([
             'hint' => $tla->hint,
-            'guesses' => $request->session()->get('guesses-'.$language, NULL)
+            'guesses' => $request->session()->get('guesses-'.$language, []),
+            'date' => $request->session()->get('date'),
         ]);
     } 
 
@@ -47,6 +57,7 @@ class TlaController extends Controller
         $request->validate([
             'guess' => 'required|array|size:3',
         ]);
+        $this->session_flush($request, $language);
 
         $tla = explode(' ', Tla::GetCurrentTla($language)->abbreviation);
 
@@ -81,7 +92,8 @@ class TlaController extends Controller
         $guesses = $request->session()->get('guesses-'.$language, NULL);
 
         return response()->json([
-            'guesses' => $request->session()->get('guesses-'.$language, NULL),
+            'guesses' => $request->session()->get('guesses-'.$language, []),
+            'date' => $request->session()->get('date'),
             'real' => $tla
         ]);
     }

resources/js/App.vue

@@ -25,7 +25,6 @@
       TLAdle
     </template>
 
-
     <template #right>
       <UColorModeButton />
 

resources/js/components/GuessWord.vue

@@ -30,8 +30,8 @@ import { Transition } from 'vue';
         font-weight: bold;
     }
     .gw-div {
-        border-radius: 5px;
+        border-radius: 10px;
-        padding: 5px;
+        padding: 8px;
         margin: 5px;
         justify-content: center;
         background-color: grey;

resources/js/components/Modal.vue

@@ -0,0 +1,9 @@
+<template>
+    <UModal>
+      <template #content>
+        <div style="padding: 10%; text-align: center;">
+            <slot></slot>
+        </div>
+      </template>
+    </UModal>
+</template>

resources/js/pages/HomeView.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
   import axios from 'axios';
   import GuessWord from '../components/GuessWord.vue';
+  import { ref } from 'vue'
+import Modal from '../components/Modal.vue';
 </script>
 
 <script lang="ts">
@@ -11,6 +13,9 @@
         guesses: [' '],
         words: [' '],
         guess: '',
+        victory: false,
+        loss: false,
+        maxGuesses: 10,
       };
     },
     
@@ -26,15 +31,24 @@
     methods: {
       onSubmit() {
 
-        if (this.words.length == 3) {
+        if (this.words.length == 3 && this.guesses.length < this.maxGuesses) {
           console.log(this.words)
           axios
           .post("/api/check_tla/en", {
             guess: this.words,
           })
           .then((response) => {
-            console.log(response.data);
             this.guesses = response.data.guesses;
+            this.guess = '';
+            this.words = [];
+
+            let current_guess = response.data.guesses[response.data.guesses.length-1]
+            if (Number(current_guess[3]) + Number(current_guess[4]) + Number(current_guess[5]) == 12) {
+              this.victory = !this.victory;
+            }
+            else if (this.guesses.length == this.maxGuesses) {
+              this.loss = !this.loss;
+            }
           })
         }
       },
@@ -49,8 +63,34 @@
 <template>
   <UCard>
     <template #header>
+
       <h1>Motto:</h1>
       {{ hint }}
+
+      <br>
+    <UModal title="How to play">
+      <UButton label="How to play" color="neutral" variant="subtle" />
+
+      <template #body>
+          You have to try and guess the TLA (Three Letter Abbreviation). You get a Motto to start on, and on each try you get more information about the kinds of words
+          and letters the abbreviation has.
+
+          <br>
+          <br>
+          You can use the following color codes to determin how close you were to the correct answer:
+          <div class="flex-container">
+
+            <GuessWord :correctness="4">Correct word, correct place</GuessWord>
+            <GuessWord :correctness="3">Correct word, wrong place</GuessWord>
+            <GuessWord :correctness="2">Correct starting letter, correct place</GuessWord>
+            <GuessWord :correctness="1">Correct starting letter, wrong place</GuessWord>
+          </div>
+          If you have any feedback, <a style="text-decoration: underline;" href="mailto:peter@sc0tt.org">
+          let me know in an email 
+          </a>, or create a <a style="text-decoration: underline;" href='https://gitea.sc0tt.org/Belupeti/TLA/pulls'>pull request</a>
+      </template>
+    </UModal>
+
     </template>
 
       <template v-for="guess in guesses">
@@ -73,15 +113,33 @@
           </GuessWord>
         </template>
       </div>
-      <form @submit="onSubmit" onsubmit="return false">
+      <template v-if="guesses.length < maxGuesses">
-        <input type="text" @keyup="onkeyup()" v-model="guess">
+        <form ref="main-form" @submit="onSubmit" onsubmit="return false">
-      </form>
+          <input style="background-color: grey;" type="text" @keyup="onkeyup()" v-model="guess">
+        </form>
+      </template>
+      <h3>{{ guesses.length }} / {{ maxGuesses }}</h3>
 
     </template>
   </UCard>
+   
+    <Modal v-model:open="victory">
+          <h1>Congratulations!</h1>
+            Todays TLA was: whatever you wrote
+    </Modal>
+    <Modal v-model:open="loss">
+          <h1>What a shame!</h1>
+            Todays TLA was: whatever you didnt write 
+    </Modal>
+
 </template>
 
 <style>
+  h3 {
+    font-weight: bold;
+    padding: 10px;
+
+  }
   .flex-container {
     display: flex;
     flex-direction: row;