Add fighting game selector and icon-only center controls

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