Refactor scoreboard player input flow without behavior changes

schemas/scoreboard.json

@@ -19,6 +19,22 @@
       "type": "string",
       "default": ""
     },
+    "leftTeamOverride": {
+      "type": "string",
+      "default": ""
+    },
+    "rightTeamOverride": {
+      "type": "string",
+      "default": ""
+    },
+    "leftCountryOverride": {
+      "type": "string",
+      "default": ""
+    },
+    "rightCountryOverride": {
+      "type": "string",
+      "default": ""
+    },
     "leftScore": {
       "type": "integer",
       "default": 0,
@@ -39,6 +55,10 @@
     "rightPlayerId",
     "leftNameOverride",
     "rightNameOverride",
+    "leftTeamOverride",
+    "rightTeamOverride",
+    "leftCountryOverride",
+    "rightCountryOverride",
     "leftScore",
     "rightScore",
     "round"
@@ -48,6 +68,10 @@
     "rightPlayerId": "",
     "leftNameOverride": "",
     "rightNameOverride": "",
+    "leftTeamOverride": "",
+    "rightTeamOverride": "",
+    "leftCountryOverride": "",
+    "rightCountryOverride": "",
     "leftScore": 0,
     "rightScore": 0,
     "round": ""

src/dashboard/example/components/ScoreboardPanel.vue

@@ -1,12 +1,16 @@
 <script setup lang="ts">
-import { computed, ref, watchEffect } from 'vue';
+import { computed, ref, watch, watchEffect, type Ref } from 'vue';
 import type { Schemas } from '../../../types';
+import { countryOptions, getCountryLabel } from '../../../shared/countries';
 import { usePlayersStore } from '../stores/players';
 import { useScoreboardStore } from '../stores/scoreboard';
 
 const playersStore = usePlayersStore();
 const scoreboardStore = useScoreboardStore();
 
+const CUSTOM_LEFT_PLAYER_ID = '__custom_left_player__';
+const CUSTOM_RIGHT_PLAYER_ID = '__custom_right_player__';
+
 const leftFilter = ref('');
 const rightFilter = ref('');
 const leftInput = ref('');
@@ -14,6 +18,11 @@ const rightInput = ref('');
 const leftFocused = ref(false);
 const rightFocused = ref(false);
 
+const leftCountryInput = ref('');
+const rightCountryInput = ref('');
+const leftCountryOptions = ref(countryOptions);
+const rightCountryOptions = ref(countryOptions);
+
 const normalizeName = (value: string) => value.trim().toLowerCase();
 
 const filterOptions = (
@@ -27,6 +36,30 @@ const filterOptions = (
   return options.filter((option) => option.label.toLowerCase().includes(lowerNeedle));
 };
 
+const filterCountries = (
+  value: string,
+  update: (callback: () => void) => void,
+  target: Ref<{ value: string; label: string }[]>,
+) => {
+  update(() => {
+    const needle = value.toLowerCase().trim();
+    if (!needle) {
+      target.value = countryOptions;
+      return;
+    }
+    target.value = countryOptions.filter((country) => country.label.toLowerCase().includes(needle));
+  });
+};
+
+
+const onLeftCountryFilter = (value: string, update: (callback: () => void) => void) => {
+  filterCountries(value, update, leftCountryOptions);
+};
+
+const onRightCountryFilter = (value: string, update: (callback: () => void) => void) => {
+  filterCountries(value, update, rightCountryOptions);
+};
+
 const playerOptions = computed(() => {
   const base = [{ label: '(Sin asignar)', value: '' }];
   const entries = Object.entries(playersStore.players) as [string, Schemas.Players[string]][];
@@ -37,7 +70,46 @@ const playerOptions = computed(() => {
   return base.concat(options);
 });
 
+const buildPlayerOptions = (
+  filterValue: string,
+  selectedPlayerId: string,
+  customPlayerId: string,
+  customNameOverride: string,
+) => {
+  const options = filterOptions(playerOptions.value, filterValue);
+  if (selectedPlayerId !== customPlayerId || !customNameOverride.trim()) {
+    return options;
+  }
+  return [{
+    value: customPlayerId,
+    label: customNameOverride,
+  }].concat(options);
+};
+
+const leftPlayerOptions = computed(() => buildPlayerOptions(
+  leftFilter.value,
+  scoreboardStore.scoreboard.leftPlayerId,
+  CUSTOM_LEFT_PLAYER_ID,
+  scoreboardStore.scoreboard.leftNameOverride,
+));
+
+const rightPlayerOptions = computed(() => buildPlayerOptions(
+  rightFilter.value,
+  scoreboardStore.scoreboard.rightPlayerId,
+  CUSTOM_RIGHT_PLAYER_ID,
+  scoreboardStore.scoreboard.rightNameOverride,
+));
+
+const leftSelectedPlayer = computed(() => playersStore.players[scoreboardStore.scoreboard.leftPlayerId]);
+const rightSelectedPlayer = computed(() => playersStore.players[scoreboardStore.scoreboard.rightPlayerId]);
+
 const getPlayerLabel = (playerId: string) => {
+  if (playerId === CUSTOM_LEFT_PLAYER_ID) {
+    return scoreboardStore.scoreboard.leftNameOverride;
+  }
+  if (playerId === CUSTOM_RIGHT_PLAYER_ID) {
+    return scoreboardStore.scoreboard.rightNameOverride;
+  }
   const match = playerOptions.value.find((option) => option.value === playerId);
   return match ? match.label : '';
 };
@@ -63,28 +135,129 @@ const rightCanSave = computed(
     && !playerExistsByGamertag(scoreboardStore.scoreboard.rightNameOverride),
 );
 
-const leftPlayerOptions = computed(() => filterOptions(playerOptions.value, leftFilter.value));
+const leftPendingGamertag = computed(() => {
-const rightPlayerOptions = computed(() => filterOptions(playerOptions.value, rightFilter.value));
+  const override = scoreboardStore.scoreboard.leftNameOverride.trim();
+  if (override) {
+    return override;
+  }
+  return leftSelectedPlayer.value?.gamertag ?? '';
+});
 
-const onLeftFilter = (val: string, update: (fn: () => void) => void) => {
+const rightPendingGamertag = computed(() => {
+  const override = scoreboardStore.scoreboard.rightNameOverride.trim();
+  if (override) {
+    return override;
+  }
+  return rightSelectedPlayer.value?.gamertag ?? '';
+});
+
+const leftHasSelectedPlayerChanges = computed(() => {
+  const player = leftSelectedPlayer.value;
+  if (!player) {
+    return false;
+  }
+  return player.gamertag !== leftPendingGamertag.value
+    || player.team !== scoreboardStore.scoreboard.leftTeamOverride
+    || player.country !== scoreboardStore.scoreboard.leftCountryOverride;
+});
+
+const rightHasSelectedPlayerChanges = computed(() => {
+  const player = rightSelectedPlayer.value;
+  if (!player) {
+    return false;
+  }
+  return player.gamertag !== rightPendingGamertag.value
+    || player.team !== scoreboardStore.scoreboard.rightTeamOverride
+    || player.country !== scoreboardStore.scoreboard.rightCountryOverride;
+});
+
+const startLeftCustomPlayer = () => {
+  const wasCustom = scoreboardStore.scoreboard.leftPlayerId === CUSTOM_LEFT_PLAYER_ID;
+  scoreboardStore.scoreboard.leftPlayerId = CUSTOM_LEFT_PLAYER_ID;
+  if (!wasCustom) {
+    scoreboardStore.scoreboard.leftTeamOverride = '';
+    scoreboardStore.scoreboard.leftCountryOverride = '';
+  }
+};
+
+const startRightCustomPlayer = () => {
+  const wasCustom = scoreboardStore.scoreboard.rightPlayerId === CUSTOM_RIGHT_PLAYER_ID;
+  scoreboardStore.scoreboard.rightPlayerId = CUSTOM_RIGHT_PLAYER_ID;
+  if (!wasCustom) {
+    scoreboardStore.scoreboard.rightTeamOverride = '';
+    scoreboardStore.scoreboard.rightCountryOverride = '';
+  }
+};
+
+const filterPlayerInput = (
+  val: string,
+  update: (fn: () => void) => void,
+  filterValue: Ref<string>,
+  focused: Ref<boolean>,
+  inputValue: Ref<string>,
+  selectedPlayerId: string,
+  customPlayerId: string,
+  customNameOverride: string,
+  setCustomNameOverride: (value: string) => void,
+  startCustomPlayer: () => void,
+) => {
   update(() => {
-    leftFilter.value = val;
+    filterValue.value = val;
-    leftInput.value = val;
+
-    scoreboardStore.scoreboard.leftNameOverride = val;
+    if (!focused.value) {
+      return;
+    }
+
+    if (!val.trim() && selectedPlayerId === customPlayerId) {
+      inputValue.value = customNameOverride;
+      return;
+    }
+
+    inputValue.value = val;
+    setCustomNameOverride(val);
+    if (val.trim()) {
+      startCustomPlayer();
+    }
   });
 };
 
+const onLeftFilter = (val: string, update: (fn: () => void) => void) => {
+  filterPlayerInput(
+    val,
+    update,
+    leftFilter,
+    leftFocused,
+    leftInput,
+    scoreboardStore.scoreboard.leftPlayerId,
+    CUSTOM_LEFT_PLAYER_ID,
+    scoreboardStore.scoreboard.leftNameOverride,
+    (value) => {
+      scoreboardStore.scoreboard.leftNameOverride = value;
+    },
+    startLeftCustomPlayer,
+  );
+};
+
 const onRightFilter = (val: string, update: (fn: () => void) => void) => {
-  update(() => {
+  filterPlayerInput(
-    rightFilter.value = val;
+    val,
-    rightInput.value = val;
+    update,
-    scoreboardStore.scoreboard.rightNameOverride = val;
+    rightFilter,
-  });
+    rightFocused,
+    rightInput,
+    scoreboardStore.scoreboard.rightPlayerId,
+    CUSTOM_RIGHT_PLAYER_ID,
+    scoreboardStore.scoreboard.rightNameOverride,
+    (value) => {
+      scoreboardStore.scoreboard.rightNameOverride = value;
+    },
+    startRightCustomPlayer,
+  );
 };
 
 const onLeftFocus = () => {
   leftFocused.value = true;
-  leftInput.value = '';
+  leftInput.value = leftDisplayName.value;
 };
 
 const onLeftBlur = () => {
@@ -95,7 +268,7 @@ const onLeftBlur = () => {
 
 const onRightFocus = () => {
   rightFocused.value = true;
-  rightInput.value = '';
+  rightInput.value = rightDisplayName.value;
 };
 
 const onRightBlur = () => {
@@ -104,16 +277,44 @@ const onRightBlur = () => {
   rightInput.value = rightDisplayName.value;
 };
 
-const onLeftSelect = () => {
+const applyLeftPlayerData = (playerId: string) => {
-  scoreboardStore.scoreboard.leftNameOverride = '';
+  const player = playersStore.players[playerId];
-  leftFilter.value = '';
+  scoreboardStore.scoreboard.leftTeamOverride = player?.team ?? '';
-  leftInput.value = getPlayerLabel(scoreboardStore.scoreboard.leftPlayerId);
+  scoreboardStore.scoreboard.leftCountryOverride = player?.country ?? '';
+  leftCountryInput.value = getCountryLabel(scoreboardStore.scoreboard.leftCountryOverride);
 };
 
-const onRightSelect = () => {
+const applyRightPlayerData = (playerId: string) => {
+  const player = playersStore.players[playerId];
+  scoreboardStore.scoreboard.rightTeamOverride = player?.team ?? '';
+  scoreboardStore.scoreboard.rightCountryOverride = player?.country ?? '';
+  rightCountryInput.value = getCountryLabel(scoreboardStore.scoreboard.rightCountryOverride);
+};
+
+const onLeftSelect = (playerId: string) => {
+  const hasExistingPlayer = Boolean(playerId && playersStore.players[playerId]);
+  if (!hasExistingPlayer) {
+    return;
+  }
+
+  leftFocused.value = false;
+  scoreboardStore.scoreboard.leftNameOverride = '';
+  leftFilter.value = '';
+  leftInput.value = getPlayerLabel(playerId);
+  applyLeftPlayerData(playerId);
+};
+
+const onRightSelect = (playerId: string) => {
+  const hasExistingPlayer = Boolean(playerId && playersStore.players[playerId]);
+  if (!hasExistingPlayer) {
+    return;
+  }
+
+  rightFocused.value = false;
   scoreboardStore.scoreboard.rightNameOverride = '';
   rightFilter.value = '';
-  rightInput.value = getPlayerLabel(scoreboardStore.scoreboard.rightPlayerId);
+  rightInput.value = getPlayerLabel(playerId);
+  applyRightPlayerData(playerId);
 };
 
 const createPlayerId = (name: string) => {
@@ -144,8 +345,8 @@ const saveLeftPlayer = () => {
   playersStore.upsertPlayer(id, {
     gamertag,
     name: '',
-    team: '',
+    team: scoreboardStore.scoreboard.leftTeamOverride,
-    country: '',
+    country: scoreboardStore.scoreboard.leftCountryOverride,
     twitter: '',
   });
   scoreboardStore.scoreboard.leftPlayerId = id;
@@ -162,8 +363,8 @@ const saveRightPlayer = () => {
   playersStore.upsertPlayer(id, {
     gamertag,
     name: '',
-    team: '',
+    team: scoreboardStore.scoreboard.rightTeamOverride,
-    country: '',
+    country: scoreboardStore.scoreboard.rightCountryOverride,
     twitter: '',
   });
   scoreboardStore.scoreboard.rightPlayerId = id;
@@ -171,6 +372,70 @@ const saveRightPlayer = () => {
   rightInput.value = gamertag;
 };
 
+const saveLeftSelectedPlayerChanges = () => {
+  const playerId = scoreboardStore.scoreboard.leftPlayerId;
+  const player = playersStore.players[playerId];
+  if (!player) {
+    return;
+  }
+  playersStore.upsertPlayer(playerId, {
+    ...player,
+    gamertag: leftPendingGamertag.value,
+    team: scoreboardStore.scoreboard.leftTeamOverride,
+    country: scoreboardStore.scoreboard.leftCountryOverride,
+  });
+  scoreboardStore.scoreboard.leftNameOverride = '';
+};
+
+const saveRightSelectedPlayerChanges = () => {
+  const playerId = scoreboardStore.scoreboard.rightPlayerId;
+  const player = playersStore.players[playerId];
+  if (!player) {
+    return;
+  }
+  playersStore.upsertPlayer(playerId, {
+    ...player,
+    gamertag: rightPendingGamertag.value,
+    team: scoreboardStore.scoreboard.rightTeamOverride,
+    country: scoreboardStore.scoreboard.rightCountryOverride,
+  });
+  scoreboardStore.scoreboard.rightNameOverride = '';
+};
+
+
+
+watch(
+  () => scoreboardStore.scoreboard.leftPlayerId,
+  (playerId) => {
+    applyLeftPlayerData(playerId);
+  },
+  { immediate: true },
+);
+
+watch(
+  () => scoreboardStore.scoreboard.rightPlayerId,
+  (playerId) => {
+    applyRightPlayerData(playerId);
+  },
+  { immediate: true },
+);
+
+watch(
+  () => scoreboardStore.scoreboard.leftCountryOverride,
+  (value) => {
+    leftCountryInput.value = getCountryLabel(value);
+  },
+  { immediate: true },
+);
+
+watch(
+  () => scoreboardStore.scoreboard.rightCountryOverride,
+  (value) => {
+    rightCountryInput.value = getCountryLabel(value);
+  },
+  { immediate: true },
+);
+
 watchEffect(() => {
   if (!leftFocused.value) {
     leftInput.value = leftDisplayName.value;
@@ -240,6 +505,32 @@ watchEffect(() => {
               @blur="onLeftBlur"
               @update:model-value="onLeftSelect"
             />
+            <QInput
+              v-model="scoreboardStore.scoreboard.leftTeamOverride"
+              label="Team"
+              dense
+              outlined
+              class="q-mt-sm"
+            />
+            <QSelect
+              v-model="scoreboardStore.scoreboard.leftCountryOverride"
+              v-model:input-value="leftCountryInput"
+              :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
+              outlined
+              class="q-mt-sm"
+              @filter="onLeftCountryFilter"
+            />
             <QBtn
               v-if="leftCanSave"
               color="primary"
@@ -248,6 +539,14 @@ watchEffect(() => {
               class="q-mt-sm"
               @click="saveLeftPlayer"
             />
+            <QBtn
+              v-if="leftHasSelectedPlayerChanges"
+              color="primary"
+              icon="save"
+              label="Guardar cambios del jugador"
+              class="q-mt-sm q-ml-sm"
+              @click="saveLeftSelectedPlayerChanges"
+            />
             <QInput
               v-model.number="scoreboardStore.leftScore"
               type="number"
@@ -291,6 +590,32 @@ watchEffect(() => {
               @blur="onRightBlur"
               @update:model-value="onRightSelect"
             />
+            <QInput
+              v-model="scoreboardStore.scoreboard.rightTeamOverride"
+              label="Team"
+              dense
+              outlined
+              class="q-mt-sm"
+            />
+            <QSelect
+              v-model="scoreboardStore.scoreboard.rightCountryOverride"
+              v-model:input-value="rightCountryInput"
+              :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
+              outlined
+              class="q-mt-sm"
+              @filter="onRightCountryFilter"
+            />
             <QBtn
               v-if="rightCanSave"
               color="primary"
@@ -299,6 +624,14 @@ watchEffect(() => {
               class="q-mt-sm"
               @click="saveRightPlayer"
             />
+            <QBtn
+              v-if="rightHasSelectedPlayerChanges"
+              color="primary"
+              icon="save"
+              label="Guardar cambios del jugador"
+              class="q-mt-sm q-ml-sm"
+              @click="saveRightSelectedPlayerChanges"
+            />
             <QInput
               v-model.number="scoreboardStore.rightScore"
               type="number"

src/dashboard/example/stores/scoreboard.ts

@@ -12,6 +12,10 @@ const defaultScoreboard: Scoreboard = {
   rightPlayerId: '',
   leftNameOverride: '',
   rightNameOverride: '',
+  leftTeamOverride: '',
+  rightTeamOverride: '',
+  leftCountryOverride: '',
+  rightCountryOverride: '',
   leftScore: 0,
   rightScore: 0,
   round: '',
@@ -24,6 +28,10 @@ const normalizeScoreboard = (input: unknown): Scoreboard => {
     rightPlayerId: typeof candidate.rightPlayerId === 'string' ? candidate.rightPlayerId : '',
     leftNameOverride: typeof candidate.leftNameOverride === 'string' ? candidate.leftNameOverride : '',
     rightNameOverride: typeof candidate.rightNameOverride === 'string' ? candidate.rightNameOverride : '',
+    leftTeamOverride: typeof candidate.leftTeamOverride === 'string' ? candidate.leftTeamOverride : '',
+    rightTeamOverride: typeof candidate.rightTeamOverride === 'string' ? candidate.rightTeamOverride : '',
+    leftCountryOverride: typeof candidate.leftCountryOverride === 'string' ? candidate.leftCountryOverride : '',
+    rightCountryOverride: typeof candidate.rightCountryOverride === 'string' ? candidate.rightCountryOverride : '',
     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 : '',
@@ -105,6 +113,10 @@ export const useScoreboardStore = defineStore('scoreboard', () => {
       rightPlayerId: scoreboard.value.leftPlayerId,
       leftNameOverride: scoreboard.value.rightNameOverride,
       rightNameOverride: scoreboard.value.leftNameOverride,
+      leftTeamOverride: scoreboard.value.rightTeamOverride,
+      rightTeamOverride: scoreboard.value.leftTeamOverride,
+      leftCountryOverride: scoreboard.value.rightCountryOverride,
+      rightCountryOverride: scoreboard.value.leftCountryOverride,
       leftScore: scoreboard.value.rightScore,
       rightScore: scoreboard.value.leftScore,
     };

src/graphics/scoreboard/main.vue

@@ -12,6 +12,10 @@ const defaultScoreboard: Schemas.Scoreboard = {
   rightPlayerId: '',
   leftNameOverride: '',
   rightNameOverride: '',
+  leftTeamOverride: '',
+  rightTeamOverride: '',
+  leftCountryOverride: '',
+  rightCountryOverride: '',
   leftScore: 0,
   rightScore: 0,
   round: '',
@@ -36,15 +40,9 @@ const rightName = computed(() => {
   return player?.gamertag || 'Jugador 2';
 });
 
-const leftTeam = computed(() => {
+const leftTeam = computed(() => scoreboard.value.leftTeamOverride || '');
-  const player = players.value[scoreboard.value.leftPlayerId];
-  return player?.team || '';
-});
 
-const rightTeam = computed(() => {
+const rightTeam = computed(() => scoreboard.value.rightTeamOverride || '');
-  const player = players.value[scoreboard.value.rightPlayerId];
-  return player?.team || '';
-});
 
 const flagModules = import.meta.glob('/node_modules/flag-icons/flags/4x3/*.svg', {
   eager: true,
@@ -73,15 +71,9 @@ const getFlagUrl = (country: string | undefined) => {
   return flagByCode[code.toLowerCase()] ?? '';
 };
 
-const leftFlagUrl = computed(() => {
+const leftFlagUrl = computed(() => getFlagUrl(scoreboard.value.leftCountryOverride));
-  const player = players.value[scoreboard.value.leftPlayerId];
-  return getFlagUrl(player?.country);
-});
 
-const rightFlagUrl = computed(() => {
+const rightFlagUrl = computed(() => getFlagUrl(scoreboard.value.rightCountryOverride));
-  const player = players.value[scoreboard.value.rightPlayerId];
-  return getFlagUrl(player?.country);
-});
 
 const roundText = computed(() => scoreboard.value.round || 'Round');
 </script>

src/types/schemas/scoreboard.d.ts

@@ -11,6 +11,10 @@ export interface Scoreboard {
 	rightPlayerId: string;
 	leftNameOverride: string;
 	rightNameOverride: string;
+	leftTeamOverride: string;
+	rightTeamOverride: string;
+	leftCountryOverride: string;
+	rightCountryOverride: string;
 	leftScore: number;
 	rightScore: number;
 	round: string;