Add frontend API client and TanStack Query hooks

Install @tanstack/react-query, create a fetch-based API client with typed
functions for all endpoints, and add query/mutation hooks for games, pokemon,
runs, and encounters. Includes Vite dev proxy for /api and QueryClientProvider
setup.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/src/hooks/useEncounters.ts

@@ -0,0 +1,43 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import {
+  createEncounter,
+  updateEncounter,
+  deleteEncounter,
+} from '../api/encounters'
+import type { CreateEncounterInput, UpdateEncounterInput } from '../types/game'
+
+export function useCreateEncounter(runId: number) {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: (data: CreateEncounterInput) => createEncounter(runId, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['runs', runId] })
+    },
+  })
+}
+
+export function useUpdateEncounter(runId: number) {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: ({
+      id,
+      data,
+    }: {
+      id: number
+      data: UpdateEncounterInput
+    }) => updateEncounter(id, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['runs', runId] })
+    },
+  })
+}
+
+export function useDeleteEncounter(runId: number) {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: (id: number) => deleteEncounter(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['runs', runId] })
+    },
+  })
+}

frontend/src/hooks/useGames.ts

@@ -0,0 +1,31 @@
+import { useQuery } from '@tanstack/react-query'
+import { getGames, getGame, getGameRoutes, getRoutePokemon } from '../api/games'
+
+export function useGames() {
+  return useQuery({
+    queryKey: ['games'],
+    queryFn: getGames,
+  })
+}
+
+export function useGame(id: number) {
+  return useQuery({
+    queryKey: ['games', id],
+    queryFn: () => getGame(id),
+  })
+}
+
+export function useGameRoutes(gameId: number) {
+  return useQuery({
+    queryKey: ['games', gameId, 'routes'],
+    queryFn: () => getGameRoutes(gameId),
+  })
+}
+
+export function useRoutePokemon(routeId: number | null) {
+  return useQuery({
+    queryKey: ['routes', routeId, 'pokemon'],
+    queryFn: () => getRoutePokemon(routeId!),
+    enabled: routeId !== null,
+  })
+}

frontend/src/hooks/usePokemon.ts

@@ -0,0 +1,10 @@
+import { useQuery } from '@tanstack/react-query'
+import { getPokemon } from '../api/pokemon'
+
+export function usePokemon(id: number | null) {
+  return useQuery({
+    queryKey: ['pokemon', id],
+    queryFn: () => getPokemon(id!),
+    enabled: id !== null,
+  })
+}

frontend/src/hooks/useRuns.ts

@@ -0,0 +1,47 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { getRuns, getRun, createRun, updateRun, deleteRun } from '../api/runs'
+import type { CreateRunInput, UpdateRunInput } from '../types/game'
+
+export function useRuns() {
+  return useQuery({
+    queryKey: ['runs'],
+    queryFn: getRuns,
+  })
+}
+
+export function useRun(id: number) {
+  return useQuery({
+    queryKey: ['runs', id],
+    queryFn: () => getRun(id),
+  })
+}
+
+export function useCreateRun() {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: (data: CreateRunInput) => createRun(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['runs'] })
+    },
+  })
+}
+
+export function useUpdateRun(id: number) {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: (data: UpdateRunInput) => updateRun(id, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['runs'] })
+    },
+  })
+}
+
+export function useDeleteRun() {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: (id: number) => deleteRun(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['runs'] })
+    },
+  })
+}