diff --git a/src/dashboard/example/components/ScoreboardPanel.vue b/src/dashboard/example/components/ScoreboardPanel.vue index f04f02e..4a0c3f0 100644 --- a/src/dashboard/example/components/ScoreboardPanel.vue +++ b/src/dashboard/example/components/ScoreboardPanel.vue @@ -26,8 +26,9 @@ const rightCountryOptions = ref(countryOptions); const leftCharacterInput = ref(''); const rightCharacterInput = ref(''); +const gameInput = ref(''); -const fightingGameOptions = [ +const allFightingGameOptions = [ 'Street Fighter 6', 'TEKKEN 8', 'Guilty Gear -Strive-', @@ -40,6 +41,8 @@ const fightingGameOptions = [ value: game, })); +const fightingGameOptions = ref(allFightingGameOptions); + const characterOptions = computed(() => getCharactersByGame(scoreboardStore.scoreboard.game)); type CharacterOption = ReturnType[number]; const leftCharacterOptions = ref([]); @@ -120,6 +123,17 @@ const onRightCharacterFilter = (value: string, update: (callback: () => void) => filterCharacters(value, update, rightCharacterOptions); }; +const onGameFilter = (value: string, update: (callback: () => void) => void) => { + update(() => { + const needle = value.toLowerCase().trim(); + if (!needle) { + fightingGameOptions.value = allFightingGameOptions; + return; + } + fightingGameOptions.value = allFightingGameOptions.filter((game) => game.label.toLowerCase().includes(needle)); + }); +}; + const playerOptions = computed(() => { const base = [{ label: '(Sin asignar)', value: '' }]; const entries = Object.entries(playersStore.players) as [string, Schemas.Players[string]][]; @@ -621,6 +635,16 @@ watchEffect(() => { } }); + +watch( + () => scoreboardStore.scoreboard.game, + (value) => { + const match = allFightingGameOptions.find((option) => option.value === value); + gameInput.value = match?.label ?? ''; + }, + { immediate: true }, +); + watch( () => scoreboardStore.scoreboard.game, () => { @@ -797,6 +821,22 @@ watch(
+ +