Belupeti/TLA
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

some frontend changes
Build / Build-image (push) Successful in 1m9s
Details

Browse Source
This commit is contained in:
Belupeti
2026-08-13 12:40:05 +02:00
parent 0de5d2af94
commit 5a6c398a3a
3 changed files with 52 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/App.vue
+6 -2
View File
@@ -4,6 +4,7 @@
import type { NavigationMenuItem } from '@nuxt/ui' import type { NavigationMenuItem } from '@nuxt/ui'
import { computed } from 'vue' import { computed } from 'vue'
import { useHead } from '@unhead/vue' import { useHead } from '@unhead/vue'
import HowToPlay from "./components/HowToPlay.vue";
const items: NavigationMenuItem[] = [{ const items: NavigationMenuItem[] = [{
label: 'Git', label: 'Git',
@@ -20,13 +21,16 @@
<template> <template>
<UApp> <UApp>
<UHeader> <UHeader :toggle="false">
<template #title> <template #title>
TLAdle TLAdle
</template> </template>
<template #right> <template #right>
<UColorModeButton /> <HowToPlay/>
<UColorModeSwitch :size="xl"/>
</template> </template>
</UHeader> </UHeader>
<UMain class="main"> <UMain class="main">
resources/js/components/HowToPlay.vue
+43
View File
@@ -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>
resources/js/pages/HomeView.vue
+3 -40
View File
@@ -79,44 +79,7 @@
{{ hint }} {{ hint }}
<br> <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>
<template v-for="guess in guesses"> <template v-for="guess in guesses">
@@ -141,7 +104,7 @@
</template> </template>
</div> </div>
<form ref="main-form" @submit="onSubmit" onsubmit="return false"> <form ref="main-form" @submit="onSubmit" onsubmit="return false">
<UInput v-model="guess" @keyup="onkeyup()"/> <UInput v-model="guess" @keyup="onkeyup()" autofocus/>
</form> </form>
</template> </template>
<template v-if="!correct && guesses.length >= maxGuesses"> <template v-if="!correct && guesses.length >= maxGuesses">
@@ -150,7 +113,7 @@
<template v-if="correct"> <template v-if="correct">
You completed todays TLAdle! Todays TLA was {{ tla }} You completed todays TLAdle! Todays TLA was {{ tla }}
</template> </template>
<h3>Guesses: {{ guesses.length }} / {{ maxGuesses }}</h3> <h3>Guesses left: {{ maxGuesses - guesses.length }}</h3>
</template> </template>
</UCard> </UCard>