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

Ajout d'un draft d'un quizz + un draft de l'exploitation des images via un webrequest sur pictureEngine.js

Browse Source
This commit is contained in:
Jérémy CHOMAZ
2024-09-11 15:38:13 +02:00
parent f2aa7e64a0
commit d0cc633264
54 changed files with 1786 additions and 997 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,23 +1,22 @@
<template>
<v-container>
<v-row no-gutters>
<v-col class="align-start">
<card-control />
</v-col>
<v-col class="pl-3">
<card-soundboard />
<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 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>
@ -33,49 +32,45 @@ import CardButtonScore from '@/components/CardButtonScore.vue'
<style>
@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{
.btn{
border-radius:20px!important;
}
.btn.red {
background-color: #d42828; /* Changez la couleur en fonction de votre thème */
.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.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.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 */
.btn.green {
background-color: #28d42e; /* Changez la couleur en fonction de votre thème */
}
.scorediv-style-red {
background-color: #d42828 !important;
padding: 15px;
.scorediv-style-red {
background-color: #d42828 !important;
padding: 15px;
border-top-left-radius: 10%;
}
.scorediv-style-orange {
background-color: #d48f28 !important;
padding: 15px;
.scorediv-style-orange {
background-color: #d48f28 !important;
padding: 15px;
border-bottom-left-radius: 10%;
}
.scorediv-style-blue {
background-color: #2867d4 !important;
padding: 15px;
.scorediv-style-blue {
background-color: #2867d4 !important;
padding: 15px;
border-top-right-radius: 10%;
}
.scorediv-style-green {
background-color: #28d42e !important;
padding: 15px;
.scorediv-style-green {
background-color: #28d42e !important;
padding: 15px;
border-bottom-right-radius: 10%;
}
}

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

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

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

@ -1,10 +1,6 @@
<template>
<div>
<!-- Zone pour publier sur MQTT -->
<PublishMQTTComponent />
<!-- Zone pour afficher la console MQTT -->
<MQTTConsoleComponent />
<div> <!-- Zone pour publier sur MQTT --> <PublishMQTTComponent />
<!-- Zone pour afficher la console MQTT --> <MQTTConsoleComponent />
</div>
</template>
@ -13,24 +9,18 @@ import PublishMQTTComponent from '@/components/MQTTDebugPublish.vue' // Importer
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
components: { PublishMQTTComponent, // Composant pour publier sur MQTT MQTTConsoleComponent // Composant pour la console MQTT
}
}
</script>
<style>
@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>

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

@ -1,39 +1,32 @@
<template>
<v-label class="title-style-1">Paramètres</v-label>
<v-divider :thickness="2" class="border-opacity-100" color="primary"/>
<v-label class="title-style-2">Son</v-label>
<div class="mutltiple-per-line">
<v-switch hide-details label="Activer le son intégré" v-model="EmbeddedSound" class="ml-15" color="primary"/>
<div>
<v-slider hide-details class="v-slider-style ml-15" :disabled="EmbeddedSound === false" v-model="EmbeddedSoundVolume" color="primary"/>
</div>
</div>
<v-switch label="Activer le son MQTT" v-model="MQTTSound" class="ml-15" color="primary"/>
<v-divider />
<v-label class="title-style-2">Affichage</v-label>
<div>
<v-switch hide-details label="Activer l'affichage des sattelites" v-model="SattelitesDisplay" class="ml-15 pb-3" color="primary"/>
</div>
<v-divider />
<v-label class="title-style-2">MQTT</v-label>
<div class="mutltiple-per-line">
<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-btn class="ml-10 mb-5" color="primary" @click="goToDebugRoute">Debugger</v-btn>
</div>
<v-divider />
<v-label class="title-style-2">Jeu</v-label>
<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"/>
</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"/>
<template>
<v-label class="title-style-1">Paramètres</v-label>
<v-divider :thickness="2" class="border-opacity-100" color="primary"/>
<v-label class="title-style-2">Son</v-label>
<div class="mutltiple-per-line">
<v-switch hide-details label="Activer le son intégré" v-model="EmbeddedSound" class="ml-15" color="primary"/>
<div>
<v-slider hide-details class="v-slider-style ml-15" :disabled="EmbeddedSound === false" v-model="EmbeddedSoundVolume" color="primary"/>
</div>
</div>
<v-switch label="Activer le son MQTT" v-model="MQTTSound" class="ml-15" color="primary"/>
<v-divider />
<v-label class="title-style-2">Affichage</v-label>
<div>
<v-switch hide-details label="Activer l'affichage des sattelites" v-model="SattelitesDisplay" class="ml-15 pb-3" color="primary"/>
</div>
<v-divider />
<v-label class="title-style-2">MQTT</v-label>
<div class="mutltiple-per-line">
<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-btn class="ml-10 mb-5" color="primary" @click="goToDebugRoute">Debugger</v-btn>
</div>
<v-divider />
<v-label class="title-style-2">Jeu</v-label>
<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"/>
</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"/>
</template>
@ -51,92 +44,89 @@
const ErrorPlay = ref(false);
const router = useRouter();
const goToDebugRoute = () => {
router.push({ name: 'Debugger MQTT' }); // Redirige vers la route nommée 'debugger'
};
const goToDebugRoute = () => {
router.push({
name: 'Debugger MQTT'
}); // Redirige vers la route nommée 'debugger'
};
onMounted(() => {
if (localStorage.getItem('EmbeddedSound')) {
EmbeddedSound.value = localStorage.getItem('EmbeddedSound') === 'true'; // Si l'état de la case à cocher est stocké, le mettre dans la référence
}
if (localStorage.getItem('MQTTSound')) {
MQTTSound.value = localStorage.getItem('MQTTSound') === 'true'; // Si l'état de la case à cocher est stocké, le mettre dans la référence
}
if (localStorage.getItem('EmbeddedSoundVolume')) {
EmbeddedSoundVolume.value = localStorage.getItem('EmbeddedSoundVolume'); // Si l'état de la case à cocher est stocké, le mettre dans la référence
}
if (localStorage.getItem('SattelitesDisplay')) {
SattelitesDisplay.value = localStorage.getItem('SattelitesDisplay') === 'true'; // Added a default value for this switch
}
if (localStorage.getItem('SuccessPlay')) {
SuccessPlay.value = localStorage.getItem('SuccessPlay') === 'true'; // Added a default value for this switch
}
if (localStorage.getItem('ErrorPlay')) {
ErrorPlay.value = localStorage.getItem('ErrorPlay') === 'true'; // Added a default value for this switch
}
onMounted(() => {
if (localStorage.getItem('EmbeddedSound')) {
EmbeddedSound.value = localStorage.getItem('EmbeddedSound') === 'true'; // Si l'état de la case à cocher est stocké, le mettre dans la référence
}
if (localStorage.getItem('MQTTSound')) {
MQTTSound.value = localStorage.getItem('MQTTSound') === 'true'; // Si l'état de la case à cocher est stocké, le mettre dans la référence
}
if (localStorage.getItem('EmbeddedSoundVolume')) {
EmbeddedSoundVolume.value = localStorage.getItem('EmbeddedSoundVolume'); // Si l'état de la case à cocher est stocké, le mettre dans la référence
}
if (localStorage.getItem('SattelitesDisplay')) {
SattelitesDisplay.value = localStorage.getItem('SattelitesDisplay') === 'true'; // Added a default value for this switch
}
if (localStorage.getItem('SuccessPlay')) {
SuccessPlay.value = localStorage.getItem('SuccessPlay') === 'true'; // Added a default value for this switch
}
if (localStorage.getItem('ErrorPlay')) {
ErrorPlay.value = localStorage.getItem('ErrorPlay') === 'true'; // Added a default value for this switch
}
});
watch(EmbeddedSound, (EmbeddedSoundNewValue) => {
if (EmbeddedSoundNewValue !== null) {
localStorage.setItem('EmbeddedSound', EmbeddedSoundNewValue); // Mettre à jour l'état de la case à cocher dans le LocalStorage chaque fois qu'il change.
}
});
watch(EmbeddedSoundVolume, (EmbeddedSoundVolumeNewValue) => {
if (EmbeddedSoundVolumeNewValue !== null) {
localStorage.setItem('EmbeddedSoundVolume', EmbeddedSoundVolumeNewValue); // Mettre à jour l'état de la case à cocher dans le LocalStorage chaque fois qu'il change.
}
});
watch(MQTTSound, (MQTTSoundNewValue) => {
if (MQTTSoundNewValue !== null) {
localStorage.setItem('MQTTSound', MQTTSoundNewValue); // Mettre à jour l'état de la case à cocher dans le LocalStorage chaque fois qu'il change.
}
});
watch(SattelitesDisplay, (SattelitesDisplaynewValue) => {
if (SattelitesDisplaynewValue !== null) {
localStorage.setItem('SattelitesDisplay', SattelitesDisplaynewValue); // Added a default value for this switch
}
});
watch(SuccessPlay, (SuccessPlaynewValue) => {
if (SuccessPlaynewValue !== null) {
localStorage.setItem('SuccessPlay', SuccessPlaynewValue); // Added a default value for this switch
}
});
watch(ErrorPlay, (ErrorPlaynewValue) => {
if (ErrorPlaynewValue !== null) {
localStorage.setItem('ErrorPlay', ErrorPlaynewValue); // Added a default value for this switch
}
});
watch(EmbeddedSound, (EmbeddedSoundNewValue) => {
if (EmbeddedSoundNewValue !== null) {
localStorage.setItem('EmbeddedSound', EmbeddedSoundNewValue); // Mettre à jour l'état de la case à cocher dans le LocalStorage chaque fois qu'il change.
}
});
watch(EmbeddedSoundVolume, (EmbeddedSoundVolumeNewValue) => {
if (EmbeddedSoundVolumeNewValue !== null) {
localStorage.setItem('EmbeddedSoundVolume', EmbeddedSoundVolumeNewValue); // Mettre à jour l'état de la case à cocher dans le LocalStorage chaque fois qu'il change.
}
});
watch(MQTTSound, (MQTTSoundNewValue) => {
if (MQTTSoundNewValue !== null) {
localStorage.setItem('MQTTSound', MQTTSoundNewValue); // Mettre à jour l'état de la case à cocher dans le LocalStorage chaque fois qu'il change.
}
});
watch(SattelitesDisplay, (SattelitesDisplaynewValue) => {
if (SattelitesDisplaynewValue !== null) {
localStorage.setItem('SattelitesDisplay', SattelitesDisplaynewValue); // Added a default value for this switch
}
});
watch(SuccessPlay, (SuccessPlaynewValue) => {
if (SuccessPlaynewValue !== null) {
localStorage.setItem('SuccessPlay', SuccessPlaynewValue); // Added a default value for this switch
}
});
watch(ErrorPlay, (ErrorPlaynewValue) => {
if (ErrorPlaynewValue !== null) {
localStorage.setItem('ErrorPlay', ErrorPlaynewValue); // Added a default value for this switch
}
});
</script>
<style>
.title-style-1{
margin-top: 20px;
margin-bottom: 16px;
margin-left: 20px;
font-size: 30px;
opacity: 100%;
font-weight: 500;
}
.title-style-2{
margin-top: 20px;
margin-bottom: 10px;
margin-left: 40px;
font-size: 25px;
opacity: 100%;
font-weight: 500;
}
.mutltiple-per-line{
display: flex;
align-items: center;
}
.v-slider-style{
width: 250px;
margin-left: 16px;
padding-top: px;
}
.title-style-1{
margin-top: 20px;
margin-bottom: 16px;
margin-left: 20px;
font-size: 30px;
opacity: 100%;
font-weight: 500;
}
.title-style-2{
margin-top: 20px;
margin-bottom: 10px;
margin-left: 40px;
font-size: 25px;
opacity: 100%;
font-weight: 500;
}
.mutltiple-per-line{
display: flex;
align-items: center;
}
.v-slider-style{
width: 250px;
margin-left: 16px;
padding-top: px;
}
</style>