From 07d76a7669803402e10b0d1aefe9e3e906446860 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20CHOMAZ?= <jeremy.chomaz20@gmail.com>
Date: Tue, 3 Feb 2026 20:54:01 +0100
Subject: [PATCH] =?UTF-8?q?(update)=20Ajout=20d'une=20animation=20=C3=A0?=
 =?UTF-8?q?=20la=20mise=20=C3=A0=20jour=20des=20scores?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 VApp/src/views/ScoreDisplay.vue | 46 ++++++++++++++++++++++++++++++---
 1 file changed, 42 insertions(+), 4 deletions(-)

diff --git a/VApp/src/views/ScoreDisplay.vue b/VApp/src/views/ScoreDisplay.vue
index e9ad6fe1..be73a84f 100644
--- a/VApp/src/views/ScoreDisplay.vue
+++ b/VApp/src/views/ScoreDisplay.vue
@@ -10,14 +10,18 @@
           </div>
         </div>
         <div class="score-main">
-          <div class="team-score main-score">{{ scores.BlueRoundScore }}</div>
+          <Transition name="score-pop" mode="out-in">
+            <div :key="scores.BlueRoundScore" class="team-score main-score">{{ scores.BlueRoundScore }}</div>
+          </Transition>
         </div>
       </div>
     </div>
     <div class="score-cell cell-red color-red">
       <div class="score-content">
         <div class="score-main">
-          <div class="team-score main-score">{{ scores.RedRoundScore }}</div>
+          <Transition name="score-pop" mode="out-in">
+            <div :key="scores.RedRoundScore" class="team-score main-score">{{ scores.RedRoundScore }}</div>
+          </Transition>
         </div>
         <div class="score-info info-right">
           <div class="team-name">Rouge</div>
@@ -38,14 +42,18 @@
           </div>
         </div>
         <div class="score-main">
-          <div class="team-score main-score">{{ scores.GreenRoundScore }}</div>
+          <Transition name="score-pop" mode="out-in">
+            <div :key="scores.GreenRoundScore" class="team-score main-score">{{ scores.GreenRoundScore }}</div>
+          </Transition>
         </div>
       </div>
     </div>
     <div class="score-cell cell-yellow color-yellow">
       <div class="score-content">
         <div class="score-main">
-          <div class="team-score main-score">{{ scores.YellowRoundScore }}</div>
+          <Transition name="score-pop" mode="out-in">
+            <div :key="scores.YellowRoundScore" class="team-score main-score">{{ scores.YellowRoundScore }}</div>
+          </Transition>
         </div>
         <div class="score-info info-right">
           <div class="team-name">Jaune</div>
@@ -301,4 +309,34 @@
   .color-yellow {
     background: linear-gradient(135deg, rgb(var(--v-theme-YellowBuzzer)), #5a5a1a);
   }
+
+  /* Score Pop Animation */
+  .score-pop-enter-active {
+    animation: pop-in 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  }
+  .score-pop-leave-active {
+    animation: pop-out 0.2s ease-in;
+  }
+
+  @keyframes pop-in {
+    0% {
+      transform: scale(0.5);
+      opacity: 0;
+    }
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+
+  @keyframes pop-out {
+    0% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    100% {
+      transform: scale(1.5);
+      opacity: 0;
+    }
+  }
 </style>