From 83ce4b4fcc614efd5d94a6c023e50fc99b280b1c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20CHOMAZ?= <jeremy.chomaz20@gmail.com>
Date: Sat, 23 Mar 2024 16:21:31 +0100
Subject: [PATCH 1/2] =?UTF-8?q?Modification=20du=20GameStatus=20avec=20ajo?=
 =?UTF-8?q?ut=20de=20la=20preview=20des=20buzzer=20connect=C3=A9s=20(juste?=
 =?UTF-8?q?=20l'UI=20Design=20pour=20l'instant)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/components/CardControl.vue |  2 +-
 ui/src/components/GameStatus.vue  | 39 +++++++++++++++++++++++++++----
 ui/src/plugins/vuetify.js         |  6 ++++-
 ui/src/views/GameControl.vue      |  4 ++--
 4 files changed, 42 insertions(+), 9 deletions(-)

diff --git a/ui/src/components/CardControl.vue b/ui/src/components/CardControl.vue
index 235c841..17a8a61 100644
--- a/ui/src/components/CardControl.vue
+++ b/ui/src/components/CardControl.vue
@@ -1,6 +1,6 @@
 <template>
   <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>
       Contrôles
     </v-card-title>
diff --git a/ui/src/components/GameStatus.vue b/ui/src/components/GameStatus.vue
index 9a1f078..a421df3 100644
--- a/ui/src/components/GameStatus.vue
+++ b/ui/src/components/GameStatus.vue
@@ -1,9 +1,38 @@
 <template>
   <v-navigation-drawer>
-    <v-list-item title="Brain Blast" subtitle="The cultural quizzzz"></v-list-item>
-    <v-divider></v-divider>
-    <v-list-item link title="List Item 1"></v-list-item>
-    <v-list-item link title="List Item 2"></v-list-item>
-    <v-list-item link title="List Item 3"></v-list-item>
+    <div class="label-pos">
+    <v-label class="label-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-row>
+
+    <v-divider :thickness="2" class="border-opacity-100" color="primary"/>
+    
   </v-navigation-drawer>
 </template>
+
+
+<style>
+  .label-pos{
+    padding-top: 15px;
+    text-align: center;
+  }
+  .label-style{
+    font-size: 20px !important;
+    font-weight: 500;
+    color: #e91e1e !important;
+    opacity: 90% !important;
+  }
+  .button-pos{
+    padding-top: 10px;
+    padding-bottom: 15px;
+    display: flex;
+    text-align: center;
+  }
+
+</style>
\ No newline at end of file
diff --git a/ui/src/plugins/vuetify.js b/ui/src/plugins/vuetify.js
index 8e76497..98d85d2 100644
--- a/ui/src/plugins/vuetify.js
+++ b/ui/src/plugins/vuetify.js
@@ -21,7 +21,11 @@ const CustomThemeDark = {
     error: '#e91e1e',
     warning: '#FFC107',
     info: '#607D8B',
-    success: '#e91e1e'
+    success: '#e91e1e',
+    BuzzerBlue: '#2867d4',
+    BuzzerOrange: '#d48f28',
+    BuzzerRed: '#d42828',
+    BuzzerGreen: '#28d42e',
   }
 }
 const CustomThemeLight = {
diff --git a/ui/src/views/GameControl.vue b/ui/src/views/GameControl.vue
index 57eec74..7f2e71d 100644
--- a/ui/src/views/GameControl.vue
+++ b/ui/src/views/GameControl.vue
@@ -29,14 +29,14 @@ import CardSoundboard from '@/components/CardSoundboard.vue';
 <style>
 @media (min-width: 1024px) {
   .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 {
       background-color: #2E7D32; /* Changez la couleur en fonction de votre thème */
   }
   .btn{
     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>

From ed78ffc158f7ba47049c7acf2dd3a77ef9dc85e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20CHOMAZ?= <jeremy.chomaz20@gmail.com>
Date: Mon, 1 Apr 2024 13:16:47 +0200
Subject: [PATCH 2/2] =?UTF-8?q?Ajout=20des=204=20emplacements=20de=20score?=
 =?UTF-8?q?=20dans=20le=20GameStatus,=20cr=C3=A9ation=20du=20fichier=20de?=
 =?UTF-8?q?=20r=C3=A9f=C3=A9rence=20des=20variables=20pour=20le=20localsto?=
 =?UTF-8?q?rage,=20d=C3=A9sactivation=20du=20footer=20(pour=20l'instant)?=
 =?UTF-8?q?=20et=20arrangement=20pour=20le=20format=20de=20la=20tablette?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/App.vue                       |  2 +-
 ui/src/components/BrainBlastBar.vue  |  2 +-
 ui/src/components/CardControl.vue    | 18 +++----
 ui/src/components/CardSolution.vue   |  4 +-
 ui/src/components/CardSoundboard.vue | 26 ++++-----
 ui/src/components/GameStatus.vue     | 79 ++++++++++++++++++++++++----
 ui/src/variables.js                  |  8 +++
 7 files changed, 102 insertions(+), 37 deletions(-)
 create mode 100644 ui/src/variables.js

diff --git a/ui/src/App.vue b/ui/src/App.vue
index 89b4592..1ba6ce8 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -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>
 
diff --git a/ui/src/components/BrainBlastBar.vue b/ui/src/components/BrainBlastBar.vue
index 55b8bf4..4bac171 100644
--- a/ui/src/components/BrainBlastBar.vue
+++ b/ui/src/components/BrainBlastBar.vue
@@ -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>
 
diff --git a/ui/src/components/CardControl.vue b/ui/src/components/CardControl.vue
index 17a8a61..80668c8 100644
--- a/ui/src/components/CardControl.vue
+++ b/ui/src/components/CardControl.vue
@@ -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>
diff --git a/ui/src/components/CardSolution.vue b/ui/src/components/CardSolution.vue
index 88ffddd..e5af56c 100644
--- a/ui/src/components/CardSolution.vue
+++ b/ui/src/components/CardSolution.vue
@@ -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>
diff --git a/ui/src/components/CardSoundboard.vue b/ui/src/components/CardSoundboard.vue
index 5c2a54e..579c1a3 100644
--- a/ui/src/components/CardSoundboard.vue
+++ b/ui/src/components/CardSoundboard.vue
@@ -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>
diff --git a/ui/src/components/GameStatus.vue b/ui/src/components/GameStatus.vue
index a421df3..744ca8b 100644
--- a/ui/src/components/GameStatus.vue
+++ b/ui/src/components/GameStatus.vue
@@ -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>
\ No newline at end of file
diff --git a/ui/src/variables.js b/ui/src/variables.js
new file mode 100644
index 0000000..72c2690
--- /dev/null
+++ b/ui/src/variables.js
@@ -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') || '',
+  }; 
\ No newline at end of file