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

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

Browse Source
This commit is contained in:
Jérémy CHOMAZ 2024-04-01 13:16:47 +02:00
parent 83ce4b4fcc
commit ed78ffc158
7 changed files with 102 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/src/App.vue
View File

@ -5,7 +5,7 @@
<v-main> <v-main>
<RouterView /> <RouterView />
</v-main> </v-main>
<v-footer class="footer" :elevation=12 border><v-row justify="center">© 2024 - ASCO section Fablab</v-row></v-footer> <!-- <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>

2
ui/src/components/BrainBlastBar.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<v-app-bar :elevation="5"> <v-app-bar :elevation="5" height="50">
<RouterMenu /> <RouterMenu />
<v-app-bar-title>Brain Blast</v-app-bar-title> <v-app-bar-title>Brain Blast</v-app-bar-title>

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

@ -1,29 +1,29 @@
<template> <template>
<v-card tile outlined class="card"> <v-card tile outlined class="card">
<v-card-title class="card__title primary"> <v-card-title class="card__title primary">
<v-icon left class="white--text pr-5 pl-2" size="50">mdi-camera-control</v-icon> <v-icon left class="white--text pr-5 pl-2" size="40">mdi-camera-control</v-icon>
Contrôles Contrôles
</v-card-title> </v-card-title>
<v-container class="text-center"> <v-container class="text-center">
<v-row justify="center"> <v-row justify="center">
<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="240" height="130" class="btn xs12 sm6 md3" topic="/display/control" message="previous"> <mqtt-button width="220" height="110" class="btn xs12 sm6 md3" topic="/display/control" message="previous">
<v-icon left size="100">mdi-skip-previous</v-icon> <v-icon left size="80">mdi-skip-previous</v-icon>
</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="240" height="130" class="btn card xs12 sm6 md3" topic="/display/control" message="next"> <mqtt-button width="240" height="110" class="btn card xs12 sm6 md3" topic="/display/control" message="next">
<v-icon left size="100">mdi-skip-next</v-icon> <v-icon left size="80">mdi-skip-next</v-icon>
</mqtt-button> </mqtt-button>
</v-col> </v-col>
<v-col cols="12" sm="6" md="5" class="mb-4"> <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"> <mqtt-button width="240" height="110" class="btn card xs12 sm6 md3" topic="/display/control" message="pause">
<v-icon left size="100">mdi-pause</v-icon> <v-icon left size="80">mdi-pause</v-icon>
</mqtt-button> </mqtt-button>
</v-col> </v-col>
<v-col cols="12" sm="6" md="5" class="mb-4"> <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"> <mqtt-button width="240" height="110" class="btn card xs12 sm6 md3 " topic="/display/control" message="play">
<v-icon left size="100">mdi-play</v-icon> <v-icon left size="80">mdi-play</v-icon>
</mqtt-button> </mqtt-button>
</v-col> </v-col>
</v-row> </v-row>

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

@ -1,14 +1,14 @@
<template> <template>
<v-card tile outlined class="card"> <v-card tile outlined class="card">
<v-card-title class="card__title feedback"> <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> <v-icon left class="white--text pr-5 pl-2" size="40">mdi-play-network-outline</v-icon>
Solution Solution
</v-card-title> </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"> <v-container class="text-center">
<!-- Utilisation de styles CSS personnalisés pour centrer l'image --> <!-- 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-img width="400" 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-container>
</v-row> </v-row>
</v-container> </v-container>

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

@ -1,36 +1,36 @@
<template> <template>
<v-card tile outlined class="card" color=""> <v-card tile outlined class="card">
<v-card-title class="card__title primary"> <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> <v-icon left class="white--text pr-5 pl-2" size="40">mdi-music-box-multiple</v-icon>
Soundboard Soundboard
</v-card-title> </v-card-title>
<v-container class="text-center"> <v-container class="text-center">
<v-row justify="center"> <v-row justify="center">
<v-col cols="12" sm="6" md="4" class="mt-4"> <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> <mqtt-button class="btn" width="200" height="110" topic="/sound/playsound" message="good-response" rounded>
<v-icon size="100">mdi-check-circle-outline</v-icon> <v-icon size="70">mdi-check-circle-outline</v-icon>
</mqtt-button> </mqtt-button>
</v-col> </v-col>
<v-col cols="12" sm="6" md="4" class="mt-4"> <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> <mqtt-button class="btn" width="200" height="110" topic="/sound/playsound" message="bad-response" rounded>
<v-icon size="100">mdi-close-circle-outline</v-icon> <v-icon size="70">mdi-close-circle-outline</v-icon>
</mqtt-button> </mqtt-button>
</v-col> </v-col>
<v-col cols="12" sm="6" md="4" class="mt-4"> <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> <mqtt-button class="btn" width="200" height="110" topic="/sound/playsound" message="timer" rounded>
<v-icon size="100">mdi-timer-outline</v-icon> <v-icon size="70">mdi-timer-outline</v-icon>
</mqtt-button> </mqtt-button>
</v-col> </v-col>
</v-row> </v-row>
<v-row justify="center"> <v-row justify="center">
<v-col cols="12" sm="6" md="4" class="mb-4"> <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> <mqtt-button class="btn" width="220" height="110" topic="/sound/playsound" message="applause" rounded>
<v-icon size="100">mdi-human-handsup</v-icon> <v-icon size="70">mdi-human-handsup</v-icon>
</mqtt-button> </mqtt-button>
</v-col> </v-col>
<v-col cols="12" sm="6" md="s" class="mb-4"> <v-col cols="12" sm="6" md="4" class="mb-4">
<mqtt-button class="btn" width="220" height="130" topic="/sound/playsound" message="bell" rounded> <mqtt-button class="btn" width="220" height="110" topic="/sound/playsound" message="bell" rounded>
<v-icon size="100">mdi-bell-outline</v-icon> <v-icon size="70">mdi-bell-outline</v-icon>
</mqtt-button> </mqtt-button>
</v-col> </v-col>
</v-row> </v-row>

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

@ -1,38 +1,95 @@
<template> <template>
<v-navigation-drawer> <v-navigation-drawer width="250">
<div class="label-pos"> <div class="label-pos">
<v-label class="label-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 v-modal="BuzzerRed" class="button-pos" color="BuzzerRed">mdi-radiobox-marked</v-icon> <v-icon color="BuzzerRed">mdi-radiobox-marked</v-icon>
<v-icon v-modal="BuzzerBlue"class="button-pos" color="BuzzerBlue">mdi-radiobox-marked</v-icon> <v-icon color="BuzzerBlue">mdi-radiobox-marked</v-icon>
<v-icon v-modal="BuzzerOrange" color="BuzzerOrange">mdi-radiobox-marked</v-icon> <v-icon color="BuzzerOrange">mdi-radiobox-marked</v-icon>
<v-icon v-modal="BuzzerGreen" 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"/>
<div class="label-pos">
<v-label class="labelTitle-style pb-7">Scores</v-label>
</div>
<div>
<v-row no-gutters justify="space-around" class="scorebox-1-pos">
<v-row>
<v-col class="align-start scorediv-style-red pr-1">
<v-label class="labelScore-style">{{ localStorageVars.RedScore }}</v-label>
</v-col>
<v-col class="align-start scorediv-style-blue pl-1">
<v-label class="labelScore-style">{{ localStorageVars.BlueScore }}</v-label>
</v-col>
</v-row>
</v-row>
</div>
<div>
<v-row no-gutters justify="space-around" class="scorebox-2-pos mb-0">
<v-row>
<v-col class="align-start scorediv-style-orange pr-1">
<v-label class="labelScore-style">{{ localStorageVars.OrangeScore }}</v-label>
</v-col>
<v-col class="align-start scorediv-style-green pl-1">
<v-label class="labelScore-style">{{ localStorageVars.GreenScore }}</v-label>
</v-col>
</v-row>
</v-row>
</div>
</v-navigation-drawer> </v-navigation-drawer>
</template> </template>
<script setup>
import { localStorageVars } from '@/variables.js';
localStorage.setItem('RedScore', 10);
localStorage.setItem('BlueScore', 11);
localStorage.setItem('OrangeScore', 12);
localStorage.setItem('GreenScore', 13);
</script>
<style> <style>
.label-pos{ .label-pos{
padding-top: 15px; padding-top: 15px;
text-align: center; text-align: center;
} }
.label-style{ .labelTitle-style{
font-size: 20px !important; font-size: 20px !important;
font-weight: 500; font-weight: 500;
color: #e91e1e !important; color: #e91e1e !important;
opacity: 90% !important; opacity: 90% !important;
} }
.labelScore-style{
opacity: 100% !important;
}
.button-pos{ .button-pos{
padding-top: 10px; padding-top: 10px;
padding-bottom: 15px; padding-bottom: 15px;
display: flex;
text-align: center;
} }
.scorebox-1-pos{
padding-bottom: 15px;
text-align: center;
margin:auto;
}
.scorebox-2-pos{
padding-top: 9px;
text-align: center;
margin:auto;
}
.scorediv-style-red{
background-color: #d42828 !important;
}
.scorediv-style-orange{
background-color: #d48f28 !important;
}
.scorediv-style-blue{
background-color: #2867d4 !important;
}
.scorediv-style-green{
background-color: #28d42e !important;
}
</style> </style>

8
ui/src/variables.js Normal file
View File

@ -0,0 +1,8 @@
// Variables localStorage
export const localStorageVars = {
// Exemple de variable localStorage
RedScore: localStorage.getItem('RedScore') || '',
BlueScore: localStorage.getItem('BlueScore') || '',
OrangeScore: localStorage.getItem('OrangeScore') || '',
GreenScore: localStorage.getItem('GreenScore') || '',
};