diff --git a/PTG/src/App.tsx b/PTG/src/App.tsx index 968af6e..7b160d6 100644 --- a/PTG/src/App.tsx +++ b/PTG/src/App.tsx @@ -10,12 +10,13 @@ import { usePokemonTeam } from "./usePokemonTeam.ts"; export default function App(){ const [selectedGame, setSelectedGame] = useState(() => loadStoredFilters().selectedGame); const [selectedType, setSelectedType] = useState(() => loadStoredFilters().selectedType); + const [selectedName, setSelectedName] = useState(() => loadStoredFilters().selectedName); useEffect(() => { - saveStoredFilters({ selectedGame, selectedType }); - }, [selectedGame, selectedType]); + saveStoredFilters({ selectedGame, selectedType, selectedName }); + }, [selectedGame, selectedType, selectedName]); - const { team, pokemonById, typeMap, allFavourited, generateTeam, toggleFavourite } = usePokemonTeam(selectedGame, selectedType); + const { team, pokemonById, typeMap, allFavourited, generateTeam, toggleFavourite } = usePokemonTeam(selectedGame, selectedType, selectedName); return(
@@ -23,8 +24,10 @@ export default function App(){ - +
diff --git a/PTG/src/ChoosePokemon.css b/PTG/src/ChoosePokemon.css index d3edf93..1d5b0b8 100644 --- a/PTG/src/ChoosePokemon.css +++ b/PTG/src/ChoosePokemon.css @@ -3,3 +3,9 @@ width: fit-content; max-width: 100%; } + +.chooseName { + field-sizing: content; + width: fit-content; + max-width: 100%; +} diff --git a/PTG/src/ChoosePokemon.tsx b/PTG/src/ChoosePokemon.tsx index 40b24c8..c0c0fd9 100644 --- a/PTG/src/ChoosePokemon.tsx +++ b/PTG/src/ChoosePokemon.tsx @@ -13,11 +13,13 @@ const ANY_TYPE: TypeChoice = { label: 'Any Type', value: 'any' }; type ChoosePokemonProps = { selectedGame: string; selectedType: string; + selectedName: string; onGameChange: (value: string) => void; onTypeChange: (value: string) => void; + onNameChange: (value: string) => void; } -export default function ChoosePokemon({ selectedGame, selectedType, onGameChange, onTypeChange }: ChoosePokemonProps){ +export default function ChoosePokemon({ selectedGame, selectedType, selectedName, onGameChange, onTypeChange, onNameChange }: ChoosePokemonProps){ const { data: games = [], error: gamesError } = useQuery({ queryKey: ["games"], queryFn: fetchGames, @@ -27,6 +29,8 @@ export default function ChoosePokemon({ selectedGame, selectedType, onGameChange queryFn: fetchTypes, }); + function handleNameChange(e: React.ChangeEvent) { onNameChange(e.target.value); } + function handleGameChange(e: React.ChangeEvent) { onGameChange(e.target.value); } function handleTypeChange(e: React.ChangeEvent) { onTypeChange(e.target.value); } @@ -38,6 +42,13 @@ export default function ChoosePokemon({ selectedGame, selectedType, onGameChange return( <> +