feat(ui): resize text

Author: CorentinTh

src/modules/controls/controls.vue

@@ -1,18 +1,18 @@
 <script lang="ts" setup>
+import { Impro } from '@/models/Impro.model';
+import ImproList from '@/modules/shared/components/ImproList.vue';
 import { useDashboardStore } from '@/stores/dashboard.store';
 import { useEventStore } from '@/stores/event.store';
-import { useControlsStore } from './controls.store';
+import { currentMillisToUTCMillis, utcMillisToCurrentMillis } from '@/utils/date';
 import { ArrowUpRight, Lock } from '@vicons/tabler';
-import ColorPicker from './components/ColorPicker.vue';
-import TeamControl from './components/TeamControl.vue';
-import HorizontalTimer from './components/HorizontalTimer.vue';
-import EditableTimer from './components/EditableTimer.vue';
 import CategoryAutoComplete from '../shared/components/CategoryAutoComplete.vue';
-import TypeAutoComplete from '../shared/components/TypeAutoComplete.vue';
 import PlayerCountComplete from '../shared/components/PlayerCountComplete.vue';
-import { currentMillisToUTCMillis, utcMillisToCurrentMillis } from '@/utils/date';
-import ImproList from '@/modules/shared/components/ImproList.vue';
-import { Impro } from '@/models/Impro.model';
+import TypeAutoComplete from '../shared/components/TypeAutoComplete.vue';
+import ColorPicker from './components/ColorPicker.vue';
+import EditableTimer from './components/EditableTimer.vue';
+import HorizontalTimer from './components/HorizontalTimer.vue';
+import TeamControl from './components/TeamControl.vue';
+import { useControlsStore } from './controls.store';
 
 const dashboardStore = useDashboardStore();
 const eventStore = useEventStore();
@@ -130,6 +130,13 @@ function loadImpro(impro: Impro) {
                           :format-tooltip="(v: number) => `${Math.floor(v * 100)}%`"
                         />
                       </n-form-item>
+
+                      <n-form-item label="Taille des indications">
+                        <n-input-number v-model:value="dashboardStore.footerFontSize" style="width: 100%" />
+                      </n-form-item>
+                      <n-form-item label="Taille du thème">
+                        <n-input-number v-model:value="dashboardStore.themeFontSize" style="width: 100%" />
+                      </n-form-item>
                     </n-gi>
                     <n-gi>
                       <n-form-item label="Afficher le header">

src/modules/dashboard/dashboard.vue

@@ -55,12 +55,12 @@
 </template>
 
 <script lang="ts" setup>
-import { useEventStore } from '@/stores/event.store';
 import { useDashboardStore } from '@/stores/dashboard.store';
-import TeamInfo from './components/TeamInfo.vue';
-import Overlay from './components/Overlay.vue';
-import { darkTheme } from 'naive-ui';
+import { useEventStore } from '@/stores/event.store';
 import { formatTimer } from '@/utils/string';
+import { darkTheme } from 'naive-ui';
+import Overlay from './components/Overlay.vue';
+import TeamInfo from './components/TeamInfo.vue';
 
 const store = useDashboardStore();
 const eventStore = useEventStore();
@@ -110,7 +110,7 @@ const eventStore = useEventStore();
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
-    font-size: 26px;
+    font-size: v-bind("store.footerFontSizePx");
 
     .footer-left {
       width: 25%;
@@ -121,7 +121,7 @@ const eventStore = useEventStore();
       text-align: center;
 
       .footer-center-theme {
-        font-size: 60px;
+        font-size: v-bind("store.themeFontSizePx");
         color: hsla(0, 0%, 100%, 0.8);
       }
     }

src/stores/dashboard.store.ts

@@ -1,5 +1,5 @@
-import { Timer, TimerSate } from '@/models/Timers.model';
 import { Team } from '@/models/Team.model';
+import { Timer, TimerSate } from '@/models/Timers.model';
 import { defineStore } from 'pinia';
 import { reactive, toRefs } from 'vue';
 
@@ -14,8 +14,8 @@ function createTimerStore(partialSate: Partial<Timer>) {
         intervalId: -1,
         state: TimerSate.STOPPED,
       },
-      partialSate
-    )
+      partialSate,
+    ),
   );
 
   state.intervalId = window.setInterval(() => {
@@ -66,8 +66,8 @@ function createTeamStore(partialSate: Partial<Team>) {
         penality: 0,
         maxPenality: 3,
       },
-      partialSate
-    )
+      partialSate,
+    ),
   );
 
   function increasePenality() {
@@ -112,5 +112,11 @@ export const useDashboardStore = defineStore('dashboard', {
       displayed: true,
       content: "# Match d'impro",
     },
+    footerFontSize: 26,
+    themeFontSize: 60,
   }),
+  getters: {
+    footerFontSizePx: (state) => `${state.footerFontSize}px`,
+    themeFontSizePx: (state) => `${state.themeFontSize}px`,
+  },
 });