80 lines
1.7 KiB
Vue
80 lines
1.7 KiB
Vue
<template>
|
|
<div class="boxes">
|
|
<button
|
|
@click="uiStore.closeBox"
|
|
v-if="uiStore.isBoxSelected"
|
|
class="absolute top-10 right-10 px-4 py-2 text-black hover:text-black bg-esyellow transition-colors z-50"
|
|
aria-label="close the box"
|
|
>
|
|
close
|
|
</button>
|
|
<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"
|
|
>
|
|
<playButton
|
|
@click.stop="playSelectedBox(box)"
|
|
:objectToPlay="box"
|
|
class="relative z-40 m-auto"
|
|
/>
|
|
<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" scoped>
|
|
.boxes {
|
|
@apply flex flex-col;
|
|
|
|
.box {
|
|
.play-button {
|
|
@apply relative z-40 -bottom-1/2 opacity-0;
|
|
}
|
|
|
|
&.box-selected .play-button {
|
|
@apply opacity-100;
|
|
bottom: 20%;
|
|
transition:
|
|
bottom 0.7s ease,
|
|
opacity 0.7s ease;
|
|
}
|
|
}
|
|
}
|
|
</style>
|