diff --git a/src/dashboard/example/components/ScoreboardPanel.vue b/src/dashboard/example/components/ScoreboardPanel.vue index a526328..d8b61c9 100644 --- a/src/dashboard/example/components/ScoreboardPanel.vue +++ b/src/dashboard/example/components/ScoreboardPanel.vue @@ -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" - /> + > + + + > + + { outlined class="q-mt-sm" @filter="onLeftCountryFilter" - /> - - + > + + { @focus="onRightFocus" @blur="onRightBlur" @update:model-value="onRightSelect" - /> + > + + + > + + { outlined class="q-mt-sm" @filter="onRightCountryFilter" - /> - - + > + +