Tracking de l'application VApp (IHM du jeu)

VApp/src/components/MQTTColorPublisher.vue

@@ -0,0 +1,118 @@
+<template>
+  <v-container class="v-container-style">   
+    <v-card tile outlined width="500">     
+      <v-card-title class="card__title primary centered-title">       
+        <v-icon left class="pr-5 pl-2" size="30">mdi-send</v-icon>       
+        Publier une couleur    
+      </v-card-title>     
+
+      <div class="input-style">       
+        <v-select
+          label="Topic"
+          v-model="selectedTopic"
+          :items="topics"
+          prepend-icon="mdi-target"
+        ></v-select>   
+      </div> 
+
+      <v-row>
+        <v-col cols="6" class="color-picker-style">
+          <div>
+            <v-color-picker
+              mode="hex"
+              v-model="selectedColor"
+              border="md"
+              width="250"
+            ></v-color-picker>
+            <v-btn
+              class="v-btn-style-validate"
+              height="35"
+              @click="publishCustomColor"
+            >
+              Publier
+            </v-btn>  
+          </div>
+        </v-col>
+
+        <v-col cols="4" class="button-container-2">
+          <v-btn color="#D42828" class="team-button" @click="publishButtonColor('#D42828')">Team Rouge</v-btn>
+          <v-btn color="#00FF1F" class="team-button" @click="publishButtonColor('#00FF1F')">Team Verte</v-btn>
+          <v-btn color="#007AFF" class="team-button" @click="publishButtonColor('#007AFF')">Team Bleue</v-btn>
+          <v-btn color="#FFFC00" class="team-button" @click="publishButtonColor('#FFFC00')">Team Jaune</v-btn>
+        </v-col>
+      </v-row>
+      
+    </v-card> 
+  </v-container>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { publishMessage } from '@/services/mqttService';
+
+const selectedTopic = ref('Selectionnez un topic');
+const selectedColor = ref('#FF0000');
+const topics = ref([
+  '/wled/all',
+  '/wled/1',
+  '/wled/2',
+  '/wled/3',
+  '/wled/4',
+  '/wled/5',
+]);
+
+const publishCustomColor = () => {
+  if (selectedTopic.value && selectedColor.value) {
+    publishMessage(selectedTopic.value, selectedColor.value);
+  } else {
+    console.warn('Topic ou couleur non sélectionné !');
+  }
+};
+
+const publishButtonColor = (color) => {
+  if (selectedTopic.value) {
+    publishMessage(selectedTopic.value, color);
+  } else {
+    console.warn('Topic non sélectionné !');
+  }
+};
+</script>
+
+<style scoped>
+.v-container-style { 
+  align-items: center; 
+  justify-content: center;
+}
+.input-style { 
+  margin: 20px;
+}
+.v-btn-style-validate { 
+  align-items: center; 
+  justify-content: center; 
+  width: 100%; 
+  background-color: rgba(var(--v-theme-primary)); 
+  border-top-right-radius: 0%; 
+  border-top-left-radius: 0%;
+}
+.centered-title { 
+  text-align: center;
+}
+.color-picker-style {
+  margin-left: 5%;
+  margin-bottom: 5%;
+  display: flex;
+}
+.button-container-2 {
+  text-align: center;
+  margin-top: 12px;
+  margin-bottom: 27px;
+  margin-left: 15px;
+  margin-right: 13px;
+}
+.team-button {
+  width: 140px;
+  display: block;
+  margin: 12% auto 0;
+  background-color: rgba(var(--v-theme-primary));
+}
+</style>