Add character selectors under preview images and center actions

src/dashboard/example/components/ScoreboardPanel.vue

@@ -648,19 +648,39 @@ watch(
     >
       <div class="scoreboard-preview__side">
         <div class="scoreboard-preview__side-inner">
-          <div class="scoreboard-preview__image-wrap">
-            <img
-              v-if="leftPanelImage"
-              :src="leftPanelImage"
-              :alt="`${leftDisplayName || 'Left'} preview`"
-              class="scoreboard-preview__image"
-            >
-            <div
-              v-else
-              class="scoreboard-preview__empty"
-            >
-              Left image
+          <div class="scoreboard-preview__image-column">
+            <div class="scoreboard-preview__image-wrap">
+              <img
+                v-if="leftPanelImage"
+                :src="leftPanelImage"
+                :alt="`${leftDisplayName || 'Left'} preview`"
+                class="scoreboard-preview__image"
+              >
+              <div
+                v-else
+                class="scoreboard-preview__empty"
+              >
+                Left image
+              </div>
             </div>
+            <QSelect
+              v-model="scoreboardStore.scoreboard.leftCharacter"
+              v-model:input-value="leftCharacterInput"
+              :options="characterOptions"
+              option-value="value"
+              option-label="label"
+              emit-value
+              map-options
+              label="Character"
+              dense
+              use-input
+              input-debounce="0"
+              hide-selected
+              fill-input
+              clearable
+              class="scoreboard-preview__field scoreboard-preview__character-field"
+              :disable="!scoreboardStore.scoreboard.game"
+            />
           </div>
           <div class="scoreboard-preview__controls">
             <QSelect
@@ -746,46 +766,65 @@ watch(
         </div>
       </div>
 
-      <div class="scoreboard-preview__score-controls">
-        <div class="scoreboard-preview__score-side">
-          <QBtn
-            flat
-            dense
-            round
-            size="sm"
-            icon="add"
-            @click="adjustLeftScore(1)"
-          />
-          <span class="scoreboard-preview__score-value">{{ scoreboardStore.scoreboard.leftScore }}</span>
-          <QBtn
-            flat
-            dense
-            round
-            size="sm"
-            icon="remove"
-            @click="adjustLeftScore(-1)"
-          />
+      <div class="scoreboard-preview__center">
+        <div class="scoreboard-preview__score-controls">
+          <div class="scoreboard-preview__score-side">
+            <QBtn
+              flat
+              dense
+              round
+              size="sm"
+              icon="add"
+              @click="adjustLeftScore(1)"
+            />
+            <span class="scoreboard-preview__score-value">{{ scoreboardStore.scoreboard.leftScore }}</span>
+            <QBtn
+              flat
+              dense
+              round
+              size="sm"
+              icon="remove"
+              @click="adjustLeftScore(-1)"
+            />
+          </div>
+
+          <span class="scoreboard-preview__dash">-</span>
+
+          <div class="scoreboard-preview__score-side">
+            <QBtn
+              flat
+              dense
+              round
+              size="sm"
+              icon="add"
+              @click="adjustRightScore(1)"
+            />
+            <span class="scoreboard-preview__score-value">{{ scoreboardStore.scoreboard.rightScore }}</span>
+            <QBtn
+              flat
+              dense
+              round
+              size="sm"
+              icon="remove"
+              @click="adjustRightScore(-1)"
+            />
+          </div>
         </div>
 
-        <span class="scoreboard-preview__dash">-</span>
-
-        <div class="scoreboard-preview__score-side">
+        <div class="scoreboard-preview__actions">
           <QBtn
-            flat
-            dense
+            color="secondary"
+            outline
             round
-            size="sm"
-            icon="add"
-            @click="adjustRightScore(1)"
+            icon="swap_horiz"
+            @click="scoreboardStore.swapPlayers"
           />
-          <span class="scoreboard-preview__score-value">{{ scoreboardStore.scoreboard.rightScore }}</span>
           <QBtn
-            flat
-            dense
+            color="secondary"
+            outline
             round
-            size="sm"
-            icon="remove"
-            @click="adjustRightScore(-1)"
+            icon="restart_alt"
+            @click="scoreboardStore.resetScores"
           />
         </div>
       </div>
@@ -873,19 +912,39 @@ watch(
               </template>
             </QSelect>
           </div>
-          <div class="scoreboard-preview__image-wrap">
-            <img
-              v-if="rightPanelImage"
-              :src="rightPanelImage"
-              :alt="`${rightDisplayName || 'Right'} preview`"
-              class="scoreboard-preview__image"
-            >
-            <div
-              v-else
-              class="scoreboard-preview__empty"
-            >
-              Right image
+          <div class="scoreboard-preview__image-column">
+            <div class="scoreboard-preview__image-wrap">
+              <img
+                v-if="rightPanelImage"
+                :src="rightPanelImage"
+                :alt="`${rightDisplayName || 'Right'} preview`"
+                class="scoreboard-preview__image"
+              >
+              <div
+                v-else
+                class="scoreboard-preview__empty"
+              >
+                Right image
+              </div>
             </div>
+            <QSelect
+              v-model="scoreboardStore.scoreboard.rightCharacter"
+              v-model:input-value="rightCharacterInput"
+              :options="characterOptions"
+              option-value="value"
+              option-label="label"
+              emit-value
+              map-options
+              label="Character"
+              dense
+              use-input
+              input-debounce="0"
+              hide-selected
+              fill-input
+              clearable
+              class="scoreboard-preview__field scoreboard-preview__character-field"
+              :disable="!scoreboardStore.scoreboard.game"
+            />
           </div>
         </div>
       </div>
@@ -1220,6 +1279,13 @@ watch(
   align-items: center;
 }
 
+.scoreboard-preview__image-column {
+  width: min(100%, 320px);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
 .scoreboard-preview__side-inner {
   width: 100%;
   display: grid;
@@ -1237,11 +1303,11 @@ watch(
 }
 
 
-.scoreboard-preview__side .scoreboard-preview__image-wrap {
+.scoreboard-preview__side .scoreboard-preview__image-column {
   justify-self: start;
 }
 
-.scoreboard-preview__side--right .scoreboard-preview__image-wrap {
+.scoreboard-preview__side--right .scoreboard-preview__image-column {
   justify-self: end;
 }
 
@@ -1304,6 +1370,13 @@ watch(
   color: rgba(255, 255, 255, 0.92);
 }
 
+.scoreboard-preview__center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+}
+
 .scoreboard-preview__score-controls {
   display: flex;
   align-items: center;
@@ -1311,6 +1384,12 @@ watch(
   gap: 18px;
 }
 
+.scoreboard-preview__actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
 .scoreboard-preview__score-side {
   display: inline-flex;
   flex-direction: column;
@@ -1365,7 +1444,7 @@ watch(
     gap: 12px;
   }
 
-  .scoreboard-preview__score-controls {
+  .scoreboard-preview__center {
     order: -1;
     justify-self: center;
   }