49 lines
1.3 KiB
Vue
49 lines
1.3 KiB
Vue
<template>
|
|
<div class="boxes">
|
|
<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 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)
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.boxes {
|
|
@apply flex flex-col-reverse;
|
|
}
|
|
</style>
|