fix resultat

app/Http/Controllers/CardController.php

@@ -57,6 +57,13 @@ class CardController extends Controller
         ]);
     }
 
+    public function cartResult()
+    {
+        return Inertia::render('cards/resultat', [
+
+            ]);
+    }
+
     public function freeCartResult($id)
     {
         $card = $this->cardRepository->find($id);

resources/js/components/organism/ShuffleCard/ShuffleCardPresentation.vue

@@ -2,7 +2,7 @@
 import CardShuffleTemplate from '@/components/template/CardShuffleTemplate.vue';
 import { Card } from '@/types/cart';
 import { router } from '@inertiajs/vue3';
-import { ref, watchEffect, computed } from 'vue';
+import { computed, ref, watchEffect } from 'vue';
 
 const props = defineProps<{
     drawCount?: number; // Optional: number of cards expected to be drawn
@@ -19,6 +19,7 @@ const isDrawing = ref(false);
 const drawingIndex = ref<number | null>(null);
 const revealedCards = ref<Card[]>([]);
 const isFlipped = ref<boolean[]>([]);
+const isRestacking = ref(false);
 
 const remainingDeckSize = computed(() => Math.max(0, deckSize - revealedCards.value.length));
 
@@ -27,7 +28,7 @@ const startDraw = (index: number) => {
     isDrawing.value = true;
     drawingIndex.value = index;
 
-    const DRAW_DURATION = 800; // keep in sync with CSS transition timing
+    const DRAW_DURATION = 1000; // keep in sync with CSS animation duration
     setTimeout(() => {
         const nextCard = props.drawnCards![revealedCards.value.length];
         if (nextCard) {
@@ -36,6 +37,12 @@ const startDraw = (index: number) => {
         }
         // Restack after drawing
         isSpread.value = false;
+        // brief bounce to emphasize restack
+        isRestacking.value = true;
+        setTimeout(() => {
+            isRestacking.value = false;
+        }, 600);
+
         drawingIndex.value = null;
         isDrawing.value = false;
     }, DRAW_DURATION);
@@ -57,6 +64,10 @@ const handleDeckClick = () => {
     } else {
         // No cards left to draw, just restack
         isSpread.value = false;
+        isRestacking.value = true;
+        setTimeout(() => {
+            isRestacking.value = false;
+        }, 600);
     }
 };
 
@@ -146,17 +157,11 @@ defineExpose({ setDrawnCards });
                 <transition class="card-stack-fade">
                     <div
                         class="card-stack relative mt-4 mb-4 flex h-[500px] w-[300px] items-center justify-center"
-                        :class="{ spread: isSpread, drawing: isDrawing }"
+:class="{ spread: isSpread, drawing: isDrawing, restacking: isRestacking }"
                         @click="handleDeckClick"
                         v-show="!drawnCards || revealedCards.length < drawnCards.length"
                     >
-                        <div
-                            v-for="i in remainingDeckSize"
-                            :key="i"
-                            class="card"
-                            :style="getCardStyle(i)"
-                            @click="onCardClick(i, $event)"
-                        >
+                        <div v-for="i in remainingDeckSize" :key="i" class="card" :style="getCardStyle(i)" @click="onCardClick(i, $event)">
                             <div class="card-back">
                                 <div class="card-inner-content">
                                     <img src="cards/1.png" alt="Card Back" class="card-back-image" />
@@ -297,7 +302,23 @@ defineExpose({ setDrawnCards });
 }
 
 .card-stack.drawing {
-    animation: card-drawing 1.5s ease-in-out;
+    animation: card-drawing 1s ease-in-out;
+}
+
+/* Restack bounce animation to emphasize stack collapse */
+.card-stack.restacking {
+    animation: stack-restack 0.5s ease-out;
+}
+@keyframes stack-restack {
+    0% {
+        transform: translateY(-8px) rotateX(3deg) rotateY(-3deg);
+    }
+    60% {
+        transform: translateY(2px) rotateX(-1deg) rotateY(1deg);
+    }
+    100% {
+        transform: translateY(0) rotateX(0) rotateY(0);
+    }
 }
 
 /* Back des cartes */

resources/js/components/ui/card/CardResult.vue

@@ -7,7 +7,7 @@
       <div
         class="h-56 w-36 sm:h-64 sm:w-40 md:h-72 md:w-48 flex-shrink-0 rounded-md bg-cover bg-center bg-no-repeat transition-transform duration-300 hover:scale-105"
         :style="{
-          'background-image': `url('${imageUrl}')`,
+          'background-image': `url(/cards/${cardNumber + 1}.png)`,
           'box-shadow': '0 0 15px 5px rgba(215, 186, 141, 0.3)',
           transform: orientation === 'reversed' ? 'rotate(180deg)' : 'none'
         }"
@@ -28,9 +28,9 @@
       <h3 class="text-midnight-blue text-xl sm:text-2xl font-bold leading-tight">
         {{ name }}
       </h3>
-      <p class="text-midnight-blue/80 text-sm sm:text-base leading-relaxed">
-        {{ description }}
-      </p>
+      <div class="text-midnight-blue/80 text-sm sm:text-base leading-relaxed" v-html="description">
+
+      </div>
     </div>
   </div>
 </template>

resources/js/pages/cards/resultat.vue

@@ -79,7 +79,7 @@ onMounted(async () => {
                         <card-result
                             v-for="(card, index) in cards"
                             :key="card.id || index"
-                            :card-number="index + 1"
+                            :card-number="card.id"
                             :name="card.name"
                             :image-url="card.image_url"
                             :orientation="card.orientation"