feat(scoreboard): add per-field save icons for player overrides

2026-06-06 11:42:06 +00:00 · 2026-02-11 23:41:30 +01:00
parent b79f34d539
commit ef1b19252b
1 changed files with 198 additions and 53 deletions
@@ -135,6 +135,38 @@ const rightCanSave = computed(
    && !playerExistsByGamertag(scoreboardStore.scoreboard.rightNameOverride),
 );

+const leftTeamChanged = computed(() => {
+  const player = leftSelectedPlayer.value;
+  if (!player) {
+    return false;
+  }
+  return player.team !== scoreboardStore.scoreboard.leftTeamOverride;
+});
+
+const rightTeamChanged = computed(() => {
+  const player = rightSelectedPlayer.value;
+  if (!player) {
+    return false;
+  }
+  return player.team !== scoreboardStore.scoreboard.rightTeamOverride;
+});
+
+const leftCountryChanged = computed(() => {
+  const player = leftSelectedPlayer.value;
+  if (!player) {
+    return false;
+  }
+  return player.country !== scoreboardStore.scoreboard.leftCountryOverride;
+});
+
+const rightCountryChanged = computed(() => {
+  const player = rightSelectedPlayer.value;
+  if (!player) {
+    return false;
+  }
+  return player.country !== scoreboardStore.scoreboard.rightCountryOverride;
+});
+
 const leftPendingGamertag = computed(() => {
  const override = scoreboardStore.scoreboard.leftNameOverride.trim();
  if (override) {
@@ -151,26 +183,33 @@ const rightPendingGamertag = computed(() => {
  return rightSelectedPlayer.value?.gamertag ?? '';
 });

-const leftHasSelectedPlayerChanges = computed(() => {
+const leftNameChanged = computed(() => {
  const player = leftSelectedPlayer.value;
  if (!player) {
    return false;
  }
-  return player.gamertag !== leftPendingGamertag.value
-    || player.team !== scoreboardStore.scoreboard.leftTeamOverride
-    || player.country !== scoreboardStore.scoreboard.leftCountryOverride;
+  return player.gamertag !== leftPendingGamertag.value;
 });

-const rightHasSelectedPlayerChanges = computed(() => {
+const rightNameChanged = computed(() => {
  const player = rightSelectedPlayer.value;
  if (!player) {
    return false;
  }
-  return player.gamertag !== rightPendingGamertag.value
-    || player.team !== scoreboardStore.scoreboard.rightTeamOverride
-    || player.country !== scoreboardStore.scoreboard.rightCountryOverride;
+  return player.gamertag !== rightPendingGamertag.value;
 });

+const leftCanSaveNameChange = computed(
+  () => leftNameChanged.value && !playerExistsByGamertag(leftPendingGamertag.value),
+);
+
+const rightCanSaveNameChange = computed(
+  () => rightNameChanged.value && !playerExistsByGamertag(rightPendingGamertag.value),
+);
+
+const leftShowsNameSave = computed(() => leftCanSave.value || leftCanSaveNameChange.value);
+const rightShowsNameSave = computed(() => rightCanSave.value || rightCanSaveNameChange.value);
+
 const startLeftCustomPlayer = () => {
  const wasCustom = scoreboardStore.scoreboard.leftPlayerId === CUSTOM_LEFT_PLAYER_ID;
  scoreboardStore.scoreboard.leftPlayerId = CUSTOM_LEFT_PLAYER_ID;
@@ -372,7 +411,39 @@ const saveRightPlayer = () => {
  rightInput.value = gamertag;
 };

-const saveLeftSelectedPlayerChanges = () => {
+const saveLeftNameChange = () => {
+  const playerId = scoreboardStore.scoreboard.leftPlayerId;
+  const player = playersStore.players[playerId];
+  if (!player) {
+    return;
+  }
+  if (!leftCanSaveNameChange.value) {
+    return;
+  }
+  playersStore.upsertPlayer(playerId, {
+    ...player,
+    gamertag: leftPendingGamertag.value,
+  });
+  scoreboardStore.scoreboard.leftNameOverride = '';
+};
+
+const saveRightNameChange = () => {
+  const playerId = scoreboardStore.scoreboard.rightPlayerId;
+  const player = playersStore.players[playerId];
+  if (!player) {
+    return;
+  }
+  if (!rightCanSaveNameChange.value) {
+    return;
+  }
+  playersStore.upsertPlayer(playerId, {
+    ...player,
+    gamertag: rightPendingGamertag.value,
+  });
+  scoreboardStore.scoreboard.rightNameOverride = '';
+};
+
+const saveLeftTeamChange = () => {
  const playerId = scoreboardStore.scoreboard.leftPlayerId;
  const player = playersStore.players[playerId];
  if (!player) {
@@ -380,14 +451,11 @@ const saveLeftSelectedPlayerChanges = () => {
  }
  playersStore.upsertPlayer(playerId, {
    ...player,
-    gamertag: leftPendingGamertag.value,
    team: scoreboardStore.scoreboard.leftTeamOverride,
-    country: scoreboardStore.scoreboard.leftCountryOverride,
  });
-  scoreboardStore.scoreboard.leftNameOverride = '';
 };

-const saveRightSelectedPlayerChanges = () => {
+const saveRightTeamChange = () => {
  const playerId = scoreboardStore.scoreboard.rightPlayerId;
  const player = playersStore.players[playerId];
  if (!player) {
@@ -395,11 +463,48 @@ const saveRightSelectedPlayerChanges = () => {
  }
  playersStore.upsertPlayer(playerId, {
    ...player,
-    gamertag: rightPendingGamertag.value,
    team: scoreboardStore.scoreboard.rightTeamOverride,
+  });
+};
+
+const saveLeftCountryChange = () => {
+  const playerId = scoreboardStore.scoreboard.leftPlayerId;
+  const player = playersStore.players[playerId];
+  if (!player) {
+    return;
+  }
+  playersStore.upsertPlayer(playerId, {
+    ...player,
+    country: scoreboardStore.scoreboard.leftCountryOverride,
+  });
+};
+
+const saveRightCountryChange = () => {
+  const playerId = scoreboardStore.scoreboard.rightPlayerId;
+  const player = playersStore.players[playerId];
+  if (!player) {
+    return;
+  }
+  playersStore.upsertPlayer(playerId, {
+    ...player,
    country: scoreboardStore.scoreboard.rightCountryOverride,
  });
-  scoreboardStore.scoreboard.rightNameOverride = '';
+};
+
+const onLeftNameSave = () => {
+  if (leftCanSave.value) {
+    saveLeftPlayer();
+    return;
+  }
+  saveLeftNameChange();
+};
+
+const onRightNameSave = () => {
+  if (rightCanSave.value) {
+    saveRightPlayer();
+    return;
+  }
+  saveRightNameChange();
 };


@@ -504,14 +609,38 @@ watchEffect(() => {
              @focus="onLeftFocus"
              @blur="onLeftBlur"
              @update:model-value="onLeftSelect"
-            />
+            >
+              <template #append>
+                <QBtn
+                  v-if="leftShowsNameSave"
+                  flat
+                  round
+                  dense
+                  icon="save"
+                  color="primary"
+                  @click.stop="onLeftNameSave"
+                />
+              </template>
+            </QSelect>
            <QInput
              v-model="scoreboardStore.scoreboard.leftTeamOverride"
              label="Team"
              dense
              outlined
              class="q-mt-sm"
-            />
+            >
+              <template #append>
+                <QBtn
+                  v-if="leftTeamChanged"
+                  flat
+                  round
+                  dense
+                  icon="save"
+                  color="primary"
+                  @click.stop="saveLeftTeamChange"
+                />
+              </template>
+            </QInput>
            <QSelect
              v-model="scoreboardStore.scoreboard.leftCountryOverride"
              v-model:input-value="leftCountryInput"
@@ -530,23 +659,19 @@ watchEffect(() => {
              outlined
              class="q-mt-sm"
              @filter="onLeftCountryFilter"
-            />
-            <QBtn
-              v-if="leftCanSave"
-              color="primary"
-              icon="save"
-              label="Save player"
-              class="q-mt-sm"
-              @click="saveLeftPlayer"
-            />
-            <QBtn
-              v-if="leftHasSelectedPlayerChanges"
-              color="primary"
-              icon="save"
-              label="Save player changes"
-              class="q-mt-sm q-ml-sm"
-              @click="saveLeftSelectedPlayerChanges"
-            />
+            >
+              <template #append>
+                <QBtn
+                  v-if="leftCountryChanged"
+                  flat
+                  round
+                  dense
+                  icon="save"
+                  color="primary"
+                  @click.stop="saveLeftCountryChange"
+                />
+              </template>
+            </QSelect>
            <QInput
              v-model.number="scoreboardStore.leftScore"
              type="number"
@@ -589,14 +714,38 @@ watchEffect(() => {
              @focus="onRightFocus"
              @blur="onRightBlur"
              @update:model-value="onRightSelect"
-            />
+            >
+              <template #append>
+                <QBtn
+                  v-if="rightShowsNameSave"
+                  flat
+                  round
+                  dense
+                  icon="save"
+                  color="primary"
+                  @click.stop="onRightNameSave"
+                />
+              </template>
+            </QSelect>
            <QInput
              v-model="scoreboardStore.scoreboard.rightTeamOverride"
              label="Team"
              dense
              outlined
              class="q-mt-sm"
-            />
+            >
+              <template #append>
+                <QBtn
+                  v-if="rightTeamChanged"
+                  flat
+                  round
+                  dense
+                  icon="save"
+                  color="primary"
+                  @click.stop="saveRightTeamChange"
+                />
+              </template>
+            </QInput>
            <QSelect
              v-model="scoreboardStore.scoreboard.rightCountryOverride"
              v-model:input-value="rightCountryInput"
@@ -615,23 +764,19 @@ watchEffect(() => {
              outlined
              class="q-mt-sm"
              @filter="onRightCountryFilter"
-            />
-            <QBtn
-              v-if="rightCanSave"
-              color="primary"
-              icon="save"
-              label="Save player"
-              class="q-mt-sm"
-              @click="saveRightPlayer"
-            />
-            <QBtn
-              v-if="rightHasSelectedPlayerChanges"
-              color="primary"
-              icon="save"
-              label="Save player changes"
-              class="q-mt-sm q-ml-sm"
-              @click="saveRightSelectedPlayerChanges"
-            />
+            >
+              <template #append>
+                <QBtn
+                  v-if="rightCountryChanged"
+                  flat
+                  round
+                  dense
+                  icon="save"
+                  color="primary"
+                  @click.stop="saveRightCountryChange"
+                />
+              </template>
+            </QSelect>
            <QInput
              v-model.number="scoreboardStore.rightScore"
              type="number"