some frontend changes

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>