Add underlined preview selectors between images and score

src/dashboard/example/components/ScoreboardPanel.vue

@@ -52,6 +52,9 @@ const rightCharacterImage = computed(() => {
   return match?.image ?? '';
 });
 
+const leftPanelImage = computed(() => leftCharacterImage.value);
+const rightPanelImage = computed(() => rightCharacterImage.value);
+
 
 const normalizeName = (value: string) => value.trim().toLowerCase();
 
@@ -386,6 +389,14 @@ const onRightSelect = (playerId: string) => {
   applyRightPlayerData(playerId);
 };
 
+const adjustLeftScore = (delta: number) => {
+  scoreboardStore.leftScore = Math.max(0, scoreboardStore.leftScore + delta);
+};
+
+const adjustRightScore = (delta: number) => {
+  scoreboardStore.rightScore = Math.max(0, scoreboardStore.rightScore + delta);
+};
+
 const createPlayerId = (name: string) => {
   const base = name
     .trim()
@@ -630,6 +641,162 @@ watch(
       </div>
     </div>
 
+    <QCard
+      flat
+      bordered
+      class="scoreboard-preview"
+    >
+      <div class="scoreboard-preview__side">
+        <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>
+        <div class="scoreboard-preview__controls">
+          <QSelect
+            v-model="scoreboardStore.scoreboard.leftPlayerId"
+            :options="leftPlayerOptions"
+            label="Player"
+            dense
+            emit-value
+            map-options
+            options-dense
+            class="scoreboard-preview__field"
+            @update:model-value="onLeftSelect"
+          />
+          <QInput
+            v-model="scoreboardStore.scoreboard.leftTeamOverride"
+            label="Team"
+            dense
+            class="scoreboard-preview__field"
+          />
+          <QSelect
+            v-model="scoreboardStore.scoreboard.leftCountryOverride"
+            :options="leftCountryOptions"
+            option-value="value"
+            option-label="label"
+            emit-value
+            map-options
+            use-input
+            input-debounce="0"
+            hide-selected
+            fill-input
+            clearable
+            label="Country"
+            dense
+            class="scoreboard-preview__field"
+            @filter="onLeftCountryFilter"
+          />
+        </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>
+
+        <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>
+
+      <div class="scoreboard-preview__side scoreboard-preview__side--right">
+        <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>
+        <div class="scoreboard-preview__controls">
+          <QSelect
+            v-model="scoreboardStore.scoreboard.rightPlayerId"
+            :options="rightPlayerOptions"
+            label="Player"
+            dense
+            emit-value
+            map-options
+            options-dense
+            class="scoreboard-preview__field"
+            @update:model-value="onRightSelect"
+          />
+          <QInput
+            v-model="scoreboardStore.scoreboard.rightTeamOverride"
+            label="Team"
+            dense
+            class="scoreboard-preview__field"
+          />
+          <QSelect
+            v-model="scoreboardStore.scoreboard.rightCountryOverride"
+            :options="rightCountryOptions"
+            option-value="value"
+            option-label="label"
+            emit-value
+            map-options
+            use-input
+            input-debounce="0"
+            hide-selected
+            fill-input
+            clearable
+            label="Country"
+            dense
+            class="scoreboard-preview__field"
+            @filter="onRightCountryFilter"
+          />
+        </div>
+      </div>
+    </QCard>
+
     <div class="scoreboard-grid">
       <div class="scoreboard-grid__side">
         <QCard
@@ -945,6 +1112,120 @@ watch(
   gap: 16px;
 }
 
+
+.scoreboard-preview {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  gap: 10px;
+  padding: 16px;
+  align-items: center;
+}
+
+.scoreboard-preview__side {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: flex-start;
+}
+
+.scoreboard-preview__side--right {
+  text-align: right;
+  align-items: flex-end;
+}
+
+.scoreboard-preview__image-wrap {
+  width: min(100%, 320px);
+  aspect-ratio: 4 / 4;
+  border-radius: 10px;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  background: #2f3a4f;
+}
+
+.scoreboard-preview__image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  object-position: center;
+  transform: scale(2);
+  transform-origin: center;
+}
+
+.scoreboard-preview__empty {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(255, 255, 255, 0.65);
+  font-weight: 600;
+}
+
+.scoreboard-preview__name {
+  font-size: 1.1rem;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+
+.scoreboard-preview__controls {
+  width: min(100%, 320px);
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.scoreboard-preview__field {
+  margin: 0;
+}
+
+.scoreboard-preview__field :deep(.q-field__control) {
+  min-height: 28px;
+  padding: 0;
+  background: transparent !important;
+  border-radius: 0;
+}
+
+.scoreboard-preview__field :deep(.q-field__control:before),
+.scoreboard-preview__field :deep(.q-field__control:after) {
+  border: 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.34);
+}
+
+.scoreboard-preview__field :deep(.q-field__native),
+.scoreboard-preview__field :deep(.q-field__input),
+.scoreboard-preview__field :deep(.q-field__label) {
+  color: rgba(255, 255, 255, 0.92);
+}
+
+.scoreboard-preview__score-controls {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+}
+
+.scoreboard-preview__score-side {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+
+.scoreboard-preview__score-value {
+  min-width: 64px;
+  text-align: center;
+  font-size: clamp(4rem, 7vw, 5.6rem);
+  font-weight: 800;
+  line-height: 1;
+}
+
+.scoreboard-preview__dash {
+  opacity: 0.7;
+  font-size: clamp(3rem, 5vw, 4rem);
+  font-weight: 700;
+}
+
 .scoreboard-grid {
   display: grid;
   grid-template-columns: 1fr;
@@ -972,7 +1253,32 @@ watch(
   object-fit: cover;
 }
 
+@media (max-width: 900px) {
+  .scoreboard-preview {
+    grid-template-columns: 1fr;
+    gap: 12px;
+  }
+
+  .scoreboard-preview__score-controls {
+    order: -1;
+    justify-self: center;
+  }
+
+  .scoreboard-preview__image-wrap {
+    width: min(100%, 280px);
+  }
+
+  .scoreboard-preview__side--right {
+    text-align: left;
+    align-items: flex-start;
+  }
+}
+
 @media (min-width: 1024px) {
+  .scoreboard-preview {
+    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  }
+
   .scoreboard-grid {
     grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
   }