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>
<RouterView />
</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>
</template>

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

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

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

@ -1,29 +1,29 @@
<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>
<v-icon left class="white--text pr-5 pl-2" size="40">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 width="220" height="110" class="btn xs12 sm6 md3" topic="/display/control" message="previous">
<v-icon left size="80">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 width="240" height="110" class="btn card xs12 sm6 md3" topic="/display/control" message="next">
<v-icon left size="80">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 width="240" height="110" class="btn card xs12 sm6 md3" topic="/display/control" message="pause">
<v-icon left size="80">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 width="240" height="110" class="btn card xs12 sm6 md3 " topic="/display/control" message="play">
<v-icon left size="80">mdi-play</v-icon>
</mqtt-button>
</v-col>
</v-row>

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

@ -1,14 +1,14 @@
<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>
<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="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-row>
</v-container>

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

@ -1,36 +1,36 @@
<template>
<v-card tile outlined class="card" color="">
<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-music-box-multiple</v-icon>
<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" width="200" height="130" topic="/sound/playsound" message="good-response" rounded>
<v-icon size="100">mdi-check-circle-outline</v-icon>
<mqtt-button class="btn" width="200" height="110" topic="/sound/playsound" message="good-response" rounded>
<v-icon size="70">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 class="btn" width="200" height="110" topic="/sound/playsound" message="bad-response" rounded>
<v-icon size="70">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 class="btn" width="200" height="110" topic="/sound/playsound" message="timer" rounded>
<v-icon size="70">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 class="btn" width="220" height="110" topic="/sound/playsound" message="applause" rounded>
<v-icon size="70">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>
<v-col cols="12" sm="6" md="4" class="mb-4">
<mqtt-button class="btn" width="220" height="110" topic="/sound/playsound" message="bell" rounded>
<v-icon size="70">mdi-bell-outline</v-icon>
</mqtt-button>
</v-col>
</v-row>

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

@ -1,38 +1,95 @@
<template>
<v-navigation-drawer>
<v-navigation-drawer width="250">
<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>
<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 v-modal="BuzzerBlue"class="button-pos" color="BuzzerBlue">mdi-radiobox-marked</v-icon>
<v-icon v-modal="BuzzerOrange" color="BuzzerOrange">mdi-radiobox-marked</v-icon>
<v-icon v-modal="BuzzerGreen" color="BuzzerGreen">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="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"/>
<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>
</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>
.label-pos{
padding-top: 15px;
text-align: center;
}
.label-style{
.labelTitle-style{
font-size: 20px !important;
font-weight: 500;
color: #e91e1e !important;
opacity: 90% !important;
}
.labelScore-style{
opacity: 100% !important;
}
.button-pos{
padding-top: 10px;
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>

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') || '',
};