170 lines
4.4 KiB
Vue
170 lines
4.4 KiB
Vue
<script setup lang="ts">
|
|
import axios from 'axios';
|
|
import GuessWord from '../components/GuessWord.vue';
|
|
import Modal from '../components/Modal.vue';
|
|
import Review from '../components/Review.vue';
|
|
import Wordle from '../components/Wordle.vue';
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
export default {
|
|
data() {
|
|
return {
|
|
hint: ' ',
|
|
guesses: [' '],
|
|
words: [' '],
|
|
guess: '',
|
|
tla: '',
|
|
context: '',
|
|
submitter: '',
|
|
victory: false,
|
|
loss: false,
|
|
maxGuesses: 10,
|
|
correct: false,
|
|
};
|
|
},
|
|
|
|
mounted () {
|
|
axios
|
|
.get('/api/fetch_tla/en')
|
|
.then(response => {
|
|
this.hint = response.data.hint;
|
|
this.submitter = response.data.submitter;
|
|
this.guesses = response.data.guesses;
|
|
this.tla = response.data.tla;
|
|
this.context = response.data.context;
|
|
this.correct = response.data.correct;
|
|
});
|
|
},
|
|
|
|
methods: {
|
|
onSubmit() {
|
|
|
|
if (this.words.length == 3 && this.guesses.length < this.maxGuesses) {
|
|
axios
|
|
.post("/api/check_tla/en", {
|
|
guess: this.words,
|
|
})
|
|
.then((response) => {
|
|
this.guesses = response.data.guesses;
|
|
this.guess = '';
|
|
this.words = [];
|
|
|
|
let current_guess = response.data.guesses[response.data.guesses.length-1]
|
|
if (Number(current_guess[3]) + Number(current_guess[4]) + Number(current_guess[5]) == 12) {
|
|
this.victory = !this.victory;
|
|
this.tla = response.data.tla;
|
|
this.context = response.data.context;
|
|
this.correct = response.data.correct;
|
|
}
|
|
else if (this.guesses.length == this.maxGuesses) {
|
|
this.loss = !this.loss;
|
|
this.tla = response.data.tla;
|
|
this.context = response.data.context;
|
|
this.correct = response.data.correct;
|
|
}
|
|
})
|
|
}
|
|
},
|
|
onkeyup() {
|
|
this.words = this.guess.trim().split(/\s+/);
|
|
}
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<UCard>
|
|
<template #header>
|
|
|
|
<h1>Motto:</h1>
|
|
{{ hint }}
|
|
|
|
<br>
|
|
|
|
</template>
|
|
|
|
<template v-for="guess in guesses">
|
|
<div class="flex-container">
|
|
<template v-for="i in 3">
|
|
<GuessWord :correctness="Number(guess[i+2])">
|
|
{{ guess[i-1] }}
|
|
</GuessWord>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
|
|
<template v-if="guesses.length < maxGuesses && !correct">
|
|
<div class="flex-container" v-if="guess.length > 0">
|
|
<template v-for="word in words">
|
|
<GuessWord :correctness="words.length == 3 ? -1 : (words.length > 3 ? -2 : -3)">
|
|
{{ word }}
|
|
</GuessWord>
|
|
</template>
|
|
</div>
|
|
<UForm class="space-y-2" ref="main-form" @submit="onSubmit" onsubmit="return false">
|
|
<UFormField>
|
|
<UInput v-model="guess" @keyup="onkeyup()" autofocus/>
|
|
</UFormField>
|
|
|
|
<UButton type="submit">
|
|
Guess
|
|
</UButton>
|
|
</UForm>
|
|
</template>
|
|
<template v-if="!correct && guesses.length >= maxGuesses">
|
|
You ran out of guesses. Todays TLA was <b>{{ tla }}</b>
|
|
<Review/>
|
|
</template>
|
|
<template v-if="correct">
|
|
You completed todays TLAdle! Todays TLA was <b>{{ tla }}</b>
|
|
<Review/>
|
|
</template>
|
|
<h3>Guesses left: {{ maxGuesses - guesses.length }}</h3>
|
|
</UCard>
|
|
<br>
|
|
<template v-if="submitter != null">
|
|
Todays TLA was submitted by <b>{{ submitter }}</b>
|
|
<br><br>
|
|
</template>
|
|
<UButton to="/suggestion" color="neutral" variant="subtle">
|
|
Suggest a TLA!
|
|
</UButton>
|
|
|
|
<Modal v-model:open="victory">
|
|
<h1>Congratulations!</h1>
|
|
Todays TLA was: {{ tla }}
|
|
<h3>The context of todays TLA:</h3>
|
|
{{ context }}
|
|
</Modal>
|
|
<Modal v-model:open="loss">
|
|
<h1>What a shame!</h1>
|
|
Todays TLA was: {{ tla }}
|
|
<h3>The context of todays TLA:</h3>
|
|
{{ context }}
|
|
</Modal>
|
|
|
|
<Wordle correct="testword"/>
|
|
|
|
|
|
</template>
|
|
|
|
<style>
|
|
h3 {
|
|
font-weight: bold;
|
|
padding: 10px;
|
|
|
|
}
|
|
.flex-container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
.hidden {
|
|
color: transparent;
|
|
}
|
|
</style> |