Vulture/VApp/src/views/GameDisplay.vue

<template>
  <div class="main_div">
    <div>
      <v-container class="score_div_main" :style="getMainShadow()">
        <v-container class="score_div color-blue" :class="[getDimClass('Blue'), getFlashClass('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" :class="[getDimClass('Red'), getFlashClass('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" :class="[getDimClass('Green'), getFlashClass('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" :class="[getDimClass('Yellow'), getFlashClass('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', '{}');

    // Abonnement au statut des buzzers
    subscribeToTopic('vulture/buzzer/status', (topic, message) => {
        try {
            const data = JSON.parse(message);
            if (data.status === 'blocked') {
                const color = data.color || '';
                const team = identifyTeamByColor(color);
                activeTeam.value = team;
                
                // Trigger flash effect
                if (team) {
                    flashingTeam.value = team;
                    setTimeout(() => {
                        if (flashingTeam.value === team) {
                            flashingTeam.value = null;
                        }
                    }, 2000);
                }

                console.log(`Buzzer Blocked: Color=${color}, Identified Team=${activeTeam.value}`);
            } else if (data.status === 'unblocked') {
                activeTeam.value = null;
                flashingTeam.value = null;
                console.log('Buzzer Unblocked');
            }
        } catch (e) {
            console.error('Error parsing buzzer status', e);
        }
    });
  });

  const activeTeam = ref(null);
  const flashingTeam = ref(null);

  function identifyTeamByColor(hexColor) {
      if (!hexColor) return null;
      // Normalisation (retirer le # et mettre en majuscule)
      const color = hexColor.replace('#', '').toUpperCase();
      
      // Liste des couleurs connues (Theme + Standard)
      // RED
      if (['FF0000', 'D42828'].includes(color)) return 'Red';
      // BLUE
      if (['0000FF', '2867D4'].includes(color)) return 'Blue';
      // GREEN
      if (['00FF00', '28D42E'].includes(color)) return 'Green';
      // YELLOW
      if (['FFFF00', 'D4D100'].includes(color)) return 'Yellow';

      // Fallback: Détection approximative par composante dominante
      const r = parseInt(color.substr(0, 2), 16);
      const g = parseInt(color.substr(2, 2), 16);
      const b = parseInt(color.substr(4, 2), 16);

      if (r > 200 && g > 200 && b < 100) return 'Yellow';
      if (g > r && g > b) return 'Green';
      if (b > r && b > g) return 'Blue';
      if (r > g && r > b) return 'Red';

      return null;
  }

  function getDimClass(team) {
      if (!activeTeam.value) return '';
      return activeTeam.value !== team ? 'dimmed-score' : '';
  }

  function getFlashClass(team) {
      return flashingTeam.value === team ? 'flashing-glow' : '';
  }

  function getMainShadow() {
      if (!activeTeam.value) return {};
      
      let shadowColor = '';
      switch (activeTeam.value) {
          case 'Blue': shadowColor = 'rgb(40, 103, 212)'; break;
          case 'Red': shadowColor = 'rgb(212, 40, 40)'; break;
          case 'Green': shadowColor = 'rgb(40, 212, 46)'; break;
          case 'Yellow': shadowColor = 'rgb(212, 209, 0)'; break;
          default: return {};
      }
      return { boxShadow: `0px 3px 45px ${shadowColor}` };
  }
</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(141, 141, 141);
  }
  .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;
  }

  .dimmed-score {
      opacity: 0.3;
      transform: scale(0.95);
      filter: grayscale(100%);
      transition: all 0.3s ease;
  }

  @keyframes flash-glow {
      0%, 100% { box-shadow: 0 0 0 rgba(255, 255, 255, 0); }
      10% { box-shadow: 0 0 20px 10px rgba(255, 255, 255, 0.9); }
  }

  .flashing-glow {
      animation: flash-glow 0.5s ease-in-out infinite;
      z-index: 10;
      position: relative;
  }
</style>