Vulture/VApp/src/views/GameDisplay.vue

<template>
  <div class="main_div">
    <div>
      <v-container class="score_div_main">
        <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.BlueTotalScore" class="v-label-score">{{ scores.BlueRoundScore }}</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.RedTotalScore" class="v-label-score">{{ scores.RedRoundScore }}</span>
            </Transition>
          </div>
        </v-container>
        <v-container class="score_div color-white d-flex align-center justify-center">
          <span class="v-label-time">{{ timerDisplay }}</span>
        </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.GreenTotalScore" class="v-label-score">{{ scores.GreenRoundScore }}</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.YellowTotalScore" class="v-label-score">{{ scores.YellowRoundScore }}</span>
            </Transition>
          </div>
        </v-container>
      </v-container>
    </div>

    <div>
      <HidingOverlay/>
      <GameMedia/>
    </div>
  </div>
</template>

<script setup>
  import GameMedia from "@/components/GameMedia.vue"
  import HidingOverlay from "@/components/HidingOverlay.vue"
  import { onMounted, reactive } from 'vue';
  import mqtt from 'mqtt'
  import config from '@/config.js'
  import quizStore from '@/store/quizStore';

  // Configuration MQTT
  const mqttBrokerUrl = config.mqttBrokerUrl
  const client = mqtt.connect(mqttBrokerUrl)

  // Objet réactif pour stocker les scores des équipes
  const scores = reactive({
    RedTotalScore: 0,
    BlueTotalScore: 0,
    YellowTotalScore: 0,
    GreenTotalScore: 0,
    RedRoundScore: 0,
    BlueRoundScore: 0,
    YellowRoundScore: 0,
    GreenRoundScore: 0,
  });

  import { ref } from 'vue';
  // Variable réactive pour l'affichage du timer
  const timerDisplay = ref('00:00');

  // Fonction pour formater le temps en mm:ss
  function formatTime(seconds) {
    const mins = Math.floor(seconds / 60);
    const secs = seconds % 60;
    return `${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
  }

  // Fonction de gestion des messages MQTT reçus
  function handleMessage(topic, message) {
    let parsedMessage;
    try {
      parsedMessage = JSON.parse(message);
    } catch (e) {
      console.error("Erreur d'analyse JSON:", e);
      return;
    }

    // Mise à jour des scores si le message vient du topic 'game/score'
    if (topic === 'game/score' && 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
    }

    // Mise à jour du timer si le message vient du topic 'game/timer'
    if (topic === 'game/timer' && parsedMessage.time !== undefined) {
       timerDisplay.value = formatTime(parsedMessage.time);
    }
  }

  // Fonction utilitaire pour s'abonner à un topic MQTT
  function subscribeToTopic(topic, callback) {
    client.subscribe(topic)
    client.on('message', (receivedTopic, message) => { callback(receivedTopic.toString(), message.toString())
    })
  }

  onMounted(() => {
    // Initialisation du store du quiz
    quizStore.actions.init();
    
    // Abonnement aux topics MQTT pour les scores et le timer
    subscribeToTopic('game/score', (topic, message) => {
      handleMessage(topic, message);
    });
    subscribeToTopic('game/timer', (topic, message) => {
      handleMessage(topic, message);
    });

    // Demande de rafraîchissement des scores au chargement
    // Cela permet de récupérer les scores actuels même après un rechargement de page
    client.publish('game/score/request', '{}');
  });
</script>

<style scoped>
  .main_div {
    width: 100vw;
    height: calc(100vh - 15px);
    text-align: center;
  }
  .score_div_main {
    width: 60%;
    display: flex;
    justify-content: center;
    gap: 5px;
    background-color: rgb(40, 40, 40);
    padding: 25px 30px;
    border-radius: 0px 0px 30px 30px;
    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;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    transition: transform 0.2s;
  }
  .color-blue {
    background: linear-gradient(135deg, rgb(var(--v-theme-BlueBuzzer)), #1a3a5a);
    border-radius: 40px 5px 40px 5px;
  }
  .color-red {
    background: linear-gradient(135deg, rgb(var(--v-theme-RedBuzzer)), #5a1a1a);
    border-radius: 40px 5px 40px 5px;
  }
  .color-green {
    background: linear-gradient(135deg, rgb(var(--v-theme-GreenBuzzer)), #1a5a2a);
    border-radius: 5px 40px 5px 40px;
  }
  .color-yellow {
    background: linear-gradient(135deg, rgb(var(--v-theme-YellowBuzzer)), #5a5a1a);
    border-radius: 5px 40px 5px 40px;
  }
  .color-white {
    background-color: #1a1a1a;
    border: 3px solid #333;
    border-radius: 40px;
    box-shadow: 0 0 30px rgba(0,0,0,0.6);
  }
  .v-label-time {
    padding-top: 5px;
    color: white;
    font-size: 49px;
    font-family: 'Bahnschrift';
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
  }
  .v-label-score {
    color: white;
    font-size: 40px;
    font-family: 'Bahnschrift';
    font-weight: bold;
    line-height: 1;
    text-shadow: 4px 4px 8px rgba(0,0,0,0.4);
  }
  .v-label-round-score {
      color: rgba(255, 255, 255, 0.8);
      font-size: 16px;
      font-family: 'Bahnschrift';
      font-weight: 500;
      margin-bottom: 2px;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
  }
  
  /* Transition styles */
  .score-fade-enter-active,
  .score-fade-leave-active {
    transition: opacity 0.3s ease;
  }

  .score-fade-enter-from,
  .score-fade-leave-to {
    opacity: 0;
  }
</style>