Merge pull request 'update/improve-uix' (#2) from update/improve-uix into main

Reviewed-on: #2

VApp/src/App.vue

@@ -1,19 +1,28 @@
 <template>
   <v-app> 
-    <BrainBlastBar v-if="$route.name != 'Game Display (Projection)'" />   
+    <VultureBar v-if="showVultureBar" />   
-    <GameStatus v-if="$route.name === 'Game Control (Présentateur)'">
+    <GameStatus v-if="showGameStatus" /> 
-    </GameStatus> 
     <v-main>   
-      <RouterView /> 
+      <RouterView :key="$route.fullPath" /> 
     </v-main> <!-- <v-footer class="footer" :elevation=12 border><v-row justify="center">© 2024 - ASCO section Fablab</v-row></v-footer> -->
   </v-app>
 </template>
 
 <script setup>
-
+import { computed } from 'vue';
-import BrainBlastBar from '@/components/BrainBlastBar.vue'
+import { useRoute } from 'vue-router';
+import VultureBar from '@/components/VultureBar.vue'
 import GameStatus from '@/components/GameStatus.vue'
 
+const route = useRoute();
+
+const showVultureBar = computed(() => {
+  return route.name !== 'Game Display (Projection)' && route.name !== 'Score Display (Projection)';
+});
+
+const showGameStatus = computed(() => {
+  return route.name === 'Game Control (Présentateur)';
+});
 </script>
 
 <style>

VApp/src/components/BrainBlastBar.vue

@@ -1,10 +0,0 @@
-<template>
-  <v-app-bar :collapse="$route.name === 'Game Display (Projection)'" :elevation="5" height="50"> 
-    <RouterMenu /> 
-    <v-app-bar-title v-if="$route.name !== 'Accueil'">Brain Blast</v-app-bar-title>
-  </v-app-bar>
-</template>
-
-<script setup>
-  import RouterMenu from '@/components/RouterMenu.vue'
-</script>

VApp/src/components/BuzzerValidationDialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-dialog v-model="dialog" persistent max-width="800" height="500">
+  <v-dialog v-model="dialog" persistent max-width="800" height="500" style="background-color: rgba(0, 0, 0, 0.8);">
     <v-card dark rounded="xl">
       <v-card-title :style="{ backgroundColor: buzzerColor }" class="headline text-center justify-center">
         <v-icon color="background" dark large left size="70">mdi-alarm-light</v-icon>
@@ -25,6 +25,7 @@
           rounded="0"
           height="100%"
           width="50%"
+          :style="{ backgroundColor: buzzerColor }"
           @click="validate">
           <v-icon left size="40">mdi-check-circle</v-icon>
           <span style="font-size: 20px; padding-left: 10px;">Valider (+1)</span>
@@ -136,11 +137,10 @@
         height: 100%; /* Ensure it takes full height of the container if possible, or substantial height */
     }
     .validate-btn {
-        background-color: rgb(var(--v-theme-success),1);
         color: rgb(var(--v-theme-background),1);
     }
     .refuse-btn {
-        background-color: rgb(var(--v-theme-error),1);
+        background-color: rgb(var(--v-theme-inactiveButton),1);
         color: rgb(var(--v-theme-background),1);
     }
 </style>

VApp/src/components/CardButtonScore.vue

@@ -59,7 +59,7 @@
 </template>
 
 <script setup>
-  import { ref, reactive, onMounted } from 'vue';
+  import { ref, reactive, onMounted, onUnmounted } from 'vue';
   import mqtt from 'mqtt';
   import config from '@/config.js'; // Ensure correct path
 
@@ -72,7 +72,11 @@
     Green: { Total: 0, Round: 0 },
   });
 
-  const client = mqtt.connect(config.mqttBrokerUrl);
+  // const client = mqtt.connect(config.mqttBrokerUrl);
+  let client = null;
+  
+  onMounted(() => {
+    client = mqtt.connect(config.mqttBrokerUrl);
 
     client.on('connect', () => {
         console.log('CardButtonScore: Connected to MQTT broker at', config.mqttBrokerUrl);
@@ -101,6 +105,13 @@
             }
         }
     });
+  });
+
+  onUnmounted(() => {
+    if (client) {
+      client.end();
+    }
+  });
 
   function toggleCardSize() {
     isCardReduced.value = !isCardReduced.value;

VApp/src/components/VultureBar.vue

@@ -0,0 +1,10 @@
+<template>
+  <v-app-bar :elevation="5" height="50"> 
+    <RouterMenu /> 
+    <v-app-bar-title v-if="$route.name !== 'Accueil'">Vulture</v-app-bar-title>
+  </v-app-bar>
+</template>
+
+<script setup>
+  import RouterMenu from '@/components/RouterMenu.vue'
+</script>

VApp/src/plugins/router.js

@@ -18,6 +18,11 @@ const router = createRouter({
     name: 'Game Display (Projection)',
     component: () => import('@/views/GameDisplay.vue')
   },
+  {
+    path: '/score/display',
+    name: 'Score Display (Projection)',
+    component: () => import('@/views/ScoreDisplay.vue')
+  },
   {
     path: '/mqtt-debugger',
     name: 'Debugger MQTT',
@@ -26,7 +31,8 @@ const router = createRouter({
   {
     path: '/settings',
     name: 'Paramètres',
-    component: () => import('@/views/SettingsView.vue') }
+    component: () => import('@/views/SettingsView.vue')
+  }
   ]
 })
 

VApp/src/plugins/vuetify.js

@@ -21,6 +21,7 @@ const CustomThemeDark = {
     error: '#e91e1e',
     warning: '#FFC107',
     info: '#607D8B',
+    inactiveButton: '#707070ff',
     success: '#15B01B',
     BlueBuzzer: '#2867d4',
     YellowBuzzer: '#D4D100',
@@ -39,6 +40,7 @@ const CustomThemeLight = {
     error: '#e91e1e',
     warning: '#FFC107',
     info: '#607D8B',
+    inactiveButton: '#707070ff',
     success: '#4CAF50',
     BlueBuzzer: '#2867d4',
     YellowBuzzer: '#D4D100',
@@ -54,6 +56,7 @@ export default createVuetify({
     defaultTheme: 'CustomThemeDark',
     themes: {
       CustomThemeDark,
-      CustomThemeLight, },
+      CustomThemeLight,
+    },
   },
 })

VApp/src/views/ScoreDisplay.vue

@@ -0,0 +1,287 @@
+<template>
+  <div class="score-grid">
+    <div class="score-cell cell-blue color-blue">
+      <div class="score-content">
+        <div class="score-info info-left">
+          <div class="team-name">Bleue</div>
+          <div class="sub-score-container sub-left">
+            <span class="sub-label">Total</span>
+            <span class="team-score sub-score">{{ scores.BlueTotalScore }}</span>
+          </div>
+        </div>
+        <div class="score-main">
+          <div class="team-score main-score">{{ scores.BlueRoundScore }}</div>
+        </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>
+        </div>
+        <div class="score-info info-right">
+          <div class="team-name">Rouge</div>
+          <div class="sub-score-container sub-right">
+            <span class="sub-label">Total</span>
+            <span class="team-score sub-score">{{ scores.RedTotalScore }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="score-cell cell-green color-green">
+      <div class="score-content">
+        <div class="score-info info-left">
+          <div class="team-name">Verte</div>
+          <div class="sub-score-container sub-left">
+            <span class="sub-label">Total</span>
+            <span class="team-score sub-score">{{ scores.GreenTotalScore }}</span>
+          </div>
+        </div>
+        <div class="score-main">
+          <div class="team-score main-score">{{ scores.GreenRoundScore }}</div>
+        </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>
+        </div>
+        <div class="score-info info-right">
+          <div class="team-name">Jaune</div>
+          <div class="sub-score-container sub-right">
+            <span class="sub-label">Total</span>
+            <span class="team-score sub-score">{{ scores.YellowTotalScore }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <div class="timer-container">
+      <div class="timer-display">00:00</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { onMounted, onUnmounted, reactive } from 'vue';
+  import mqtt from 'mqtt'
+  import config from '@/config.js'
+
+  const mqttBrokerUrl = config.mqttBrokerUrl
+  let client = null
+
+  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) {
+    if(client) {
+        client.subscribe(topic)
+        client.on('message', (receivedTopic, message) => { callback(receivedTopic.toString(), message.toString())
+        })
+    }
+  }
+
+  onMounted(() => {
+    client = mqtt.connect(mqttBrokerUrl)
+    subscribeToTopic('game/score', (topic, message) => {
+      handleMessage(topic, message);
+    });
+  });
+
+  onUnmounted(() => {
+    if (client) {
+      client.end()
+    }
+  })
+</script>
+
+<style scoped>
+  .score-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+    width: 100vw;
+    height: 100vh;
+    padding: 40px;
+    gap: 60px;
+    position: relative;
+    font-family: 'Bahnschrift', sans-serif;
+  }
+
+  .score-cell {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+    transition: transform 0.2s;
+    overflow: hidden;
+  }
+  .cell-blue {
+    border-radius: 65px 225px 75px 225px !important;
+  }
+  .cell-red {
+    border-radius: 225px 65px 225px 75px !important;
+  }
+  .cell-green {
+    border-radius: 225px 65px 225px 75px !important;
+  } 
+  .cell-yellow {
+    border-radius: 75px 225px 65px 225px !important;
+  }
+
+  .score-content {
+    display: flex;
+    flex-direction: row; /* Horizontal layout */
+    align-items: center;
+    justify-content: space-around; /* Spread out */
+    width: 100%;
+    padding: 0 40px;
+  }
+
+  .score-main {
+    flex: 2; /* Takes more space */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .score-info {
+    flex: 1; /* Takes less space */
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .info-right {
+    align-items: flex-end;
+    text-align: right;
+  }
+
+  .info-left {
+    align-items: flex-start;
+    text-align: left;
+  }
+
+  .team-name {
+    font-size: 2.2rem;
+    font-weight: 900;
+    letter-spacing: 2px;
+    opacity: 0.9;
+    color: rgba(255, 255, 255, 0.95);
+    text-transform: uppercase;
+    margin-bottom: 15px;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+  }
+
+  .team-score {
+    font-weight: bold;
+    color: white;
+    line-height: 1;
+    text-shadow: 4px 4px 8px rgba(0,0,0,0.4);
+  }
+
+  .main-score {
+    font-size: 10rem; /* Even larger */
+    margin: 0;
+  }
+
+  .sub-score-container {
+    background-color: rgba(0, 0, 0, 0.2);
+    padding: 10px 20px;
+    border-radius: 20px;
+    display: flex;
+    flex-direction: column;
+    min-width: 120px;
+  }
+
+  .sub-right {
+    align-items: flex-end;
+  }
+
+  .sub-left {
+    align-items: flex-start;
+  }
+
+  .sub-label {
+    font-size: 1rem;
+    text-transform: uppercase;
+    opacity: 0.8;
+    color: rgba(255, 255, 255, 0.9);
+    margin-bottom: 2px;
+    font-weight: 600;
+  }
+
+  .sub-score {
+    font-size: 2.5rem;
+  }
+
+  .timer-container {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 10;
+    background-color: #1a1a1a;
+    padding: 20px 40px;
+    border-radius: 80px;
+    border: 6px solid #333;
+    box-shadow: 0 0 50px rgba(0,0,0,0.8);
+  }
+
+  .timer-display {
+    font-size: 8rem;
+    font-weight: bold;
+    color: white;
+    font-family: monospace;
+    text-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
+  }
+
+  .color-blue {
+    background: linear-gradient(135deg, rgb(var(--v-theme-BlueBuzzer)), #1a3a5a);
+  }
+
+  .color-red {
+    background: linear-gradient(135deg, rgb(var(--v-theme-RedBuzzer)), #5a1a1a);
+  }
+
+  .color-green {
+    background: linear-gradient(135deg, rgb(var(--v-theme-GreenBuzzer)), #1a5a2a);
+  }
+
+  .color-yellow {
+    background: linear-gradient(135deg, rgb(var(--v-theme-YellowBuzzer)), #5a5a1a);
+  }
+</style>

VNode/services/buzzer/buzzer-manager.js

@@ -1,8 +1,14 @@
 // Import necessary modules
 const mqtt = require('mqtt');
+const fs = require('fs');
+const path = require('path');
+
+// Load configuration
+const configPath = path.join(__dirname, '../config/configuration.json');
+const config = JSON.parse(fs.readFileSync(configPath, 'utf8'));
 
 // MQTT broker configuration
-const brokerUrl = 'mqtt://nanomq'; // Broker URL (change if needed)
+const brokerUrl = config.mqttHost;
 const clientId = 'buzzer_manager';
 const options = {
     clientId,

VNode/services/buzzer/buzzer-watcher.js

@@ -4,10 +4,10 @@ const mqtt = require('mqtt');
 const fs = require('fs');
 
 // Lecture du fichier de configuration
-const config = JSON.parse(fs.readFileSync(path.join('services','config','config_network.json'), 'utf8'));
+const config = JSON.parse(fs.readFileSync(path.join(__dirname, '../config/configuration.json'), 'utf8'));
 
 // Extraction des informations de config
-const { hosts: { buzzers: { IP: buzzerIPs, MQTTconfig: { mqttHost, mqttTopic } } } } = config;
+const { mqttHost, hosts: { buzzers: { IP: buzzerIPs, MQTTconfig: { mqttTopic } } } } = config;
 
 // Connexion au broker MQTT
 const client = mqtt.connect(mqttHost);

VNode/services/config/config_network.json

@@ -1,16 +0,0 @@
-{
-    "hosts": {
-        "buzzers": {
-            "IP": {
-                "redBuzzerIP": "192.168.73.40",
-                "blueBuzzerIP": "192.168.73.41",
-                "greenBuzzerIP": "192.168.73.42",
-                "yellowBuzzerIP": "192.168.73.43"
-            },
-            "MQTTconfig": {
-                "mqttHost": "mqtt://nanomq",
-                "mqttTopic": "buzzer/watcher"
-            }
-        }
-    }
-}

VNode/services/config/configuration.json

@@ -1,6 +1,6 @@
 {
+    "mqttHost": "mqtt://192.168.1.201",
     "services": {
-        "mqttHost": "mqtt://nanomq",
         "score": {
             "MQTTconfig": {
                 "mqttScoreTopic": "game/score",
@@ -13,5 +13,18 @@
                 "mqttQuizzCollectorCmdTopic": "game/quizz-collector/cmd"
             }
         }
+    },
+    "hosts": {
+        "buzzers": {
+            "IP": {
+                "redBuzzerIP": "8.8.8.6",
+                "blueBuzzerIP": "8.8.8.8",
+                "greenBuzzerIP": "8.8.8.8",
+                "yellowBuzzerIP": "8.8.8.8"
+            },
+            "MQTTconfig": {
+                "mqttTopic": "buzzer/watcher"
+            }
+        }
     }
 }

VNode/services/game/quizz-collector.js

@@ -3,10 +3,10 @@ const mqtt = require('mqtt');
 const path = require('path');
 
 // Lecture du fichier de configuration
-const config = JSON.parse(fs.readFileSync(path.join('services','config','config_game.json'), 'utf8'));
+const config = JSON.parse(fs.readFileSync(path.join(__dirname, '../config/configuration.json'), 'utf8'));
 
 // Extraction des informations de config
-const { services: { mqttHost, quizzcollector: { MQTTconfig: { mqttQuizzCollectorListTopic, mqttQuizzCollectorCmdTopic } } } } = config;
+const { mqttHost, services: { quizzcollector: { MQTTconfig: { mqttQuizzCollectorListTopic, mqttQuizzCollectorCmdTopic } } } } = config;
 
 // Configuration
 const folderPath = 'quizz'; // Remplace par le chemin de ton dossier

VNode/services/game/score-manager.js

@@ -132,11 +132,11 @@ function updateTeamTotalScore(teamColor, points) {
 
 
 // Lecture du fichier de configuration
-const configPath = path.join(__dirname, '../config/config_game.json');
+const configPath = path.join(__dirname, '../config/configuration.json');
 const config = JSON.parse(fs.readFileSync(configPath, 'utf8'));
 
 // Extraction des informations de config
-const { services: { mqttHost, score: { MQTTconfig: { mqttScoreTopic, mqttScoreChangeTopic } } } } = config;
+const { mqttHost, services: { score: { MQTTconfig: { mqttScoreTopic, mqttScoreChangeTopic } } } } = config;
 console.log("DEBUG: Config loaded from:", configPath);
 console.log("DEBUG: MQTT Host:", mqttHost);
 console.log("DEBUG: Topics:", mqttScoreTopic, mqttScoreChangeTopic);