From 5a6c398a3a81406a58a456a9f66029ce9af023fc Mon Sep 17 00:00:00 2001
From: Beluzsar Peter <beluzsarp@gmail.com>
Date: Thu, 13 Aug 2026 12:40:05 +0200
Subject: [PATCH] some frontend changes

---
 resources/js/App.vue                  |  8 +++--
 resources/js/components/HowToPlay.vue | 43 +++++++++++++++++++++++++++
 resources/js/pages/HomeView.vue       | 43 ++-------------------------
 3 files changed, 52 insertions(+), 42 deletions(-)
 create mode 100644 resources/js/components/HowToPlay.vue

diff --git a/resources/js/App.vue b/resources/js/App.vue
index 700897c..bdac5e0 100644
--- a/resources/js/App.vue
+++ b/resources/js/App.vue
@@ -4,6 +4,7 @@
     import type { NavigationMenuItem } from '@nuxt/ui'
     import { computed } from 'vue'
     import { useHead } from '@unhead/vue'
+import HowToPlay from "./components/HowToPlay.vue";
 
     const items: NavigationMenuItem[] = [{
         label: 'Git',
@@ -20,13 +21,16 @@
 <template>
 
     <UApp>
-    <UHeader>
+    <UHeader :toggle="false">
     <template #title>
       TLAdle
     </template>
 
+
+
     <template #right>
-      <UColorModeButton />
+      <HowToPlay/>
+       <UColorModeSwitch :size="xl"/>
     </template>
   </UHeader>
     <UMain class="main">
diff --git a/resources/js/components/HowToPlay.vue b/resources/js/components/HowToPlay.vue
new file mode 100644
index 0000000..2962f92
--- /dev/null
+++ b/resources/js/components/HowToPlay.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+    import GuessWord from './GuessWord.vue';
+</script>
+
+<template>
+<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 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>
+          <br>
+          You can use the following color codes to determine 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, incorrect place</GuessWord>
+            <GuessWord :correctness="2">Correct starting letter, correct 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>
+          
+      </template>
+    </UModal>
+</template>
\ No newline at end of file
diff --git a/resources/js/pages/HomeView.vue b/resources/js/pages/HomeView.vue
index 3fd385b..09ac4e1 100644
--- a/resources/js/pages/HomeView.vue
+++ b/resources/js/pages/HomeView.vue
@@ -79,44 +79,7 @@
       {{ 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 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>
-          <br>
-          You can use the following color codes to determine 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, incorrect place</GuessWord>
-            <GuessWord :correctness="2">Correct starting letter, correct 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>
-          
-      </template>
-    </UModal>
-
+    
     </template>
 
       <template v-for="guess in guesses">
@@ -141,7 +104,7 @@
         </template>
       </div>
         <form ref="main-form" @submit="onSubmit" onsubmit="return false">
-          <UInput v-model="guess" @keyup="onkeyup()"/>
+          <UInput v-model="guess" @keyup="onkeyup()" autofocus/>
         </form>
       </template>
       <template v-if="!correct && guesses.length >= maxGuesses">
@@ -150,7 +113,7 @@
       <template v-if="correct">
         You completed todays TLAdle! Todays TLA was {{ tla }}
       </template>
-      <h3>Guesses: {{ guesses.length }} / {{ maxGuesses }}</h3>
+      <h3>Guesses left: {{ maxGuesses - guesses.length }}</h3>
 
     </template>
   </UCard>