asco.fablab/BrainBlast
11
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: asco.fablab:20285b945feaf65a1f62becf995df2dc25decc0b
Branches Tags
asco.fablab:main
asco.fablab:UIX-MQTT
asco.fablab:services
asco.fablab:soundboard-server
asco.fablab:fetch-test
..
compare: asco.fablab:bfcca3619ffcf39ff19797157bd5f1942e0826ef
Branches Tags
asco.fablab:main
asco.fablab:UIX-MQTT
asco.fablab:services
asco.fablab:soundboard-server
asco.fablab:fetch-test

No commits in common. "20285b945feaf65a1f62becf995df2dc25decc0b" and "bfcca3619ffcf39ff19797157bd5f1942e0826ef" have entirely different histories.
20285b945f ... bfcca3619f

54 changed files with 996 additions and 1785 deletions
Show Stats Expand all files Collapse all files

10
ui/index.html
View File

@ -1,7 +1,13 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr"> <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>
<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> </head>
<body> <div id="app"></div> <script type="module" src="/src/main.js"></script> <body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body> </body>
</html> </html>

5
ui/jsconfig.json
View File

@ -1,5 +1,8 @@
{ {
"compilerOptions": { "paths": { "@/*": ["./src/*"] } "compilerOptions": {
"paths": {
"@/*": ["./src/*"]
}
}, },
"exclude": ["node_modules", "dist"] "exclude": ["node_modules", "dist"]
} }

1257
ui/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
ui/package.json
View File

@ -13,7 +13,6 @@
}, },
"dependencies": { "dependencies": {
"@mdi/font": "^7.4.47", "@mdi/font": "^7.4.47",
"express": "^5.0.0",
"mqtt": "^5.3.5", "mqtt": "^5.3.5",
"ping": "^0.4.4", "ping": "^0.4.4",
"roboto-fontface": "^0.10.0", "roboto-fontface": "^0.10.0",

6
ui/src/App.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<v-app> <v-app>
<BrainBlastBar /> <BrainBlastBar />
<GameStatus v-if="$route.name === 'Game Control (Présentateur)'"> <GameStatus v-if="$route.name === 'Game Control (Présentateur)'"></GameStatus>
</GameStatus>
<v-main> <v-main>
<RouterView /> <RouterView />
</v-main> <!-- <v-footer class="footer" :elevation=12 border><v-row justify="center">© 2024 - ASCO section Fablab</v-row></v-footer> --> </v-main>
<!-- <v-footer class="footer" :elevation=12 border><v-row justify="center">© 2024 - ASCO section Fablab</v-row></v-footer> -->
</v-app> </v-app>
</template> </template>

26
ui/src/components/CardControl.vue
View File

@ -12,7 +12,22 @@
</mqtt-button> </mqtt-button>
</v-col> </v-col>
<v-col cols="12" sm="6" md="5" class="mt-4"> <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> <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> </v-card>
</template> </template>
@ -24,11 +39,16 @@
const isCardReduced = ref(false); const isCardReduced = ref(false);
// Méthode pour basculer l'état de la carte // Méthode pour basculer l'état de la carte
function toggleCardSize() { isCardReduced.value = !isCardReduced.value; function toggleCardSize() {
isCardReduced.value = !isCardReduced.value;
} }
</script> </script>
<style> <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; .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> </style>

146
ui/src/components/CardScore.vue
View File

@ -1,8 +1,97 @@
<template> <div class="label-pos"> <v-label class="labelTitle-style pb-4">Scores</v-label> </div> <template>
<!-- É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> <div class="label-pos">
<!-- É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> <v-label class="labelTitle-style pb-4">Scores</v-label>
<!-- É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> </div>
<!-- É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>
<!-- É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> </template>
<script setup> <script setup>
@ -22,24 +111,51 @@ const GreenRoundScore = ref(variables.GreenRoundScore);
</script> </script>
<style> <style>
.label-pos { padding-top: 15px; text-align: center; .label-pos {
padding-top: 15px;
text-align: center;
} }
.labelTitle-style { font-size: 20px !important; font-weight: 500; color: #d42828 !important; opacity: 90% !important; .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; .labelRoundScore-style {
opacity: 100% !important;
font-size: 25px !important;
font-weight: 500;
} }
.labelTotalScore-style { opacity: 100% !important; font-size: 15px !important; font-weight: 500; .labelTotalScore-style {
opacity: 100% !important;
font-size: 15px !important;
font-weight: 500;
} }
.button-pos { padding-top: 10px; padding-bottom: 15px; .button-pos {
padding-top: 10px;
padding-bottom: 15px;
} }
.scorebox-pos { text-align: center; .scorebox-pos {
text-align: center;
} }
.scorediv-style-red { background-color: #d42828 !important; padding: 15px; border-top-left-radius: 10%; .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-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-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%; .scorediv-style-green {
background-color: #28d42e !important;
padding: 15px;
border-bottom-right-radius: 10%;
} }
</style> </style>

16
ui/src/components/CardSolution.vue
View File

@ -2,12 +2,13 @@
<v-card tile outlined :class="{ 'card--reduced': isCardReduced }"> <v-card tile outlined :class="{ 'card--reduced': isCardReduced }">
<v-card-title class="card__title primary" @click="toggleCardSize"> <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> <v-icon left class="white--text pr-5 pl-2" size="40">mdi-play-network-outline</v-icon>
Solution </v-card-title> Solution
</v-card-title>
<v-container class="text-center"> <v-container class="text-center">
<v-row justify="center"> <v-row justify="center">
<v-container class="text-center"> <!-- Utilisation de styles CSS personnalisés pour centrer l'image --> <v-container class="text-center">
<v-img width="450" src="@/assets/copilot-solution-FULL-HD.jpg" style="margin: 0 auto;"> <!-- Utilisation de styles CSS personnalisés pour centrer l'image -->
</v-img> <v-img width="450" src="@/assets/copilot-solution-FULL-HD.jpg" style="margin: 0 auto;"></v-img>
</v-container> </v-container>
</v-row> </v-row>
</v-container> </v-container>
@ -16,7 +17,8 @@
<style> <style>
@media (min-width: 1024px) { @media (min-width: 1024px) {
.image-container { .image-container {
width: 300px; overflow: hidden; /* Pour masquer le dépassement de l'image */ width: 300px;
overflow: hidden; /* Pour masquer le dépassement de l'image */
border: 1px solid #ccc; /* Bordure de l'image */ border: 1px solid #ccc; /* Bordure de l'image */
} }
.image-container img { .image-container img {
@ -24,8 +26,8 @@
height: auto; /* Pour maintenir le ratio d'aspect de l'image */ height: auto; /* Pour maintenir le ratio d'aspect de l'image */
display: block; /* Pour éviter l'espace réservé pour les images */ display: block; /* Pour éviter l'espace réservé pour les images */
} }
} }
.card--reduced { .card--reduced {
height: 56px; /* Réglez la hauteur réduite selon vos besoins */ height: 56px; /* Réglez la hauteur réduite selon vos besoins */
width: 160px; width: 160px;
overflow: hidden; overflow: hidden;

34
ui/src/components/CardTimer.vue
View File

@ -3,6 +3,7 @@
<div class="timer"> <div class="timer">
<v-label color="primary" class="labelTime-style" >{{ formatTime }}</v-label> <v-label color="primary" class="labelTime-style" >{{ formatTime }}</v-label>
</div> </div>
<v-row no-gutters justify="space-around" > <v-row no-gutters justify="space-around" >
<v-btn class="buttons" color="primary" icon="mdi-play" @click="startTimer"></v-btn> <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-pause" @click="pauseTimer"></v-btn>
@ -23,7 +24,10 @@
let seconds = Math.floor(elapsedTime.value / 1000); let seconds = Math.floor(elapsedTime.value / 1000);
let minutes = Math.floor(seconds / 60); let minutes = Math.floor(seconds / 60);
let hours = Math.floor(minutes / 60); let hours = Math.floor(minutes / 60);
seconds = seconds % 60; minutes = minutes % 60;
seconds = seconds % 60;
minutes = minutes % 60;
return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`; return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
}); });
@ -35,13 +39,15 @@
if (!timerActive.value) { if (!timerActive.value) {
timerActive.value = true; timerActive.value = true;
startTime.value = Date.now() - elapsedTime.value; startTime.value = Date.now() - elapsedTime.value;
updateTimer(); } updateTimer();
}
}; };
const pauseTimer = () => { const pauseTimer = () => {
if (timerActive.value) { if (timerActive.value) {
timerActive.value = false; timerActive.value = false;
clearInterval(currentTime.value); } clearInterval(currentTime.value);
}
}; };
const resetTimer = () => { const resetTimer = () => {
@ -51,26 +57,38 @@
}; };
const updateTimer = () => { const updateTimer = () => {
currentTime.value = setInterval(() => {elapsedTime.value = Date.now() - startTime.value; }, 1000); currentTime.value = setInterval(() => {
elapsedTime.value = Date.now() - startTime.value;
}, 1000);
}; };
onBeforeUnmount(() => { clearInterval(currentTime.value); onBeforeUnmount(() => {
clearInterval(currentTime.value);
}); });
</script> </script>
<script> <script>
const startTimer = () => { const startTimer = () => {
if (!timerActive.value) { if (!timerActive.value) {
timerActive.value = true; timerActive.value = true;
startTime.value = Date.now() - elapsedTime.value; startTime.value = Date.now() - elapsedTime.value;
updateTimer(); } }; updateTimer();
}
};
const pauseTimer = () => { const pauseTimer = () => {
if (timerActive.value) { if (timerActive.value) {
timerActive.value = false; timerActive.value = false;
clearInterval(currentTime.value); } }; clearInterval(currentTime.value);
}
};
const resetTimer = () => { const resetTimer = () => {
elapsedTime.value = 0; elapsedTime.value = 0;
timerActive.value = false; timerActive.value = false;
clearInterval(currentTime.value); }; clearInterval(currentTime.value);
};
export { startTimer, pauseTimer, resetTimer }; export { startTimer, pauseTimer, resetTimer };
</script> </script>

12
ui/src/components/GameStatus.vue
View File

@ -3,23 +3,27 @@
<div class="label-pos"> <div class="label-pos">
<v-label class="labelTitle-style">Buzzer connectés</v-label> <v-label class="labelTitle-style">Buzzer connectés</v-label>
</div> </div>
<v-row no-gutters justify="space-around" class="button-pos"> <v-row no-gutters justify="space-around" class="button-pos">
<v-icon color="BuzzerRed">mdi-radiobox-marked</v-icon> <v-icon color="BuzzerRed">mdi-radiobox-marked</v-icon>
<v-icon color="BuzzerBlue">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="BuzzerOrange">mdi-radiobox-marked</v-icon>
<v-icon color="BuzzerGreen">mdi-radiobox-marked</v-icon> <v-icon color="BuzzerGreen">mdi-radiobox-marked</v-icon>
</v-row> </v-row>
<v-divider :thickness="2" class="border-opacity-100" color="primary"/> <v-divider :thickness="2" class="border-opacity-100" color="primary"/>
<CardScore/> <CardScore/>
<CardTimer/> <CardTimer/>
</v-navigation-drawer> </v-navigation-drawer>
</template> </template>
<script setup> <script setup>
import CardTimer from '@/components/CardTimer.vue' import CardTimer from '@/components/CardTimer.vue'
import CardScore from '@/components/CardScore.vue' import CardScore from '@/components/CardScore.vue'
import { ref } from 'vue'; // Import des fonctions de Vue 3 import { ref } from 'vue'; // Import des fonctions de Vue 3
import variables from '@/variables.js'; import variables from '@/variables.js';
</script> </script>

17
ui/src/components/MQTTDebugConsole.vue
View File

@ -7,7 +7,8 @@
</v-card-title> </v-card-title>
<v-container class="text-center"> <v-container class="text-center">
<div v-for="(log, index) in messageLogs" :key="index"> <div v-for="(log, index) in messageLogs" :key="index">
<v-label class="v-label-timestamp">{{ log.timestamp }} </v-label> - <v-label class="v-label-timestamp">{{ log.timestamp }} </v-label>
-
<v-label>{{ log.message }}</v-label> <v-label>{{ log.message }}</v-label>
</div> </div>
</v-container> </v-container>
@ -16,14 +17,17 @@
</template> </template>
<script> <script>
import { subscribeToTopic } from '@/services/mqttService' import { subscribeToTopic } from '@/services/mqttService'
export default { export default {
data() { return { data() {
return {
messageLogs: [] // Initialiser un tableau pour stocker les messages MQTT avec horodatage messageLogs: [] // Initialiser un tableau pour stocker les messages MQTT avec horodatage
} }
}, },
created() { subscribeToTopic('#', (topic, message) => { // Obtenir l'horodatage actuel created() {
subscribeToTopic('#', (topic, message) => {
// Obtenir l'horodatage actuel
const timestamp = new Date().toLocaleString('fr-FR', { const timestamp = new Date().toLocaleString('fr-FR', {
hour12: false, hour12: false,
hour: '2-digit', hour: '2-digit',
@ -37,9 +41,10 @@
// Limiter la liste à 10 messages // Limiter la liste à 10 messages
if (this.messageLogs.length > 10) { if (this.messageLogs.length > 10) {
this.messageLogs.shift(); // Supprimer le premier élément (le plus ancien) this.messageLogs.shift(); // Supprimer le premier élément (le plus ancien)
} }) // S'abonner à tous les topics MQTT
} }
}) // S'abonner à tous les topics MQTT
} }
}
</script> </script>
<style> <style>

25
ui/src/components/MQTTDebugPublish.vue
View File

@ -8,7 +8,8 @@
<div class="input-style"> <div class="input-style">
<v-select label="Topic" v-model="selectedTopic" :items="topics" prepend-icon="mdi-target"></v-select> <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> <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> </div>
<v-btn class="v-btn-style" height="50" @click="publishMessage">Publier</v-btn>
</v-card> </v-card>
</v-container> </v-container>
@ -18,14 +19,28 @@
import { publishMessage } from '@/services/mqttService' import { publishMessage } from '@/services/mqttService'
export default { export default {
data() { return { message: '', // Initialiser la variable message data() {
return {
message: '', // Initialiser la variable message
selectedTopic: 'topic1', selectedTopic: 'topic1',
topics: [ '/display/control', '/sound/playsound', 'topic3', 'topic4', 'topic5', 'topic6', 'topic7', 'topic8', 'topic9', 'topic10' ] // Liste des topics topics: [
'/display/control',
'/sound/playsound',
'topic3',
'topic4',
'topic5',
'topic6',
'topic7',
'topic8',
'topic9',
'topic10'
] // Liste des topics
} }
}, },
methods: { methods: {
publishMessage() { publishMessage() {
publishMessage(this.selectedTopic, this.message) } publishMessage(this.selectedTopic, this.message)
}
} }
} }
</script> </script>

6
ui/src/plugins/router.js
View File

@ -3,7 +3,8 @@ import HomeView from '../views/HomeView.vue'
const router = createRouter({ const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL), history: createWebHistory(import.meta.env.BASE_URL),
routes: [ { routes: [
{
path: '/', path: '/',
name: 'Accueil', name: 'Accueil',
component: HomeView component: HomeView
@ -26,7 +27,8 @@ const router = createRouter({
{ {
path: '/settings', path: '/settings',
name: 'Paramètres', name: 'Paramètres',
component: () => import('@/views/SettingsView.vue') } component: () => import('@/views/SettingsView.vue')
}
] ]
}) })

3
ui/src/plugins/vuetify.js
View File

@ -52,6 +52,7 @@ export default createVuetify({
defaultTheme: 'CustomThemeDark', defaultTheme: 'CustomThemeDark',
themes: { themes: {
CustomThemeDark, CustomThemeDark,
CustomThemeLight, }, CustomThemeLight,
},
}, },
}) })

BIN
ui/src/quizz/geography-history/Q-1.jpeg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.6 MiB

BIN
ui/src/quizz/geography-history/Q-2.jpeg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.8 MiB

BIN
ui/src/quizz/geography-history/Q-3.jpeg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 MiB

BIN
ui/src/quizz/geography-history/Q-4.jpeg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.3 MiB

BIN
ui/src/quizz/geography-history/Q-5.jpeg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.9 MiB

27
ui/src/quizz/geography-history/config.yml
View File

@ -1,27 +0,0 @@
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"

BIN
ui/src/quizz/geography-history/originales/Q-1.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 447 KiB

BIN
ui/src/quizz/geography-history/originales/Q-2.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 460 KiB

BIN
ui/src/quizz/geography-history/originales/Q-3.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 382 KiB

BIN
ui/src/quizz/geography-history/originales/Q-4.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 355 KiB

BIN
ui/src/quizz/geography-history/originales/Q-5.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 521 KiB

0
ui/src/quizz/movies-series/config.yml
View File

0
ui/src/quizz/music/config.yml
View File

0
ui/src/quizz/nature-animals/config.yml
View File

0
ui/src/quizz/science-technology/config.yml
View File

0
ui/src/quizz/sport/config.yml
View File

BIN
ui/src/quizz/video-games/Original/Q-1.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 139 KiB

BIN
ui/src/quizz/video-games/Original/Q-2.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 445 KiB

BIN
ui/src/quizz/video-games/Original/Q-3.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 400 KiB

BIN
ui/src/quizz/video-games/Original/Q-4.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 389 KiB

BIN
ui/src/quizz/video-games/Original/Q-5.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 346 KiB

BIN
ui/src/quizz/video-games/Q-1.jpeg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.1 MiB

BIN
ui/src/quizz/video-games/Q-2.jpeg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.1 MiB

BIN
ui/src/quizz/video-games/Q-3.jpeg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.2 MiB

BIN
ui/src/quizz/video-games/Q-4.jpeg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.3 MiB

BIN
ui/src/quizz/video-games/Q-5.jpeg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.0 MiB

27
ui/src/quizz/video-games/config.yml
View File

@ -1,27 +0,0 @@
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"

10
ui/src/services/buzzerWatcher.js
View File

@ -51,11 +51,13 @@ const store = new Vuex.Store({
const hosts = ['192.168.1.1', '192.168.1.2', '192.168.1.3', '192.168.1.4']; const hosts = ['192.168.1.1', '192.168.1.2', '192.168.1.3', '192.168.1.4'];
async function pingHosts() { async function pingHosts() {
hosts.forEach(async (host, index) => { try { hosts.forEach(async (host, index) => {
try {
const res = await ping.promise.probe(host); const res = await ping.promise.probe(host);
store.dispatch('updateBuzzerStates', {index, newState: res.alive ? 'ON' : 'OFF' }); } store.dispatch('updateBuzzerStates', { index, newState: res.alive ? 'ON' : 'OFF' });
catch (error) { } catch (error) {
console.error(`Erreur lors du ping de ${host}:`, error.message); } console.error(`Erreur lors du ping de ${host}:`, error.message);
}
}); });
} }

3
ui/src/services/mqttService.js
View File

@ -13,6 +13,7 @@ export function publishMessage(topic, message) {
// Fonction pour s'abonner à un topic MQTT et écouter les messages entrants // Fonction pour s'abonner à un topic MQTT et écouter les messages entrants
export function subscribeToTopic(topic, callback) { export function subscribeToTopic(topic, callback) {
client.subscribe(topic) client.subscribe(topic)
client.on('message', (receivedTopic, message) => { callback(receivedTopic.toString(), message.toString()) client.on('message', (receivedTopic, message) => {
callback(receivedTopic.toString(), message.toString())
}) })
} }

43
ui/src/services/pictureEngine.js
View File

@ -1,43 +0,0 @@
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}`);
});

7
ui/src/variables.js
View File

@ -23,5 +23,10 @@ export default {
}; };
// Variables localStorage // 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') || '', export const localStorageVars = {
// Exemple de variable localStorage
RedScorelocal: localStorage.getItem('RedScore') || '',
BlueScorelocal: localStorage.getItem('BlueScore') || '',
OrangeScorelocal: localStorage.getItem('OrangeScore') || '',
GreenScorelocal: localStorage.getItem('GreenScore') || '',
}; };

5
ui/src/views/GameControl.vue
View File

@ -9,6 +9,7 @@
</v-col> </v-col>
</v-row> </v-row>
</v-container> </v-container>
<v-row no-gutters class="pr-4 pl-4"> <v-row no-gutters class="pr-4 pl-4">
<v-row no-gutters> <v-row no-gutters>
<v-col class="align-start"> <v-col class="align-start">
@ -43,15 +44,19 @@ import CardButtonScore from '@/components/CardButtonScore.vue'
} }
.btn.red { .btn.red {
background-color: #d42828; /* Changez la couleur en fonction de votre thème */ background-color: #d42828; /* Changez la couleur en fonction de votre thème */
} }
.btn.blue { .btn.blue {
background-color: #2867d4; /* Changez la couleur en fonction de votre thème */ background-color: #2867d4; /* Changez la couleur en fonction de votre thème */
} }
.btn.orange { .btn.orange {
background-color: #d48f28; /* Changez la couleur en fonction de votre thème */ background-color: #d48f28; /* Changez la couleur en fonction de votre thème */
} }
.btn.green { .btn.green {
background-color: #28d42e; /* Changez la couleur en fonction de votre thème */ background-color: #28d42e; /* Changez la couleur en fonction de votre thème */
} }
.scorediv-style-red { .scorediv-style-red {
background-color: #d42828 !important; background-color: #d42828 !important;

52
ui/src/views/GameDisplay.vue
View File

@ -1,53 +1,3 @@
<template> <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>
</template>

22
ui/src/views/MQTTDebugView.vue
View File

@ -1,6 +1,10 @@
<template> <template>
<div> <!-- Zone pour publier sur MQTT --> <PublishMQTTComponent /> <div>
<!-- Zone pour afficher la console MQTT --> <MQTTConsoleComponent /> <!-- Zone pour publier sur MQTT -->
<PublishMQTTComponent />
<!-- Zone pour afficher la console MQTT -->
<MQTTConsoleComponent />
</div> </div>
</template> </template>
@ -9,18 +13,24 @@ import PublishMQTTComponent from '@/components/MQTTDebugPublish.vue' // Importer
import MQTTConsoleComponent from '@/components/MQTTDebugConsole.vue' // Importer le composant pour la console MQTT import MQTTConsoleComponent from '@/components/MQTTDebugConsole.vue' // Importer le composant pour la console MQTT
export default { export default {
components: { PublishMQTTComponent, // Composant pour publier sur MQTT MQTTConsoleComponent // Composant pour la console MQTT components: {
PublishMQTTComponent, // Composant pour publier sur MQTT
MQTTConsoleComponent // Composant pour la console MQTT
} }
} }
</script> </script>
<style> <style>
@media (min-width: 1024px) { @media (min-width: 1024px) {
.card__title.primary { background-color: #d42828; /* Changez la couleur en fonction de votre thème */ .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 */ .card__title.feedback {
background-color: #2E7D32; /* Changez la couleur en fonction de votre thème */
} }
.btn{ border-radius:30px!important; background-color: #d42828; /* Changez la couleur en fonction de votre thème */ .btn{
border-radius:30px!important;
background-color: #d42828; /* Changez la couleur en fonction de votre thème */
} }
} }
</style> </style>

32
ui/src/views/SettingsView.vue
View File

@ -9,23 +9,30 @@
</div> </div>
</div> </div>
<v-switch label="Activer le son MQTT" v-model="MQTTSound" class="ml-15" color="primary"/> <v-switch label="Activer le son MQTT" v-model="MQTTSound" class="ml-15" color="primary"/>
<v-divider /> <v-divider />
<v-label class="title-style-2">Affichage</v-label> <v-label class="title-style-2">Affichage</v-label>
<div> <div>
<v-switch hide-details label="Activer l'affichage des sattelites" v-model="SattelitesDisplay" class="ml-15 pb-3" color="primary"/> <v-switch hide-details label="Activer l'affichage des sattelites" v-model="SattelitesDisplay" class="ml-15 pb-3" color="primary"/>
</div> </div>
<v-divider /> <v-divider />
<v-label class="title-style-2">MQTT</v-label> <v-label class="title-style-2">MQTT</v-label>
<div class="mutltiple-per-line"> <div class="mutltiple-per-line">
<v-icon v-model="MQTTBrokerState" class="ml-15 mb-5" color="error" icon="record">mdi-record</v-icon> <v-icon v-model="MQTTBrokerState" class="ml-15 mb-5" color="error" icon="record">mdi-record</v-icon>
<v-label class="ml-2 mb-10 mt-5">Etat du serveur MQTT</v-label> <v-label class="ml-2 mb-10 mt-5">Etat du serveur MQTT</v-label>
<v-btn class="ml-10 mb-5" color="primary" @click="goToDebugRoute">Debugger</v-btn> <v-btn class="ml-10 mb-5" color="primary" @click="goToDebugRoute">Debugger</v-btn>
</div> </div>
<v-divider /> <v-divider />
<v-label class="title-style-2">Jeu</v-label> <v-label class="title-style-2">Jeu</v-label>
<div class="mutltiple-per-line"> <div class="mutltiple-per-line">
<v-switch hide-details label='Jouer le son de succès lorsque des points sont ajoutés' v-model="SuccessPlay" class="ml-15" color="primary"/> <v-switch hide-details label='Jouer le son de succès lorsque des points sont ajoutés' v-model="SuccessPlay" class="ml-15" color="primary"/>
</div> </div>
<v-switch hide-details label='Jouer le son de erreur lorsque des points sont enlevés' v-model="ErrorPlay" class="ml-15" color="primary"/> <v-switch hide-details label='Jouer le son de erreur lorsque des points sont enlevés' v-model="ErrorPlay" class="ml-15" color="primary"/>
</template> </template>
@ -45,9 +52,7 @@
const router = useRouter(); const router = useRouter();
const goToDebugRoute = () => { const goToDebugRoute = () => {
router.push({ router.push({ name: 'Debugger MQTT' }); // Redirige vers la route nommée 'debugger'
name: 'Debugger MQTT'
}); // Redirige vers la route nommée 'debugger'
}; };
onMounted(() => { onMounted(() => {
@ -76,12 +81,15 @@
localStorage.setItem('EmbeddedSound', EmbeddedSoundNewValue); // Mettre à jour l'état de la case à cocher dans le LocalStorage chaque fois qu'il change. localStorage.setItem('EmbeddedSound', EmbeddedSoundNewValue); // Mettre à jour l'état de la case à cocher dans le LocalStorage chaque fois qu'il change.
} }
}); });
watch(EmbeddedSoundVolume, (EmbeddedSoundVolumeNewValue) => { watch(EmbeddedSoundVolume, (EmbeddedSoundVolumeNewValue) => {
if (EmbeddedSoundVolumeNewValue !== null) { if (EmbeddedSoundVolumeNewValue !== null) {
localStorage.setItem('EmbeddedSoundVolume', EmbeddedSoundVolumeNewValue); // Mettre à jour l'état de la case à cocher dans le LocalStorage chaque fois qu'il change. localStorage.setItem('EmbeddedSoundVolume', EmbeddedSoundVolumeNewValue); // Mettre à jour l'état de la case à cocher dans le LocalStorage chaque fois qu'il change.
} }
}); });
watch(MQTTSound, (MQTTSoundNewValue) => { watch(MQTTSound, (MQTTSoundNewValue) => {
if (MQTTSoundNewValue !== null) { if (MQTTSoundNewValue !== null) {
localStorage.setItem('MQTTSound', MQTTSoundNewValue); // Mettre à jour l'état de la case à cocher dans le LocalStorage chaque fois qu'il change. localStorage.setItem('MQTTSound', MQTTSoundNewValue); // Mettre à jour l'état de la case à cocher dans le LocalStorage chaque fois qu'il change.
} }
@ -91,11 +99,13 @@
localStorage.setItem('SattelitesDisplay', SattelitesDisplaynewValue); // Added a default value for this switch localStorage.setItem('SattelitesDisplay', SattelitesDisplaynewValue); // Added a default value for this switch
} }
}); });
watch(SuccessPlay, (SuccessPlaynewValue) => { watch(SuccessPlay, (SuccessPlaynewValue) => {
if (SuccessPlaynewValue !== null) { if (SuccessPlaynewValue !== null) {
localStorage.setItem('SuccessPlay', SuccessPlaynewValue); // Added a default value for this switch localStorage.setItem('SuccessPlay', SuccessPlaynewValue); // Added a default value for this switch
} }
}); });
watch(ErrorPlay, (ErrorPlaynewValue) => { watch(ErrorPlay, (ErrorPlaynewValue) => {
if (ErrorPlaynewValue !== null) { if (ErrorPlaynewValue !== null) {
localStorage.setItem('ErrorPlay', ErrorPlaynewValue); // Added a default value for this switch localStorage.setItem('ErrorPlay', ErrorPlaynewValue); // Added a default value for this switch
@ -104,29 +114,29 @@
</script> </script>
<style> <style>
.title-style-1{ .title-style-1{
margin-top: 20px; margin-top: 20px;
margin-bottom: 16px; margin-bottom: 16px;
margin-left: 20px; margin-left: 20px;
font-size: 30px; font-size: 30px;
opacity: 100%; opacity: 100%;
font-weight: 500; font-weight: 500;
} }
.title-style-2{ .title-style-2{
margin-top: 20px; margin-top: 20px;
margin-bottom: 10px; margin-bottom: 10px;
margin-left: 40px; margin-left: 40px;
font-size: 25px; font-size: 25px;
opacity: 100%; opacity: 100%;
font-weight: 500; font-weight: 500;
} }
.mutltiple-per-line{ .mutltiple-per-line{
display: flex; display: flex;
align-items: center; align-items: center;
} }
.v-slider-style{ .v-slider-style{
width: 250px; width: 250px;
margin-left: 16px; margin-left: 16px;
padding-top: px; padding-top: px;
} }
</style> </style>

19
ui/vite.config.js
View File

@ -9,9 +9,24 @@ import { defineConfig } from 'vite'
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [ vue({ template: { transformAssetUrls } }), Vuetify(), ViteFonts({ google: { families: [{ name: 'Roboto', styles: 'wght@100;300;400;500;700;900', }] } }), plugins: [
vue({
template: { transformAssetUrls }
}),
Vuetify(),
ViteFonts({
google: {
families: [{
name: 'Roboto',
styles: 'wght@100;300;400;500;700;900',
}]
}
}),
], ],
define: { 'process.env': {} }, define: { 'process.env': {} },
resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
} }
}) })