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.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">
          <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>
      <HidingOverlay/>
      <VideoPlayer/>
    </div>
  </div>
</template>

<script setup>
  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'

  const mqttBrokerUrl = config.mqttBrokerUrl
  const client = mqtt.connect(mqttBrokerUrl)

  const scores = reactive({
    RedTotalScore: 0,
    BlueTotalScore: 0,
    YellowTotalScore: 0,
    GreenTotalScore: 0,
    RedRoundScore: 0,
    BlueRoundScore: 0,
    YellowRoundScore: 0,
    GreenRoundScore: 0,
  });

  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>
  .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;
  }
  .color-blue {
    background-color: rgb(var(--v-theme-BlueBuzzer), 1);
    border-radius: 40px 5px 40px 5px;
  }
  .color-red {
    background-color: rgb(var(--v-theme-RedBuzzer), 1);
    border-radius: 40px 5px 40px 5px;
  }
  .color-green {
    background-color: rgb(var(--v-theme-GreenBuzzer), 1);
    border-radius: 5px 40px 5px 40px;
  }
  .color-yellow {
    background-color: rgb(var(--v-theme-YellowBuzzer), 1);
    border-radius: 5px 40px 5px 40px;
  }
  .color-white {
    background-color: white;
    border-radius: 40px;
  }
  .v-label-time {
    padding-top: 5px;
    color: black;
    font-size: 49px;
    font-family: 'Bahnschrift';
  }
  .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;
  }

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