564 lines
19 KiB
Vue
564 lines
19 KiB
Vue
<script setup lang="ts">
|
|
import CardShuffleTemplate from '@/components/template/CardShuffleTemplate.vue';
|
|
import { Card } from '@/types/cart';
|
|
import { ref, watch } from 'vue';
|
|
|
|
const emit = defineEmits(['drawCard']);
|
|
|
|
const isClicked = ref(false);
|
|
const isDrawing = ref(false);
|
|
const drawnCards = ref<Card[]>([]); // Changed to array to handle multiple cards
|
|
const showResult = ref(false);
|
|
const isFlipped = ref<boolean[]>([]); // Array to track flip state for each card
|
|
|
|
const handleClick = () => {
|
|
if (isDrawing.value) return;
|
|
|
|
isClicked.value = true;
|
|
isDrawing.value = true;
|
|
emit('drawCard');
|
|
setTimeout(() => (isClicked.value = false), 500);
|
|
};
|
|
|
|
// This function would be called from the parent component when the card data is received
|
|
const setDrawnCards = (cardData: Card[]) => {
|
|
drawnCards.value = cardData;
|
|
isDrawing.value = false;
|
|
showResult.value = true;
|
|
|
|
// Initialize flip states for each card
|
|
isFlipped.value = new Array(cardData.length).fill(false);
|
|
|
|
// Add confetti effect
|
|
createConfetti();
|
|
};
|
|
|
|
watch(drawnCards, (newVal) => {
|
|
console.log('Drawn cards:', newVal);
|
|
});
|
|
|
|
const flipCard = (index: number) => {
|
|
isFlipped.value[index] = !isFlipped.value[index];
|
|
};
|
|
|
|
const createConfetti = () => {
|
|
const confettiContainer = document.createElement('div');
|
|
confettiContainer.style.position = 'fixed';
|
|
confettiContainer.style.top = '0';
|
|
confettiContainer.style.left = '0';
|
|
confettiContainer.style.width = '100%';
|
|
confettiContainer.style.height = '100%';
|
|
confettiContainer.style.pointerEvents = 'none';
|
|
confettiContainer.style.zIndex = '5'; // Lower z-index so cards appear above
|
|
document.body.appendChild(confettiContainer);
|
|
|
|
const colors = ['#D7BA8D', '#A06D52', '#1F2A44', '#FFFFFF'];
|
|
const confettiCount = 100;
|
|
|
|
for (let i = 0; i < confettiCount; i++) {
|
|
const confetti = document.createElement('div');
|
|
confetti.style.position = 'absolute';
|
|
confetti.style.width = '10px';
|
|
confetti.style.height = '10px';
|
|
confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
|
|
confetti.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
|
|
confetti.style.top = '50%';
|
|
confetti.style.left = '50%';
|
|
confetti.style.opacity = '0';
|
|
|
|
confettiContainer.appendChild(confetti);
|
|
|
|
const animation = confetti.animate(
|
|
[
|
|
{
|
|
transform: 'translate(0, 0) rotate(0deg)',
|
|
opacity: 1,
|
|
},
|
|
{
|
|
transform: `translate(${Math.random() * 400 - 200}px, ${Math.random() * 400 - 200}px) rotate(${Math.random() * 360}deg)`,
|
|
opacity: 0,
|
|
},
|
|
],
|
|
{
|
|
duration: 1000 + Math.random() * 1000,
|
|
easing: 'cubic-bezier(0.1, 0.8, 0.3, 1)',
|
|
},
|
|
);
|
|
|
|
animation.onfinish = () => {
|
|
confetti.remove();
|
|
if (confettiContainer.children.length === 0) {
|
|
confettiContainer.remove();
|
|
}
|
|
};
|
|
}
|
|
};
|
|
|
|
// Expose the setDrawnCards function to parent component
|
|
defineExpose({ setDrawnCards });
|
|
</script>
|
|
|
|
<template>
|
|
<CardShuffleTemplate>
|
|
<template #card-shuffle-slot>
|
|
<div class="card-container">
|
|
<div
|
|
class="card-stack relative mt-4 mb-4 flex h-[500px] w-[300px] items-center justify-center"
|
|
:class="{ clicked: isClicked, drawing: isDrawing }"
|
|
@click="handleClick"
|
|
>
|
|
<div class="card" style="transform: rotate(-3deg) translateZ(0); z-index: 3">
|
|
<div class="card-back">
|
|
<div class="card-back-design">
|
|
<svg
|
|
class="h-16 w-16 text-[var(--subtle-gold)] opacity-80"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path d="M12 4v16m8-8H4" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"></path>
|
|
<path
|
|
d="M14.828 7.172a4 4 0 015.656 5.656l-5.656 5.657a4 4 0 01-5.657-5.657l5.657-5.656z"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="0.5"
|
|
></path>
|
|
<path
|
|
d="M9.172 7.172a4 4 0 00-5.657 5.656l5.657 5.657a4 4 0 005.656-5.657L9.172 7.172z"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="0.5"
|
|
></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card" style="transform: rotate(1deg) translateZ(-10px); z-index: 2">
|
|
<div class="card-back">
|
|
<div class="card-back-design">
|
|
<svg
|
|
class="h-16 w-16 text-[var(--subtle-gold)] opacity-80"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path d="M12 4v16m8-8H4" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"></path>
|
|
<path
|
|
d="M14.828 7.172a4 4 0 015.656 5.656l-5.656 5.657a4 4 0 01-5.657-5.657l5.657-5.656z"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="0.5"
|
|
></path>
|
|
<path
|
|
d="M9.172 7.172a4 4 0 00-5.657 5.656l5.657 5.657a4 4 0 005.656-5.657L9.172 7.172z"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="0.5"
|
|
></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card" style="transform: rotate(4deg) translateZ(-20px); z-index: 1">
|
|
<div class="card-back">
|
|
<div class="card-back-design">
|
|
<svg
|
|
class="h-16 w-16 text-[var(--subtle-gold)] opacity-80"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path d="M12 4v16m8-8H4" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"></path>
|
|
<path
|
|
d="M14.828 7.172a4 4 0 015.656 5.656l-5.656 5.657a4 4 0 01-5.657-5.657l5.657-5.656z"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="0.5"
|
|
></path>
|
|
<path
|
|
d="M9.172 7.172a4 4 0 00-5.657 5.656l5.657 5.657a4 4 0 005.656-5.657L9.172 7.172z"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="0.5"
|
|
></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="showResult && drawnCards.length" class="cards-result-container">
|
|
<div v-for="(card, index) in drawnCards" :key="index" class="card-result-wrapper">
|
|
<div class="result-card" :class="{ flipped: isFlipped[index] }" @click="flipCard(index)">
|
|
<div class="card-face card-unknown-front">
|
|
<div class="card-back-design">
|
|
<svg
|
|
class="h-16 w-16 text-[var(--subtle-gold)] opacity-80"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path d="M12 4v16m8-8H4" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"></path>
|
|
<path
|
|
d="M14.828 7.172a4 4 0 015.656 5.656l-5.656 5.657a4 4 0 01-5.657-5.657l5.657-5.656z"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="0.5"
|
|
></path>
|
|
<path
|
|
d="M9.172 7.172a4 4 0 00-5.657 5.656l5.657 5.657a4 4 0 005.656-5.657L9.172 7.172z"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="0.5"
|
|
></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-face card-known-back">
|
|
<img :src="card.image_url!" :alt="card.name" class="card-image" />
|
|
<div class="card-description-overlay">
|
|
<h3>{{ card.name }}</h3>
|
|
<p class="description">{{ card.description }}</p>
|
|
<p v-if="card.orientation" class="orientation">
|
|
{{ card.orientation === 'reversed' ? 'Inversée' : 'Droite' }}
|
|
</p>
|
|
<div v-if="card.symbolism" class="symbolism">
|
|
<p><strong>Numéro:</strong> {{ card.symbolism.numéro }}</p>
|
|
<p><strong>Planète:</strong> {{ card.symbolism.planète }}</p>
|
|
<p><strong>Élément:</strong> {{ card.symbolism.élément }}</p>
|
|
</div>
|
|
<p class="click-hint">Cliquez pour retourner</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</CardShuffleTemplate>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.card-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.card {
|
|
width: 250px;
|
|
height: 400px;
|
|
background: linear-gradient(145deg, var(--pure-white), var(--linen));
|
|
border-radius: 16px;
|
|
box-shadow:
|
|
0 10px 20px rgba(0, 0, 0, 0.1),
|
|
0 6px 6px rgba(0, 0, 0, 0.1);
|
|
position: absolute;
|
|
transition:
|
|
transform 0.5s ease-in-out,
|
|
box-shadow 0.5s ease-in-out;
|
|
cursor: pointer;
|
|
transform-style: preserve-3d;
|
|
backface-visibility: hidden;
|
|
}
|
|
|
|
/* Animation stack globale */
|
|
.card-stack {
|
|
transition: transform 0.6s ease-in-out;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
perspective: 1000px; /* ajoute profondeur */
|
|
}
|
|
|
|
/* Hover sur la pile */
|
|
.card-stack:hover {
|
|
transform: translateY(-10px) rotateX(2deg) rotateY(-2deg);
|
|
}
|
|
|
|
.card-stack:hover .card:nth-child(1) {
|
|
transform: rotateY(-5deg) rotateX(5deg) translateZ(30px) translateX(-20px);
|
|
}
|
|
.card-stack:hover .card:nth-child(2) {
|
|
transform: rotateY(0deg) rotateX(2deg) translateZ(20px);
|
|
}
|
|
.card-stack:hover .card:nth-child(3) {
|
|
transform: rotateY(5deg) rotateX(5deg) translateZ(10px) translateX(20px);
|
|
}
|
|
|
|
/* Glow doré subtil au hover */
|
|
.card-stack:hover .card-back {
|
|
box-shadow: 0 0 20px rgba(215, 186, 141, 0.6);
|
|
transition: box-shadow 0.6s ease-in-out;
|
|
}
|
|
|
|
/* Animation click */
|
|
@keyframes card-click-tilt {
|
|
0% {
|
|
transform: translateY(-10px) rotateX(2deg) rotateY(-2deg);
|
|
}
|
|
30% {
|
|
transform: translateY(-5px) rotateX(-4deg) rotateY(4deg);
|
|
}
|
|
60% {
|
|
transform: translateY(-12px) rotateX(3deg) rotateY(-3deg);
|
|
}
|
|
100% {
|
|
transform: translateY(-10px) rotateX(2deg) rotateY(-2deg);
|
|
}
|
|
}
|
|
|
|
/* Drawing animation */
|
|
@keyframes card-drawing {
|
|
0% {
|
|
transform: translateY(-10px) rotateX(2deg) rotateY(-2deg);
|
|
}
|
|
25% {
|
|
transform: translateY(-30px) rotateX(10deg) rotateY(-10deg);
|
|
}
|
|
50% {
|
|
transform: translateY(-40px) rotateX(-5deg) rotateY(5deg);
|
|
}
|
|
75% {
|
|
transform: translateY(-30px) rotateX(5deg) rotateY(-5deg);
|
|
}
|
|
100% {
|
|
transform: translateY(-10px) rotateX(2deg) rotateY(-2deg);
|
|
}
|
|
}
|
|
|
|
/* Active sur clic */
|
|
.card-stack.clicked {
|
|
animation: card-click-tilt 0.4s ease-in-out;
|
|
}
|
|
|
|
.card-stack.drawing {
|
|
animation: card-drawing 1.5s ease-in-out;
|
|
}
|
|
|
|
/* Back des cartes */
|
|
.card-back {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
backface-visibility: hidden;
|
|
border-radius: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 1px solid var(--subtle-gold);
|
|
background: radial-gradient(circle, var(--midnight-blue) 0%, #121a2c 100%);
|
|
}
|
|
|
|
.card-result-wrapper {
|
|
width: 250px;
|
|
height: 400px;
|
|
perspective: 1000px;
|
|
}
|
|
|
|
.card-back-design-wrapper {
|
|
background: radial-gradient(circle, var(--midnight-blue) 0%, #121a2c 100%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.card-back-design {
|
|
width: 80%;
|
|
height: 80%;
|
|
border: 2px solid var(--subtle-gold);
|
|
border-radius: 8px;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.card-back-design::before,
|
|
.card-back-design::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 50%;
|
|
height: 50%;
|
|
border-color: var(--subtle-gold);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.card-face {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
backface-visibility: hidden; /* This is crucial for the flip effect */
|
|
border-radius: 16px;
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
|
overflow: hidden; /* To keep content within borders */
|
|
}
|
|
|
|
.card-unknown-front {
|
|
background: radial-gradient(circle, var(--midnight-blue) 0%, #121a2c 100%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 1px solid var(--subtle-gold);
|
|
}
|
|
|
|
.card-known-back {
|
|
transform: rotateY(180deg); /* This face starts rotated, so it's hidden */
|
|
position: relative;
|
|
}
|
|
|
|
.card-back-design::before {
|
|
top: -2px;
|
|
left: -2px;
|
|
border-top-width: 1px;
|
|
border-left-width: 1px;
|
|
border-top-style: solid;
|
|
border-left-style: solid;
|
|
border-top-left-radius: 8px;
|
|
}
|
|
.card-back-design::after {
|
|
bottom: -2px;
|
|
right: -2px;
|
|
border-bottom-width: 1px;
|
|
border-right-width: 1px;
|
|
border-bottom-style: solid;
|
|
border-right-style: solid;
|
|
border-bottom-right-radius: 8px;
|
|
}
|
|
|
|
/* Result card styles */
|
|
.cards-result-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 20px;
|
|
margin-top: 2rem;
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
.card-result-container {
|
|
perspective: 1000px;
|
|
}
|
|
|
|
.result-card {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
transform-style: preserve-3d;
|
|
transition: transform 0.8s;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.result-card.flipped {
|
|
transform: rotateY(180deg);
|
|
}
|
|
|
|
.card-front,
|
|
.card-back-info {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
backface-visibility: hidden;
|
|
border-radius: 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 1rem;
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
|
text-align: center;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.card-back-info p {
|
|
color: var(--midnight-blue); /* Adjust color if needed */
|
|
}
|
|
|
|
.card-front {
|
|
background: linear-gradient(145deg, var(--pure-white), var(--linen));
|
|
color: var(--midnight-blue);
|
|
}
|
|
|
|
.card-back-info {
|
|
background: linear-gradient(145deg, var(--midnight-blue), #121a2c);
|
|
color: var(--pure-white);
|
|
transform: rotateY(180deg);
|
|
text-align: center;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.card-content-wrapper {
|
|
background: linear-gradient(145deg, var(--pure-white), var(--linen));
|
|
color: var(--midnight-blue);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 1rem;
|
|
transform: rotateY(180deg); /* This is the key part to make it the 'back' of the card */
|
|
}
|
|
|
|
.card-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
border-radius: 16px;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.card-description-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.6); /* Semi-transparent overlay for readability */
|
|
color: white;
|
|
padding: 1rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end; /* Align content to the bottom */
|
|
align-items: center;
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.card-description-overlay h3,
|
|
.card-description-overlay p {
|
|
margin: 0.2rem 0;
|
|
}
|
|
|
|
.orientation {
|
|
font-style: italic;
|
|
margin-top: 0.5rem;
|
|
color: var(--spiritual-earth);
|
|
}
|
|
|
|
.description {
|
|
margin: 1rem 0;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.symbolism {
|
|
margin-top: 1rem;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.symbolism p {
|
|
margin: 0.3rem 0;
|
|
}
|
|
|
|
.click-hint {
|
|
margin-top: 1rem;
|
|
font-size: 0.7rem;
|
|
opacity: 0.7;
|
|
}
|
|
</style>
|