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

flippable cards

Browse Source
This commit is contained in:
valere
2025-10-03 09:44:30 +02:00
parent 43b1a11027
commit fef1a8c234
5 changed files with 82 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/components/molecule/box.vue
View File

@@ -200,7 +200,6 @@ watch(() => props.compilation, () => applyColor(), { deep: true })
&-scene { &-scene {
height: calc(var(--size) * 20); height: calc(var(--size) * 20);
width: var(--width);
perspective: 1000px; perspective: 1000px;
touch-action: none; touch-action: none;
} }

92
app/components/molecule/card.vue
View File

@@ -1,34 +1,36 @@
<template> <template>
<article class="relative"> <article class="flip-card w-56 h-80" :data-flipped="props.isflipped">
<main <div class="flip-inner">
class="backdrop-blur-sm border-2 -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"> <main
<!-- Cover --> class="flip-front backdrop-blur-sm border-2 -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">
<figure @click="playerStore.playTrack(props.track)" class="flex-1 overflow-hidden rounded-t-xl cursor-pointer"> <!-- Cover -->
<img :src="coverUrl" alt="Pochette de l'album" class="w-full h-full object-cover object-center" /> <figure @click="playerStore.playTrack(props.track)" class="flex-1 overflow-hidden rounded-t-xl cursor-pointer">
</figure> <img :src="coverUrl" alt="Pochette de l'album" class="w-full h-full object-cover object-center" />
</figure>
<!-- Body --> <!-- Body -->
<div class="p-3 text-center bg-white rounded-b-xl"> <div class="p-3 text-center bg-white rounded-b-xl">
<div class="label"> <div class="label">
{{ props.track.order }} {{ props.track.order }}
</div>
<h2 class="text-base text-neutral-800 font-bold truncate">{{ props.track.title }}</h2>
<p class="text-sm text-neutral-500 truncate">
{{ props.track.artist.name }}
</p>
</div> </div>
<h2 class="text-base text-neutral-800 font-bold truncate">{{ props.track.title }}</h2> </main>
<p class="text-sm text-neutral-500 truncate">
{{ props.track.artist.name }}
</p>
</div>
</main>
<footer <footer
class="ml-32 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="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">
<!-- Back --> <!-- Back -->
<div class="h-full flex p-16 text-center bg-slate-800 rounded-xl"> <div class="h-full flex p-16 text-center bg-slate-800 rounded-xl">
<img src="/favicon.svg" /> <img src="/favicon.svg" />
</div> <div class="label label--id">
<div class="label"> {{ props.track.order }}
{{ props.track.id }} </div>
</div> </div>
</footer> </footer>
</div>
</article> </article>
</template> </template>
@@ -37,7 +39,7 @@
import type { Track } from '~~/types/types' import type { Track } from '~~/types/types'
import { usePlayerStore } from '~/store/player' import { usePlayerStore } from '~/store/player'
const props = defineProps<{ track: Track }>() const props = defineProps<{ track: Track, isflipped: false }>()
const playerStore = usePlayerStore() const playerStore = usePlayerStore()
const coverUrl = props.track.coverId.startsWith('http') const coverUrl = props.track.coverId.startsWith('http')
? props.track.coverId ? props.track.coverId
@@ -50,4 +52,38 @@ const coverUrl = props.track.coverId.startsWith('http')
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
} }
/* Flip effect */
.flip-card {
perspective: 1000px;
}
.flip-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.flip-card[data-flipped=false] .flip-inner {
transform: rotateY(180deg);
}
.flip-front,
.flip-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
will-change: transform;
}
.flip-front {
transform: rotateY(0deg);
}
.flip-back {
transform: rotateY(180deg);
}
</style> </style>

10
app/components/molecule/player.vue
View File

@@ -36,3 +36,13 @@ watch(
} }
) )
</script> </script>
<style scoped>
audio {
transition: all 1s;
}
audio[src=""] {
@apply -bottom-1.5 opacity-0
}
</style>

5
app/components/organism/compilationPage.vue
View File

@@ -1,6 +1,7 @@
<template> <template>
<div class="mt-8 p-8 w-96 flex flex-wrap"> <div class="mt-8 p-8 w-full flex flex-wrap justify-around">
<MoleculeCard v-for="track in dataStore.getTracksByCompilationId(compilation.id)" :key="track.id" :track="track" /> <MoleculeCard v-for="track in dataStore.getTracksByCompilationId(compilation.id)" :key="track.id" :track="track"
:isFlipped="true" />
</div> </div>
</template> </template>

5
app/store/player.ts
View File

@@ -21,6 +21,11 @@ export const usePlayerStore = defineStore('player', {
}, },
playTrack(track?: Track) { playTrack(track?: Track) {
// load compile if not allready loaded
// play if track is not already played
// else pause
if (track) this.setTrack(track) if (track) this.setTrack(track)
if (!this.currentTrack || !this.audio) return if (!this.currentTrack || !this.audio) return