change some frontend stuff and add new view

app/Http/Controllers/TlaController.php

@@ -111,7 +111,7 @@ class TlaController extends Controller
 
         if ($score == 12 || count($guesses) == env('MAX_GUESSES', 10)) {
             $session->put('tla', $tla_object->acronym);
-            $session->put('correct', true);
+            if ($score == 12) $session->put('correct', true);
         }
 
         return response()->json([

resources/js/components/GuessWord.vue

@@ -45,15 +45,15 @@ import { Transition } from 'vue';
         background-color: rgb(129, 112, 0);
     }
     .cw-cp {
-        background-color: rgb(0, 97, 2);
+        background-color: rgb(0, 126, 2);
     }
     .cw-ip {
-        background-color: rgb(19, 197, 22);
+        background-color: rgb(98, 175, 99);
     }
     .cf-cp {
         background-color: rgb(0, 9, 166);
     }
     .cf-ip {
-        background-color: rgb(70, 78, 235);
+        background-color: rgb(96, 98, 160);
     }
 </style>

resources/js/pages/HomeView.vue

@@ -92,10 +92,25 @@
           <div class="flex-container">
 
             <GuessWord :correctness="4">Correct word, correct place</GuessWord>
-            <GuessWord :correctness="3">Correct word, wrong place</GuessWord>
+            <GuessWord :correctness="3">Correct word, incorrect place</GuessWord>
             <GuessWord :correctness="2">Correct starting letter, correct place</GuessWord>
-            <GuessWord :correctness="1">Correct starting letter, wrong place</GuessWord>
+            <GuessWord :correctness="1">Correct starting letter, incorrect place</GuessWord>
           </div>
+          <br>
+          As an example, if the acronym of the day is
+          <div class="flex-container">
+
+            <GuessWord :correctness="4">Three</GuessWord>
+            <GuessWord :correctness="4">Letter</GuessWord>
+            <GuessWord :correctness="4">Acronym</GuessWord>
+          </div>
+          And your guess was "Letter True Acronym", then the colors would be as follows:
+          <div class="flex-container">
+            <GuessWord :correctness="3">Letter</GuessWord>
+            <GuessWord :correctness="1">True</GuessWord>
+            <GuessWord :correctness="4">Acronym</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>
           
@@ -117,6 +132,7 @@
       
     <template #footer>
       
+      <template v-if="guesses.length < maxGuesses && !correct">
       <div class="flex-container">
         <template v-for="word in words">
           <GuessWord :correctness="words.length == 3 ? -1 : (words.length > 3 ? -2 : -3)">
@@ -124,7 +140,6 @@
           </GuessWord>
         </template>
       </div>
-      <template v-if="guesses.length < maxGuesses && !correct">
         <form ref="main-form" @submit="onSubmit" onsubmit="return false">
           <UInput v-model="guess" @keyup="onkeyup()"/>
         </form>

resources/js/pages/SuggestionView.vue

@@ -0,0 +1,3 @@
+<template>
+    <h1>TLA suggestion form</h1>
+</template>

resources/js/router/index.js

@@ -1,12 +1,14 @@
 import { createRouter, createWebHistory } from 'vue-router';
 import App from '../App.vue';
 import HomeView from '../pages/HomeView.vue';
+import SuggestionView from '../pages/SuggestionView.vue';
 
 const routes = [
     { path: '/',
         children:
         [
             { path: '', component: HomeView },
+            { path: '/suggestion', component: SuggestionView },
         ]
     }
 ];