valere/evilspins
1
0
Fork 0
Code Issues 27 Pull Requests Actions Packages Projects 4 Releases Wiki Activity

FEAT: side A/B
All checks were successful
Deploy App / build (push) Successful in 14s
Details
Deploy App / deploy (push) Successful in 9s
Details

Browse Source
This commit is contained in:
valere
2025-11-15 21:56:37 +01:00
parent 3424d2d6fc
commit 1b8b998622
49 changed files with 563 additions and 822 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
app/components/Boxes.vue
View File

@@ -5,18 +5,18 @@
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="openBox(box)" class="text-center" :class="box.state" :id="box.id">
<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="box" class="box-page" v-if="box.type === 'compilation'" @click.stop />
<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 setup lang="ts">
<script lang="ts" setup>
import type { Box } from '~~/types/types'
import { useDataStore } from '~/store/data'
import { usePlayerStore } from '~/store/player'
@@ -26,6 +26,19 @@ 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)
@@ -44,32 +57,36 @@ function playSelectedBox(box: Box) {
<style lang="scss" scoped>
.boxes {
@apply flex flex-col items-center justify-center text-center w-full;
position: absolute;
top: 0;
left: 0;
margin-top: 250px;
transition: margin-top .5s ease;
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 {
margin-top: 0;
justify-content: flex-start;
.box {
@apply w-full;
width: 100%;
}
}
.box {
.play-button {
@apply relative z-40 -bottom-1/2 opacity-0;
position: relative;
z-index: 40;
bottom: -50%;
opacity: 0;
}
&.box-selected .play-button {
@apply opacity-100 z-20;
opacity: 1;
z-index: 20;
bottom: 20%;
transition:
bottom 0.7s ease,
opacity 0.7s ease;
transition: bottom 0.7s ease, opacity 0.7s ease;
}
}
}