backend fixes, better case handling, some frontend changes

resources/js/pages/HomeView.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
   import axios from 'axios';
   import GuessWord from '../components/GuessWord.vue';
-  import { ref } from 'vue'
-import Modal from '../components/Modal.vue';
+  import Modal from '../components/Modal.vue';
 </script>
 
 <script lang="ts">
@@ -13,6 +12,8 @@ import Modal from '../components/Modal.vue';
         guesses: [' '],
         words: [' '],
         guess: '',
+        tla: '', 
+        context: '',
         victory: false,
         loss: false,
         maxGuesses: 10,
@@ -25,6 +26,8 @@ import Modal from '../components/Modal.vue';
         .then(response => {
           this.hint = response.data.hint;
           this.guesses = response.data.guesses;
+          this.tla = response.data.tla;
+          this.context = response.data.context;
         });
     },
     
@@ -45,6 +48,8 @@ import Modal from '../components/Modal.vue';
             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;
+              this.tla = response.data.tla;
+              this.context = response.data.context;
             }
             else if (this.guesses.length == this.maxGuesses) {
               this.loss = !this.loss;
@@ -72,7 +77,7 @@ import Modal from '../components/Modal.vue';
       <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
+          You have to try and guess the TLA (Three Letter Acronym). 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>
@@ -86,12 +91,7 @@ import Modal from '../components/Modal.vue';
             <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>
-          <br><br>
-          <h2 style="font-weight: bold;">IMPORTANT</h2>
-          <p>Only use lowercase letters, I have not yet implemented automatic casing yet and I should really get some sleep</p>
+          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>
@@ -120,7 +120,7 @@ import Modal from '../components/Modal.vue';
       </div>
       <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">
+          <UInput v-model="guess" @keyup="onkeyup()"/>
         </form>
       </template>
       <h3>{{ guesses.length }} / {{ maxGuesses }}</h3>
@@ -130,7 +130,7 @@ import Modal from '../components/Modal.vue';
    
     <Modal v-model:open="victory">
           <h1>Congratulations!</h1>
-            Todays TLA was: whatever you wrote
+            Todays TLA was: {{ tla }} 
     </Modal>
     <Modal v-model:open="loss">
           <h1>What a shame!</h1>