72 lines
1.8 KiB
Vue
72 lines
1.8 KiB
Vue
<template>
|
|
<div class="flex flex-col-reverse mt-16">
|
|
<box v-for="(box, i) in dataStore.boxes.slice()" :key="box.id" :tabindex="dataStore.boxes.length - i" :box="box"
|
|
@click="onBoxClick(box)" class="text-center" :class="box.state" :id="box.id">
|
|
<button @click.stop="playSelectedBox(box)" v-if="box.state === 'box-selected'"
|
|
class="relative z-40 rounded-full size-24 bottom-1/2 text-4xl tex-bold text-esyellow backdrop-blur-sm bg-black/25">
|
|
{{ !playerStore.isPaused && playerStore.currentTrack?.boxId === box.id ? 'I I' : '▶' }}
|
|
</button>
|
|
<deck :box="box" class="box-page" v-if="box.state === 'box-selected'" @click.stop />
|
|
</box>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue'
|
|
import type { Box } from '~~/types/types'
|
|
import { useDataStore } from '~/store/data'
|
|
import { usePlayerStore } from '~/store/player'
|
|
import { useUiStore } from '~/store/ui'
|
|
|
|
const dataStore = useDataStore()
|
|
const playerStore = usePlayerStore()
|
|
const uiStore = useUiStore()
|
|
|
|
function openBox(id: string) {
|
|
uiStore.selectBox(id)
|
|
// Scroll to the top smoothly
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: 'smooth'
|
|
});
|
|
}
|
|
|
|
function onBoxClick(b: Box) {
|
|
if (b.state !== 'box-selected') {
|
|
openBox(b.id)
|
|
}
|
|
}
|
|
|
|
function playSelectedBox(b: Box) {
|
|
playerStore.playBox(b)
|
|
}
|
|
|
|
function KeyboardAction(e: KeyboardEvent) {
|
|
switch (e.key) {
|
|
case 'Escape':
|
|
uiStore.closeBox()
|
|
break;
|
|
case 'ArrowUp':
|
|
break;
|
|
|
|
case 'Enter':
|
|
if (document.activeElement?.id) {
|
|
openBox(document.activeElement.id)
|
|
}
|
|
break;
|
|
case 'ArrowDown':
|
|
break;
|
|
case 'ArrowLeft':
|
|
break;
|
|
case 'ArrowRight':
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
|
|
onMounted(async () => {
|
|
window.addEventListener('keydown', KeyboardAction)
|
|
})
|
|
</script>
|