mirror of
https://github.com/linux-odyssey/linux-odyssey.git
synced 2026-11-07 11:10:11 +08:00
update: hint reassign, UI
This commit is contained in:
1 parent
764f558307
commit
2fc9784477
4 files changed
+46
-77
No files matched your search
@@ -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>
|
||||
|
||||
Reference in new issue
Block a user