Page d'overlay qui masque le player

VApp/src/components/HidingOverlay.vue

@@ -0,0 +1,47 @@
+<template>
+  <v-container v-show="gamehiding === true" class="v-container-game-hided">
+    <v-img src="@\assets\v-hide.png" class="v-img-hidding"/>
+  </v-container>
+</template>
+
+<script setup>
+  import { ref, onMounted } from 'vue';
+  import { subscribeToTopic } from '@/services/mqttService';
+  let gamehiding = ref(true);
+
+  const handleMessage = (topic, message) => {
+    if (topic === "/display/control") {
+      switch (message) {
+        case "play":
+          gamehiding.value = false;
+          break;
+        case "pause":
+          gamehiding.value = true;
+          break;
+        default:
+          console.warn("Commande non reconnue :", message);
+          gamehiding.value = true;
+      }
+    }
+  };
+
+  // --- Lifecycle
+  onMounted(() => {
+    subscribeToTopic('#', (topic, message) => {
+      handleMessage(topic, message);
+    });
+  });
+
+</script>
+
+<style>
+  .v-img-hidding{
+    border-radius: 25px;
+  }
+  .v-container-game-hided{
+    margin-top: 40px;
+    width: calc(100vw - 20%) !important;
+    height: calc(100vh - 20%) !important;
+    border-radius: 25px;
+  }
+</style>