2eme iteration

première iteration du buzzer-manager
Merge branch 'main' of https://projects.cloudsucks.net/asco.fablab/BrainBlast
2024-10-03 18:20:52 +00:00 · 2024-10-02 20:34:53 +00:00 · 2024-09-11 15:41:02 +02:00 · 2024-09-11 15:38:13 +02:00 · 2024-08-05 16:04:01 +00:00 · 2024-04-14 14:50:53 +02:00
103 changed files with 3980 additions and 693 deletions
--- a/index.html
+++ b/index.html
@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-  <head>
-    <meta charset="UTF-8">
-    <link rel="icon" href="/favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Brain Blast</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
-  </body>
-</html>
--- a/jsconfig.json
+++ b/jsconfig.json
@ -1,8 +0,0 @@
-{
-  "compilerOptions": {
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  },
-  "exclude": ["node_modules", "dist"]
-}
--- a/services/buzzer-manager.js
+++ b/services/buzzer-manager.js
@ -0,0 +1,217 @@
+// Import necessary modules
+const mqtt = require('mqtt');
+
+// MQTT broker configuration
+const brokerUrl = 'mqtt://localhost'; // Broker URL (change if needed)
+const clientId = 'buzzer_manager';
+const options = {
+    clientId,
+    clean: true
+};
+
+// State variables
+let buzzerActive = false; // Indicates if buzzers are blocked
+let buzzerThatPressed = null; // Stores the ID of the buzzer that pressed first
+let tiltBuzzers = new Set(); // List of buzzer IDs currently in "tilt" mode
+
+// Connect to the MQTT broker
+const client = mqtt.connect(brokerUrl, options);
+
+client.on('connect', () => {
+    console.log(`[INFO] Connected to MQTT broker ${brokerUrl} with ID ${clientId}`);
+
+    // Subscribe to topics related to buzzer presses, unlocking, and tilt management
+    client.subscribe('brainblast/buzzer/pressed/#', (err) => {
+        if (err) console.error('[ERROR] Failed to subscribe to buzzer presses');
+        else console.log('[INFO] Successfully subscribed to buzzer presses');
+    });
+
+    client.subscribe('brainblast/buzzer/unlock', (err) => {
+        if (err) console.error('[ERROR] Failed to subscribe to buzzer unlock');
+        else console.log('[INFO] Successfully subscribed to buzzer unlock');
+    });
+
+    client.subscribe('brainblast/buzzer/tilt', (err) => {
+        if (err) console.error('[ERROR] Failed to subscribe to tilt management');
+        else console.log('[INFO] Successfully subscribed to tilt management');
+    });
+});
+
+// Validate buzzer payload
+function validateBuzzerPayload(payload) {
+    const { buzzer_id, color } = payload;
+
+    // Validate buzzer ID (should be a positive integer)
+    if (typeof buzzer_id !== 'number' || buzzer_id <= 0) {
+        console.error(`[ERROR] Invalid buzzer ID: ${buzzer_id}`);
+        return false;
+    }
+
+    // Validate color (should be in the format #RRGGBB)
+    const validColor = /^#[0-9A-F]{6}$/i.test(color);
+    if (!validColor) {
+        console.error(`[ERROR] Invalid color: ${color}`);
+        return false;
+    }
+
+    return true;
+}
+
+// Send updated tilt status
+function sendTiltStatus(action, buzzerId) {
+    const tiltList = Array.from(tiltBuzzers); // Convert Set to Array
+
+    client.publish('brainblast/buzzer/status', JSON.stringify({
+        status: "tilt_update",
+        tilt_buzzers: tiltList,
+        message: `Buzzer ID ${buzzerId} ${action} to tilt mode`,
+        timestamp: new Date().toISOString()
+    }));
+
+    console.log(`[INFO] Tilt status updated: ${tiltList.length} buzzers in tilt mode`);
+}
+
+// Handle incoming messages
+client.on('message', (topic, message) => {
+    let payload;
+
+    // Parse the incoming message
+    try {
+        payload = JSON.parse(message.toString());
+    } catch (e) {
+        console.error(`[ERROR] Invalid JSON message received on topic ${topic}: ${message.toString()}`);
+        return;
+    }
+
+    // Manage tilt mode for buzzers
+    if (topic === 'brainblast/buzzer/tilt') {
+        const { buzzer_id, status } = payload;
+
+        if (typeof buzzer_id !== 'number' || !['add', 'remove'].includes(status)) {
+            console.error('[ERROR] Invalid tilt payload, message ignored.');
+            return;
+        }
+
+        // Update tilt status based on the command
+        if (status === 'add') {
+            tiltBuzzers.add(buzzer_id);
+            console.log(`[INFO] Buzzer ID ${buzzer_id} added to tilt mode`);
+        } else if (status === 'remove') {
+            tiltBuzzers.delete(buzzer_id);
+            console.log(`[INFO] Buzzer ID ${buzzer_id} removed from tilt mode`);
+        }
+
+        // Confirm that the tilt command has been received
+        client.publish(`brainblast/buzzer/tilt/confirmation/${buzzer_id}`, JSON.stringify({
+            status: "received",
+            action: status,
+            buzzer_id: buzzer_id,
+            message: `Tilt command '${status}' received for buzzer ID ${buzzer_id}`,
+            timestamp: new Date().toISOString()
+        }));
+
+        // Send the updated tilt status to all components
+        sendTiltStatus(status === 'add' ? 'added' : 'removed', buzzer_id);
+
+        return;
+    }
+
+    // Detect a buzzer press
+    if (topic.startsWith('brainblast/buzzer/pressed/')) {
+        // Validate buzzer payload
+        if (!validateBuzzerPayload(payload)) {
+            console.error('[ERROR] Invalid buzzer payload, message ignored.');
+            return;
+        }
+
+        const buzzerId = payload.buzzer_id; // Unique buzzer ID
+        const color = payload.color; // Associated hex color
+
+        // Always send a confirmation, even if the buzzer is in tilt mode
+        client.publish(`brainblast/buzzer/confirmation/${buzzerId}`, JSON.stringify({
+            status: "received",
+            buzzer_id: buzzerId,
+            message: `Buzzer ID ${buzzerId} received (Color: ${color})`,
+            timestamp: new Date().toISOString()
+        }));
+
+        // Ignore if the buzzer is in tilt mode, but notify this event
+        if (tiltBuzzers.has(buzzerId)) {
+            console.log(`[INFO] Buzzer ID ${buzzerId} ignored (Tilt mode active)`);
+
+            // Notify that the buzzer is in tilt mode and ignored
+            client.publish(`brainblast/buzzer/tilt/ignored/${buzzerId}`, JSON.stringify({
+                status: "tilt_ignored",
+                buzzer_id: buzzerId,
+                message: `Buzzer ID ${buzzerId} is in tilt mode and ignored.`,
+                timestamp: new Date().toISOString()
+            }));
+            return;
+        }
+
+        // Notify activity even if buzzers are blocked
+        client.publish('brainblast/buzzer/activity', JSON.stringify({
+            buzzer_id: buzzerId,
+            color: color,
+            status: buzzerActive ? "blocked" : "free",
+            message: `Activity detected on buzzer ID ${buzzerId} (Color: ${color})`,
+            timestamp: new Date().toISOString()
+        }));
+
+        if (!buzzerActive) {
+            // Block further buzzers and record the first pressed ID
+            buzzerActive = true;
+            buzzerThatPressed = buzzerId;
+
+            console.log(`[INFO] Buzzer activated by ID: ${buzzerId} (Color: ${color})`);
+
+            // Notify the light manager to change to the team's color
+            client.publish('brainblast/light/change', JSON.stringify({
+                color: color,
+                effect: 'full_color'
+            }));
+
+            // Notify all components of buzzer blocking
+            client.publish('brainblast/buzzer/status', JSON.stringify({
+                status: "blocked",
+                buzzer_id: buzzerId,
+                color: color,
+                message: `Buzzer activated by ID ${buzzerId} (Color: ${color})`,
+                timestamp: new Date().toISOString()
+            }));
+
+            console.log(`[INFO] Buzzers blocked and notification sent`);
+        }
+    }
+
+    // Unlock buzzers
+    if (topic === 'brainblast/buzzer/unlock') {
+        console.log('[INFO] Buzzer unlock requested');
+
+        // Confirm receipt of unlock command
+        client.publish('brainblast/buzzer/unlock/confirmation', JSON.stringify({
+            status: "received",
+            message: "Buzzer unlock command received.",
+            timestamp: new Date().toISOString()
+        }));
+
+        // Reset buzzer manager state
+        buzzerActive = false;
+        buzzerThatPressed = null;
+
+        // Notify all components of buzzer unlock
+        client.publish('brainblast/buzzer/status', JSON.stringify({
+            status: "unblocked",
+            message: "Buzzers unblocked and ready for activation.",
+            timestamp: new Date().toISOString()
+        }));
+
+        console.log('[INFO] Buzzers unblocked and notification sent');
+    }
+});
+
+client.on('error', (err) => {
+    console.error(`[ERROR] Error connecting to broker: ${err}`);
+});
+
+console.log('[INFO] Buzzer manager started...');
--- a/services/package-lock.json
+++ b/services/package-lock.json
@ -0,0 +1,497 @@
+{
+  "name": "services",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "mqtt": "^5.10.1"
+      }
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.7.tgz",
+      "integrity": "sha512-FjoyLe754PMiYsFaN5C94ttGiOmBNYTf6pLr4xXHAT5uctHb092PBszndLDR5XA/jghQvn4n7JMHl7dmTgbm9w==",
+      "license": "MIT",
+      "dependencies": {
+        "regenerator-runtime": "^0.14.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@types/node": {
+      "version": "22.7.4",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.7.4.tgz",
+      "integrity": "sha512-y+NPi1rFzDs1NdQHHToqeiX2TIS79SWEAw9GYhkkx8bD0ChpfqC+n2j5OXOCpzfojBEBt6DnEnnG9MY0zk1XLg==",
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.19.2"
+      }
+    },
+    "node_modules/@types/readable-stream": {
+      "version": "4.0.15",
+      "resolved": "https://registry.npmjs.org/@types/readable-stream/-/readable-stream-4.0.15.tgz",
+      "integrity": "sha512-oAZ3kw+kJFkEqyh7xORZOku1YAKvsFTogRY8kVl4vHpEKiDkfnSA/My8haRE7fvmix5Zyy+1pwzOi7yycGLBJw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*",
+        "safe-buffer": "~5.1.1"
+      }
+    },
+    "node_modules/@types/ws": {
+      "version": "8.5.12",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.12.tgz",
+      "integrity": "sha512-3tPRkv1EtkDpzlgyKyI8pGsGZAGPEaXeu0DOj5DI25Ja91bdAYddYHbADRYVrZMRbfW+1l5YwXVDKohDJNQxkQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/abort-controller": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
+      "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
+      "license": "MIT",
+      "dependencies": {
+        "event-target-shim": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=6.5"
+      }
+    },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/bl": {
+      "version": "6.0.16",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-6.0.16.tgz",
+      "integrity": "sha512-V/kz+z2Mx5/6qDfRCilmrukUXcXuCoXKg3/3hDvzKKoSUx8CJKudfIoT29XZc3UE9xBvxs5qictiHdprwtteEg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/readable-stream": "^4.0.0",
+        "buffer": "^6.0.3",
+        "inherits": "^2.0.4",
+        "readable-stream": "^4.2.0"
+      }
+    },
+    "node_modules/buffer": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.2.1"
+      }
+    },
+    "node_modules/buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+      "license": "MIT"
+    },
+    "node_modules/commist": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/commist/-/commist-3.2.0.tgz",
+      "integrity": "sha512-4PIMoPniho+LqXmpS5d3NuGYncG6XWlkBSVGiWycL22dd42OYdUGil2CWuzklaJoNxyxUSpO4MKIBU94viWNAw==",
+      "license": "MIT"
+    },
+    "node_modules/concat-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-2.0.0.tgz",
+      "integrity": "sha512-MWufYdFw53ccGjCA+Ol7XJYpAlW6/prSMzuPOTRnJGcGzuhLn4Scrz7qf6o8bROZ514ltazcIFJZevcfbo0x7A==",
+      "engines": [
+        "node >= 6.0"
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^3.0.2",
+        "typedarray": "^0.0.6"
+      }
+    },
+    "node_modules/concat-stream/node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/event-target-shim": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
+      "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/events": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
+      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.x"
+      }
+    },
+    "node_modules/fast-unique-numbers": {
+      "version": "8.0.13",
+      "resolved": "https://registry.npmjs.org/fast-unique-numbers/-/fast-unique-numbers-8.0.13.tgz",
+      "integrity": "sha512-7OnTFAVPefgw2eBJ1xj2PGGR9FwYzSUso9decayHgCDX4sJkHLdcsYTytTg+tYv+wKF3U8gJuSBz2jJpQV4u/g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.8",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=16.1.0"
+      }
+    },
+    "node_modules/help-me": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/help-me/-/help-me-5.0.0.tgz",
+      "integrity": "sha512-7xgomUX6ADmcYzFik0HzAxh/73YlKR9bmFzf51CZwR+b6YtzU2m0u49hQCqV6SvlqIqsaxovfwdvbnsw3b/zpg==",
+      "license": "MIT"
+    },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "license": "ISC"
+    },
+    "node_modules/js-sdsl": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.3.0.tgz",
+      "integrity": "sha512-mifzlm2+5nZ+lEcLJMoBK0/IH/bDg8XnJfd/Wq6IP+xoCjLZsTOnV2QpxlVbX9bMnkl5PdEjNtBJ9Cj1NjifhQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/js-sdsl"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "license": "ISC"
+    },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/mqtt": {
+      "version": "5.10.1",
+      "resolved": "https://registry.npmjs.org/mqtt/-/mqtt-5.10.1.tgz",
+      "integrity": "sha512-hXCOki8sANoQ7w+2OzJzg6qMBxTtrH9RlnVNV8panLZgnl+Gh0J/t4k6r8Az8+C7y3KAcyXtn0mmLixyUom8Sw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/readable-stream": "^4.0.5",
+        "@types/ws": "^8.5.9",
+        "commist": "^3.2.0",
+        "concat-stream": "^2.0.0",
+        "debug": "^4.3.4",
+        "help-me": "^5.0.0",
+        "lru-cache": "^10.0.1",
+        "minimist": "^1.2.8",
+        "mqtt-packet": "^9.0.0",
+        "number-allocator": "^1.0.14",
+        "readable-stream": "^4.4.2",
+        "reinterval": "^1.1.0",
+        "rfdc": "^1.3.0",
+        "split2": "^4.2.0",
+        "worker-timers": "^7.1.4",
+        "ws": "^8.17.1"
+      },
+      "bin": {
+        "mqtt": "build/bin/mqtt.js",
+        "mqtt_pub": "build/bin/pub.js",
+        "mqtt_sub": "build/bin/sub.js"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
+    "node_modules/mqtt-packet": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/mqtt-packet/-/mqtt-packet-9.0.0.tgz",
+      "integrity": "sha512-8v+HkX+fwbodsWAZIZTI074XIoxVBOmPeggQuDFCGg1SqNcC+uoRMWu7J6QlJPqIUIJXmjNYYHxBBLr1Y/Df4w==",
+      "license": "MIT",
+      "dependencies": {
+        "bl": "^6.0.8",
+        "debug": "^4.3.4",
+        "process-nextick-args": "^2.0.1"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
+    "node_modules/number-allocator": {
+      "version": "1.0.14",
+      "resolved": "https://registry.npmjs.org/number-allocator/-/number-allocator-1.0.14.tgz",
+      "integrity": "sha512-OrL44UTVAvkKdOdRQZIJpLkAdjXGTRda052sN4sO77bKEzYYqWKMBjQvrJFzqygI99gL6Z4u2xctPW1tB8ErvA==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.3.1",
+        "js-sdsl": "4.3.0"
+      }
+    },
+    "node_modules/process": {
+      "version": "0.11.10",
+      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+      "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+      "license": "MIT"
+    },
+    "node_modules/readable-stream": {
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-4.5.2.tgz",
+      "integrity": "sha512-yjavECdqeZ3GLXNgRXgeQEdz9fvDDkNKyHnbHRFtOr7/LcfgBcmct7t/ET+HaCTqfh06OzoAxrkN/IfjJBVe+g==",
+      "license": "MIT",
+      "dependencies": {
+        "abort-controller": "^3.0.0",
+        "buffer": "^6.0.3",
+        "events": "^3.3.0",
+        "process": "^0.11.10",
+        "string_decoder": "^1.3.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      }
+    },
+    "node_modules/regenerator-runtime": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
+      "license": "MIT"
+    },
+    "node_modules/reinterval": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reinterval/-/reinterval-1.1.0.tgz",
+      "integrity": "sha512-QIRet3SYrGp0HUHO88jVskiG6seqUGC5iAG7AwI/BV4ypGcuqk9Du6YQBUOUqm9c8pw1eyLoIaONifRua1lsEQ==",
+      "license": "MIT"
+    },
+    "node_modules/rfdc": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
+      "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
+      "license": "MIT"
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT"
+    },
+    "node_modules/split2": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/split2/-/split2-4.2.0.tgz",
+      "integrity": "sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">= 10.x"
+      }
+    },
+    "node_modules/string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
+    "node_modules/string_decoder/node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/tslib": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz",
+      "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==",
+      "license": "0BSD"
+    },
+    "node_modules/typedarray": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
+      "integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==",
+      "license": "MIT"
+    },
+    "node_modules/undici-types": {
+      "version": "6.19.8",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
+      "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
+      "license": "MIT"
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "license": "MIT"
+    },
+    "node_modules/worker-timers": {
+      "version": "7.1.8",
+      "resolved": "https://registry.npmjs.org/worker-timers/-/worker-timers-7.1.8.tgz",
+      "integrity": "sha512-R54psRKYVLuzff7c1OTFcq/4Hue5Vlz4bFtNEIarpSiCYhpifHU3aIQI29S84o1j87ePCYqbmEJPqwBTf+3sfw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.24.5",
+        "tslib": "^2.6.2",
+        "worker-timers-broker": "^6.1.8",
+        "worker-timers-worker": "^7.0.71"
+      }
+    },
+    "node_modules/worker-timers-broker": {
+      "version": "6.1.8",
+      "resolved": "https://registry.npmjs.org/worker-timers-broker/-/worker-timers-broker-6.1.8.tgz",
+      "integrity": "sha512-FUCJu9jlK3A8WqLTKXM9E6kAmI/dR1vAJ8dHYLMisLNB/n3GuaFIjJ7pn16ZcD1zCOf7P6H62lWIEBi+yz/zQQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.24.5",
+        "fast-unique-numbers": "^8.0.13",
+        "tslib": "^2.6.2",
+        "worker-timers-worker": "^7.0.71"
+      }
+    },
+    "node_modules/worker-timers-worker": {
+      "version": "7.0.71",
+      "resolved": "https://registry.npmjs.org/worker-timers-worker/-/worker-timers-worker-7.0.71.tgz",
+      "integrity": "sha512-ks/5YKwZsto1c2vmljroppOKCivB/ma97g9y77MAAz2TBBjPPgpoOiS1qYQKIgvGTr2QYPT3XhJWIB6Rj2MVPQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.24.5",
+        "tslib": "^2.6.2"
+      }
+    },
+    "node_modules/ws": {
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
+      "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    }
+  }
+}
--- a/services/package.json
+++ b/services/package.json
@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "mqtt": "^5.10.1"
+  }
+}
--- a/services/test-buzzer-manager.js
+++ b/services/test-buzzer-manager.js
@ -0,0 +1,161 @@
+// Import necessary modules
+const mqtt = require('mqtt');
+
+// MQTT broker configuration
+const brokerUrl = 'mqtt://localhost'; // Broker URL (change if needed)
+const options = {
+    clientId: 'test_buzzer_manager',
+    clean: true
+};
+
+// Set up MQTT client
+const client = mqtt.connect(brokerUrl, options);
+
+// Variables for tracking test results
+let testResults = {
+    buzzerActivity: false,
+    confirmationReceived: false,
+    statusBlocked: false,
+    statusUnblocked: false,
+    tiltAddConfirmed: false,
+    tiltRemoveConfirmed: false,
+    tiltIgnored: false,
+    unlockConfirmation: false,
+    tiltUpdateAdd: false,
+    tiltUpdateRemove: false
+};
+
+// Subscribe to topics to capture the responses from the buzzer manager
+client.on('connect', () => {
+    console.log('[INFO] Connected to MQTT broker for testing');
+
+    // Subscribe to all topics related to the buzzer manager
+    client.subscribe('brainblast/buzzer/#', (err) => {
+        if (err) console.error('[ERROR] Failed to subscribe to topics for testing');
+        else console.log('[INFO] Subscribed to topics successfully');
+    });
+
+    // Run the test sequence after a short delay
+    setTimeout(runTestSequence, 500);
+});
+
+// Capture and process incoming MQTT messages
+client.on('message', (topic, message) => {
+    const payload = JSON.parse(message.toString());
+    console.log(`[INFO] Message received on ${topic}: ${message.toString()}`);
+
+    // Track the test results based on the topics and payloads
+    if (topic.startsWith('brainblast/buzzer/activity') && payload.buzzer_id === 1) {
+        testResults.buzzerActivity = true;
+    }
+
+    if (topic.startsWith(`brainblast/buzzer/confirmation/1`) && payload.status === "received") {
+        testResults.confirmationReceived = true;
+    }
+
+    if (topic === 'brainblast/buzzer/status' && payload.status === "blocked") {
+        testResults.statusBlocked = true;
+    }
+
+    if (topic === 'brainblast/buzzer/status' && payload.status === "unblocked") {
+        testResults.statusUnblocked = true;
+    }
+
+    if (topic.startsWith(`brainblast/buzzer/tilt/confirmation/2`) && payload.status === "received" && payload.action === "add") {
+        testResults.tiltAddConfirmed = true;
+    }
+
+    if (topic.startsWith(`brainblast/buzzer/tilt/confirmation/2`) && payload.status === "received" && payload.action === "remove") {
+        testResults.tiltRemoveConfirmed = true;
+    }
+
+    if (topic === `brainblast/buzzer/tilt/ignored/2` && payload.status === "tilt_ignored") {
+        testResults.tiltIgnored = true;
+    }
+
+    if (topic === 'brainblast/buzzer/status' && payload.status === "tilt_update") {
+        // Check for tilt update with added buzzer
+        if (payload.tilt_buzzers.includes(2) && payload.message.includes("added")) {
+            testResults.tiltUpdateAdd = true;
+        }
+
+        // Check for tilt update with removed buzzer
+        if (!payload.tilt_buzzers.includes(2) && payload.message.includes("removed")) {
+            testResults.tiltUpdateRemove = true;
+        }
+    }
+
+    if (topic === 'brainblast/buzzer/unlock/confirmation' && payload.status === "received") {
+        testResults.unlockConfirmation = true;
+    }
+});
+
+// Function to run the complete test sequence
+function runTestSequence() {
+    console.log('[INFO] Starting test sequence...');
+
+    // 1. Simulate a buzzer press (buzzer 1, color red)
+    console.log('[TEST] Simulating buzzer press (ID 1, color #FF0000)...');
+    client.publish('brainblast/buzzer/pressed/1', JSON.stringify({
+        buzzer_id: 1,
+        color: "#FF0000"
+    }));
+
+    // 2. Simulate a second buzzer press (buzzer 2, color blue) to check blocking
+    setTimeout(() => {
+        console.log('[TEST] Simulating second buzzer press (ID 2, color #0000FF)...');
+        client.publish('brainblast/buzzer/pressed/2', JSON.stringify({
+            buzzer_id: 2,
+            color: "#0000FF"
+        }));
+    }, 1000);
+
+    // 3. Simulate adding a buzzer to tilt mode (buzzer 2)
+    setTimeout(() => {
+        console.log('[TEST] Adding buzzer ID 2 to tilt mode...');
+        client.publish('brainblast/buzzer/tilt', JSON.stringify({
+            buzzer_id: 2,
+            status: "add"
+        }));
+    }, 1500);
+
+    // 4. Simulate pressing a buzzer in tilt mode (should be ignored)
+    setTimeout(() => {
+        console.log('[TEST] Simulating tilt buzzer press (ID 2, color #0000FF)...');
+        client.publish('brainblast/buzzer/pressed/2', JSON.stringify({
+            buzzer_id: 2,
+            color: "#0000FF"
+        }));
+    }, 2000);
+
+    // 5. Remove tilt mode from buzzer 2
+    setTimeout(() => {
+        console.log('[TEST] Removing tilt mode for buzzer ID 2...');
+        client.publish('brainblast/buzzer/tilt', JSON.stringify({
+            buzzer_id: 2,
+            status: "remove"
+        }));
+    }, 2500);
+
+    // 6. Unlock buzzers to reset state
+    setTimeout(() => {
+        console.log('[TEST] Unlocking buzzers...');
+        client.publish('brainblast/buzzer/unlock', '{}');
+    }, 3000);
+
+    // 7. Display results
+    setTimeout(() => {
+        console.log('[INFO] Test sequence complete. Results:');
+        console.log(`1. Buzzer activity detected for buzzer 1: ${testResults.buzzerActivity ? 'PASSED' : 'FAILED'}`);
+        console.log(`2. Confirmation received for buzzer 1: ${testResults.confirmationReceived ? 'PASSED' : 'FAILED'}`);
+        console.log(`3. Buzzer 1 status set to "blocked": ${testResults.statusBlocked ? 'PASSED' : 'FAILED'}`);
+        console.log(`4. Buzzer status set to "unblocked": ${testResults.statusUnblocked ? 'PASSED' : 'FAILED'}`);
+        console.log(`5. Tilt mode add confirmed for buzzer 2: ${testResults.tiltAddConfirmed ? 'PASSED' : 'FAILED'}`);
+        console.log(`6. Tilted buzzer press ignored: ${testResults.tiltIgnored ? 'PASSED' : 'FAILED'}`);
+        console.log(`7. Tilt status update sent (add): ${testResults.tiltUpdateAdd ? 'PASSED' : 'FAILED'}`);
+        console.log(`8. Tilt mode remove confirmed for buzzer 2: ${testResults.tiltRemoveConfirmed ? 'PASSED' : 'FAILED'}`);
+        console.log(`9. Tilt status update sent (remove): ${testResults.tiltUpdateRemove ? 'PASSED' : 'FAILED'}`);
+        console.log(`10. Unlock confirmation received: ${testResults.unlockConfirmation ? 'PASSED' : 'FAILED'}`);
+        client.end(); // End the MQTT connection
+    }, 4000);
+}
--- a/soundplayer-mqtt/assets/sounds/8-bit-coin-fx_G_minor.wav
+++ b/soundplayer-mqtt/assets/sounds/8-bit-coin-fx_G_minor.wav
--- a/soundplayer-mqtt/assets/sounds/bell.wav
+++ b/soundplayer-mqtt/assets/sounds/bell.wav
@ -0,0 +1 @@
+8-bit-coin-fx_G_minor.wav
--- a/soundplayer-mqtt/assets/sounds/coin.wav
+++ b/soundplayer-mqtt/assets/sounds/coin.wav
@ -0,0 +1 @@
+8-bit-coin-fx_G_minor.wav
--- a/soundplayer-mqtt/assets/sounds/fail.mp3
+++ b/soundplayer-mqtt/assets/sounds/fail.mp3
--- a/soundplayer-mqtt/config.js
+++ b/soundplayer-mqtt/config.js
@ -0,0 +1 @@
+mqttBrokerUrl = 'ws://localhost:9001'
--- a/soundplayer-mqtt/package-lock.json
+++ b/soundplayer-mqtt/package-lock.json
@ -0,0 +1,482 @@
+{
+  "name": "src",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "mqtt": "^5.3.6",
+        "play-sound": "^1.1.6"
+      }
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.24.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.0.tgz",
+      "integrity": "sha512-Chk32uHMg6TnQdvw2e9IlqPpFX/6NLuK0Ys2PqLb7/gL5uFn9mXvK715FGLlOLQrcO4qIkNHkvPGktzzXexsFw==",
+      "dependencies": {
+        "regenerator-runtime": "^0.14.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@types/node": {
+      "version": "20.11.21",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.21.tgz",
+      "integrity": "sha512-/ySDLGscFPNasfqStUuWWPfL78jompfIoVzLJPVVAHBh6rpG68+pI2Gk+fNLeI8/f1yPYL4s46EleVIc20F1Ow==",
+      "dependencies": {
+        "undici-types": "~5.26.4"
+      }
+    },
+    "node_modules/@types/readable-stream": {
+      "version": "4.0.10",
+      "resolved": "https://registry.npmjs.org/@types/readable-stream/-/readable-stream-4.0.10.tgz",
+      "integrity": "sha512-AbUKBjcC8SHmImNi4yK2bbjogQlkFSg7shZCcicxPQapniOlajG8GCc39lvXzCWX4lLRRs7DM3VAeSlqmEVZUA==",
+      "dependencies": {
+        "@types/node": "*",
+        "safe-buffer": "~5.1.1"
+      }
+    },
+    "node_modules/@types/ws": {
+      "version": "8.5.10",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.10.tgz",
+      "integrity": "sha512-vmQSUcfalpIq0R9q7uTo2lXs6eGIpt9wtnLdMv9LVpIjCA/+ufZRozlVoVelIYixx1ugCBKDhn89vnsEGOCx9A==",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/abort-controller": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
+      "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
+      "dependencies": {
+        "event-target-shim": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=6.5"
+      }
+    },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/bl": {
+      "version": "6.0.11",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-6.0.11.tgz",
+      "integrity": "sha512-Ok/NWrEA0mlEEbWzckkZVLq6Nv1m2xZ+i9Jq5hZ9Ph/YEcP5dExqls9wUzpluhQRPzdeT8oZNOXAytta6YN8pQ==",
+      "dependencies": {
+        "@types/readable-stream": "^4.0.0",
+        "buffer": "^6.0.3",
+        "inherits": "^2.0.4",
+        "readable-stream": "^4.2.0"
+      }
+    },
+    "node_modules/buffer": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.2.1"
+      }
+    },
+    "node_modules/buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="
+    },
+    "node_modules/commist": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/commist/-/commist-3.2.0.tgz",
+      "integrity": "sha512-4PIMoPniho+LqXmpS5d3NuGYncG6XWlkBSVGiWycL22dd42OYdUGil2CWuzklaJoNxyxUSpO4MKIBU94viWNAw=="
+    },
+    "node_modules/concat-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-2.0.0.tgz",
+      "integrity": "sha512-MWufYdFw53ccGjCA+Ol7XJYpAlW6/prSMzuPOTRnJGcGzuhLn4Scrz7qf6o8bROZ514ltazcIFJZevcfbo0x7A==",
+      "engines": [
+        "node >= 6.0"
+      ],
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^3.0.2",
+        "typedarray": "^0.0.6"
+      }
+    },
+    "node_modules/concat-stream/node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/event-target-shim": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
+      "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/events": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
+      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+      "engines": {
+        "node": ">=0.8.x"
+      }
+    },
+    "node_modules/fast-unique-numbers": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/fast-unique-numbers/-/fast-unique-numbers-9.0.0.tgz",
+      "integrity": "sha512-lgIjiflW23W7qgagregmo5FFzM+m4/dWaDUVneRi2AV7o2k5npggeEX7srSKlYfJU9fKXvQV2Gzk3272fJT65w==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.2.0"
+      }
+    },
+    "node_modules/find-exec": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/find-exec/-/find-exec-1.0.3.tgz",
+      "integrity": "sha512-gnG38zW90mS8hm5smNcrBnakPEt+cGJoiMkJwCU0IYnEb0H2NQk0NIljhNW+48oniCriFek/PH6QXbwsJo/qug==",
+      "dependencies": {
+        "shell-quote": "^1.8.1"
+      }
+    },
+    "node_modules/help-me": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/help-me/-/help-me-5.0.0.tgz",
+      "integrity": "sha512-7xgomUX6ADmcYzFik0HzAxh/73YlKR9bmFzf51CZwR+b6YtzU2m0u49hQCqV6SvlqIqsaxovfwdvbnsw3b/zpg=="
+    },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+    },
+    "node_modules/js-sdsl": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.3.0.tgz",
+      "integrity": "sha512-mifzlm2+5nZ+lEcLJMoBK0/IH/bDg8XnJfd/Wq6IP+xoCjLZsTOnV2QpxlVbX9bMnkl5PdEjNtBJ9Cj1NjifhQ==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/js-sdsl"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.0.tgz",
+      "integrity": "sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==",
+      "engines": {
+        "node": "14 || >=16.14"
+      }
+    },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/mqtt": {
+      "version": "5.3.6",
+      "resolved": "https://registry.npmjs.org/mqtt/-/mqtt-5.3.6.tgz",
+      "integrity": "sha512-3XeyCdHRFf3zZdUUBt/pqprKPtUABc8O4ZGPGs2QPO4sPNTnJels8U2UtBtMt09QCgpUmw8gLTLy2R7verR7kQ==",
+      "dependencies": {
+        "@types/readable-stream": "^4.0.5",
+        "@types/ws": "^8.5.9",
+        "commist": "^3.2.0",
+        "concat-stream": "^2.0.0",
+        "debug": "^4.3.4",
+        "help-me": "^5.0.0",
+        "lru-cache": "^10.0.1",
+        "minimist": "^1.2.8",
+        "mqtt": "^5.2.0",
+        "mqtt-packet": "^9.0.0",
+        "number-allocator": "^1.0.14",
+        "readable-stream": "^4.4.2",
+        "reinterval": "^1.1.0",
+        "rfdc": "^1.3.0",
+        "split2": "^4.2.0",
+        "worker-timers": "^7.0.78",
+        "ws": "^8.14.2"
+      },
+      "bin": {
+        "mqtt": "build/bin/mqtt.js",
+        "mqtt_pub": "build/bin/pub.js",
+        "mqtt_sub": "build/bin/sub.js"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
+    "node_modules/mqtt-packet": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/mqtt-packet/-/mqtt-packet-9.0.0.tgz",
+      "integrity": "sha512-8v+HkX+fwbodsWAZIZTI074XIoxVBOmPeggQuDFCGg1SqNcC+uoRMWu7J6QlJPqIUIJXmjNYYHxBBLr1Y/Df4w==",
+      "dependencies": {
+        "bl": "^6.0.8",
+        "debug": "^4.3.4",
+        "process-nextick-args": "^2.0.1"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+    },
+    "node_modules/number-allocator": {
+      "version": "1.0.14",
+      "resolved": "https://registry.npmjs.org/number-allocator/-/number-allocator-1.0.14.tgz",
+      "integrity": "sha512-OrL44UTVAvkKdOdRQZIJpLkAdjXGTRda052sN4sO77bKEzYYqWKMBjQvrJFzqygI99gL6Z4u2xctPW1tB8ErvA==",
+      "dependencies": {
+        "debug": "^4.3.1",
+        "js-sdsl": "4.3.0"
+      }
+    },
+    "node_modules/play-sound": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/play-sound/-/play-sound-1.1.6.tgz",
+      "integrity": "sha512-09eO4QiXNFXJffJaOW5P6x6F5RLihpLUkXttvUZeWml0fU6x6Zp7AjG9zaeMpgH2ZNvq4GR1ytB22ddYcqJIZA==",
+      "dependencies": {
+        "find-exec": "1.0.3"
+      }
+    },
+    "node_modules/process": {
+      "version": "0.11.10",
+      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+      "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
+    },
+    "node_modules/readable-stream": {
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-4.5.2.tgz",
+      "integrity": "sha512-yjavECdqeZ3GLXNgRXgeQEdz9fvDDkNKyHnbHRFtOr7/LcfgBcmct7t/ET+HaCTqfh06OzoAxrkN/IfjJBVe+g==",
+      "dependencies": {
+        "abort-controller": "^3.0.0",
+        "buffer": "^6.0.3",
+        "events": "^3.3.0",
+        "process": "^0.11.10",
+        "string_decoder": "^1.3.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      }
+    },
+    "node_modules/regenerator-runtime": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
+    },
+    "node_modules/reinterval": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reinterval/-/reinterval-1.1.0.tgz",
+      "integrity": "sha512-QIRet3SYrGp0HUHO88jVskiG6seqUGC5iAG7AwI/BV4ypGcuqk9Du6YQBUOUqm9c8pw1eyLoIaONifRua1lsEQ=="
+    },
+    "node_modules/rfdc": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.3.1.tgz",
+      "integrity": "sha512-r5a3l5HzYlIC68TpmYKlxWjmOP6wiPJ1vWv2HeLhNsRZMrCkxeqxiHlQ21oXmQ4F3SiryXBHhAD7JZqvOJjFmg=="
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "node_modules/shell-quote": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.1.tgz",
+      "integrity": "sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/split2": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/split2/-/split2-4.2.0.tgz",
+      "integrity": "sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==",
+      "engines": {
+        "node": ">= 10.x"
+      }
+    },
+    "node_modules/string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "dependencies": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
+    "node_modules/string_decoder/node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/tslib": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+    },
+    "node_modules/typedarray": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
+      "integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA=="
+    },
+    "node_modules/undici-types": {
+      "version": "5.26.5",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
+      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA=="
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
+    },
+    "node_modules/worker-timers": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/worker-timers/-/worker-timers-7.1.2.tgz",
+      "integrity": "sha512-iqhXt5+Mc3u2nHj3G/w/E9pXqhlueniA2NlyelB/MQSHQuuW2fmmZGkveAv6yi4SSZvrpbveBBlqPSZ0MDCLww==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "tslib": "^2.6.2",
+        "worker-timers-broker": "^6.1.2",
+        "worker-timers-worker": "^7.0.66"
+      }
+    },
+    "node_modules/worker-timers-broker": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/worker-timers-broker/-/worker-timers-broker-6.1.2.tgz",
+      "integrity": "sha512-slFupigW5vtkGJ1VBCxYPwXFFRmvfioh02bCltBhbMkt3fFnkAbKBCg61pNTetlD0RAsP09mqx/FB0f4UMoHNw==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "fast-unique-numbers": "^9.0.0",
+        "tslib": "^2.6.2",
+        "worker-timers-worker": "^7.0.66"
+      }
+    },
+    "node_modules/worker-timers-worker": {
+      "version": "7.0.66",
+      "resolved": "https://registry.npmjs.org/worker-timers-worker/-/worker-timers-worker-7.0.66.tgz",
+      "integrity": "sha512-VCLa0H5K9fE2DVI/9r5zDuFrMQIpNL3UD/h4Ui49fIiRBTgv1Sqe0RM12brr83anBsm103aUQkvKvCBL+KpNtg==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "tslib": "^2.6.2"
+      }
+    },
+    "node_modules/ws": {
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.16.0.tgz",
+      "integrity": "sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    }
+  }
+}
--- a/soundplayer-mqtt/package.json
+++ b/soundplayer-mqtt/package.json
@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "mqtt": "^5.3.6",
+    "play-sound": "^1.1.6"
+  }
+}
--- a/soundplayer-mqtt/soundplayer.js
+++ b/soundplayer-mqtt/soundplayer.js
@ -0,0 +1,54 @@
+const config = require('./config')
+const player = require('play-sound')();
+const mqtt = require('mqtt')
+
+// Créer une instance de client MQTT
+const client = mqtt.connect(config.mqttBrokerUrl);
+
+
+const messages_sounds_maps = {
+  'success': "./assets/sounds/success.mp3",
+  'fail': "./assets/sounds/error.mp3",
+  'timer': "./assets/sounds/timer.mp3",
+  'bell': "/home/lol/Src/fablab/brain-blast-services/src/assets/sounds/coin.wav",
+  'applause': "./assets/sound/clap.mp3"
+}
+
+// Gérer les événements de connexion
+client.on('connect', function () {
+  console.log('Connecté au broker MQTT')
+
+  // S'abonner à un topic
+  client.subscribe('/sound/playsound', function (err) {
+    if (err) {
+      console.error('Erreur lors de la souscription au topic', err)
+    } else {
+      console.log('Souscription au topic réussie')
+    }
+  });
+});
+
+// Gérer les messages entrants
+client.on('message', function (topic, message) {
+  let obj = JSON.parse(message)
+  const audioFile = messages_sounds_maps[obj]
+  console.log('Message reçu sur le topic', topic, ':', obj)
+  console.log('Je vais lire le fichier : ', audioFile)
+  if (audioFile) {
+    // Jouer le fichier audio correspondant au message reçu
+    player.play(audioFile, function(err){
+      if (err) {
+        console.error('Erreur lors de la lecture du fichier audio', err);
+      } else {
+        console.log('Fichier audio lu avec succès');
+      }
+    });
+  } else {
+    console.warn('Aucun fichier audio correspondant au message reçu');
+  }
+});
+
+// Gérer les erreurs de connexion
+client.on('error', function (error) {
+  console.error('Erreur de connexion au broker MQTT', error);
+});
--- a/src/App.vue
+++ b/src/App.vue
@ -1,27 +0,0 @@
-<template>
-  <v-app>
-    <BrainBlastBar />
-    <GameStatus />
-    <v-main>
-      <RouterView />
-    </v-main>
-    <v-footer class="footer" :elevation=12 border><v-row justify="center">© 2024 - ASCO section Fablab</v-row></v-footer>
-  </v-app>
-</template>
-
-<script setup>
-
-import BrainBlastBar from '@/components/BrainBlastBar.vue'
-import GameStatus from '@/components/GameStatus.vue'
-
-</script>
-
-<style scoped>
-  .footer {
-    position: fixed; /* Fixe le footer en bas de la page */
-    bottom: 0; /* Aligne le footer en bas de la page */
-    left: 0; /* Aligne le footer à gauche */
-    width: 100%; /* Ajuste la largeur du footer en fonction de la largeur de l'écran */
-    z-index: 1000; /* Assure que le footer est au-dessus des autres éléments */
-  }
-</style>
--- a/src/assets/BrainBlast-For-HomeView-Alpha.png
+++ b/src/assets/BrainBlast-For-HomeView-Alpha.png
--- a/src/assets/logo.svg
+++ b/src/assets/logo.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
--- a/src/components/BrainBlastBar.vue
+++ b/src/components/BrainBlastBar.vue
@ -1,27 +0,0 @@
-<template>
-  <v-app-bar :elevation="5">
-    <RouterMenu />
-    <v-app-bar-title>Brain Blast</v-app-bar-title>
-
-    <template v-slot:append>
-      <v-btn icon @click="toggleTheme">
-        <v-icon>{{ darkTheme ? 'mdi-white-balance-sunny' : 'mdi-moon-waning-crescent' }}</v-icon>
-      </v-btn>
-    </template>
-  </v-app-bar>
-</template>
-
-<script setup>
-  import { ref } from 'vue'
-  import { useTheme } from 'vuetify'
-  import RouterMenu from '@/components/RouterMenu.vue'
-
-  const theme = useTheme()
-  const darkTheme = ref(true)
-
-  function toggleTheme() {
-    darkTheme.value = !darkTheme.value
-    theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
-  }
-
-</script>
--- a/src/components/CardControl.vue
+++ b/src/components/CardControl.vue
@ -1,36 +0,0 @@
-<template>
-  <v-card tile outlined class="card">
-    <v-card-title class="card__title primary">
-      <v-icon left class="white--text pr-5 pl-2" size="50">mdi-camera-control</v-icon>
-      Contrôles
-    </v-card-title>
-    <v-container class="text-center">
-      <v-row justify="center">
-        <v-col cols="12" sm="6" md="5" class="mt-4">
-          <mqtt-button width="240" height="130" class="btn xs12 sm6 md3" topic="/display/control" message="previous">
-            <v-icon left size="100">mdi-skip-previous</v-icon>
-          </mqtt-button>
-        </v-col>
-        <v-col cols="12" sm="6" md="5" class="mt-4">
-          <mqtt-button width="240" height="130" class="btn card xs12 sm6 md3" topic="/display/control" message="next">
-            <v-icon left size="100">mdi-skip-next</v-icon>
-          </mqtt-button>
-        </v-col>
-        <v-col cols="12" sm="6" md="5" class="mb-4">
-          <mqtt-button width="240" height="130" class="btn card xs12 sm6 md3" topic="/display/control" message="pause">
-            <v-icon left size="100">mdi-pause</v-icon>
-          </mqtt-button>
-        </v-col>
-        <v-col cols="12" sm="6" md="5" class="mb-4">
-          <mqtt-button width="240" height="130" class="btn card xs12 sm6 md3 " topic="/display/control" message="play">
-            <v-icon left size="100">mdi-play</v-icon>
-          </mqtt-button>
-        </v-col>
-      </v-row>
-    </v-container>
-  </v-card>
-</template>
-
-<script setup>
-  import MqttButton from './MqttButton.vue';
-</script>
--- a/src/components/CardSolution.vue
+++ b/src/components/CardSolution.vue
@ -1,30 +0,0 @@
-<template>
-  <v-card tile outlined class="card">
-    <v-card-title class="card__title feedback">
-      <v-icon left class="white--text pr-5 pl-2" size="50">mdi-play-network-outline</v-icon>
-      Solution
-    </v-card-title>
-    <v-container class="text-center">
-      <v-row justify="center">
-        <v-container class="text-center">
-          <!-- Utilisation de styles CSS personnalisés pour centrer l'image -->
-          <v-img width="450" src="https://c4.wallpaperflare.com/wallpaper/908/893/291/funny-middle-finger-black-background-wallpaper-preview.jpg" style="margin: 0 auto;"></v-img>
-        </v-container>
-      </v-row>
-    </v-container>
-  </v-card>
-</template>
-<style>
-@media (min-width: 1024px) {
-  .image-container {
-    width: 300px;
-    overflow: hidden; /* Pour masquer le dépassement de l'image */
-    border: 1px solid #ccc; /* Bordure de l'image */
-  }
-  .image-container img {
-    width: 100%; /* Pour remplir complètement le conteneur */
-    height: auto; /* Pour maintenir le ratio d'aspect de l'image */
-    display: block; /* Pour éviter l'espace réservé pour les images */
-  }
-}
-</style>
--- a/src/components/CardSoundboard.vue
+++ b/src/components/CardSoundboard.vue
@ -1,43 +0,0 @@
-<template>
-  <v-card tile outlined class="card" color="">
-    <v-card-title class="card__title primary">
-      <v-icon left class="white--text pr-5 pl-2" size="50">mdi-music-box-multiple</v-icon>
-      Soundboard
-    </v-card-title>
-    <v-container class="text-center">
-      <v-row justify="center">
-        <v-col cols="12" sm="6" md="4" class="mt-4">
-          <mqtt-button class="btn" width="200" height="130" topic="/sound/playsound" message="good-response" rounded>
-            <v-icon size="100">mdi-check-circle-outline</v-icon>
-          </mqtt-button>
-        </v-col>
-        <v-col cols="12" sm="6" md="4" class="mt-4">
-          <mqtt-button class="btn" width="200" height="130" topic="/sound/playsound" message="bad-response" rounded>
-            <v-icon size="100">mdi-close-circle-outline</v-icon>
-          </mqtt-button>
-        </v-col>
-        <v-col cols="12" sm="6" md="4" class="mt-4">
-          <mqtt-button class="btn" width="200" height="130" topic="/sound/playsound" message="timer" rounded>
-            <v-icon size="100">mdi-timer-outline</v-icon>
-          </mqtt-button>
-        </v-col>
-      </v-row>
-      <v-row justify="center">
-        <v-col cols="12" sm="6" md="4" class="mb-4">
-          <mqtt-button class="btn" width="220" height="130" topic="/sound/playsound" message="applause" rounded>
-            <v-icon size="100">mdi-human-handsup</v-icon>
-          </mqtt-button>
-        </v-col>
-        <v-col cols="12" sm="6" md="s" class="mb-4">
-          <mqtt-button class="btn" width="220" height="130" topic="/sound/playsound" message="bell" rounded>
-            <v-icon size="100">mdi-bell-outline</v-icon>
-          </mqtt-button>
-        </v-col>
-      </v-row>
-    </v-container>
-  </v-card>
-</template>
-
-<script setup>
-  import MqttButton from './MqttButton.vue';
-</script>
--- a/src/components/GameStatus.vue
+++ b/src/components/GameStatus.vue
@ -1,9 +0,0 @@
-<template>
-  <v-navigation-drawer>
-    <v-list-item title="Brain Blast" subtitle="The cultural quizzzz"></v-list-item>
-    <v-divider></v-divider>
-    <v-list-item link title="List Item 1"></v-list-item>
-    <v-list-item link title="List Item 2"></v-list-item>
-    <v-list-item link title="List Item 3"></v-list-item>
-  </v-navigation-drawer>
-</template>
--- a/src/components/MQTTDebugConsole.vue
+++ b/src/components/MQTTDebugConsole.vue
@ -1,23 +0,0 @@
-<template>
-  <div>
-    <h1>Console MQTT</h1>
-    <div v-for="(message, index) in messages" :key="index">{{ message }}</div>
-  </div>
-</template>
-
-<script>
-import { subscribeToTopic } from '@/services/mqttService'
-
-export default {
-  data() {
-    return {
-      messages: [] // Initialiser un tableau pour stocker les messages MQTT
-    }
-  },
-  created() {
-    subscribeToTopic('#', (topic, message) => {
-      this.messages.push(`Topic: ${topic}, Message: ${message}`) // Ajouter le message à la liste des messages
-    }) // S'abonner à tous les topics MQTT
-  }
-}
-</script>
--- a/src/components/MQTTDebugPublish.vue
+++ b/src/components/MQTTDebugPublish.vue
@ -1,40 +0,0 @@
-<template>
-  <div>
-    <h1>Publier sur MQTT</h1>
-    <select v-model="selectedTopic">
-      <option v-for="topic in topics" :key="topic">{{ topic }}</option>
-    </select>
-    <input type="text" v-model="message" placeholder="Saisissez votre message" />
-    <button @click="publishMessage">Publier sur MQTT</button>
-  </div>
-</template>
-
-<script>
-import { publishMessage } from '@/services/mqttService'
-
-export default {
-  data() {
-    return {
-      message: '', // Initialiser la variable message
-      selectedTopic: 'topic1',
-      topics: [
-        'topic1',
-        'topic2',
-        'topic3',
-        'topic4',
-        'topic5',
-        'topic6',
-        'topic7',
-        'topic8',
-        'topic9',
-        'topic10'
-      ] // Liste des topics
-    }
-  },
-  methods: {
-    publishMessage() {
-      publishMessage(this.selectedTopic, this.message)
-    }
-  }
-}
-</script>
--- a/src/components/MqttButton.vue
+++ b/src/components/MqttButton.vue
@ -1,22 +0,0 @@
-<template>
-  <v-btn @click="_publishMessage" v-bind="$attrs">
-    <slot/>
-  </v-btn>
-</template>
-
-<script setup>
-  import { publishMessage } from '@/services/mqttService'
-  import { ref, defineProps } from 'vue'
-
-  const props = defineProps({
-    topic: String,
-    message: null
-  })
-
-  const disabled = ref(false)
-
-  const _publishMessage = () => {
-    publishMessage(props.topic, JSON.stringify(props.message))
-    disabled.value = true
-  }
-</script>
--- a/src/components/RouterMenu.vue
+++ b/src/components/RouterMenu.vue
@ -1,24 +0,0 @@
-<template>
-  <v-app-bar-nav-icon v-on:click="menu = !menu"></v-app-bar-nav-icon>
-  <v-menu v-model="menu" class="menu-below-bar">
-    <v-list>
-      <v-list-item v-for="route in routes" :key="route.name" :to="route.path">{{ route.name }}</v-list-item>
-    </v-list>
-  </v-menu>
-</template>
-
-<script setup>
-  import { ref } from 'vue'
-  import { useRouter } from 'vue-router'
-
-  const router = useRouter()
-  const routes = router.options.routes
-
-  let menu = ref(false)
-</script>
-
-<style scoped>
-  .menu-below-bar {
-    margin-top: 48px; /* La hauteur de la barre d'application */
-  }
-</style>
--- a/src/fetch.txt
+++ b/src/fetch.txt
@ -1 +0,0 @@
-test
--- a/src/plugins/router.js
+++ b/src/plugins/router.js
@ -1,38 +0,0 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
-
-const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
-  routes: [
-    {
-      path: '/',
-      name: 'Home',
-      component: HomeView
-    },
-    {
-      path: '/about',
-      name: 'About',
-      // route level code-splitting
-      // this generates a separate chunk (About.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
-      component: () => import('@/views/AboutView.vue')
-    },
-    {
-      path: '/game/control',
-      name: 'Game Control (Présentateur)',
-      component: () => import('@/views/GameControl.vue')
-    },
-    {
-      path: '/game/display',
-      name: 'Game Display (Projection)',
-      component: () => import('@/views/GameDisplay.vue')
-    },
-    {
-      path: '/mqtt-debugger',
-      name: 'Debugger MQTT',
-      component: () => import('@/views/MQTTDebugView.vue')
-    }
-  ]
-})
-
-export default router
--- a/src/plugins/vuetify.js
+++ b/src/plugins/vuetify.js
@ -1,40 +0,0 @@
-/**
- * plugins/vuetify.js
- *
- * Framework documentation: https://vuetifyjs.com`
- */
-
-// Styles
-import '@mdi/font/css/materialdesignicons.css'
-import 'vuetify/styles'
-
-// Composables
-import { createVuetify } from 'vuetify'
-
-// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
-export default createVuetify({
-  theme: {
-    themes: {
-      light: {
-        background: '#212121',
-        primary: '#cc0000',
-        controls: '#cc0000',
-        soundboard: '#9A2779',
-        secondary: '#b0bec5',
-        feedback: '#2E7D32',
-        accent: '#8c9eff',
-        error: '#b71c1c',
-      },
-      dark: {
-        background: '#121212',
-        primary: '#2979FF',
-        controls: '#AB47B',
-        secondary: '#90a4ae',
-        feedback: '#2E7D32',
-        accent: '#8c9eff',
-        error: '#b71c1c',
-      },
-    },
-    defaultTheme: 'dark',
-  }
-})
--- a/src/views/AboutView.vue
+++ b/src/views/AboutView.vue
@ -1,24 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-    <hr/>
-    <p>
-      Exemple d'une page
-    </p><p>
-      Ou il y a un scroll
-    </p><p>
-      Pour mettre en valeur leu footer fixe en bas de page
-    </p><p>
-      Cette page n'a aucun interet et pourra etre supprimée
-    </p>
-  </div>
-</template>
-
-<style>
-@media (min-width: 1024px) {
-  .about {
-    min-height: 100vh;
-    align-items: center;
-  }
-}
-</style>
--- a/src/views/GameControl.vue
+++ b/src/views/GameControl.vue
@ -1,42 +0,0 @@
-<template>
-<v-container>
-  <v-row no-gutters>
-    <v-col class="align-start">
-      <card-control />
-    </v-col>
-    <v-col class="pl-3">
-      <card-soundboard />
-    </v-col>
-  </v-row>
-</v-container>
-<v-container>
-  <v-row no-gutters>
-    <v-col>
-      <card-solution />
-    </v-col>
-  </v-row>
-</v-container>
-</template>
-
-<script setup>
-
-import CardSolution from '@/components/CardSolution.vue'
-import CardControl from '@/components/CardControl.vue'
-import CardSoundboard from '@/components/CardSoundboard.vue';
-
-</script>
-
-<style>
-@media (min-width: 1024px) {
-  .card__title.primary {
-      background-color: #2979FF; /* Changez la couleur en fonction de votre thème */
-  }
-  .card__title.feedback {
-      background-color: #2E7D32; /* Changez la couleur en fonction de votre thème */
-  }
-  .btn{
-    border-radius:30px!important;
-    background-color: #2979FF; /* Changez la couleur en fonction de votre thème */
-  }
-}
-</style>
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@ -1,11 +0,0 @@
-<template>
-    <v-img width="1645" src="../assets/BrainBlast-For-HomeView-Alpha.png"></v-img>
-</template>
-
-<script>
-export default {
-  name: 'VotreComposant', // Assurez-vous de donner un nom à votre composant
-  // Votre logique JavaScript ici, par exemple des méthodes, des données, etc.
-};
-</script>
-
--- a/src/views/MQTTDebugView.vue
+++ b/src/views/MQTTDebugView.vue
@ -1,21 +0,0 @@
-<template>
-  <div>
-    <!-- Zone pour publier sur MQTT -->
-    <PublishMQTTComponent />
-
-    <!-- Zone pour afficher la console MQTT -->
-    <MQTTConsoleComponent />
-  </div>
-</template>
-
-<script>
-import PublishMQTTComponent from '@/components/MQTTDebugPublish.vue' // Importer le composant pour publier sur MQTT
-import MQTTConsoleComponent from '@/components/MQTTDebugConsole.vue' // Importer le composant pour la console MQTT
-
-export default {
-  components: {
-    PublishMQTTComponent, // Composant pour publier sur MQTT
-    MQTTConsoleComponent // Composant pour la console MQTT
-  }
-}
-</script>
--- a/ui/README.md
+++ b/ui/README.md
--- a/ui/index.html
+++ b/ui/index.html
@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html lang="fr">
+  <head> <meta charset="UTF-8"> <link rel="icon" href="/favicon.ico"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Brain Blast</title>
+  </head>
+  <body> <div id="app"></div> <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
--- a/ui/jsconfig.json
+++ b/ui/jsconfig.json
@ -0,0 +1,5 @@
+{
+  "compilerOptions": { "paths": {   "@/*": ["./src/*"] }
+  },
+  "exclude": ["node_modules", "dist"]
+}
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
--- a/ui/package.json
+++ b/ui/package.json
@ -1,10 +1,11 @@
 {
  "name": "brain-blast",
  "version": "0.0.0",
-  "private": true,
+  "private": false,
  "type": "module",
  "scripts": {
    "dev": "vite",
+    "dev-complete": "concurrently \"vite\" \"node ./src/services/buzzerWatcher.js\"",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
@ -12,20 +13,24 @@
  },
  "dependencies": {
    "@mdi/font": "^7.4.47",
+    "express": "^5.0.0",
    "mqtt": "^5.3.5",
+    "ping": "^0.4.4",
    "roboto-fontface": "^0.10.0",
    "vue": "^3.4.19",
-    "vue-router": "^4.2.5"
+    "vue-router": "^4.2.5",
+    "vuex": "^4.1.0"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.3.3",
    "@vitejs/plugin-vue": "^5.0.3",
    "@vue/eslint-config-prettier": "^8.0.0",
+    "concurrently": "^8.2.2",
    "eslint": "^8.49.0",
    "eslint-plugin-vue": "^9.17.0",
    "prettier": "^3.0.3",
    "unplugin-fonts": "^1.1.1",
-    "vite": "^5.1.4",
+    "vite": "^5.1.6",
    "vite-plugin-vuetify": "^2.0.1"
  }
 }
--- a/ui/public/favicon.ico
+++ b/ui/public/favicon.ico
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@ -0,0 +1,27 @@
+<template>
+  <v-app> 
+    <BrainBlastBar />   
+    <GameStatus v-if="$route.name === 'Game Control (Présentateur)'">
+    </GameStatus> 
+    <v-main>   
+      <RouterView /> 
+    </v-main> <!-- <v-footer class="footer" :elevation=12 border><v-row justify="center">© 2024 - ASCO section Fablab</v-row></v-footer> -->
+  </v-app>
+</template>
+
+<script setup>
+
+import BrainBlastBar from '@/components/BrainBlastBar.vue'
+import GameStatus from '@/components/GameStatus.vue'
+
+</script>
+
+<style scoped>
+  .footer { 
+    position: fixed; /* Fixe le footer en bas de la page */ 
+    bottom: 0; /* Aligne le footer en bas de la page */ 
+    left: 0; /* Aligne le footer à gauche */ 
+    width: 100%; /* Ajuste la largeur du footer en fonction de la largeur de l'écran */ 
+    z-index: 1000; /* Assure que le footer est au-dessus des autres éléments */
+  }
+</style>
--- a/ui/src/assets/BrainBlast-Ai-Upscaled.jpg
+++ b/ui/src/assets/BrainBlast-Ai-Upscaled.jpg
--- a/ui/src/assets/BrainBlast-For-HomeView-Alpha.png
+++ b/ui/src/assets/BrainBlast-For-HomeView-Alpha.png
--- a/ui/src/assets/BrainBlast-For-HomeView.jpg
+++ b/ui/src/assets/BrainBlast-For-HomeView.jpg
--- a/ui/src/assets/copilot-solution-.jpg
+++ b/ui/src/assets/copilot-solution-.jpg
--- a/ui/src/assets/copilot-solution-FULL-HD.jpg
+++ b/ui/src/assets/copilot-solution-FULL-HD.jpg
--- a/ui/src/assets/copilot-solution-UPSCALE.jpg
+++ b/ui/src/assets/copilot-solution-UPSCALE.jpg
--- a/ui/src/assets/design.png
+++ b/ui/src/assets/design.png
--- a/ui/src/components/BrainBlastBar.vue
+++ b/ui/src/components/BrainBlastBar.vue
@ -0,0 +1,10 @@
+<template>
+  <v-app-bar :elevation="5" height="50"> 
+    <RouterMenu /> 
+    <v-app-bar-title v-if="$route.name !== 'Accueil'">Brain Blast</v-app-bar-title>
+  </v-app-bar>
+</template>
+
+<script setup>
+  import RouterMenu from '@/components/RouterMenu.vue'
+</script>
--- a/ui/src/components/CardButtonScore.vue
+++ b/ui/src/components/CardButtonScore.vue
@ -0,0 +1,114 @@
+<template>
+  <v-card tile outlined :class="{ 'card--reduced': isCardReduced }">
+    <v-card-title class="card__title primary" @click="toggleCardSize">
+      <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" message="TEAM_RED-2"rounded>
+            <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" message="TEAM_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" message="TEAM_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" message="TEAM_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" message="TEAM_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" message="TEAM_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" message="TEAM_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" message="TEAM_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 orange card xs12 sm6 md3 " topic="/game/score" message="TEAM_ORANGE-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 orange card xs12 sm6 md3 " topic="/game/score" message="TEAM_ORANGE-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 orange card xs12 sm6 md3 " topic="/game/score" message="TEAM_ORANGE+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 orange card xs12 sm6 md3 " topic="/game/score" message="TEAM_ORANGE+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" message="TEAM_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" message="TEAM_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" message="TEAM_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" message="TEAM_GREEN+2">
+            <v-icon left size="40">mdi-plus-box-multiple</v-icon>
+          </mqtt-button>
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-card>
+</template>
+
+<script setup>
+  import MqttButton from './MqttButton.vue';
+  import { ref } from 'vue';
+
+  // Variable pour contrôler l'état de la carte
+  const isCardReduced = ref(false);
+
+  // Méthode pour basculer l'état de la carte
+  function toggleCardSize() {
+    isCardReduced.value = !isCardReduced.value;
+  }
+</script>
+
+<style>
+  .card--reduced {
+    height: 56px; /* Réglez la hauteur réduite selon vos besoins */
+    width: 170px;
+    overflow: hidden;
+    transition: height 0.3s ease-in-out;
+  }
+</style>
--- a/ui/src/components/CardControl.vue
+++ b/ui/src/components/CardControl.vue
@ -0,0 +1,34 @@
+<template>
+  <v-card tile outlined :class="{ 'card--reduced': isCardReduced }"> 
+    <v-card-title class="card__title primary" @click="toggleCardSize">   
+      <v-icon left class="white--text pr-5 pl-2" size="40">mdi-camera-control</v-icon>   
+      Contrôle du jeu 
+    </v-card-title> 
+    <v-container class="text-center">   
+      <v-row justify="center">     
+        <v-col cols="12" sm="6" md="5" class="mt-4">       
+          <mqtt-button width="150" height="90" class="btn red" topic="/display/control" message="previous">         
+            <v-icon left size="60">mdi-skip-previous</v-icon>       
+          </mqtt-button>     
+        </v-col>     
+        <v-col cols="12" sm="6" md="5" class="mt-4">       
+          <mqtt-button width="150" height="90" class="btn red card" topic="/display/control" message="next">         <v-icon left size="60">mdi-skip-next</v-icon>       </mqtt-button>     </v-col>     <v-col cols="12" sm="6" md="5" class="mb-4">       <mqtt-button width="150" height="90" class="btn red card" topic="/display/control" message="pause">         <v-icon left size="60">mdi-pause</v-icon>       </mqtt-button>     </v-col>     <v-col cols="12" sm="6" md="5" class="mb-4">       <mqtt-button width="150" height="90" class="btn red card" topic="/display/control" message="play">         <v-icon left size="60">mdi-play</v-icon>       </mqtt-button>     </v-col>   </v-row> </v-container>
+  </v-card>
+</template>
+
+<script setup>
+  import MqttButton from './MqttButton.vue';
+  import { ref } from 'vue';
+
+  // Variable pour contrôler l'état de la carte
+  const isCardReduced = ref(false);
+
+  // Méthode pour basculer l'état de la carte
+  function toggleCardSize() { isCardReduced.value = !isCardReduced.value;
+  }
+</script>
+
+<style>
+.card--reduced { height: 56px; /* Réglez la hauteur réduite selon vos besoins */ width: 170px; overflow: hidden; transition: height 0.3s ease-in-out;
+  }
+</style>
--- a/ui/src/components/CardScore.vue
+++ b/ui/src/components/CardScore.vue
@ -0,0 +1,45 @@
+<template> <div class="label-pos">     <v-label class="labelTitle-style pb-4">Scores</v-label> </div>
+ <!-- Équipes Rouges et Bleues côte à côte --> <v-row no-gutters class="scorebox-pos">     <!-- Équipe Rouge -->     <v-col cols="6"> <!-- Colonnes de taille 6 pour chaque équipe -->     <v-row no-gutters>         <v-col class="scorediv-style-red">         <div>             <v-label class="labelRoundScore-style pt-3">Manche</v-label>             <div>             <v-label class="labelRoundScore-style">{{ RedRoundScore }}</v-label>             </div>         </div>         <v-divider color="background"/>         <div>             <v-label class="labelTotalScore-style pt-3">Total</v-label>             <div>             <v-label class="labelTotalScore-style pb-3">{{ RedTotalScore }}</v-label>             </div>         </div>         </v-col>     </v-row>     </v-col>
+     <!-- Équipe Bleue -->     <v-col cols="6">     <v-row no-gutters>         <v-col class="scorediv-style-blue">         <div>             <v-label class="labelRoundScore-style pt-3">Manche</v-label>             <div>             <v-label class="labelRoundScore-style">{{ BlueRoundScore }}</v-label>             </div>         </div>         <v-divider color="background"/>         <div>             <v-label class="labelTotalScore-style pt-3">Total</v-label>             <div>             <v-label class="labelTotalScore-style pb-3">{{ BlueTotalScore }}</v-label>             </div>         </div>         </v-col>     </v-row>     </v-col> </v-row>
+ <!-- Équipes Oranges et Vertes côte à côte --> <v-row no-gutters class="scorebox-pos">     <!-- Équipe Orange -->     <v-col cols="6">     <v-row no-gutters>         <v-col class="scorediv-style-orange">         <div>             <v-label class="labelRoundScore-style pt-3">Manche</v-label>             <div>             <v-label class="labelRoundScore-style">{{ OrangeRoundScore }}</v-label>             </div>         </div>         <v-divider color="background"/>         <div>             <v-label class="labelTotalScore-style pt-3">Total</v-label>             <div>             <v-label class="labelTotalScore-style pb-3">{{ OrangeTotalScore }}</v-label>             </div>         </div>         </v-col>     </v-row>     </v-col>
+     <!-- Équipe Verte -->     <v-col cols="6">     <v-row no-gutters>         <v-col class="scorediv-style-green">         <div>             <v-label class="labelRoundScore-style pt-3">Manche</v-label>             <div>             <v-label class="labelRoundScore-style">{{ GreenRoundScore }}</v-label>             </div>         </div>         <v-divider color="background"/>         <div>             <v-label class="labelTotalScore-style pt-3">Total</v-label>             <div>             <v-label class="labelTotalScore-style pb-3">{{ GreenTotalScore }}</v-label>             </div>         </div>         </v-col>     </v-row>     </v-col> </v-row>
+</template>
+
+<script setup>
+import { ref } from 'vue'; // Import des fonctions de Vue 3
+import variables from '@/variables.js';
+
+// Déclaration des variables locales pour les scores
+const RedTotalScore = ref(variables.RedTotalScore);
+const BlueTotalScore = ref(variables.BlueTotalScore);
+const OrangeTotalScore = ref(variables.OrangeTotalScore);
+const GreenTotalScore = ref(variables.GreenTotalScore);
+const RedRoundScore = ref(variables.RedRoundScore);
+const BlueRoundScore = ref(variables.BlueRoundScore);
+const OrangeRoundScore = ref(variables.OrangeRoundScore);
+const GreenRoundScore = ref(variables.GreenRoundScore);
+
+</script>
+
+<style>
+  .label-pos { padding-top: 15px; text-align: center;
+  }
+  .labelTitle-style { font-size: 20px !important; font-weight: 500; color: #d42828 !important; opacity: 90% !important;
+  }
+  .labelRoundScore-style { opacity: 100% !important; font-size: 25px !important; font-weight: 500;
+  }
+  .labelTotalScore-style { opacity: 100% !important; font-size: 15px !important; font-weight: 500;
+  }
+  .button-pos { padding-top: 10px; padding-bottom: 15px;
+  }
+  .scorebox-pos { text-align: center;
+  }
+  .scorediv-style-red { background-color: #d42828 !important; padding: 15px; border-top-left-radius: 10%;
+  }
+  .scorediv-style-orange { background-color: #d48f28 !important; padding: 15px; border-bottom-left-radius: 10%;
+  }
+  .scorediv-style-blue { background-color: #2867d4 !important; padding: 15px; border-top-right-radius: 10%;    
+  }
+  .scorediv-style-green { background-color: #28d42e !important; padding: 15px; border-bottom-right-radius: 10%;
+  }
+</style>
--- a/ui/src/components/CardSolution.vue
+++ b/ui/src/components/CardSolution.vue
@ -0,0 +1,46 @@
+<template>
+	<v-card tile outlined :class="{ 'card--reduced': isCardReduced }"> 
+		<v-card-title class="card__title primary" @click="toggleCardSize">   
+		<v-icon left class="white--text pr-5 pl-2" size="40">mdi-play-network-outline</v-icon>   
+		Solution </v-card-title> 
+		<v-container class="text-center">   
+			<v-row justify="center">     
+				<v-container class="text-center">       <!-- Utilisation de styles CSS personnalisés pour centrer l'image -->       
+					<v-img width="450" src="@/assets/copilot-solution-FULL-HD.jpg" style="margin: 0 auto;">
+					</v-img>     
+				</v-container>   
+			</v-row> 
+		</v-container>
+	</v-card>
+</template>
+<style>
+@media (min-width: 1024px) {
+	.image-container { 
+		width: 300px; overflow: hidden; /* Pour masquer le dépassement de l'image */ 
+		border: 1px solid #ccc; /* Bordure de l'image */
+	}
+	.image-container img { 
+		width: 100%; /* Pour remplir complètement le conteneur */ 
+		height: auto; /* Pour maintenir le ratio d'aspect de l'image */ 
+		display: block; /* Pour éviter l'espace réservé pour les images */
+	}
+	}
+	.card--reduced { 
+		height: 56px; /* Réglez la hauteur réduite selon vos besoins */ 
+		width: 160px; 
+		overflow: hidden; 
+		transition: height 0.6s ease-in-out;
+	}
+</style>
+
+<script setup>
+	import { ref } from 'vue';
+
+	// Variable pour contrôler l'état de la carte
+	const isCardReduced = ref(false);
+
+	// Méthode pour basculer l'état de la carte
+	function toggleCardSize() { 
+		isCardReduced.value = !isCardReduced.value;
+	}
+</script>
--- a/ui/src/components/CardSoundboard.vue
+++ b/ui/src/components/CardSoundboard.vue
@ -0,0 +1,61 @@
+<template>
+  <v-card tile outlined :class="{ 'card--reduced': isCardReduced }"> 
+    <v-card-title class="card__title primary" @click="toggleCardSize">   
+      <v-icon left class="white--text pr-5 pl-2" size="40">mdi-music-box-multiple</v-icon>   
+      Soundboard 
+    </v-card-title> 
+    <v-container class="text-center">
+      <v-row justify="center">    
+        <v-col cols="12" sm="6" md="4" class="mt-4">       
+          <mqtt-button class="btn red" width="150" height="90" topic="/sound/playsound" message="good-response" rounded>         
+            <v-icon size="60">mdi-check-circle-outline</v-icon>       
+          </mqtt-button>     
+        </v-col>     
+        <v-col cols="12" sm="6" md="4" class="mt-4">       
+          <mqtt-button class="btn red" width="150" height="90" topic="/sound/playsound" message="bad-response" rounded>         
+            <v-icon size="60">mdi-close-circle-outline</v-icon>       
+          </mqtt-button>     
+        </v-col>     
+        <v-col cols="12" sm="6" md="4" class="mt-4">       
+          <mqtt-button class="btn red" width="150" height="90" topic="/sound/playsound" message="timer" rounded>         
+            <v-icon size="60">mdi-timer-outline</v-icon>       
+          </mqtt-button>     
+        </v-col>   
+      </v-row>   
+      <v-row justify="center">     
+        <v-col cols="12" sm="6" md="4" class="mb-4">       
+          <mqtt-button class="btn red" width="150" height="90" topic="/sound/playsound" message="applause" rounded>         
+            <v-icon size="60">mdi-human-handsup</v-icon>       
+          </mqtt-button>     
+        </v-col>     
+        <v-col cols="12" sm="6" md="4" class="mb-4">       
+          <mqtt-button class="btn red" width="150" height="90" topic="/sound/playsound" message="bell" rounded>         
+            <v-icon size="60">mdi-bell-outline</v-icon>       
+          </mqtt-button>     
+        </v-col>   
+      </v-row> 
+    </v-container>
+  </v-card>
+</template>
+
+<script setup>
+  import MqttButton from './MqttButton.vue';
+  import { ref } from 'vue';
+
+  // Variable pour contrôler l'état de la carte
+  const isCardReduced = ref(false);
+
+  // Méthode pour basculer l'état de la carte
+  function toggleCardSize() { 
+    isCardReduced.value = !isCardReduced.value;
+  }
+</script>
+
+<style scoped>
+  .card--reduced { 
+    height: 56px; /* Réglez la hauteur réduite selon vos besoins */ 
+    width: 190px; 
+    overflow: hidden; 
+    transition: height 0.3s ease-in-out;
+  }
+</style>
--- a/ui/src/components/CardTimer.vue
+++ b/ui/src/components/CardTimer.vue
@ -0,0 +1,100 @@
+<template> 
+    <div class="container">   
+        <div class="timer">     
+            <v-label color="primary" class="labelTime-style" >{{ formatTime }}</v-label> 
+        </div>
+        <v-row no-gutters justify="space-around" >     
+            <v-btn class="buttons" color="primary" icon="mdi-play" @click="startTimer"></v-btn>     
+            <v-btn color="primary"  icon="mdi-pause" @click="pauseTimer"></v-btn>     
+            <v-btn color="primary" icon="mdi-restart" @click="resetTimer"></v-btn>   
+        </v-row> 
+    </div>
+</template>
+  
+<script setup>
+  import { ref, computed, onBeforeUnmount } from 'vue';
+  
+  const timerActive = ref(false);
+  const startTime = ref(null);
+  const currentTime = ref(null);
+  const elapsedTime = ref(0);
+  
+  const formatTime = computed(() => { 
+    let seconds = Math.floor(elapsedTime.value / 1000); 
+    let minutes = Math.floor(seconds / 60); 
+    let hours = Math.floor(minutes / 60);
+    seconds = seconds % 60; minutes = minutes % 60;
+   return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
+    });
+
+    const pad = (number) => { 
+        return (number < 10 ? "0" : "") + number;
+    };
+
+    const startTimer = () => { 
+        if (!timerActive.value) {   
+            timerActive.value = true;   
+            startTime.value = Date.now() - elapsedTime.value;   
+            updateTimer(); }
+    };
+
+    const pauseTimer = () => { 
+        if (timerActive.value) {   
+            timerActive.value = false;   
+            clearInterval(currentTime.value); }
+    };
+
+    const resetTimer = () => { 
+        elapsedTime.value = 0; 
+        timerActive.value = false; 
+        clearInterval(currentTime.value);
+    };
+
+    const updateTimer = () => { 
+        currentTime.value = setInterval(() => {elapsedTime.value = Date.now() - startTime.value; }, 1000);
+    };
+
+    onBeforeUnmount(() => { clearInterval(currentTime.value);
+    });
+</script> 
+<script> 
+	const startTimer = () => { 
+		if (!timerActive.value) {     
+			timerActive.value = true;     
+			startTime.value = Date.now() - elapsedTime.value;     
+			updateTimer(); } };
+	const pauseTimer = () => { 
+		if (timerActive.value) {     
+			timerActive.value = false;     
+			clearInterval(currentTime.value); } };
+	const resetTimer = () => { 
+		elapsedTime.value = 0;
+		timerActive.value = false; 
+		clearInterval(currentTime.value); };
+	export { startTimer, pauseTimer, resetTimer };
+</script>
+
+<style>
+	.container { 
+		text-align: center; 
+		margin-top: auto; /* Place le container en bas de son parent */ 
+		margin-bottom: 1px; /* Marge en bas pour un espacement */ 
+		position: fixed; /* Le positionne de manière fixe */ 
+		left: 0; 
+		right: 0; 
+		bottom: 0; 
+		padding: 20px;
+  }
+  .timer { 
+		margin-bottom: 15px;
+  }
+  .labelTime-style { 
+		font-size: 30px !important; 
+		font-weight: 500; 
+		color: #d42828 !important; 
+		opacity: 90% !important;
+  }
+  .buttons{ 
+		background-color: rgb(255, 255, 255);
+  }
+</style>
--- a/ui/src/components/GameStatus.vue
+++ b/ui/src/components/GameStatus.vue
@ -0,0 +1,41 @@
+<template>
+	<v-navigation-drawer width="250"> <!-- Augmenter la largeur pour deux équipes côte à côte --> 
+	<div class="label-pos">
+		<v-label class="labelTitle-style">Buzzer connectés</v-label>
+	</div>
+	<v-row no-gutters justify="space-around" class="button-pos">
+		<v-icon color="BuzzerRed">mdi-radiobox-marked</v-icon>   
+		<v-icon color="BuzzerBlue">mdi-radiobox-marked</v-icon>   
+		<v-icon color="BuzzerOrange">mdi-radiobox-marked</v-icon>   
+		<v-icon color="BuzzerGreen">mdi-radiobox-marked</v-icon> 
+	</v-row>
+	<v-divider :thickness="2" class="border-opacity-100" color="primary"/>
+	<CardScore/>
+	<CardTimer/>
+	</v-navigation-drawer>
+</template>
+
+<script setup>
+	import CardTimer from '@/components/CardTimer.vue'
+	import CardScore from '@/components/CardScore.vue'
+	import { ref } from 'vue'; // Import des fonctions de Vue 3
+	import variables from '@/variables.js';
+
+</script>
+
+<style>
+	.label-pos { 
+		padding-top: 15px; 
+		text-align: center;
+	}
+	.labelTitle-style { 
+		font-size: 20px !important; 
+		font-weight: 500; 
+		color: #e91e1e !important; 
+		opacity: 90% !important;
+	}
+	.button-pos { 
+		padding-top: 10px; 
+		padding-bottom: 15px;
+	}
+</style>
--- a/ui/src/components/MQTTDebugConsole.vue
+++ b/ui/src/components/MQTTDebugConsole.vue
@ -0,0 +1,58 @@
+<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="40">mdi-console-line</v-icon>     
+            Console MQTT   
+         </v-card-title>   
+         <v-container class="text-center">     
+            <div v-for="(log, index) in messageLogs" :key="index">       
+               <v-label class="v-label-timestamp">{{ log.timestamp }} </v-label>        -        
+               <v-label>{{ log.message }}</v-label>     
+            </div>   
+         </v-container> 
+      </v-card>
+   </v-container>
+</template>
+
+<script>
+   import { subscribeToTopic } from '@/services/mqttService'
+
+   export default {
+   data() { return {   
+         messageLogs: [] // Initialiser un tableau pour stocker les messages MQTT avec horodatage 
+      }
+   },
+   created() { subscribeToTopic('#', (topic, message) => {   // Obtenir l'horodatage actuel   
+      const timestamp = new Date().toLocaleString('fr-FR', {     
+         hour12: false,     
+         hour: '2-digit',     
+         minute: '2-digit',     
+         second: '2-digit'   
+      });
+      
+      // Ajouter le message avec l'horodatage à la liste des messages   
+      this.messageLogs.push({ timestamp, message: `Topic: ${topic}, Message: ${message}` });
+      
+      // Limiter la liste à 10 messages   
+      if (this.messageLogs.length > 10) {     
+      this.messageLogs.shift(); // Supprimer le premier élément (le plus ancien)   
+      } }) // S'abonner à tous les topics MQTT
+   }
+   }
+</script>
+
+<style>
+  .v-container-style { 
+   display: flex; 
+   justify-content: center;
+  }
+  .centered-title { 
+   text-align: center;
+  }
+  .v-label-timestamp{ 
+   opacity: 100%; 
+   font-weight: 700; 
+    color: #d42828;
+  }
+</style>
--- a/ui/src/components/MQTTDebugPublish.vue
+++ b/ui/src/components/MQTTDebugPublish.vue
@ -0,0 +1,52 @@
+<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 class="v-btn-style" height="50" @click="publishMessage">Publier</v-btn>   
+    </v-card> 
+  </v-container>
+
+</template>
+
+<script>
+import { publishMessage } from '@/services/mqttService'
+
+export default {
+  data() { return {   message: '', // Initialiser la variable message   
+    selectedTopic: 'topic1',   
+    topics: [     '/display/control',     '/sound/playsound',     'topic3',     'topic4',     'topic5',     'topic6',     'topic7',     'topic8',     'topic9',     'topic10'   ] // Liste des topics 
+  }
+},
+  methods: { 
+    publishMessage() {   
+      publishMessage(this.selectedTopic, this.message) }
+  }
+}
+</script>
+
+<style>
+  .v-container-style { 
+    align-items: center; 
+    justify-content: center;
+  }
+  .input-style{ 
+    margin: 20px;
+  }
+  .v-btn-style{ 
+    align-items: center; 
+    justify-content: center; 
+    width: 100%; 
+    background-color: #d42828; /* Changez la couleur en fonction de votre thème */ 
+    border-top-right-radius: 0%; 
+    border-top-left-radius: 0%;
+  }
+  .centered-title { 
+    text-align: center;
+  }
+</style>
--- a/ui/src/components/MqttButton.vue
+++ b/ui/src/components/MqttButton.vue
@ -0,0 +1,22 @@
+<template>
+	<v-btn @click="_publishMessage" v-bind="$attrs"> 
+		<slot/>
+	</v-btn>
+</template>
+
+<script setup>
+	import { publishMessage } from '@/services/mqttService'
+	import { ref, defineProps } from 'vue'
+
+	const props = defineProps({ 
+		topic: String, 
+		message: null
+	})
+
+	const disabled = ref(false)
+
+	const _publishMessage = () => { 
+		publishMessage(props.topic, JSON.stringify(props.message)) 
+		disabled.value = true
+	}
+</script>
--- a/ui/src/components/RouterMenu.vue
+++ b/ui/src/components/RouterMenu.vue
@ -0,0 +1,29 @@
+<template>
+  <v-app-bar-nav-icon v-on:click="menu = !menu"></v-app-bar-nav-icon>
+  <v-menu v-model="menu" class="menu-below-bar"> 
+    <v-list>   
+      <v-list-item v-for="route in filteredRoutes" :key="route.name" :to="route.path">{{ route.name }}</v-list-item> 
+    </v-list>
+  </v-menu>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+const routes = router.options.routes;
+
+let menu = ref(false);
+
+// Filtrer les routes pour masquer une route spécifique (par exemple, 'RouteA')
+const filteredRoutes = computed(() => {
+  return routes.filter(route => route.name !== 'Debugger MQTT');
+});
+</script>
+
+<style scoped>
+.menu-below-bar {
+  margin-top: 48px; /* La hauteur de la barre d'application */
+}
+</style>
--- a/ui/src/config.js
+++ b/ui/src/config.js
@ -0,0 +1,16 @@
+// Fichier vide, regarde config.js.example pour personaliser ce fichier.
+// Note de dev : Normalement ce fichier ne devrait plus avoir de
+// modifications
+
+// config.js
+export default {
+  mqttBrokerUrl: 'ws://192.168.1.78:9001',
+
+  // Buzzer
+  redBuzzerIP: '',
+  blueBuzzerIP: '',
+  orangeBuzzerIP: '',
+  greenBuzzerIP: ''
+
+  // Light
+};
--- a/ui/src/config.js.example
+++ b/ui/src/config.js.example
--- a/ui/src/main.js
+++ b/ui/src/main.js
--- a/ui/src/plugins/README.md
+++ b/ui/src/plugins/README.md
--- a/ui/src/plugins/index.js
+++ b/ui/src/plugins/index.js
--- a/ui/src/plugins/router.js
+++ b/ui/src/plugins/router.js
@ -0,0 +1,33 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import HomeView from '../views/HomeView.vue'
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [ {   
+    path: '/',   
+    name: 'Accueil',   
+    component: HomeView 
+  }, 
+  {   
+    path: '/game/control',  
+    name: 'Game Control (Présentateur)',   
+    component: () => import('@/views/GameControl.vue') 
+  }, 
+  {   
+    path: '/game/display',   
+    name: 'Game Display (Projection)',   
+    component: () => import('@/views/GameDisplay.vue') 
+  }, 
+  {   
+    path: '/mqtt-debugger',   
+    name: 'Debugger MQTT',   
+    component: () => import('@/views/MQTTDebugView.vue') 
+  }, 
+  {   
+    path: '/settings',   
+    name: 'Paramètres',   
+    component: () => import('@/views/SettingsView.vue') }
+  ]
+})
+
+export default router
--- a/ui/src/plugins/vuetify.js
+++ b/ui/src/plugins/vuetify.js
@ -0,0 +1,57 @@
+/**
+ * plugins/vuetify.js
+ *
+ * Framework documentation: https://vuetifyjs.com`
+ */
+
+// Styles
+import '@mdi/font/css/materialdesignicons.css'
+import 'vuetify/styles'
+
+// Composables
+import { createVuetify } from 'vuetify'
+
+const CustomThemeDark = {
+  dark: true,
+  colors: { 
+    background: '#121212', 
+    primary: '#d42828', 
+    secondary: '#F44336', 
+    accent: '#FFC107', 
+    error: '#e91e1e', 
+    warning: '#FFC107', 
+    info: '#607D8B', 
+    success: '#e91e1e', 
+    BuzzerBlue: '#2867d4', 
+    BuzzerOrange: '#d48f28', 
+    BuzzerRed: '#d42828', 
+    BuzzerGreen: '#28d42e',
+  }
+}
+const CustomThemeLight = {
+  dark: false,
+  colors: { 
+    background: '#ffffff', 
+    primary: '#d42828', 
+    secondary: '#F44336', 
+    accent: '#FFC107', 
+    error: '#e91e1e', 
+    warning: '#FFC107', 
+    info: '#607D8B', 
+    success: '#4CAF50', 
+    BuzzerBlue: '#2867d4', 
+    BuzzerOrange: '#d48f28', 
+    BuzzerRed: '#d42828', 
+    BuzzerGreen: '#28d42e',
+  }
+}
+
+// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
+export default createVuetify({
+  theme: { 
+    defaultTheme: 'CustomThemeDark', 
+    themes: {   
+      CustomThemeDark,   
+      CustomThemeLight, },
+  },
+})
--- a/ui/src/quizz/geography-history/Q-1.jpeg
+++ b/ui/src/quizz/geography-history/Q-1.jpeg
--- a/ui/src/quizz/geography-history/Q-2.jpeg
+++ b/ui/src/quizz/geography-history/Q-2.jpeg
--- a/ui/src/quizz/geography-history/Q-3.jpeg
+++ b/ui/src/quizz/geography-history/Q-3.jpeg
--- a/ui/src/quizz/geography-history/Q-4.jpeg
+++ b/ui/src/quizz/geography-history/Q-4.jpeg
--- a/ui/src/quizz/geography-history/Q-5.jpeg
+++ b/ui/src/quizz/geography-history/Q-5.jpeg
--- a/ui/src/quizz/geography-history/config.yml
+++ b/ui/src/quizz/geography-history/config.yml
@ -0,0 +1,27 @@
+name: "Histoire & Géographie"
+questions:  
+  1:
+    Q:  "Quelle bataille célèbre s'est déroulée en 1815, marquant la défaite de Napoléon Bonaparte ?"
+    T:  "Elle a eu lieu en Belgique"
+    R:  "La bataille de Waterloo."
+    P:  "Q-1.jpeg"
+  2:
+    Q:  "Quelle est la capitale de l'Australie ?"
+    T:  "Le nom de cette ville commence par la lettre 'C'"
+    R:  "Canberra."
+    P:  "Q-2.jpeg"
+  3:
+    Q:  "En quelle année la Seconde Guerre mondiale a-t-elle pris fin ?"
+    T:  "C'est au milieu des années 40."
+    R:  "En 1945."
+    P:  "Q-3.jpeg"
+  4:
+    Q:  "Quel fleuve traverse la ville du Caire en Égypte ?"
+    T:  "C'est l'un des plus longs fleuves du monde"
+    R:  "Le Nil."
+    P:  "Q-4.jpeg"
+  5:
+    Q:  "Quel pays a été divisé par un mur de 1961 à 1989 ?"
+    T:  "Sa chute a marqué la fin de la guerre froide."
+    R:  "L'Allemagne (le mur de Berlin)."
+    P:  "Q-5.jpeg"
--- a/ui/src/quizz/geography-history/originales/Q-1.webp
+++ b/ui/src/quizz/geography-history/originales/Q-1.webp
--- a/ui/src/quizz/geography-history/originales/Q-2.webp
+++ b/ui/src/quizz/geography-history/originales/Q-2.webp
--- a/ui/src/quizz/geography-history/originales/Q-3.webp
+++ b/ui/src/quizz/geography-history/originales/Q-3.webp
--- a/ui/src/quizz/geography-history/originales/Q-4.webp
+++ b/ui/src/quizz/geography-history/originales/Q-4.webp
--- a/ui/src/quizz/geography-history/originales/Q-5.webp
+++ b/ui/src/quizz/geography-history/originales/Q-5.webp
--- a/ui/src/quizz/movies-series/config.yml
+++ b/ui/src/quizz/movies-series/config.yml
--- a/ui/src/quizz/music/config.yml
+++ b/ui/src/quizz/music/config.yml
--- a/ui/src/quizz/nature-animals/config.yml
+++ b/ui/src/quizz/nature-animals/config.yml
--- a/ui/src/quizz/science-technology/config.yml
+++ b/ui/src/quizz/science-technology/config.yml
--- a/ui/src/quizz/sport/config.yml
+++ b/ui/src/quizz/sport/config.yml
--- a/ui/src/quizz/video-games/Original/Q-1.jpg
+++ b/ui/src/quizz/video-games/Original/Q-1.jpg
--- a/ui/src/quizz/video-games/Original/Q-2.jpg
+++ b/ui/src/quizz/video-games/Original/Q-2.jpg
--- a/ui/src/quizz/video-games/Original/Q-3.webp
+++ b/ui/src/quizz/video-games/Original/Q-3.webp
--- a/ui/src/quizz/video-games/Original/Q-4.webp
+++ b/ui/src/quizz/video-games/Original/Q-4.webp
--- a/ui/src/quizz/video-games/Original/Q-5.webp
+++ b/ui/src/quizz/video-games/Original/Q-5.webp
--- a/ui/src/quizz/video-games/Q-1.jpeg
+++ b/ui/src/quizz/video-games/Q-1.jpeg
--- a/ui/src/quizz/video-games/Q-2.jpeg
+++ b/ui/src/quizz/video-games/Q-2.jpeg
--- a/ui/src/quizz/video-games/Q-3.jpeg
+++ b/ui/src/quizz/video-games/Q-3.jpeg
--- a/ui/src/quizz/video-games/Q-4.jpeg
+++ b/ui/src/quizz/video-games/Q-4.jpeg
--- a/ui/src/quizz/video-games/Q-5.jpeg
+++ b/ui/src/quizz/video-games/Q-5.jpeg
--- a/ui/src/quizz/video-games/config.yml
+++ b/ui/src/quizz/video-games/config.yml
@ -0,0 +1,27 @@
+name: "Jeux vidéos"
+questions:  
+  1:
+    Q:  "Quel personnage de jeu vidéo est un plombier moustachu qui saute sur des ennemis pour sauver une princesse ?"
+    T:  "C’est le personnage le plus célèbre de Nintendo, son nom commence par 'M'."
+    R:  "Mario."
+    P:  "Q-1.jpeg"
+  2:
+    Q:  "Quel jeu vidéo multijoueur de football avec des voitures est très populaire ?"
+    T:  "Il s'agit d'un mélange de sport et de voitures rapides."
+    R:  "Rocket League."
+    P:  "Q-2.jpeg"
+  3:
+    Q:  "Quel jeu vidéo mobile consiste à faire exploser des bonbons en alignant trois pièces identiques ?"
+    T:  "Son nom fait référence aux bonbons."
+    R:  "Candy Crush Saga."
+    P:  "Q-3.jpeg"
+  4:
+    Q:  "Quel est le nom du célèbre personnage bleu de SEGA qui court à une vitesse incroyable ?"
+    T:  "Son nom commence par la lettre 'S' et c'est un hérisson."
+    R:  "Sonic"
+    P:  "Q-4.jpeg"
+  5:
+    Q:  "Quel jeu permet de construire et explorer un monde fait de blocs, tout en survivant face à des monstres ?"
+    T:  "Le monde est entièrement fait de blocs carrés."
+    R:  "Minecraft."
+    P:  "Q-5.jpeg"
--- a/ui/src/services/buzzerWatcher.js
+++ b/ui/src/services/buzzerWatcher.js
@ -0,0 +1,64 @@
+// index.js
+import Vue from 'vue';
+import Vuex from 'vuex';
+import ping from 'ping';
+
+Vue.use(Vuex);
+
+const store = new Vuex.Store({
+  state: { 
+    buzzerRedState: '', 
+    buzzerBlueState: '', 
+    buzzerOrangeState: '', 
+    buzzerGreenState: ''
+  },
+  mutations: { 
+    setBuzzerRedState(state, newState) {   
+      state.buzzerRedState = newState; 
+    }, 
+    setBuzzerBlueState(state, newState) {   
+      state.buzzerBlueState = newState; 
+    }, 
+    setBuzzerOrangeState(state, newState) {   
+      state.buzzerOrangeState = newState; 
+    }, 
+    setBuzzerGreenState(state, newState) {   
+      state.buzzerGreenState = newState; 
+    }
+  },
+  actions: { 
+    updateBuzzerStates({ commit }, { index, newState }) {   
+      switch (index) {     
+        case 0:       
+          commit('setBuzzerRedState', newState);       
+          break;     
+        case 1:      
+          commit('setBuzzerBlueState', newState);       
+          break;     
+        case 2:       
+          commit('setBuzzerOrangeState', newState);       
+          break;     
+        case 3:       
+          commit('setBuzzerGreenState', newState);       
+          break;     
+        default:       
+          console.error('Index de buzzer invalide:', index);   
+      }
+    }
+  }
+});
+
+const hosts = ['192.168.1.1', '192.168.1.2', '192.168.1.3', '192.168.1.4'];
+
+async function pingHosts() {
+  hosts.forEach(async (host, index) => { try {   
+    const res = await ping.promise.probe(host);   
+    store.dispatch('updateBuzzerStates', {index, newState: res.alive ? 'ON' : 'OFF' }); } 
+    catch (error) {   
+      console.error(`Erreur lors du ping de ${host}:`, error.message); }
+  });
+}
+
+pingHosts();
+
+module.exports = store;
--- a/ui/src/services/mqttService.js
+++ b/ui/src/services/mqttService.js
@ -13,7 +13,6 @@ export function publishMessage(topic, message) {
 // Fonction pour s'abonner à un topic MQTT et écouter les messages entrants
 export function subscribeToTopic(topic, callback) {
  client.subscribe(topic)
-  client.on('message', (receivedTopic, message) => {
-    callback(receivedTopic.toString(), message.toString())
+  client.on('message', (receivedTopic, message) => { callback(receivedTopic.toString(), message.toString())
  })
 }
--- a/ui/src/services/pictureEngine.js
+++ b/ui/src/services/pictureEngine.js
@ -0,0 +1,43 @@
+import express from 'express';
+import { promises as fs } from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const app = express();
+const port = 3000;
+
+// Obtenir le chemin du répertoire parent
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Middleware pour gérer les requêtes depuis le frontend
+app.use((req, res, next) => {
+    res.setHeader('Access-Control-Allow-Origin', '*');
+    res.setHeader('Access-Control-Allow-Methods', 'GET, POST');
+    next();
+  });
+
+// Le dossier assets est situé un niveau au-dessus du dossier services
+const assetsDir = path.join(__dirname, '..', 'quizz/geography-history');
+console.log(assetsDir)
+
+// Middleware pour servir les fichiers statiques
+app.use('/images', express.static(assetsDir));
+
+// API pour lister les fichiers d'image
+app.get('/images-list', async (req, res) => {
+  try {
+    const files = await fs.readdir(assetsDir);
+
+    // Filtrer pour ne renvoyer que les fichiers d'image (par ex : .jpg, .png)
+    const images = files.filter(file => /\.(jpg|jpeg|png|gif)$/.test(file));
+    res.json(images);
+  } catch (err) {
+
+    res.status(500).send('Erreur lors de la lecture du dossier');
+  }
+});
+
+app.listen(port, () => {
+  console.log(`Serveur démarré sur http://localhost:${port}`);
+});
--- a/ui/src/variables.js
+++ b/ui/src/variables.js
@ -0,0 +1,27 @@
+export default {
+  // Gestion des score et des Buzzers
+
+  // Scores totaux
+  RedTotalScore: 11,
+  BlueTotalScore: 22,
+  GreenTotalScore: 33,
+  OrangeTotalScore: 44,
+
+  // Score de la manche courante
+  RedRoundScore: 1,
+  BlueRoundScore: 2,
+  OrangeRoundScore: 3,
+  GreenRoundScore: 4,
+
+  //Etat des buzzer
+  BuzzerRed: false,
+  BuzzerBlue: false,
+  BuzzerOrange: false,
+  BuzzerGreen: false,
+
+  // Ajoutez d'autres variables globales ici
+};
+
+// Variables localStorage
+export const localStorageVars = { // Exemple de variable localStorage RedScorelocal: localStorage.getItem('RedScore') || '', BlueScorelocal: localStorage.getItem('BlueScore') || '', OrangeScorelocal: localStorage.getItem('OrangeScore') || '', GreenScorelocal: localStorage.getItem('GreenScore') || '',
+  }; 
--- a/ui/src/views/GameControl.vue
+++ b/ui/src/views/GameControl.vue
@ -0,0 +1,77 @@
+<template>
+<v-container>
+  <v-row no-gutters> 
+    <v-col class="align-start">   
+      <card-control /> 
+    </v-col> 
+    <v-col class="pl-3">   
+      <card-soundboard /> 
+    </v-col>
+  </v-row>
+</v-container>
+  <v-row no-gutters class="pr-4 pl-4"> 
+    <v-row no-gutters>   
+      <v-col class="align-start">     
+        <CardButtonScore />   
+      </v-col>   
+      <v-col class="pl-3">     
+        <card-solution />   
+      </v-col> 
+    </v-row>
+  </v-row>
+</template>
+
+<script setup>
+
+import CardSolution from '@/components/CardSolution.vue'
+import CardControl from '@/components/CardControl.vue'
+import CardSoundboard from '@/components/CardSoundboard.vue';
+import CardButtonScore from '@/components/CardButtonScore.vue'
+
+</script>
+
+<style>
+@media (min-width: 1024px) {
+  .card__title.primary {   
+    background-color: #d42828; /* Changez la couleur en fonction de votre thème */
+  }
+  .card__title.feedback {   
+    background-color: #2E7D32; /* Changez la couleur en fonction de votre thème */
+  }
+  .btn{ 
+    border-radius:20px!important;
+  }
+  .btn.red { 
+    background-color: #d42828; /* Changez la couleur en fonction de votre thème */ 
+  }
+  .btn.blue { 
+    background-color: #2867d4; /* Changez la couleur en fonction de votre thème */ 
+  }
+  .btn.orange { 
+    background-color: #d48f28; /* Changez la couleur en fonction de votre thème */ 
+  }
+  .btn.green { 
+    background-color: #28d42e; /* Changez la couleur en fonction de votre thème */ 
+  }
+  .scorediv-style-red { 
+    background-color: #d42828 !important; 
+    padding: 15px; 
+    border-top-left-radius: 10%;
+  }
+  .scorediv-style-orange { 
+    background-color: #d48f28 !important; 
+    padding: 15px; 
+    border-bottom-left-radius: 10%;
+  }
+  .scorediv-style-blue { 
+    background-color: #2867d4 !important; 
+    padding: 15px; 
+    border-top-right-radius: 10%;    
+  }
+  .scorediv-style-green { 
+    background-color: #28d42e !important; 
+    padding: 15px; 
+    border-bottom-right-radius: 10%;
+  }
+}
+</style>
--- a/ui/src/views/GameDisplay.vue
+++ b/ui/src/views/GameDisplay.vue
@ -0,0 +1,53 @@
+<template>
+    <v-container>
+      <v-row>
+        <v-col
+          v-for="image in images"
+          :key="image"
+          cols="12"
+          sm="6"
+          md="4"
+        >
+          <v-card>
+            <v-img
+              :src="`http://localhost:3000/images/${image}`"
+              :alt="image"
+              class="image-thumbnail"
+            />
+            <v-card-title>{{ image }}</v-card-title>
+          </v-card>
+        </v-col>
+      </v-row>
+    </v-container>
+  </template>
+  
+  <script setup>
+  import { ref, onMounted } from 'vue';
+  
+  // Déclare une variable réactive pour stocker les images
+  const images = ref([]);
+  
+  // Fonction pour récupérer les images depuis l'API
+  const fetchImages = async () => {
+    try {
+      const response = await fetch('http://localhost:3000/images-list');
+      const data = await response.json();
+      images.value = data; // Met à jour les images
+    } catch (error) {
+      console.error('Erreur lors de la récupération des images :', error);
+    }
+  };
+  
+  // Appelle la fonction fetchImages lorsque le composant est monté
+  onMounted(() => {
+    fetchImages();
+  });
+  </script>
+  
+  <style scoped>
+  .image-thumbnail {
+    max-width: 100%;
+    height: auto;
+  }
+  </style>
+  
--- a/ui/src/views/HomeView.vue
+++ b/ui/src/views/HomeView.vue
@ -0,0 +1,3 @@
+<template>
+  <v-img src="../assets/BrainBlast-For-HomeView-Alpha.png" class="fill-height"></v-img>
+</template>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Laurent	debec4b609	2eme iteration	2024-10-03 18:20:52 +00:00
Laurent	fafacb6d3c	première iteration du buzzer-manager	2024-10-02 20:34:53 +00:00
Jérémy CHOMAZ	20285b945f	Merge branch 'main' of https://projects.cloudsucks.net/asco.fablab/BrainBlast	2024-09-11 15:41:02 +02:00
Jérémy CHOMAZ	d0cc633264	Ajout d'un draft d'un quizz + un draft de l'exploitation des images via un webrequest sur pictureEngine.js	2024-09-11 15:38:13 +02:00
Laurent	bfcca3619f	recovering sound player	2024-08-05 16:04:01 +00:00
Jérémy CHOMAZ	f2aa7e64a0	Changement de l'image dans la solution	2024-04-14 14:50:53 +02:00
Jérémy CHOMAZ	9801182db0	Création du groupe de controle des scores dans la zone de boutton	2024-04-14 14:36:22 +02:00
Jérémy CHOMAZ	3f078aacb7	Suppression du toggle de thème. Raison ? -> toute l'interface est faite pour fonctionner en version dark, c'est bien plus ergonomique, le logo est également prévu pour être affiché sur une version dark	2024-04-13 16:45:10 +02:00
Jérémy CHOMAZ	74f71a0ca3	Refonte de la page de debug MQTT pour y ajouter un UX design, rajout également du timestamp dans le retour de console	2024-04-13 15:49:49 +02:00
Jérémy CHOMAZ	08471a27b7	Ajout de deux paramètres dans la page de settings ces boutons permettent de jouer certains sons lors de l'ajout ou la suppression de score	2024-04-12 21:32:08 +02:00
Jérémy CHOMAZ	2cc97c8de8	Ajout de la fonctionnalité de réduction de card lorsque l'on clique sur une des trois card dans le gamecontrol	2024-04-12 21:16:12 +02:00
Jérémy CHOMAZ	3826a067e2	Décalage du boutton Debugger	2024-04-05 16:03:49 +02:00
Jérémy CHOMAZ	76383c1a3d	Ajustement du menu router pour cacher le debugger, il est désormais accessible depuis la page paramètre, onglet MQTT	2024-04-05 16:01:13 +02:00
Jérémy CHOMAZ	8b012757f3	Ajustement de la section Son pourque les emplacements soient plus optimisés	2024-04-05 15:48:39 +02:00
Jérémy CHOMAZ	0dea30e8a6	Modification du titre Brain Blast dans la barre de menu, désormais elle ne s'affiche que lorsque l'on ne se trouve pas sur la page d'accueil (sinon cela fait redondance avec le logo principal)	2024-04-05 15:14:28 +02:00
Jérémy CHOMAZ	da4daae323	Suppression de la page About	2024-04-05 15:11:51 +02:00
Jérémy CHOMAZ	ef4838bde1	Modification de l'écart de la carte solution par rapport aux autres	2024-04-05 15:03:58 +02:00
Jérémy CHOMAZ	1edb73bf5f	Création de la carte timer dans le GameStatus	2024-04-05 15:00:41 +02:00
Jérémy CHOMAZ	5a983f2c7e	Transformation des scores en card	2024-04-05 14:33:54 +02:00
Jérémy CHOMAZ	96b7b1cbd7	Ajout de la card Timer pour créer un chronomètre de jeu	2024-04-05 14:29:08 +02:00
Jérémy CHOMAZ	080601b792	Ajustement du placement des score, tout est bien aligné et centré	2024-04-05 14:12:22 +02:00
Jérémy CHOMAZ	c3b86cb68b	Modification des données affichée dans la gestion des scores, ajout de la notion Total et Manche (affichage de la manche courante et du score total)	2024-04-01 17:40:18 +02:00
Jérémy CHOMAZ	44ce39bf3f	Merge remote-tracking branch 'origin/soundboard-server' into DataWorking	2024-04-01 16:30:40 +02:00
Laurent	068e24ba60	add mqtt soundplayer	2024-04-01 14:23:37 +00:00
Jérémy CHOMAZ	995cca83ae	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	2024-04-01 15:03:27 +02:00
Jérémy CHOMAZ	87bdf08b65	Ajout de l'affichage conditionnel pour le GameStatus, il ne s'affiche qu'en mode Présentateur pour que le GameMaster puisse avoir des infos sur la session courante	2024-04-01 14:00:52 +02:00
Jérémy CHOMAZ	c9f82674de	Merge branch 'AdaptationTablette'	2024-04-01 13:19:33 +02:00
Jérémy CHOMAZ	ed78ffc158	Ajout des 4 emplacements de score dans le GameStatus, création du fichier de référence des variables pour le localstorage, désactivation du footer (pour l'instant) et arrangement pour le format de la tablette	2024-04-01 13:16:47 +02:00
Jérémy CHOMAZ	83ce4b4fcc	Modification du GameStatus avec ajout de la preview des buzzer connectés (juste l'UI Design pour l'instant)	2024-03-23 16:21:31 +01:00
Jérémy CHOMAZ	3036190701	patch du margin bottom sous le statut du broker MQTT	2024-03-17 16:56:35 +01:00
Jérémy CHOMAZ	e6a89c1561	Merge branch 'theme'	2024-03-17 16:50:41 +01:00
Jérémy CHOMAZ	553b37654e	Modification du thème et ajout de deux catégorie dans les paramètres	2024-03-17 16:49:50 +01:00
Jérémy CHOMAZ	56bf47b91a	Merge branch 'SettingsView'	2024-03-17 15:49:14 +01:00
Jérémy CHOMAZ	745532c1b8	Remplacement des checkbox par des switch + création du thème	2024-03-17 15:47:42 +01:00
Jérémy CHOMAZ	7e0687d3ca	Merge branch 'SettingPage'	2024-03-17 12:39:51 +01:00
Jérémy CHOMAZ	8a3185d694	V1 de la page avec une zone 'son' qui permet d'activer et régler le son intégré et d'activer le son MQTT	2024-03-17 12:36:05 +01:00
Jérémy CHOMAZ	340fbd3812	V1 de la page avec une zone 'son' qui permet d'activer et régler le son intégré et d'activer le son MQTT	2024-03-17 12:34:59 +01:00
Laurent	4c42f15dc6	Move brainblast vue app to ui repository	2024-03-16 21:17:43 +00:00
				`@ -1 +0,0 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>`