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

WIP: add TODO and small fixies
All checks were successful
Deploy App / build (push) Successful in 1m31s
Details
Deploy App / deploy (push) Successful in 15s
Details

Browse Source
This commit is contained in:
valere
2025-11-11 19:23:33 +01:00
parent 10311256ea
commit f9aeb03f82
12 changed files with 461 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
app/components/Card.vue
View File

@@ -1,24 +1,15 @@
<template>
<article
class="card w-56 h-80"
:class="[
isFaceUp ? 'face-up' : 'face-down',
{ 'current-track': playerStore.currentTrack?.id === track.id }
]"
>
<article class="card w-56 h-80" :class="[
isFaceUp ? 'face-up' : 'face-down',
{ 'current-track': playerStore.currentTrack?.id === track.id }
]">
<div class="flip-inner">
<!-- Face-Up -->
<main
class="face-up backdrop-blur-sm border-1 z-10 card w-56 h-80 p-3 hover:shadow-xl hover:scale-110 transition-all rounded-2xl shadow-lg flex flex-col overflow-hidden"
>
<div
class="flex items-center justify-center size-7 absolute top-7 right-7"
v-if="isPlaylistTrack"
>
<div
class="suit text-7xl absolute"
:class="[isRedCard ? 'text-red-600' : 'text-slate-800', props.track.card?.suit]"
>
class="face-up backdrop-blur-sm border-2 border-esyellow z-10 card w-56 h-80 p-3 hover:shadow-xl hover:scale-110 transition-all rounded-2xl shadow-lg flex flex-col overflow-hidden">
<div class="flex items-center justify-center size-7 absolute top-7 right-7" v-if="isPlaylistTrack">
<div class="suit text-7xl absolute"
:class="[isRedCard ? 'text-red-600' : 'text-slate-800', props.track.card?.suit]">
<img :src="`/${props.track.card?.suit}.svg`" />
</div>
<div class="rank text-white font-bold absolute -mt-1">
@@ -26,16 +17,10 @@
</div>
</div>
<!-- Cover -->
<figure
class="pochette flex-1 flex justify-center items-center overflow-hidden rounded-t-xl cursor-pointer"
@click="playerStore.playTrack(track)"
>
<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 :src="coverUrl" alt="Pochette de l'album" class="w-full h-full object-cover object-center" />
</figure>
<!-- Body -->
<div class="p-3 text-center bg-white rounded-b-xl">
@@ -55,12 +40,9 @@
<!-- Face-Down -->
<footer
class="face-down backdrop-blur-sm z-10 card w-56 h-80 p-3 bg-opacity-10 bg-white rounded-2xl shadow-lg flex flex-col overflow-hidden"
>
<figure
@click.stop="playerStore.playTrack(track)"
class="h-full flex text-center bg-slate-800 rounded-xl justify-center cursor-pointer"
>
class="face-down backdrop-blur-sm z-10 card w-56 h-80 p-3 bg-opacity-10 bg-white rounded-2xl shadow-lg flex flex-col overflow-hidden">
<figure @click.stop="playerStore.playTrack(track)"
class="h-full flex text-center bg-slate-800 rounded-xl justify-center cursor-pointer">
<playButton :objectToPlay="track" />
<img src="/face-down.svg" />
</figure>
@@ -111,6 +93,7 @@ const coverUrl = props.track.coverId.startsWith('http')
height: 100%;
transition: transform 0.6s;
transform-style: preserve-3d;
transform-origin: center;
}
.face-down,