finish 1.0

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">
-        <input type="text" @keyup="onkeyup()" v-model="guess">
-      </form>
+      <template v-if="guesses.length < maxGuesses">
+        <form ref="main-form" @submit="onSubmit" onsubmit="return false">
+          <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;