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

Merge branch 'AdaptationTablette'

Browse Source
This commit is contained in:
Jérémy CHOMAZ 2024-04-01 13:19:33 +02:00
commit c9f82674de
9 changed files with 134 additions and 36 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>

20
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" color="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>

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

@ -1,9 +1,95 @@
<template> <template>
<v-navigation-drawer> <v-navigation-drawer width="250">
<v-list-item title="Brain Blast" subtitle="The cultural quizzzz"></v-list-item> <div class="label-pos">
<v-divider></v-divider> <v-label class="labelTitle-style">Buzzer connectés</v-label>
<v-list-item link title="List Item 1"></v-list-item> </div>
<v-list-item link title="List Item 2"></v-list-item>
<v-list-item link title="List Item 3"></v-list-item> <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"/>
<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>
.label-pos{
padding-top: 15px;
text-align: center;
}
.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;
}
.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>

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

@ -21,7 +21,11 @@ const CustomThemeDark = {
error: '#e91e1e', error: '#e91e1e',
warning: '#FFC107', warning: '#FFC107',
info: '#607D8B', info: '#607D8B',
success: '#e91e1e' success: '#e91e1e',
BuzzerBlue: '#2867d4',
BuzzerOrange: '#d48f28',
BuzzerRed: '#d42828',
BuzzerGreen: '#28d42e',
} }
} }
const CustomThemeLight = { const CustomThemeLight = {

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

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

@ -29,14 +29,14 @@ import CardSoundboard from '@/components/CardSoundboard.vue';
<style> <style>
@media (min-width: 1024px) { @media (min-width: 1024px) {
.card__title.primary { .card__title.primary {
background-color: #2979FF; /* Changez la couleur en fonction de votre thème */ background-color: #e91e1e; /* Changez la couleur en fonction de votre thème */
} }
.card__title.feedback { .card__title.feedback {
background-color: #2E7D32; /* Changez la couleur en fonction de votre thème */ background-color: #2E7D32; /* Changez la couleur en fonction de votre thème */
} }
.btn{ .btn{
border-radius:30px!important; border-radius:30px!important;
background-color: #2979FF; /* Changez la couleur en fonction de votre thème */ background-color: #e91e1e; /* Changez la couleur en fonction de votre thème */
} }
} }
</style> </style>