diff --git a/src/dashboard/example/components/ScoreboardPanel.vue b/src/dashboard/example/components/ScoreboardPanel.vue index bd092d6..3a54afd 100644 --- a/src/dashboard/example/components/ScoreboardPanel.vue +++ b/src/dashboard/example/components/ScoreboardPanel.vue @@ -70,33 +70,35 @@ const playerOptions = computed(() => { return base.concat(options); }); -const leftPlayerOptions = computed(() => { - const options = filterOptions(playerOptions.value, leftFilter.value); - if ( - scoreboardStore.scoreboard.leftPlayerId !== CUSTOM_LEFT_PLAYER_ID - || !scoreboardStore.scoreboard.leftNameOverride.trim() - ) { +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: CUSTOM_LEFT_PLAYER_ID, - label: scoreboardStore.scoreboard.leftNameOverride, + value: customPlayerId, + label: customNameOverride, }].concat(options); -}); +}; -const rightPlayerOptions = computed(() => { - const options = filterOptions(playerOptions.value, rightFilter.value); - if ( - scoreboardStore.scoreboard.rightPlayerId !== CUSTOM_RIGHT_PLAYER_ID - || !scoreboardStore.scoreboard.rightNameOverride.trim() - ) { - return options; - } - return [{ - value: CUSTOM_RIGHT_PLAYER_ID, - label: scoreboardStore.scoreboard.rightNameOverride, - }].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]); @@ -187,46 +189,70 @@ const startRightCustomPlayer = () => { } }; -const onLeftFilter = (val: string, update: (fn: () => void) => void) => { +const filterPlayerInput = ( + val: string, + update: (fn: () => void) => void, + filterValue: Ref, + focused: Ref, + inputValue: Ref, + selectedPlayerId: string, + customPlayerId: string, + customNameOverride: string, + setCustomNameOverride: (value: string) => void, + startCustomPlayer: () => void, +) => { update(() => { - leftFilter.value = val; + filterValue.value = val; - if (!leftFocused.value) { + if (!focused.value) { return; } - if (!val.trim() && scoreboardStore.scoreboard.leftPlayerId === CUSTOM_LEFT_PLAYER_ID) { - leftInput.value = scoreboardStore.scoreboard.leftNameOverride; + if (!val.trim() && selectedPlayerId === customPlayerId) { + inputValue.value = customNameOverride; return; } - leftInput.value = val; - scoreboardStore.scoreboard.leftNameOverride = val; + inputValue.value = val; + setCustomNameOverride(val); if (val.trim()) { - startLeftCustomPlayer(); + 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; - - if (!rightFocused.value) { - return; - } - - if (!val.trim() && scoreboardStore.scoreboard.rightPlayerId === CUSTOM_RIGHT_PLAYER_ID) { - rightInput.value = scoreboardStore.scoreboard.rightNameOverride; - return; - } - - rightInput.value = val; - scoreboardStore.scoreboard.rightNameOverride = val; - if (val.trim()) { - startRightCustomPlayer(); - } - }); + filterPlayerInput( + val, + update, + rightFilter, + rightFocused, + rightInput, + scoreboardStore.scoreboard.rightPlayerId, + CUSTOM_RIGHT_PLAYER_ID, + scoreboardStore.scoreboard.rightNameOverride, + (value) => { + scoreboardStore.scoreboard.rightNameOverride = value; + }, + startRightCustomPlayer, + ); }; const onLeftFocus = () => {