Tracking de l'application VApp (IHM du jeu)

VApp/src/components/MQTTDebugPublish.vue

@@ -0,0 +1,93 @@
+<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 un message
+      </v-card-title>
+
+      <div class="input-style">
+        <v-select
+          label="Topic"
+          v-model="selectedTopic"
+          :items="topics"
+          prepend-icon="mdi-target"
+        ></v-select>
+
+        <v-text-field
+          label="Message"
+          v-model="message"
+          prepend-icon="mdi-text-box"
+        ></v-text-field>
+      </div>
+
+      <v-btn
+        rounded
+        class="v-btn-style-standalone"
+        height="40"
+        @click="publishBuzzerUnblock"
+      >
+        Déblocage<br>Buzzer
+      </v-btn>
+
+      <v-btn
+        class="v-btn-style-validate"
+        height="50"
+        @click="publisCustomMessage"
+      >
+        Publier
+      </v-btn>
+    </v-card>
+  </v-container>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { publishMessage } from '@/services/mqttService';
+
+// Reactive data
+const message = ref('');
+const selectedTopic = ref('Selectionnez un topic');
+const topics = [
+  'wled/all',
+  'display/control',
+  'sound/playsound',
+  'game/score/update',
+  'game/score'
+];
+
+// Methods
+const publisCustomMessage = () => {
+  publishMessage(selectedTopic.value, message.value);
+};
+
+const publishBuzzerUnblock = () => {
+  publishMessage('brainblast/buzzer/unlock', "0");
+};
+</script>
+
+<style scoped>
+.v-container-style {
+  align-items: center;
+  justify-content: center;
+}
+.input-style {
+  margin: 20px;
+}
+.v-btn-style-standalone {
+  background-color: rgba(var(--v-theme-primary));
+  margin-bottom: 5%;
+  margin-left: 5%;
+}
+.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;
+}
+</style>