94 lines
2.4 KiB
Vue
94 lines
2.4 KiB
Vue
<template>
|
|
<div class="boxes" :class="{ 'box-selected': uiStore.isBoxSelected }">
|
|
<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" :key="box.id" :tabindex="dataStore.boxes.length - i"
|
|
:box="getBoxToDisplay(box)" @click="openBox(box)" class="text-center" :class="box.state" :id="box.id">
|
|
<playButton @click.stop="playSelectedBox(box)" :objectToPlay="box" class="relative z-40 m-auto" />
|
|
<template v-if="box.state === 'box-selected'">
|
|
<deckCompilation :box="getBoxToDisplay(box)" class="box-page" v-if="box.type === 'compilation'" @click.stop />
|
|
<deckPlaylist :box="box" class="box-page" v-if="box.type === 'playlist'" @click.stop />
|
|
</template>
|
|
</box>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
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()
|
|
|
|
// Retourne la box avec les propriétés du côté sélectionné si c'est une compilation
|
|
function getBoxToDisplay(box: Box) {
|
|
if (box.type !== 'compilation' || !('sides' in box)) return box
|
|
|
|
const side = box.sides?.[box.activeSide]
|
|
if (!side) return box
|
|
|
|
return {
|
|
...box,
|
|
...side
|
|
}
|
|
}
|
|
|
|
function openBox(box: Box) {
|
|
if (box.state !== 'box-selected') {
|
|
uiStore.selectBox(box.id)
|
|
// Scroll to the top smoothly
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: 'smooth'
|
|
})
|
|
}
|
|
}
|
|
|
|
function playSelectedBox(box: Box) {
|
|
playerStore.playBox(box)
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.boxes {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
width: 100%;
|
|
transition: margin-top 0.5s ease;
|
|
min-height: 100vh;
|
|
|
|
&.box-selected {
|
|
justify-content: flex-start;
|
|
|
|
.box {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.box {
|
|
.play-button {
|
|
position: relative;
|
|
z-index: 40;
|
|
bottom: -50%;
|
|
opacity: 0;
|
|
}
|
|
|
|
&.box-selected .play-button {
|
|
opacity: 1;
|
|
z-index: 20;
|
|
bottom: 20%;
|
|
transition: bottom 0.7s ease, opacity 0.7s ease;
|
|
}
|
|
}
|
|
}
|
|
</style>
|