Failed to load games: {gamesError}
; - if (typesError) returnFailed to load types: {typesError}
; + if (gamesError) returnFailed to load games: {gamesError.message}
; + if (typesError) returnFailed to load types: {typesError.message}
; return( <> @@ -86,20 +66,3 @@ function ChoosePokemon({ selectedGame, selectedType, onGameChange, onTypeChange ); } - -// Filter controls plus the (not yet wired up) team generation button. -export default function generateTeam({ selectedGame, selectedType, onGameChange, onTypeChange }: ChoosePokemonProps){ - - return( - <> -Failed to load Pokémon: {error}
; - if (typeError) returnFailed to load type: {typeError}
; - if (gameError) returnFailed to load game: {gameError}
; + const { pokemon, typeMap, pokemonError, typeError, gameError } = useFilteredPokemon(selectedGame, selectedType); - // Each filter is resolved to a matching-id/name set independently above; a Pokémon must satisfy all of them. - const filtered = pokemon.filter(({ id, name }) => { - if (gameIds && !gameIds.has(id)) return false; - if (typeNames && !typeNames.has(name)) return false; - return true; - }); + if (pokemonError) returnFailed to load Pokémon: {pokemonError.message}
; + if (typeError) returnFailed to load type: {typeError.message}
; + if (gameError) returnFailed to load game: {gameError.message}
; return (
- {filtered.map(({ id, name, image }) => {
+ {pokemon.map(({ id, name, image }) => {
const types = typeMap?.get(name);
return (
@@ -149,7 +28,7 @@ export default function PokemonGrid({ selectedGame, selectedType }: PokemonGridP
{types && types.length > 0 && (
;
+
+export default function Team({ team, pokemonById, typeMap, allFavourited, generateTeam, toggleFavourite }: TeamProps) {
+ return (
+ <>
+
+
+
,
);
diff --git a/PTG/src/pokemonTeam.ts b/PTG/src/pokemonTeam.ts
new file mode 100644
index 0000000..35a89bb
--- /dev/null
+++ b/PTG/src/pokemonTeam.ts
@@ -0,0 +1,40 @@
+const STORAGE_KEY = "pokemonTeam";
+
+export const TEAM_SIZE = 6;
+
+export type TeamSlot = {
+ id: number | null;
+ favourite: boolean;
+};
+
+export function createBlankTeam(): TeamSlot[] {
+ return Array.from({ length: TEAM_SIZE }, () => ({ id: null, favourite: false }));
+}
+
+function isTeamSlot(value: unknown): value is TeamSlot {
+ if (typeof value !== "object" || value === null) return false;
+ const slot = value as Record;
+ return (slot.id === null || typeof slot.id === "number") && typeof slot.favourite === "boolean";
+}
+
+export function loadStoredTeam(): TeamSlot[] {
+ try {
+ const raw = localStorage.getItem(STORAGE_KEY);
+ if (!raw) return createBlankTeam();
+ const parsed: unknown = JSON.parse(raw);
+ if (!Array.isArray(parsed) || parsed.length !== TEAM_SIZE || !parsed.every(isTeamSlot)) {
+ return createBlankTeam();
+ }
+ return parsed;
+ } catch {
+ return createBlankTeam();
+ }
+}
+
+export function saveStoredTeam(team: TeamSlot[]) {
+ try {
+ localStorage.setItem(STORAGE_KEY, JSON.stringify(team));
+ } catch {
+ // storage unavailable - team still works for this session
+ }
+}
diff --git a/PTG/src/useFilteredPokemon.ts b/PTG/src/useFilteredPokemon.ts
new file mode 100644
index 0000000..8ec5c10
--- /dev/null
+++ b/PTG/src/useFilteredPokemon.ts
@@ -0,0 +1,89 @@
+import { useQuery } from "@tanstack/react-query";
+import { fetchGameSpeciesIds } from "./games";
+import { fetchPokemonTypeMap, type PokemonType } from "./pokemonTypes";
+
+const POKEMON_COUNT = 1025;
+const LIST_URL = `https://pokeapi.co/api/v2/pokemon?limit=${POKEMON_COUNT}`;
+const ARTWORK_URL = (id: number) =>
+ `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/${id}.png`;
+const TYPE_URL = (type: string) => `https://pokeapi.co/api/v2/type/${type}`;
+
+export type Pokemon = {
+ id: number;
+ name: string;
+ image: string;
+};
+
+async function fetchPokemonList(): Promise {
+ const res = await fetch(LIST_URL);
+ if (!res.ok) throw new Error(`PokeAPI request failed: ${res.status}`);
+ const data: { results: { name: string; url: string }[] } = await res.json();
+ return data.results.map(({ name, url }) => {
+ const id = Number(url.split("/").filter(Boolean).pop());
+ return { id, name, image: ARTWORK_URL(id) };
+ });
+}
+
+async function fetchTypeNames(type: string): Promise> {
+ const res = await fetch(TYPE_URL(type));
+ if (!res.ok) throw new Error(`PokeAPI request failed: ${res.status}`);
+ const data: { pokemon: { pokemon: { name: string } }[] } = await res.json();
+ return new Set(data.pokemon.map(({ pokemon }) => pokemon.name));
+}
+
+// The full Pokémon list, shared (and cached) across every component that needs it.
+export function usePokemonList() {
+ return useQuery({
+ queryKey: ["pokemonList"],
+ queryFn: fetchPokemonList,
+ });
+}
+
+export type FilteredPokemon = {
+ pokemon: Pokemon[];
+ typeMap: Map | undefined;
+ pokemonError: Error | null;
+ typeError: Error | null;
+ gameError: Error | null;
+};
+
+// Resolves the current game/type filters against the full Pokémon list.
+export function useFilteredPokemon(selectedGame: string, selectedType: string): FilteredPokemon {
+ const { data: pokemon = [], error: pokemonError } = usePokemonList();
+
+ // Decorative type icons. A failure here shouldn't block the rest of the grid.
+ const { data: typeMap } = useQuery({
+ queryKey: ["pokemonTypeMap"],
+ queryFn: fetchPokemonTypeMap,
+ retry: false,
+ throwOnError: false,
+ });
+
+ const isAnyType = !selectedType || selectedType === "any";
+ const { data: typeNames, error: typeError } = useQuery({
+ queryKey: ["pokemonTypeFilter", selectedType],
+ queryFn: () => fetchTypeNames(selectedType),
+ enabled: !isAnyType,
+ });
+
+ const { data: gameIds, error: gameError } = useQuery({
+ queryKey: ["gameSpeciesIds", selectedGame],
+ queryFn: () => fetchGameSpeciesIds(selectedGame),
+ enabled: !!selectedGame,
+ });
+
+ // Each filter is resolved to a matching-id/name set independently above. A Pokemon must satisfy all of them.
+ const filtered = pokemon.filter(({ id, name }) => {
+ if (gameIds && !gameIds.has(id)) return false;
+ if (typeNames && !typeNames.has(name)) return false;
+ return true;
+ });
+
+ return {
+ pokemon: filtered,
+ typeMap,
+ pokemonError,
+ typeError,
+ gameError,
+ };
+}
diff --git a/PTG/src/usePokemonTeam.ts b/PTG/src/usePokemonTeam.ts
new file mode 100644
index 0000000..deb003f
--- /dev/null
+++ b/PTG/src/usePokemonTeam.ts
@@ -0,0 +1,52 @@
+import { useEffect, useState } from "react";
+import { loadStoredTeam, saveStoredTeam, type TeamSlot } from "./pokemonTeam";
+import { useFilteredPokemon, usePokemonList, type Pokemon } from "./useFilteredPokemon";
+import type { PokemonType } from "./pokemonTypes";
+
+export type PokemonTeam = {
+ team: TeamSlot[];
+ pokemonById: Map;
+ typeMap: Map | undefined;
+ allFavourited: boolean;
+ generateTeam: () => void;
+ toggleFavourite: (index: number) => void;
+};
+
+export function usePokemonTeam(selectedGame: string, selectedType: string): PokemonTeam {
+ const [team, setTeam] = useState(() => loadStoredTeam());
+
+ // The team can hold Pokémon that fall outside the current filter (picked before the filter changed),
+ // so members are looked up from the full list, while new picks are drawn from the filtered one.
+ const { data: allPokemon = [] } = usePokemonList();
+ const { pokemon: filteredPokemon, typeMap } = useFilteredPokemon(selectedGame, selectedType);
+
+ useEffect(() => {
+ saveStoredTeam(team);
+ }, [team]);
+
+ const pokemonById = new Map(allPokemon.map((entry) => [entry.id, entry]));
+ const allFavourited = team.every((slot) => slot.favourite);
+
+ function generateTeam() {
+ const favouriteIds = new Set(team.filter((slot) => slot.favourite).map((slot) => slot.id));
+ const available = filteredPokemon.filter(({ id }) => !favouriteIds.has(id));
+
+ setTeam((current) =>
+ current.map((slot) => {
+ if (slot.favourite) return slot;
+ if (available.length === 0) return { ...slot, id: null };
+ const index = Math.floor(Math.random() * available.length);
+ const [picked] = available.splice(index, 1);
+ return { ...slot, id: picked.id };
+ })
+ );
+ }
+
+ function toggleFavourite(index: number) {
+ setTeam((current) =>
+ current.map((slot, i) => (i === index && slot.id !== null ? { ...slot, favourite: !slot.favourite } : slot))
+ );
+ }
+
+ return { team, pokemonById, typeMap, allFavourited, generateTeam, toggleFavourite };
+}
diff --git a/package-lock.json b/package-lock.json
deleted file mode 100644
index 03a0d36..0000000
--- a/package-lock.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "name": "T33-Project-1",
- "lockfileVersion": 3,
- "requires": true,
- "packages": {}
-}
- {types.map((type) => (
+ {types.map((type: PokemonType) => (
} "{capitalize(type.name)}")
))}
diff --git a/PTG/src/Team.css b/PTG/src/Team.css
new file mode 100644
index 0000000..8183fb4
--- /dev/null
+++ b/PTG/src/Team.css
@@ -0,0 +1,76 @@
+.generateTeamButton:disabled {
+ color: gray;
+}
+
+.teamGrid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+ gap: 1rem;
+ padding: 1rem;
+}
+
+.teamCard {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ min-height: 160px;
+ border: 1px solid #ddd;
+ border-radius: 8px;
+ padding: 0.5rem;
+ text-align: center;
+}
+
+.teamCardImage {
+ position: relative;
+ width: 100%;
+ max-width: 120px;
+ padding-top: 24px;
+}
+
+.teamCardImage > img {
+ width: 100%;
+ height: auto;
+ display: block;
+}
+
+.teamCardTypes {
+ position: absolute;
+ top: 2px;
+ left: 2px;
+ display: flex;
+ gap: 2px;
+}
+
+.teamCardTypes img {
+ width: 20px;
+ height: 20px;
+ filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.6));
+}
+
+.teamCardFavourite {
+ position: absolute;
+ top: 2px;
+ right: 2px;
+ padding: 0;
+ border: none;
+ background: none;
+ font-size: 1.25rem;
+ line-height: 1;
+ color: #ccc;
+ cursor: pointer;
+}
+
+.teamCardFavourite:disabled {
+ color: #e5e5e5;
+ cursor: not-allowed;
+}
+
+.teamCardFavourite.isFavourited {
+ color: gold;
+}
+
+.teamCardEmpty {
+ color: #999;
+}
diff --git a/PTG/src/Team.tsx b/PTG/src/Team.tsx
new file mode 100644
index 0000000..37726d3
--- /dev/null
+++ b/PTG/src/Team.tsx
@@ -0,0 +1,47 @@
+import "./Team.css";
+import { TYPE_ICON_URL, type PokemonType } from "./pokemonTypes";
+import type { PokemonTeam } from "./usePokemonTeam";
+
+function capitalize(name: string) {
+ return name.charAt(0).toUpperCase() + name.slice(1);
+}
+
+type TeamProps = Pick
+ {team.map((slot, index) => {
+ const member = slot.id !== null ? pokemonById.get(slot.id) : undefined;
+ const types = member ? typeMap?.get(member.name) : undefined;
+ return (
+
+
+ );
+}
diff --git a/PTG/src/main.tsx b/PTG/src/main.tsx
index 50d8564..abda7f0 100644
--- a/PTG/src/main.tsx
+++ b/PTG/src/main.tsx
@@ -1,11 +1,14 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { createBrowserRouter, RouterProvider } from 'react-router-dom'
import './index.css'
import App from './App.tsx'
import About from './About.tsx'
import NotFoundPage from './NotFoundPage.tsx'
+const queryClient = new QueryClient()
+
const router = createBrowserRouter([
{
path: "/",
@@ -18,11 +21,13 @@ const router = createBrowserRouter([
{
path: "*",
element:
+
+ );
+ })}
+
+ {member && 
}
+
+ {types && types.length > 0 && (
+
+ {member ? capitalize(member.name) : "Empty"}
+
+ {types.map((type: PokemonType) => (
+
+ ))}
+
+ )}
+