Modification des données affichée dans la gestion des scores en vu d'une migration vers du dialog via WebSocket entre le serveur backend et le frontend

ui/src/components/GameStatus.vue

@@ -19,10 +19,10 @@
       <v-row no-gutters justify="space-around" class="scorebox-1-pos">
         <v-row>
           <v-col class="align-start scorediv-style-red pr-1">
-            <v-label class="labelScore-style">{{ localStorageVars.RedScore }}</v-label>
+            <v-label class="labelScore-style">{{ RedScore }}</v-label>
           </v-col>
           <v-col class="align-start scorediv-style-blue pl-1">
-            <v-label class="labelScore-style">{{ localStorageVars.BlueScore }}</v-label>
+            <v-label class="labelScore-style">{{ BlueScore }}</v-label>
           </v-col>
         </v-row>
       </v-row>
@@ -31,10 +31,10 @@
       <v-row no-gutters justify="space-around" class="scorebox-2-pos mb-0">
         <v-row>
           <v-col class="align-start scorediv-style-orange pr-1">
-            <v-label class="labelScore-style">{{ localStorageVars.OrangeScore }}</v-label>
+            <v-label class="labelScore-style">{{ OrangeScore }}</v-label>
           </v-col>
           <v-col class="align-start scorediv-style-green pl-1">
-            <v-label class="labelScore-style">{{ localStorageVars.GreenScore }}</v-label>
+            <v-label class="labelScore-style">{{ GreenScore }}</v-label>
           </v-col>
         </v-row>
       </v-row>
@@ -43,12 +43,14 @@
 </template>
 
 <script setup>
-import { localStorageVars } from '@/variables.js';
+import { ref} from 'vue'; // Import des fonctions de Vue 3
+import variables from '@/variables.js';
 
-localStorage.setItem('RedScore', 10);
-localStorage.setItem('BlueScore', 11);
-localStorage.setItem('OrangeScore', 12);
-localStorage.setItem('GreenScore', 13);
+// Déclaration des variables locales pour les scores
+const RedScore = ref(variables.RedScore);
+const BlueScore = ref(variables.BlueScore);
+const OrangeScore = ref(variables.OrangeScore);
+const GreenScore = ref(variables.GreenScore);
 
 </script>
 

ui/src/variables.js

@@ -1,8 +1,24 @@
+export default {
+  // Gestion des score et des Buzzers
+  RedScore: 9999,
+  BlueScore: 1321,
+  OrangeScore: 10,
+  GreenScore: 10,
+  BuzzerRed: false,
+  BuzzerBlue: false,
+  BuzzerOrange: false,
+  BuzzerGreen: false,
+
+
+  
+  // Ajoutez d'autres variables globales ici
+};
+
 // Variables localStorage
 export const localStorageVars = {
     // Exemple de variable localStorage
-    RedScore: localStorage.getItem('RedScore') || '',
-    BlueScore: localStorage.getItem('BlueScore') || '',
-    OrangeScore: localStorage.getItem('OrangeScore') || '',
-    GreenScore: localStorage.getItem('GreenScore') || '',
+    RedScorelocal: localStorage.getItem('RedScore') || '',
+    BlueScorelocal: localStorage.getItem('BlueScore') || '',
+    OrangeScorelocal: localStorage.getItem('OrangeScore') || '',
+    GreenScorelocal: localStorage.getItem('GreenScore') || '',
   }; 

ui/src/views/GameDisplay.vue

@@ -0,0 +1,15 @@
+<template>
+    <v-container>
+        <v-btn @click="update"></v-btn>
+    </v-container>
+</template>
+
+<script setup>
+    import { ref} from 'vue'; // Import des fonctions de Vue 3
+    import variables from '@/variables.js';
+
+    function update() {
+        variables.RedScore = '10'
+        
+    }
+</script>