43 lines
1.9 KiB
Vue
43 lines
1.9 KiB
Vue
<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> |