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

refacto card / box / deck ajout du template default

Browse Source
This commit is contained in:
valere
2025-10-28 10:44:10 +01:00
parent 8ebda83a22
commit 25d56ec4ef
9 changed files with 191 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
app/components/card.vue
View File

@@ -1,10 +1,9 @@
<template>
<article @click="() => playerStore.playTrack(props.track).catch(err => console.error(err))"
class="card flip-card isplaying w-56 h-80" :class="isFaceUp ? 'face-up' : 'face-down'">
<article class="card isplaying w-56 h-80" :class="isFaceUp ? 'face-up' : 'face-down'">
<div class="flip-inner">
<!-- Face-Up -->
<main
class="flip-front backdrop-blur-sm border-1 -mt-12 z-10 card w-56 h-80 p-3 bg-opacity-40 hover:bg-opacity-80 hover:shadow-xl transition-all bg-white rounded-2xl shadow-lg flex flex-col overflow-hidden">
class="face-up backdrop-blur-sm border-1 z-10 card w-56 h-80 p-3 bg-opacity-40 hover:bg-opacity-80 hover:shadow-xl transition-all bg-white 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]">
@@ -37,7 +36,7 @@
<!-- Face-Down -->
<footer
class="flip-back backdrop-blur-sm -mt-12 z-10 card w-56 h-80 p-3 bg-opacity-10 bg-white rounded-2xl shadow-lg flex flex-col overflow-hidden">
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">
<div class="h-full flex p-16 text-center bg-slate-800 rounded-xl">
<img src="/favicon.svg" />
<div class="label label--id" v-if="isOrder">
@@ -52,12 +51,10 @@
<script setup lang="ts">
import type { Track } from '~~/types/types'
import { usePlayerStore } from '~/store/player'
const props = withDefaults(defineProps<{ track: Track; isFaceUp?: boolean }>(), {
isFaceUp: false
})
const playerStore = usePlayerStore()
const isManifesto = computed(() => props.track.boxId.startsWith('ES00'))
const isOrder = computed(() => props.track.order && !isManifesto)
const isPlaylistTrack = computed(() => props.track.type === 'playlist')
@@ -75,7 +72,7 @@ const coverUrl = props.track.coverId.startsWith('http')
}
/* Flip effect */
.flip-card {
.card {
perspective: 1000px;
.flip-inner {
@@ -94,8 +91,8 @@ const coverUrl = props.track.coverId.startsWith('http')
}
}
.flip-front,
.flip-back {
.face-down,
.face-up {
position: absolute;
width: 100%;
height: 100%;
@@ -103,11 +100,11 @@ const coverUrl = props.track.coverId.startsWith('http')
will-change: transform;
}
.flip-front {
.face-up {
transform: rotateY(0deg);
}
.flip-back {
.face-down {
transform: rotateY(180deg);
}