update: hint reassign, UI

This commit is contained in:
Annie Huang committed 2023-09-28 14:42:17 +08:00
1 parent 764f558307
commit 2fc9784477
4 files changed
+46 -77

No files matched your search

+40 -23
View File
@@ -1,15 +1,20 @@
<script setup>
import { ref } from 'vue'
import { ref, watch } from 'vue'
import sessionManager from '../utils/session'
const current = ref(1)
const current = ref(-1)
watch(sessionManager.hints, (hints) => {
current.value = hints.length - 1
})
const left = () => {
if (current.value > 1) {
if (current.value > 0) {
current.value -= 1
}
}
const right = () => {
if (current.value < sessionManager.hints.value.length) {
if (current.value < sessionManager.hints.value.length - 1) {
current.value += 1
}
}
@@ -22,29 +27,41 @@ const right = () => {
class="text-yellow-200 p-2"
/>
<h1 class="inline text-text font-xl w-7/12 p-2 m-1">Hint</h1>
<button class="p-2 m-1 w-1/7" id="Lbutton" @click="left">
<font-awesome-icon
:icon="['fas', 'arrow-right']"
style="color: #deddda"
rotation="180"
/>
</button>
<p class="inline text-text font-xl w-1/14 p-2 m-1">{{ current }}</p>
<p class="inline text-text font-xl w-1/14 p-2 m-1">/</p>
<p class="inline text-text font-xl w-1/14 p-2 m-1">
{{ sessionManager.hints.value.length }}
</p>
<button class="p-2 m-1 w-1/7" id="Rbutton" @click="right">
<font-awesome-icon
:icon="['fas', 'arrow-right']"
style="color: #deddda"
/>
</button>
<div v-if="current !== -1">
<button
class="p-2 m-1 w-1/8"
id="Lbutton"
@click="left"
:disabled="current <= 0"
>
<font-awesome-icon
:icon="['fas', 'arrow-right']"
style="color: #deddda"
rotation="180"
/>
</button>
<p class="inline text-text font-xl w-1/14 p-2 m-1">{{ current + 1 }}</p>
<p class="inline text-text font-xl w-1/14 p-2 m-1">/</p>
<p class="inline text-text font-xl w-1/14 p-2 m-1">
{{ sessionManager.hints.value.length }}
</p>
<button
class="p-2 m-1 w-1/8"
id="Rbutton"
@click="right"
:disabled="current === sessionManager.hints.value.length - 1"
>
<font-awesome-icon
:icon="['fas', 'arrow-right']"
style="color: #deddda"
/>
</button>
</div>
</div>
<div id="hint" class="bg-background flex flex-wrap">
<div class="bg-background h-full rounded-lg p-8 m-1">
<p class="inline text-text font-xl font-xl">
{{ sessionManager.hints.value[current - 1] }}
{{ sessionManager.hints.value[current] }}
</p>
<br />
</div>