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

WIP starbook demo
All checks were successful
Deploy App / build (push) Successful in 34s
Details
Deploy App / deploy (push) Successful in 25s
Details

Browse Source
This commit is contained in:
valere
2026-02-10 07:31:31 +01:00
parent 7fa6f6ccc8
commit 7be09dd12d
17 changed files with 516 additions and 914 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
app/components/Card.vue
View File

@@ -4,27 +4,19 @@
isFaceUp ? 'face-up' : 'face-down',
showPlayButtonFaceUp ? 'show-play-button-face-up' : ''
]" :tabindex="props.tabindex" :aria-disabled="false" @click="$emit('click', $event)"
@keydown.enter="$emit('click', $event)" @keydown.space.prevent="$emit('click', $event)">
@keydown.enter="$emit('click', $event)">
<div class="flip-inner" ref="cardElement">
<!-- Face-Up -->
<main
class="face-up backdrop-blur-sm border-2 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">
class="face-up backdrop-blur-sm border-2 z-10 card w-56 h-80 p-3 hover:shadow-xl hover:scale-110 transition-all shadow-lg flex flex-col overflow-hidden">
<div class="flex items-center justify-center size-7 absolute top-7 right-7">
<div class="suit text-7xl absolute"
:class="[isRedCard ? 'text-red-600' : 'text-slate-800', props.card?.suit]">
<img :src="`/${props.card?.suit}.svg`" />
</div>
<div class="rank text-white font-bold absolute -mt-1">
{{ props.card?.rank }}
</div>
</div>
<Rank :card="props.card" />
<!-- Cover -->
<figure class="pochette flex-1 flex justify-center items-center overflow-hidden rounded-xl cursor-pointer">
<playButton />
<figure class="flex-1 flex justify-center items-center overflow-hidden cursor-pointer">
<PlayButton />
<img :src="props.card.url_image" alt="Pochette de l'album" :loading="props.imageLoadingType"
@load="$emit('image-loaded', $event)" class="w-full h-full object-cover object-center" />
@load="$emit('image-loaded', $event)" class="pochette w-full h-full object-cover object-center" />
</figure>
<!-- Body -->
@@ -44,7 +36,7 @@
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 select-none">
<figure class="h-full flex text-center rounded-xl justify-center items-center"
:style="{ backgroundColor: cardColor }">
<playButton />
<PlayButton />
<img src="/face-down.svg" />
</figure>
</footer>
@@ -75,7 +67,6 @@ const props = withDefaults(defineProps<{
import { getYearColor } from '~/utils/colors'
const cardColor = computed(() => getYearColor(props.card.year || 0))
const isRedCard = computed(() => (props.card?.suit === '♥' || props.card?.suit === '♦'))
/* loading states of the card */
const isApiLoaded = ref(false)
@@ -103,6 +94,10 @@ const isTrackLoaded = ref(false)
perspective: 1000px;
@apply transition-all scale-100 w-56 h-80 min-w-56 min-h-80;
.pochette {
border-radius: 0.75rem;
}
.flip-inner {
position: relative;
width: 100%;
@@ -123,6 +118,7 @@ const isTrackLoaded = ref(false)
}
.face-up {
border-radius: 1rem;
transform: rotateY(0deg);
transition: box-shadow 0.6s;
}
@@ -158,7 +154,7 @@ const isTrackLoaded = ref(false)
@apply shadow-2xl;
transition:
box-shadow 0.6s,
transform 0.6s;
transform 6s;
}
}