Merge pull request #43 from Pandipipas/add-game-selector-to-scoreboard-panel

Add centered fighting-game selector with icon-only swap/reset controls

schemas/scoreboard.json

@@ -48,6 +48,10 @@
     "round": {
       "type": "string",
       "default": ""
+    },
+    "game": {
+      "type": "string",
+      "default": ""
     }
   },
   "required": [
@@ -61,7 +65,8 @@
     "rightCountryOverride",
     "leftScore",
     "rightScore",
-    "round"
+    "round",
+    "game"
   ],
   "default": {
     "leftPlayerId": "",
@@ -74,6 +79,7 @@
     "rightCountryOverride": "",
     "leftScore": 0,
     "rightScore": 0,
-    "round": ""
+    "round": "",
+    "game": ""
   }
 }

src/dashboard/example/components/ScoreboardPanel.vue

@@ -23,6 +23,19 @@ const rightCountryInput = ref('');
 const leftCountryOptions = ref(countryOptions);
 const rightCountryOptions = ref(countryOptions);
 
+const fightingGameOptions = [
+  'Street Fighter 6',
+  'TEKKEN 8',
+  'Guilty Gear -Strive-',
+  'Mortal Kombat 1',
+  'The King of Fighters XV',
+  'Granblue Fantasy Versus: Rising',
+  'Under Night In-Birth II Sys:Celes',
+].map((game) => ({
+  label: game,
+  value: game,
+}));
+
 const normalizeName = (value: string) => value.trim().toLowerCase();
 
 const filterOptions = (
@@ -561,26 +574,10 @@ watchEffect(() => {
       <div class="text-h4">
         Scoreboard
       </div>
-      <QSpace />
-      <QBtn
-        color="secondary"
-        outline
-        icon="swap_horiz"
-        label="Intercambiar lados"
-        class="q-mr-sm"
-        @click="scoreboardStore.swapPlayers"
-      />
-      <QBtn
-        color="secondary"
-        outline
-        icon="restart_alt"
-        label="Reset scores"
-        @click="scoreboardStore.resetScores"
-      />
     </div>
 
-    <div class="row q-col-gutter-lg">
-      <div class="col-12 col-md-6">
+    <div class="row q-col-gutter-lg items-start">
+      <div class="col-12 col-md-5">
         <QCard
           flat
           bordered
@@ -685,7 +682,45 @@ watchEffect(() => {
         </QCard>
       </div>
 
-      <div class="col-12 col-md-6">
+      <div class="col-12 col-md-2">
+        <QCard
+          flat
+          bordered
+        >
+          <QCardSection>
+            <div class="column items-center q-gutter-sm">
+              <div class="row items-center q-gutter-sm">
+                <QBtn
+                  color="secondary"
+                  outline
+                  round
+                  icon="swap_horiz"
+                  @click="scoreboardStore.swapPlayers"
+                />
+                <QBtn
+                  color="secondary"
+                  outline
+                  round
+                  icon="restart_alt"
+                  @click="scoreboardStore.resetScores"
+                />
+              </div>
+              <QSelect
+                v-model="scoreboardStore.scoreboard.game"
+                :options="fightingGameOptions"
+                label="Juego"
+                dense
+                outlined
+                emit-value
+                map-options
+                class="full-width"
+              />
+            </div>
+          </QCardSection>
+        </QCard>
+      </div>
+
+      <div class="col-12 col-md-5">
         <QCard
           flat
           bordered

src/dashboard/example/stores/scoreboard.ts

@@ -19,6 +19,7 @@ const defaultScoreboard: Scoreboard = {
   leftScore: 0,
   rightScore: 0,
   round: '',
+  game: '',
 };
 
 const normalizeScoreboard = (input: unknown): Scoreboard => {
@@ -35,6 +36,7 @@ const normalizeScoreboard = (input: unknown): Scoreboard => {
     leftScore: typeof candidate.leftScore === 'number' ? Math.max(0, Math.floor(candidate.leftScore)) : 0,
     rightScore: typeof candidate.rightScore === 'number' ? Math.max(0, Math.floor(candidate.rightScore)) : 0,
     round: typeof candidate.round === 'string' ? candidate.round : '',
+    game: typeof candidate.game === 'string' ? candidate.game : '',
   };
 };
 

src/graphics/scoreboard/main.vue

@@ -19,6 +19,7 @@ const defaultScoreboard: Schemas.Scoreboard = {
   leftScore: 0,
   rightScore: 0,
   round: '',
+  game: '',
 };
 
 const players = computed<Schemas.Players>(() => playersReplicant?.data ?? {});

src/types/schemas/scoreboard.d.ts

@@ -18,4 +18,5 @@ export interface Scoreboard {
 	leftScore: number;
 	rightScore: number;
 	round: string;
+	game: string;
 }