From 911497ab1d72c9f70fbd4e32cecc4a907bdaf5f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20CHOMAZ?= <jeremy.chomaz20@gmail.com>
Date: Fri, 23 Jan 2026 18:42:42 +0100
Subject: [PATCH] =?UTF-8?q?Ajout=20des=20scores=20dans=20les=20pastilles?=
 =?UTF-8?q?=20d'=C3=A9quipes=20et=20de=20le=20mise=20=C3=A0=20jour=20en=20?=
 =?UTF-8?q?live=20des=20scores?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 VApp/src/views/GameDisplay.vue | 235 +++++++++++++++++----------------
 1 file changed, 118 insertions(+), 117 deletions(-)

diff --git a/VApp/src/views/GameDisplay.vue b/VApp/src/views/GameDisplay.vue
index b54896de..d83e6dbc 100644
--- a/VApp/src/views/GameDisplay.vue
+++ b/VApp/src/views/GameDisplay.vue
@@ -2,113 +2,113 @@
   <div class="main_div">
     <div>
       <v-container class="score_div_main">
-        <v-container class="score_div color-blue"></v-container>
-        <v-container class="score_div color-red"></v-container>
+        <v-container class="score_div color-blue">
+          <div class="d-flex flex-column align-center">
+            <Transition name="score-fade" mode="out-in">
+              <span :key="scores.BlueRoundScore" class="v-label-round-score">Manche : {{ scores.BlueRoundScore }}</span>
+            </Transition>
+            <Transition name="score-fade" mode="out-in">
+              <span :key="scores.BlueTotalScore" class="v-label-score">{{ scores.BlueTotalScore }}</span>
+            </Transition>
+          </div>
+        </v-container>
+        <v-container class="score_div color-red">
+          <div class="d-flex flex-column align-center">
+            <Transition name="score-fade" mode="out-in">
+              <span :key="scores.RedRoundScore" class="v-label-round-score">Manche : {{ scores.RedRoundScore }}</span>
+            </Transition>
+            <Transition name="score-fade" mode="out-in">
+              <span :key="scores.RedTotalScore" class="v-label-score">{{ scores.RedTotalScore }}</span>
+            </Transition>
+          </div>
+        </v-container>
         <v-container class="score_div color-white d-flex align-center justify-center">
           <span class="v-label-time">00:00</span>
         </v-container>
-        <v-container class="score_div color-green"></v-container>
-        <v-container class="score_div color-yellow"></v-container>
+        <v-container class="score_div color-green">
+          <div class="d-flex flex-column align-center">
+            <Transition name="score-fade" mode="out-in">
+              <span :key="scores.GreenRoundScore" class="v-label-round-score">Manche : {{ scores.GreenRoundScore }}</span>
+            </Transition>
+            <Transition name="score-fade" mode="out-in">
+              <span :key="scores.GreenTotalScore" class="v-label-score">{{ scores.GreenTotalScore }}</span>
+            </Transition>
+          </div>
+        </v-container>
+        <v-container class="score_div color-yellow">
+          <div class="d-flex flex-column align-center">
+            <Transition name="score-fade" mode="out-in">
+              <span :key="scores.YellowRoundScore" class="v-label-round-score">Manche : {{ scores.YellowRoundScore }}</span>
+            </Transition>
+            <Transition name="score-fade" mode="out-in">
+              <span :key="scores.YellowTotalScore" class="v-label-score">{{ scores.YellowTotalScore }}</span>
+            </Transition>
+          </div>
+        </v-container>
       </v-container>
     </div>
 
     <div>
-      <v-container v-show="gamehiding === true" class="v-container-game-hided">
-        <v-img src="@\assets\v-hide.png" class="v-img-hidding"></v-img>
-      </v-container>
-      <v-container v-show="gamehiding === false" class="player_video_div">
-          <video
-            ref="videoJsPlayer"
-            class="video-js  player_video"
-            controls
-          ></video>
-      </v-container>
+      <HidingOverlay/>
+      <VideoPlayer/>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted, onBeforeUnmount } from 'vue';
-import videojs from 'video.js';
-import 'video.js/dist/video-js.css';
-import Mysteryland_h264 from '../quizz/Quizz-1/festival/Mysteryland_h264.mp4';
-import { subscribeToTopic } from '@/services/mqttService';
+  import VideoPlayer from "@/components/VideoPlayer.vue"
+  import HidingOverlay from "@/components/HidingOverlay.vue"
+  import { onMounted, reactive } from 'vue';
+  import mqtt from 'mqtt'
+  import config from '@/config.js'
 
-// --- Déclarations
-const player = ref(null);
-let gamehiding = ref(true)
+  const mqttBrokerUrl = config.mqttBrokerUrl
+  const client = mqtt.connect(mqttBrokerUrl)
 
-const videoOptions = {
-  autoplay: false,
-  controls: false,
-  preload: 'auto',
-  fluid: true,
-  loop: true,
-  volume: 0,
-  sources: [{ src: Mysteryland_h264, type: 'video/mp4' }],
-};
-
-// --- Fonctions
-const playVideo = () => {
-  if (player.value) {
-    console.log("▶️ Lecture de la vidéo !");
-    player.value.play().catch((error) => {
-      console.error("Erreur de lecture :", error);
-    });
-  } else {
-    console.warn("⚠️ Player non encore initialisé !");
-  }
-};
-
-const pauseVideo = () => {
-  if (player.value) {
-    console.log("⏸️ Pause de la vidéo !");
-    player.value.pause();
-  } else {
-    console.warn("⚠️ Player non encore initialisé !");
-  }
-};
-
-const handleMessage = (topic, message) => {
-  if (topic === "/display/control") {
-    switch (message) {
-      case "play":
-        gamehiding.value = false;
-        playVideo();
-        break;
-      case "pause":
-        gamehiding.value = true;
-        pauseVideo();
-        break;
-      case "hide":
-        console.log("🛑 Cacher la vidéo (implémentation à venir)");
-        break;
-      default:
-        console.warn("Commande non reconnue :", message);
-    }
-  }
-};
-
-// --- Lifecycle
-onMounted(() => {
-  player.value = videojs(
-    document.querySelector('.video-js'),
-    videoOptions,
-    () => {
-      console.log('🎥 Video player ready');
-    }
-  );
-
-  subscribeToTopic('#', (topic, message) => {
-    handleMessage(topic, message);
+  const scores = reactive({
+    RedTotalScore: 0,
+    BlueTotalScore: 0,
+    YellowTotalScore: 0,
+    GreenTotalScore: 0,
+    RedRoundScore: 0,
+    BlueRoundScore: 0,
+    YellowRoundScore: 0,
+    GreenRoundScore: 0,
   });
-});
 
-onBeforeUnmount(() => {
-  if (player.value) {
-    player.value.dispose();
+  function handleMessage(topic, message) {
+    let parsedMessage;
+    try {
+      parsedMessage = JSON.parse(message);
+    } catch (e) {
+      console.error("Erreur d'analyse JSON:", e);
+      return;
+    }
+
+    if (parsedMessage.TEAM) {
+       scores.RedTotalScore = parsedMessage.TEAM.Red.TotalScore
+       scores.BlueTotalScore = parsedMessage.TEAM.Blue.TotalScore
+       scores.YellowTotalScore = parsedMessage.TEAM.Yellow.TotalScore
+       scores.GreenTotalScore = parsedMessage.TEAM.Green.TotalScore
+
+       scores.RedRoundScore = parsedMessage.TEAM.Red.RoundScore
+       scores.BlueRoundScore = parsedMessage.TEAM.Blue.RoundScore
+       scores.YellowRoundScore = parsedMessage.TEAM.Yellow.RoundScore
+       scores.GreenRoundScore = parsedMessage.TEAM.Green.RoundScore
+    }
   }
-});
+
+  function subscribeToTopic(topic, callback) {
+    client.subscribe(topic)
+    client.on('message', (receivedTopic, message) => { callback(receivedTopic.toString(), message.toString())
+    })
+  }
+
+  onMounted(() => {
+    subscribeToTopic('game/score', (topic, message) => {
+      handleMessage(topic, message);
+    });
+  });
 </script>
 
 <style scoped>
@@ -122,15 +122,18 @@ onBeforeUnmount(() => {
     display: flex;
     justify-content: center;
     gap: 5px;
-    background-color: rgb(80, 80, 80);
+    background-color: rgb(40, 40, 40);
     padding: 25px 30px;
     border-radius: 0px 0px 30px 30px;
-    box-shadow: 0px 1px 5px rgb(255, 0, 0);
+    box-shadow: 0px 3px 45px rgb(45, 115, 166);
   }
   .score_div {
     height: 100px;
     width: 170px;
     text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
   }
   .color-blue {
     background-color: rgb(var(--v-theme-BlueBuzzer), 1);
@@ -158,31 +161,29 @@ onBeforeUnmount(() => {
     font-size: 49px;
     font-family: 'Bahnschrift';
   }
-  .player_video_div {
-    margin-top: 40px;
-    width: calc(100vw - 20%);
-    height: calc(100vh - 20%);
-    border-radius: 20px !important;
+  .v-label-score {
+    color: white;
+    font-size: 40px;
+    font-family: 'Bahnschrift';
+    font-weight: bold;
+    line-height: 1;
+  }
+  .v-label-round-score {
+      color: rgba(255, 255, 255, 0.8);
+      font-size: 16px;
+      font-family: 'Bahnschrift';
+      font-weight: 500;
+      margin-bottom: 2px;
+  }
+  
+  /* Transition styles */
+  .score-fade-enter-active,
+  .score-fade-leave-active {
+    transition: opacity 0.3s ease;
+  }
 
-  }
-  .player_video {
-    width: 100%;
-    height: 100%;
-    max-width: 100vw;
-    max-height: 100vh;
-    border-radius: 25px !important;
-
-  }
-  .vjs-tech{
-    border-radius: 25px;
-  }
-  .v-container-game-hided{
-    margin-top: 40px;
-    width: calc(100vw - 20%) !important;
-    height: calc(100vh - 20%) !important;
-    border-radius: 25px;
-  }
-  .v-img-hidding{
-    border-radius: 25px;
+  .score-fade-enter-from,
+  .score-fade-leave-to {
+    opacity: 0;
   }
 </style>