dracula-musical/ui/src/pages/control-m.vue
2023-05-23 13:35:35 +02:00

35 lines
1 KiB
Vue
Executable file

<template>
<div class="flex flex-col overflow-hidden">
<h1 class="font-800 text-9 px-4 pt-10 pb-0">
{{ current.scene.name }}
</h1>
<div class="flex flex-col space-y-4 p-4 pt-8 flex-grow h-full overflow-hidden">
<div class="flex justify-end">
<button class="px-5 py-3 bg-green-600 font-bold text-5" @click="goNext()">
Next
</button>
</div>
<StepSelection class="h-110"/>
</div>
</div>
</template>
<script setup lang="ts">
import { current, getNextValidPosition, getPreviousValidPosition, state } from "../state"
import { goToPosition } from "../syncing"
import { onKeyStroke } from "@vueuse/core"
import StepSelection from "../components/StepSelection.vue"
function goNext() {
const position = getNextValidPosition(state.position)
if (position !== null) goToPosition(position)
}
function goPrevious() {
const position = getPreviousValidPosition(state.position)
if (position !== null) goToPosition(position)
}
onKeyStroke("ArrowLeft", goPrevious)
onKeyStroke("ArrowRight", goNext)
</script>