90 lines
1.8 KiB
Vue
90 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import axios from 'axios';
|
|
import GuessWord from '../components/GuessWord.vue';
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
export default {
|
|
data() {
|
|
return {
|
|
hint: ' ',
|
|
guesses: [' '],
|
|
words: [' '],
|
|
guess: '',
|
|
};
|
|
},
|
|
|
|
mounted () {
|
|
axios
|
|
.get('/api/fetch_tla/en')
|
|
.then(response => {
|
|
this.hint = response.data.hint;
|
|
this.guesses = response.data.guesses;
|
|
});
|
|
},
|
|
|
|
methods: {
|
|
onSubmit() {
|
|
axios
|
|
.post("/api/check_tla/en", {
|
|
guess: this.guess,
|
|
})
|
|
.then((response) => {
|
|
console.log(response.data);
|
|
this.guesses = response.data.guesses;
|
|
})
|
|
},
|
|
onkeyup() {
|
|
this.words = this.guess.trim().split(" ");
|
|
}
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<UCard>
|
|
<template #header>
|
|
<h1>Motto:</h1>
|
|
{{ hint }}
|
|
</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 #footer>
|
|
|
|
<div class="flex-container">
|
|
<template v-for="word in words">
|
|
<GuessWord :correctness="-1">
|
|
{{ word }}
|
|
</GuessWord>
|
|
</template>
|
|
</div>
|
|
<form @submit="onSubmit" onsubmit="return false">
|
|
<input type="text" @keyup="onkeyup" v-model="guess">
|
|
</form>
|
|
|
|
</template>
|
|
</UCard>
|
|
</template>
|
|
|
|
<style>
|
|
.flex-container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
.hidden {
|
|
color: transparent;
|
|
}
|
|
</style> |