Add character selectors under preview images and center actions

src/dashboard/example/components/ScoreboardPanel.vue

@@ -648,6 +648,7 @@ watch(
     >
       <div class="scoreboard-preview__side">
         <div class="scoreboard-preview__side-inner">
+          <div class="scoreboard-preview__image-column">
             <div class="scoreboard-preview__image-wrap">
               <img
                 v-if="leftPanelImage"
@@ -662,6 +663,25 @@ watch(
                 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
               v-model="scoreboardStore.scoreboard.leftPlayerId"
@@ -746,6 +766,7 @@ watch(
         </div>
       </div>
 
+      <div class="scoreboard-preview__center">
         <div class="scoreboard-preview__score-controls">
           <div class="scoreboard-preview__score-side">
             <QBtn
@@ -790,6 +811,24 @@ watch(
           </div>
         </div>
 
+        <div class="scoreboard-preview__actions">
+          <QBtn
+            color="secondary"
+            outline
+            round
+            icon="swap_horiz"
+            @click="scoreboardStore.swapPlayers"
+          />
+          <QBtn
+            color="secondary"
+            outline
+            round
+            icon="restart_alt"
+            @click="scoreboardStore.resetScores"
+          />
+        </div>
+      </div>
+
       <div class="scoreboard-preview__side scoreboard-preview__side--right">
         <div class="scoreboard-preview__side-inner">
           <div class="scoreboard-preview__controls">
@@ -873,6 +912,7 @@ watch(
               </template>
             </QSelect>
           </div>
+          <div class="scoreboard-preview__image-column">
             <div class="scoreboard-preview__image-wrap">
               <img
                 v-if="rightPanelImage"
@@ -887,6 +927,25 @@ watch(
                 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>
     </QCard>
@@ -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;
   }