Refactor scoreboard player input flow without behavior changes

2026-06-06 03:32:06 +00:00 · 2026-02-11 10:45:31 +01:00
parent b3f4aae68a
commit d2439cf1ff
5 changed files with 405 additions and 40 deletions
@@ -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 rightPlayerOptions = computed(() => filterOptions(playerOptions.value, rightFilter.value));
+const leftPendingGamertag = computed(() => {
+  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;
-    leftInput.value = val;
-    scoreboardStore.scoreboard.leftNameOverride = val;
+    filterValue.value = 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(() => {
-    rightFilter.value = val;
-    rightInput.value = val;
-    scoreboardStore.scoreboard.rightNameOverride = val;
-  });
+  filterPlayerInput(
+    val,
+    update,
+    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 = () => {
-  scoreboardStore.scoreboard.leftNameOverride = '';
-  leftFilter.value = '';
-  leftInput.value = getPlayerLabel(scoreboardStore.scoreboard.leftPlayerId);
+const applyLeftPlayerData = (playerId: string) => {
+  const player = playersStore.players[playerId];
+  scoreboardStore.scoreboard.leftTeamOverride = player?.team ?? '';
+  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: '',
-    country: '',
+    team: scoreboardStore.scoreboard.leftTeamOverride,
+    country: scoreboardStore.scoreboard.leftCountryOverride,
    twitter: '',
  });
  scoreboardStore.scoreboard.leftPlayerId = id;
@@ -162,8 +363,8 @@ const saveRightPlayer = () => {
  playersStore.upsertPlayer(id, {
    gamertag,
    name: '',
-    team: '',
-    country: '',
+    team: scoreboardStore.scoreboard.rightTeamOverride,
+    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"