70 lines
1.3 KiB
Vue
70 lines
1.3 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);
|
|
})
|
|
},
|
|
onkeyup() {
|
|
this.words = this.guess.split(" ");
|
|
}
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<UCard>
|
|
<template #header>
|
|
{{ hint }}
|
|
</template>
|
|
|
|
<template v-for="guess in guesses">
|
|
{{ guess }}
|
|
</template>
|
|
|
|
|
|
<template #footer>
|
|
|
|
<div style="display: flex; flex-direction: row;">
|
|
<template v-for="word in words">
|
|
<GuessWord>
|
|
{{ word }}
|
|
</GuessWord>
|
|
</template>
|
|
</div>
|
|
<form @submit="onSubmit" onsubmit="return false">
|
|
<input type="text" @keyup="onkeyup" v-model="guess">
|
|
</form>
|
|
|
|
</template>
|
|
</UCard>
|
|
</template> |