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

imporve cards animations
Some checks failed
Deploy App / build (push) Failing after 25s
Details
Deploy App / deploy (push) Has been skipped
Details

Browse Source
This commit is contained in:
valere
2025-11-23 20:42:49 +01:00
parent 1b8b998622
commit 90cbc0be18
14 changed files with 167 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/app.vue
View File

@@ -71,10 +71,6 @@ input {
@apply px-4 py-2 m-4 rounded-md text-center font-bold;
}
button {
/* @apply bg-esyellow text-slate-700; */
}
input[type='email'] {
@apply bg-slate-900 text-esyellow;
}

5
app/components/Box.vue
View File

@@ -133,7 +133,12 @@ function applyColor() {
// --- Rotation complète ---
function rotateBox() {
if (!domBox.value) return
rotateX.value = -20
rotateY.value = rotateY.value === 20 ? 380 : 20
applyTransform(0.8)
}

8
app/components/Boxes.vue
View File

@@ -1,15 +1,11 @@
<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 />
<deckCompilation :box="getBoxToDisplay(box)" class="box-page" v-if="box.type === 'compilation'"
:key="`${box.id}-${box.activeSide}`" @click.stop />
<deckPlaylist :box="box" class="box-page" v-if="box.type === 'playlist'" @click.stop />
</template>
</box>

20
app/components/Card.vue
View File

@@ -16,11 +16,18 @@
{{ props.track.card?.rank }}
</div>
</div>
<div class="flex items-center justify-center size-7 absolute top-6 left-6" v-else>
<div class="rank text-white font-bold absolute -mt-1">
{{ props.track.order }}
</div>
</div>
<!-- Cover -->
<figure class="pochette flex-1 flex justify-center items-center overflow-hidden rounded-t-xl cursor-pointer"
@click="playerStore.playTrack(track)">
<playButton :objectToPlay="track" />
<img :src="coverUrl" alt="Pochette de l'album" class="w-full h-full object-cover object-center" />
<img v-if="isFaceUp" :src="coverUrl" alt="Pochette de l'album" loading="lazy"
class="w-full h-full object-cover object-center" />
</figure>
<!-- Body -->
<div class="p-3 text-center bg-white rounded-b-xl">
@@ -63,9 +70,12 @@ const isManifesto = computed(() => props.track.boxId.startsWith('ES00'))
const isOrder = computed(() => props.track.order && !isManifesto)
const isPlaylistTrack = computed(() => props.track.type === 'playlist')
const isRedCard = computed(() => props.track.card?.suit === '♥' || props.track.card?.suit === '♦')
const coverUrl = props.track.coverId.startsWith('http')
? props.track.coverId
: `https://f4.bcbits.com/img/${props.track.coverId}_4.jpg`
const coverUrl = computed(() => {
if (!props.track.coverId) return ''
return props.track.coverId.startsWith('http')
? props.track.coverId
: `https://f4.bcbits.com/img/${props.track.coverId}_4.jpg`
})
</script>
<style lang="scss">
@@ -138,7 +148,7 @@ const coverUrl = props.track.coverId.startsWith('http')
@apply z-50;
.face-up {
@apply shadow-2xl-custom;
@apply shadow-none;
transition:
box-shadow 0.6s,
transform 0.6s;

3
app/components/CinemaScreen.vue Normal file
View File

@@ -0,0 +1,3 @@
<template>
<video class="fixed h-full w-full object-cover" ref="video" muted autoplay src=""></video>
</template>

42
app/components/PlayButton.vue
View File

@@ -1,9 +1,7 @@
<template>
<button
class="play-button rounded-full size-24 flex items-center justify-center text-esyellow backdrop-blur-sm bg-black/25 transition-all duration-200 ease-in-out transform active:scale-90 scale-110 text-4xl font-bold"
:class="{ loading: isLoading }"
:disabled="isLoading"
>
:class="{ loading: isLoading }" :disabled="isLoading">
<template v-if="isLoading">
<img src="/loader.svg" alt="Chargement" class="size-16" />
</template>
@@ -20,26 +18,40 @@ import type { Box, Track } from '~/../types/types'
const playerStore = usePlayerStore()
const props = defineProps<{ objectToPlay: Box | Track }>()
const isCurrentBox = computed(() => {
if ('activeSide' in props.objectToPlay) {
// Vérifier si la piste courante appartient à cette box
if (playerStore.currentTrack?.boxId === props.objectToPlay.id) {
// Si c'est une compilation, on vérifie le side actif
if (props.objectToPlay.type === 'compilation') {
return playerStore.currentTrack.side === props.objectToPlay.activeSide
}
return true
}
return false
}
return false
})
const isCurrentTrack = computed(() => {
if (!('activeSide' in props.objectToPlay)) {
return playerStore.currentTrack?.id === props.objectToPlay.id
}
return false
})
const isPlaying = computed(() => {
if (!playerStore.currentTrack) return false
return (
playerStore.isPlaying &&
(playerStore.currentTrack?.boxId === props.objectToPlay.id ||
playerStore.currentTrack?.id === props.objectToPlay.id)
)
return playerStore.isPlaying && (isCurrentTrack.value || isCurrentBox.value)
})
const isLoading = computed(() => {
if (!playerStore.currentTrack || !playerStore.isLoading) return false
return (
playerStore.currentTrack.boxId === props.objectToPlay.id ||
playerStore.currentTrack.id === props.objectToPlay.id
)
return playerStore.isLoading && (isCurrentTrack.value || isCurrentBox.value)
})
</script>
<style>
.loading {
.loading,
.play-button-changed {
opacity: 1 !important;
}
</style>

113
app/components/deck/DeckCompilation.vue
View File

@@ -1,22 +1,22 @@
<template>
<div>
<button @click="closeDatBox" 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>
<div class="fixed bg-black text-white p-2 z-50">
{{ playerStore.history }}
</div>
<div ref="deck" class="deck flex flex-wrap justify-center gap-4" :class="{ 'pb-36': playerStore.currentTrack }">
<card v-for="(track, i) in tracks" :key="track.id" :track="track" tabindex="i"
:is-face-up="isCardRevealed(track.id)" />
</div>
<ul>
<li>
<button @click="distribute">distribute</button>
<button @click="halfOutside">halfOutside</button>
<button @click="backToBox">backToBox</button>
<button @click="selectSide('A')" class="px-4 py-2 text-black"
:class="{ 'bg-white text-black': props.box.activeSide === 'A' }">
Side A
</button>
<button @click="selectSide('B')" class="px-4 py-2"
:class="{ 'bg-white text-black': props.box.activeSide === 'B' }">
Side B
</button>
<button @click="toggleCards">toggleCards</button>
<button @click="switchSide">Face {{ box.activeSide }}</button>
</li>
</ul>
</div>
@@ -26,8 +26,11 @@
import { useDataStore } from '~/store/data'
import { useCardStore } from '~/store/card'
import { usePlayerStore } from '~/store/player'
import { useUiStore } from '~/store/ui'
import type { Box } from '~~/types/types'
const uiStore = useUiStore()
const props = defineProps<{
box: Box
}>()
@@ -48,7 +51,7 @@ const distribute = () => {
setTimeout(() => {
card.classList.remove('half-outside')
card.classList.add('outside')
}, 500 + (index * 100)) // 1s delay + 200ms per card
}, index * 12)
})
}
@@ -65,11 +68,43 @@ const backToBox = () => {
})
}
// Fonction pour sélectionner un côté (A ou B)
const selectSide = (side: 'A' | 'B') => {
dataStore.setActiveSideByBoxId(props.box.id, side)
const toggleCards = () => {
if (document.querySelector('.card.outside')) {
halfOutside()
} else {
distribute()
}
}
const initDeck = () => {
setTimeout(() => {
if (!playerStore.isCurrentBox(props.box)) {
halfOutside()
}
}, 800)
if (playerStore.isCurrentBox(props.box)) {
distribute()
}
}
// Fonction pour sélectionner un côté (A ou B)
const switchSide = () => {
dataStore.setActiveSideByBoxId(props.box.id, props.box.activeSide === 'A' ? 'B' : 'A')
initDeck()
}
const closeDatBox = () => {
backToBox()
setTimeout(() => {
uiStore.closeBox()
}, 300)
}
onMounted(() => {
// if is a track change do not init
initDeck()
})
</script>
<style lang="scss" scoped>
@@ -79,74 +114,82 @@ const selectSide = (side: 'A' | 'B') => {
.card {
position: absolute;
top: 0;
right: calc(50% - 120px);
z-index: 1;
transition: all 0.5s ease;
will-change: transform;
display: block;
z-index: 2;
translate: 70px 40px;
transform: rotateX(-20deg) rotateY(20deg) rotateZ(90deg);
opacity: 0;
// hide the wildcard (joker / hidden-track)
// &:nth-child(11) {
// display: none;
// }
translate: 0 0;
transform: rotateX(-20deg) rotateY(20deg) rotateZ(90deg) translate3d(40px, 0, 0);
// half outside the box
&.half-outside {
opacity: 1;
top: 0;
right: auto;
&:nth-child(1) {
translate: 120px 20px;
transform: rotateX(-20deg) rotateY(20deg) rotateZ(90deg) translate3d(0, -100px, 0);
}
&:nth-child(3) {
&:nth-child(2) {
translate: 150px 20px;
transform: rotateX(-20deg) rotateY(20deg) rotateZ(90deg) translate3d(0, -40px, 0);
}
&:nth-child(5) {
&:nth-child(3) {
translate: 190px 20px;
transform: rotateX(-20deg) rotateY(20deg) rotateZ(90deg) translate3d(0, 30px, 0);
}
&:nth-child(7) {
&:nth-child(4) {
translate: 240px 20px;
transform: rotateX(-20deg) rotateY(20deg) rotateZ(90deg) translate3d(0, 120px, 0);
}
&:nth-child(9) {
&:nth-child(5) {
translate: 280px 20px;
transform: rotateX(-20deg) rotateY(20deg) rotateZ(90deg) translate3d(0, 200px, 0);
}
&:nth-child(6),
&:nth-child(7),
&:nth-child(8),
&:nth-child(9),
&:nth-child(10),
&:nth-child(11) {
translate: 310px 20px;
transform: rotateX(-20deg) rotateY(20deg) rotateZ(90deg) translate3d(0, 260px, 0);
opacity: 0;
}
&.current-track {
@apply shadow-none
}
}
// outside the box
&.outside {
opacity: 1;
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(0, 0, 0);
top: 50%;
right: 66%;
right: calc(50% + 320px);
@apply translate-y-40;
&:hover {
@apply z-40 translate-y-32;
}
&.current-track {
@apply z-30 translate-y-28;
}
@for $i from 0 through 10 {
&:nth-child(#{$i + 1}) {
translate: calc(#{$i + 1} * 20%);
translate: calc(#{$i + 1} * 33%);
}
}
}
&.current-track {
// z-index: 10;
}
}
}
</style>

26
app/components/deck/DeckPlaylist.vue
View File

@@ -1,16 +1,12 @@
<template>
<div
ref="deck"
class="deck flex flex-wrap justify-center gap-4"
:class="{ 'pb-36': playerStore.currentTrack }"
>
<card
v-for="(track, i) in tracks"
:key="track.id"
:track="track"
tabindex="i"
:is-face-up="isCardRevealed(track.id)"
/>
<div ref="deck" class="deck flex flex-wrap justify-center gap-4" :class="{ 'pb-36': playerStore.currentTrack }">
<button @click="closeDatBox" 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>
<card v-for="(track, i) in tracks" :key="track.id" :track="track" tabindex="i"
:is-face-up="isCardRevealed(track.id)" />
</div>
</template>
@@ -19,6 +15,7 @@ import { computed, ref } from 'vue'
import { useDataStore } from '~/store/data'
import { useCardStore } from '~/store/card'
import { usePlayerStore } from '~/store/player'
import { useUiStore } from '~/store/ui'
import type { Box } from '~~/types/types'
const props = defineProps<{
@@ -28,9 +25,14 @@ const props = defineProps<{
const cardStore = useCardStore()
const dataStore = useDataStore()
const playerStore = usePlayerStore()
const uiStore = useUiStore()
const deck = ref()
const tracks = computed(() => dataStore.getTracksByboxId(props.box.id))
const isCardRevealed = (trackId: number) => cardStore.isCardRevealed(trackId)
const closeDatBox = () => {
uiStore.closeBox()
}
</script>

3
app/layouts/default.vue
View File

@@ -1,10 +1,9 @@
<template>
<div class="w-full flex flex-col items-center">
<!-- Header avec logo -->
<slot />
<!-- Player de musique fixe en bas -->
<searchModal />
<loader />
<Player class="w-full border-t border-gray-200" />
<CinemaScreen />
</div>
</template>

1
app/store/card.ts
View File

@@ -1,5 +1,4 @@
import { defineStore } from 'pinia'
import type { Track } from '~/../types/types'
interface CardPosition {
x: number

5
app/store/data.ts
View File

@@ -64,6 +64,11 @@ export const useDataStore = defineStore('data', {
return state.boxes.find((box) => box.id === id)
}
},
getTrackById: (state) => {
return (id: string) => {
return state.tracks.find((track) => track.id === id)
}
},
getTracksByboxId: (state) => (id: string, side?: 'A' | 'B') => {
const box = state.boxes.find((box) => box.id === id)
if (box?.type !== 'compilation' || !side) {

18
app/store/player.ts
View File

@@ -11,7 +11,8 @@ export const usePlayerStore = defineStore('player', {
audio: null as HTMLAudioElement | null,
progressionLast: 0,
isPlaying: false,
isLoading: false
isLoading: false,
history: [] as string[]
}),
actions: {
@@ -56,7 +57,7 @@ export const usePlayerStore = defineStore('player', {
async playBox(box: Box) {
// Si c'est la même box, on toggle simplement la lecture
if (this.currentTrack?.boxId === box.id) {
if (this.currentTrack?.boxId === box.id && this.currentTrack?.side === box.activeSide) {
this.togglePlay()
return
}
@@ -188,6 +189,7 @@ export const usePlayerStore = defineStore('player', {
// Lancer la lecture
await audio.play()
this.history.push(this.currentTrack?.id)
this.isLoading = false
} catch (error) {
console.error('Error loading/playing track:', error)
@@ -263,7 +265,17 @@ export const usePlayerStore = defineStore('player', {
getters: {
isCurrentBox: (state) => {
return (boxId: string) => boxId === state.currentTrack?.boxId
return (box: Box) => {
if (box.type === 'compilation') {
return box.id === state.currentTrack?.boxId && box.activeSide === state.currentTrack?.side
} else {
return box.id === state.currentTrack?.boxId
}
}
},
isCurrentSide: (state) => {
return (side: string) => side === state.currentTrack?.side
},
isPlaylistTrack: () => {

65
public/play.svg
View File

@@ -1,64 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg
fill="#000000"
height="800px"
width="800px"
version="1.1"
id="Capa_1"
viewBox="0 0 60 60"
xml:space="preserve"
sodipodi:docname="play.svg"
inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"><defs
id="defs2">
</defs><sodipodi:namedview
id="namedview2"
pagecolor="#505050"
bordercolor="#eeeeee"
borderopacity="1"
inkscape:showpageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#505050"
inkscape:zoom="0.26793938"
inkscape:cx="-141.82313"
inkscape:cy="227.66344"
inkscape:window-width="1920"
inkscape:window-height="1011"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="Capa_1" />
<g
id="g4"
transform="translate(9.7969913,-22.06049)"><circle
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.453259;stroke-miterlimit:2.3;stroke-dasharray:0.0906518, 0.498583;stroke-opacity:1"
id="path3"
cx="20.203009"
cy="52.06049"
r="30" /><path
sodipodi:type="star"
style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:4.97313;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2.3;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:fill markers stroke"
id="path4"
inkscape:flatsided="false"
sodipodi:sides="3"
sodipodi:cx="-27.198643"
sodipodi:cy="-1.6298811"
sodipodi:r1="22.807875"
sodipodi:r2="11.403937"
sodipodi:arg1="1.2575201"
sodipodi:arg2="2.3047177"
inkscape:rounded="0"
inkscape:randomized="0"
d="M -20.169779,20.067912 -34.836847,6.838154 -49.503915,-6.3916032 l 18.790841,-6.0871748 18.790839,-6.087174 -4.123772,19.31693243 z"
inkscape:transform-center-x="-3.9722134"
inkscape:transform-center-y="0.040241052"
transform="matrix(0.21341126,-0.77168628,0.66871372,0.24627362,26.125303,31.432826)" /></g></svg>
<svg data-encore-id="icon" role="img" aria-hidden="true" class="e-91000-icon e-91000-baseline" viewBox="0 0 24 24"><path d="m7.05 3.606 13.49 7.788a.7.7 0 0 1 0 1.212L7.05 20.394A.7.7 0 0 1 6 19.788V4.212a.7.7 0 0 1 1.05-.606"></path></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 240 B

2
types/types.ts
View File

@@ -1,5 +1,5 @@
// types.ts
export type BoxType = 'playlist' | 'compilation' | 'userPlaylist'
export type BoxType = 'playlist' | 'compilation'
export interface BoxSide {
duration: number