From 6666874913408dcc6b6a31d5081806707c104777 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20CHOMAZ?= <jeremy.chomaz20@gmail.com>
Date: Fri, 23 Jan 2026 18:44:35 +0100
Subject: [PATCH] Modification du controle manuel des score et suppression des
 16 bouttons

---
 VApp/src/components/CardButtonScore.vue | 217 ++++++++++++++----------
 1 file changed, 129 insertions(+), 88 deletions(-)

diff --git a/VApp/src/components/CardButtonScore.vue b/VApp/src/components/CardButtonScore.vue
index 96bed7e3..5f3c1471 100644
--- a/VApp/src/components/CardButtonScore.vue
+++ b/VApp/src/components/CardButtonScore.vue
@@ -4,111 +4,152 @@
       <v-icon left class="white--text pr-5 pl-2" size="40">mdi-calculator-variant</v-icon>
       Gestion des scores
     </v-card-title>
-    <v-container class="text-center">
-      <v-row justify="center">
-        <v-col cols="4" sm="6" md="3">
-          <mqtt-button width="120" height="60" class="btn red xs12 sm6 md3" topic="game/score/update" message='{"Red": "-2"}'>
-            <v-icon left size="40">mdi-minus-box-multiple</v-icon>
-          </mqtt-button>
-        </v-col>
-        <v-col cols="4" sm="6" md="3">
-          <mqtt-button width="120" height="60" class="btn red card xs12 sm6 md3" topic="game/score/update" message='{"Red": "-1"}'>
-            <v-icon left size="40">mdi-minus-box</v-icon>
-          </mqtt-button>
-        </v-col>
-        <v-col cols="4" sm="6" md="3">
-          <mqtt-button width="120" height="60" class="btn red card xs12 sm6 md3" topic="game/score/update" message='{"Red": "+1"}'>
-            <v-icon left size="40">mdi-plus-box</v-icon>
-          </mqtt-button>
-        </v-col>
-        <v-col cols="4" sm="6" md="3">
-          <mqtt-button width="120" height="60" class="btn red card xs12 sm6 md3 " topic="game/score/update" message='{"Red": "+2"}'>
-            <v-icon left size="40">mdi-plus-box-multiple</v-icon>
-          </mqtt-button>
-        </v-col>
-        <v-col cols="4" sm="6" md="3">
-          <mqtt-button width="120" height="60" class="btn blue card xs12 sm6 md3 " topic="game/score/update" message='{"Blue": "-2"}'>
-            <v-icon left size="40">mdi-minus-box-multiple</v-icon>
-          </mqtt-button>
-        </v-col>
-        <v-col cols="12" sm="6" md="3">
-          <mqtt-button width="120" height="60" class="btn blue card xs12 sm6 md3 " topic="game/score/update" message='{"Blue": "-1"}'>
-            <v-icon left size="40">mdi-minus-box</v-icon>
-          </mqtt-button>
-        </v-col>
-        <v-col cols="4" sm="6" md="3">
-          <mqtt-button width="120" height="60" class="btn blue card xs12 sm6 md3 " topic="game/score/update" message='{"Blue": "+1"}'>
-            <v-icon left size="40">mdi-plus-box</v-icon>
-          </mqtt-button>
-        </v-col>
-        <v-col cols="12" sm="6" md="3">
-          <mqtt-button width="120" height="60" class="btn blue card xs12 sm6 md3 " topic="game/score/update" message='{"Blue": "+2"}'>
-            <v-icon left size="40">mdi-plus-box-multiple</v-icon>
-          </mqtt-button>
-        </v-col>
-        <v-col cols="4" sm="6" md="3">
-          <mqtt-button width="120" height="60" class="btn yellow card xs12 sm6 md3 " topic="game/score/update" message='{"Yellow": "-2"}'>
-            <v-icon left size="40">mdi-minus-box-multiple</v-icon>
-          </mqtt-button>
-        </v-col>
-        <v-col cols="12" sm="6" md="3">
-          <mqtt-button width="120" height="60" class="btn yellow card xs12 sm6 md3 " topic="game/score/update" message='{"Yellow": "-1"}'>
-            <v-icon left size="40">mdi-minus-box</v-icon>
-          </mqtt-button>
-        </v-col>
-        <v-col cols="4" sm="6" md="3">
-          <mqtt-button width="120" height="60" class="btn yellow card xs12 sm6 md3 " topic="game/score/update" message='{"Yellow": "+1"}'>
-            <v-icon left size="40">mdi-plus-box</v-icon>
-          </mqtt-button>
-        </v-col>
-        <v-col cols="12" sm="6" md="3">
-          <mqtt-button width="120" height="60" class="btn yellow card xs12 sm6 md3 " topic="game/score/update" message='{"Yellow": "+2"}'>
-            <v-icon left size="40">mdi-plus-box-multiple</v-icon>
-          </mqtt-button>
-        </v-col>
-        <v-col cols="4" sm="6" md="3">
-          <mqtt-button width="120" height="60" class="btn green card xs12 sm6 md3 " topic="game/score/update" message='{"Green": "-2"}'>
-            <v-icon left size="40">mdi-minus-box-multiple</v-icon>
-          </mqtt-button>
-        </v-col>
-        <v-col cols="12" sm="6" md="3">
-          <mqtt-button width="120" height="60" class="btn green card xs12 sm6 md3 " topic="game/score/update" message='{"Green": "-1"}'>
-            <v-icon left size="40">mdi-minus-box</v-icon>
-          </mqtt-button>
-        </v-col>
-        <v-col cols="4" sm="6" md="3">
-          <mqtt-button width="120" height="60" class="btn green card xs12 sm6 md3 " topic="game/score/update" message='{"Green": "+1"}'>
-            <v-icon left size="40">mdi-plus-box</v-icon>
-          </mqtt-button>
-        </v-col>
-        <v-col cols="12" sm="6" md="3">
-          <mqtt-button width="120" height="60" class="btn green card xs12 sm6 md3 " topic="game/score/update" message='{"Green": "2"}'>
-            <v-icon left size="40">mdi-plus-box-multiple</v-icon>
-          </mqtt-button>
-        </v-col>
+    <v-container class="text-center pt-8">
+      <!-- Team Lines -->
+      <v-row v-for="(team, color) in scores" :key="color" align="center" justify="center" class="mb-2">
+         <!-- Icon/Label -->
+         <v-col cols="2" class="d-flex justify-center">
+            <v-icon :color="getTeamColor(color)" size="40">mdi-circle</v-icon> 
+         </v-col>
+         
+         <!-- Total Score Input -->
+         <v-col cols="5">
+            <v-text-field
+              v-model.number="team.Total"
+              label="Total"
+              type="number"
+              variant="outlined"
+              density="compact"
+              hide-details
+              prepend-inner-icon="mdi-minus"
+              append-inner-icon="mdi-plus"
+              :color="getTeamColor(color)"
+              :base-color="getTeamColor(color)"
+              @click:prepend-inner="changeScore(color, 'Total', -1)"
+              @click:append-inner="changeScore(color, 'Total', 1)"
+              @update:model-value="updateScore(color)"
+              class="centered-input"
+              readonly
+            ></v-text-field>
+         </v-col>
+
+         <!-- Round Score Input -->
+         <v-col cols="5">
+            <v-text-field
+              v-model.number="team.Round"
+              label="Manche"
+              type="number"
+              variant="outlined"
+              density="compact"
+              hide-details
+              prepend-inner-icon="mdi-minus"
+              append-inner-icon="mdi-plus"
+              :color="getTeamColor(color)"
+              :base-color="getTeamColor(color)"
+              @click:prepend-inner="changeScore(color, 'Round', -1)"
+              @click:append-inner="changeScore(color, 'Round', 1)"
+              @update:model-value="updateScore(color)"
+              class="centered-input"
+              readonly
+            ></v-text-field>
+         </v-col>
       </v-row>
     </v-container>
   </v-card>
 </template>
 
 <script setup>
-  import MqttButton from './MqttButton.vue';
-  import { ref } from 'vue';
+  import { ref, reactive, onMounted } from 'vue';
+  import mqtt from 'mqtt';
+  import config from '@/config.js'; // Ensure correct path
 
-  // Variable pour contrôler l'état de la carte
   const isCardReduced = ref(false);
 
-  // Méthode pour basculer l'état de la carte
+  const scores = reactive({
+    Red: { Total: 0, Round: 0 },
+    Blue: { Total: 0, Round: 0 },
+    Yellow: { Total: 0, Round: 0 },
+    Green: { Total: 0, Round: 0 },
+  });
+
+  const client = mqtt.connect(config.mqttBrokerUrl);
+  
+  client.on('connect', () => {
+      console.log('CardButtonScore: Connected to MQTT broker at', config.mqttBrokerUrl);
+      client.subscribe('game/score');
+  });
+
+  client.on('error', (err) => {
+      console.error('CardButtonScore: MQTT Error:', err);
+  });
+  
+  client.on('message', (topic, message) => {
+      if (topic === 'game/score') {
+          try {
+              const data = JSON.parse(message.toString());
+              console.log('CardButtonScore: Received score update:', data);
+              if (data && data.TEAM) {
+                 Object.keys(scores).forEach(color => {
+                     if (data.TEAM[color]) {
+                         scores[color].Total = data.TEAM[color].TotalScore;
+                         scores[color].Round = data.TEAM[color].RoundScore;
+                     }
+                 });
+              }
+          } catch (e) {
+              console.error("Error parsing score update:", e);
+          }
+      }
+  });
+
   function toggleCardSize() {
     isCardReduced.value = !isCardReduced.value;
   }
+
+  function getTeamColor(color) {
+      if (color === 'Yellow') return '#D4D100'; // Custom yellow
+      if (color === 'Red') return '#d42828';
+      if (color === 'Blue') return '#2867d4';
+      if (color === 'Green') return '#28d42e';
+      return color.toLowerCase();
+  }
+
+  function changeScore(teamColor, field, delta) {
+      scores[teamColor][field] += delta;
+      updateScore(teamColor);
+  }
+
+  function updateScore(teamColor) {
+      const payload = {
+          [teamColor]: {
+              Total: scores[teamColor].Total,
+              Round: scores[teamColor].Round
+          }
+      };
+      console.log('CardButtonScore: Publishing update:', payload);
+      client.publish('game/score/update', JSON.stringify(payload));
+  }
 </script>
 
 <style>
   .card--reduced {
-    height: 56px; /* Réglez la hauteur réduite selon vos besoins */
-    width: 170px;
+    height: 56px;
+    width: 60%; /* Adjusted width for layout */
     overflow: hidden;
     transition: height 0.3s ease-in-out;
   }
+  
+  .centered-input input {
+    text-align: center;
+  }
+  .centered-input .v-field__label {
+    text-align: center;
+  }
+    
+  /* Remove number spin buttons */
+  .centered-input input[type=number]::-webkit-inner-spin-button, 
+  .centered-input input[type=number]::-webkit-outer-spin-button { 
+    -webkit-appearance: none; 
+    margin: 0; 
+  }
 </style>
\ No newline at end of file