Mejorar override de jugadores y guardado rápido (#37)

src/dashboard/example/components/ScoreboardPanel.vue

@@ -14,6 +14,8 @@ const rightInput = ref('');
 const leftFocused = ref(false);
 const rightFocused = ref(false);
 
+const normalizeName = (value: string) => value.trim().toLowerCase();
+
 const filterOptions = (
   options: { label: string; value: string }[],
   needle: string,
@@ -40,6 +42,27 @@ const getPlayerLabel = (playerId: string) => {
   return match ? match.label : '';
 };
 
+const playerExistsByGamertag = (name: string) => {
+  const normalized = normalizeName(name);
+  if (!normalized) {
+    return false;
+  }
+  return Object.values(playersStore.players).some((player) => normalizeName(player.gamertag || '') === normalized);
+};
+
+const leftDisplayName = computed(() => scoreboardStore.scoreboard.leftNameOverride || getPlayerLabel(scoreboardStore.scoreboard.leftPlayerId));
+const rightDisplayName = computed(() => scoreboardStore.scoreboard.rightNameOverride || getPlayerLabel(scoreboardStore.scoreboard.rightPlayerId));
+
+const leftCanSave = computed(
+  () => Boolean(scoreboardStore.scoreboard.leftNameOverride.trim())
+    && !playerExistsByGamertag(scoreboardStore.scoreboard.leftNameOverride),
+);
+
+const rightCanSave = computed(
+  () => Boolean(scoreboardStore.scoreboard.rightNameOverride.trim())
+    && !playerExistsByGamertag(scoreboardStore.scoreboard.rightNameOverride),
+);
+
 const leftPlayerOptions = computed(() => filterOptions(playerOptions.value, leftFilter.value));
 const rightPlayerOptions = computed(() => filterOptions(playerOptions.value, rightFilter.value));
 
@@ -47,6 +70,7 @@ const onLeftFilter = (val: string, update: (fn: () => void) => void) => {
   update(() => {
     leftFilter.value = val;
     leftInput.value = val;
+    scoreboardStore.scoreboard.leftNameOverride = val;
   });
 };
 
@@ -54,6 +78,7 @@ const onRightFilter = (val: string, update: (fn: () => void) => void) => {
   update(() => {
     rightFilter.value = val;
     rightInput.value = val;
+    scoreboardStore.scoreboard.rightNameOverride = val;
   });
 };
 
@@ -65,7 +90,7 @@ const onLeftFocus = () => {
 const onLeftBlur = () => {
   leftFocused.value = false;
   leftFilter.value = '';
-  leftInput.value = getPlayerLabel(scoreboardStore.scoreboard.leftPlayerId);
+  leftInput.value = leftDisplayName.value;
 };
 
 const onRightFocus = () => {
@@ -76,28 +101,85 @@ const onRightFocus = () => {
 const onRightBlur = () => {
   rightFocused.value = false;
   rightFilter.value = '';
-  rightInput.value = getPlayerLabel(scoreboardStore.scoreboard.rightPlayerId);
+  rightInput.value = rightDisplayName.value;
 };
 
 const onLeftSelect = () => {
+  scoreboardStore.scoreboard.leftNameOverride = '';
   leftFilter.value = '';
   leftInput.value = getPlayerLabel(scoreboardStore.scoreboard.leftPlayerId);
 };
 
 const onRightSelect = () => {
+  scoreboardStore.scoreboard.rightNameOverride = '';
   rightFilter.value = '';
   rightInput.value = getPlayerLabel(scoreboardStore.scoreboard.rightPlayerId);
 };
 
+const createPlayerId = (name: string) => {
+  const base = name
+    .trim()
+    .toLowerCase()
+    .normalize('NFD')
+    .replace(/[^\w\s-]/g, '')
+    .replace(/[\u0300-\u036f]/g, '')
+    .replace(/\s+/g, '-');
+
+  const seed = base || 'player';
+  let index = 1;
+  let candidate = seed;
+  while (playersStore.players[candidate]) {
+    index += 1;
+    candidate = `${seed}-${index}`;
+  }
+  return candidate;
+};
+
+const saveLeftPlayer = () => {
+  const gamertag = scoreboardStore.scoreboard.leftNameOverride.trim();
+  if (!gamertag || playerExistsByGamertag(gamertag)) {
+    return;
+  }
+  const id = createPlayerId(gamertag);
+  playersStore.upsertPlayer(id, {
+    gamertag,
+    name: '',
+    team: '',
+    country: '',
+    twitter: '',
+  });
+  scoreboardStore.scoreboard.leftPlayerId = id;
+  scoreboardStore.scoreboard.leftNameOverride = '';
+  leftInput.value = gamertag;
+};
+
+const saveRightPlayer = () => {
+  const gamertag = scoreboardStore.scoreboard.rightNameOverride.trim();
+  if (!gamertag || playerExistsByGamertag(gamertag)) {
+    return;
+  }
+  const id = createPlayerId(gamertag);
+  playersStore.upsertPlayer(id, {
+    gamertag,
+    name: '',
+    team: '',
+    country: '',
+    twitter: '',
+  });
+  scoreboardStore.scoreboard.rightPlayerId = id;
+  scoreboardStore.scoreboard.rightNameOverride = '';
+  rightInput.value = gamertag;
+};
+
 watchEffect(() => {
   if (!leftFocused.value) {
-    leftInput.value = getPlayerLabel(scoreboardStore.scoreboard.leftPlayerId);
+    leftInput.value = leftDisplayName.value;
   }
 });
 
 watchEffect(() => {
   if (!rightFocused.value) {
-    rightInput.value = getPlayerLabel(scoreboardStore.scoreboard.rightPlayerId);
+    rightInput.value = rightDisplayName.value;
   }
 });
 
@@ -158,12 +240,13 @@ watchEffect(() => {
               @blur="onLeftBlur"
               @update:model-value="onLeftSelect"
             />
-            <QInput
-              v-model="scoreboardStore.scoreboard.leftNameOverride"
-              label="Nombre override"
-              dense
-              outlined
-              class="q-mt-md"
+            <QBtn
+              v-if="leftCanSave"
+              color="primary"
+              icon="save"
+              label="Guardar jugador"
+              class="q-mt-sm"
+              @click="saveLeftPlayer"
             />
             <QInput
               v-model.number="scoreboardStore.leftScore"
@@ -208,12 +291,13 @@ watchEffect(() => {
               @blur="onRightBlur"
               @update:model-value="onRightSelect"
             />
-            <QInput
-              v-model="scoreboardStore.scoreboard.rightNameOverride"
-              label="Nombre override"
-              dense
-              outlined
-              class="q-mt-md"
+            <QBtn
+              v-if="rightCanSave"
+              color="primary"
+              icon="save"
+              label="Guardar jugador"
+              class="q-mt-sm"
+              @click="saveRightPlayer"
             />
             <QInput
               v-model.number="scoreboardStore.rightScore"