Julian Tabel
512d1bfce5
Add Tailwind v4 @theme tokens for surfaces, accents, text, borders, and status colors. Self-host Geist Sans/Mono variable fonts. Redesign nav with backdrop blur and active states, home page with gradient hero. Migrate all 50+ components from ad-hoc gray/blue Tailwind classes to semantic theme tokens (surface-*, text-*, border-*, accent-*, status-*). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
278 lines
11 KiB
TypeScript
278 lines
11 KiB
TypeScript
import { useState, useMemo } from 'react'
|
||
import { useRoutePokemon } from '../hooks/useGames'
|
||
import { EncounterMethodBadge, getMethodLabel, METHOD_ORDER } from './EncounterMethodBadge'
|
||
import type { Route, RouteEncounterDetail } from '../types'
|
||
|
||
interface ShinyEncounterModalProps {
|
||
routes: Route[]
|
||
gameId: number
|
||
onSubmit: (data: {
|
||
routeId: number
|
||
pokemonId: number
|
||
nickname?: string | undefined
|
||
status: 'caught'
|
||
catchLevel?: number | undefined
|
||
isShiny: true
|
||
}) => void
|
||
onClose: () => void
|
||
isPending: boolean
|
||
}
|
||
|
||
const SPECIAL_METHODS = ['starter', 'gift', 'fossil', 'trade']
|
||
|
||
function groupByMethod(
|
||
pokemon: RouteEncounterDetail[]
|
||
): { method: string; pokemon: RouteEncounterDetail[] }[] {
|
||
const groups = new Map<string, RouteEncounterDetail[]>()
|
||
for (const rp of pokemon) {
|
||
const list = groups.get(rp.encounterMethod) ?? []
|
||
list.push(rp)
|
||
groups.set(rp.encounterMethod, list)
|
||
}
|
||
return [...groups.entries()]
|
||
.sort(([a], [b]) => {
|
||
const ai = METHOD_ORDER.indexOf(a)
|
||
const bi = METHOD_ORDER.indexOf(b)
|
||
return (ai === -1 ? 999 : ai) - (bi === -1 ? 999 : bi)
|
||
})
|
||
.map(([method, pokemon]) => ({ method, pokemon }))
|
||
}
|
||
|
||
export function ShinyEncounterModal({
|
||
routes,
|
||
gameId,
|
||
onSubmit,
|
||
onClose,
|
||
isPending,
|
||
}: ShinyEncounterModalProps) {
|
||
const [selectedRouteId, setSelectedRouteId] = useState<number | null>(null)
|
||
const { data: routePokemon, isLoading: loadingPokemon } = useRoutePokemon(selectedRouteId, gameId)
|
||
|
||
const [selectedPokemon, setSelectedPokemon] = useState<RouteEncounterDetail | null>(null)
|
||
const [nickname, setNickname] = useState('')
|
||
const [catchLevel, setCatchLevel] = useState<string>('')
|
||
const [search, setSearch] = useState('')
|
||
|
||
const filteredPokemon = routePokemon?.filter((rp) =>
|
||
rp.pokemon.name.toLowerCase().includes(search.toLowerCase())
|
||
)
|
||
|
||
const groupedPokemon = useMemo(
|
||
() => (filteredPokemon ? groupByMethod(filteredPokemon) : []),
|
||
[filteredPokemon]
|
||
)
|
||
const hasMultipleGroups = groupedPokemon.length > 1
|
||
|
||
// Reset selection when route changes
|
||
const handleRouteChange = (routeId: number) => {
|
||
setSelectedRouteId(routeId)
|
||
setSelectedPokemon(null)
|
||
setSearch('')
|
||
}
|
||
|
||
const handleSubmit = () => {
|
||
if (selectedPokemon && selectedRouteId) {
|
||
onSubmit({
|
||
routeId: selectedRouteId,
|
||
pokemonId: selectedPokemon.pokemonId,
|
||
nickname: nickname || undefined,
|
||
status: 'caught',
|
||
catchLevel: catchLevel ? Number(catchLevel) : undefined,
|
||
isShiny: true,
|
||
})
|
||
}
|
||
}
|
||
|
||
// Only show leaf routes (no children, i.e. routes that aren't parents)
|
||
const parentIds = new Set(
|
||
routes.filter((r) => r.parentRouteId !== null).map((r) => r.parentRouteId)
|
||
)
|
||
const leafRoutes = routes.filter((r) => !parentIds.has(r.id))
|
||
|
||
return (
|
||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
|
||
<div className="fixed inset-0 bg-black/50" onClick={onClose} />
|
||
<div className="relative bg-surface-1 rounded-xl shadow-xl max-w-lg w-full max-h-[90vh] overflow-y-auto">
|
||
<div className="sticky top-0 bg-surface-1 border-b border-yellow-300 dark:border-yellow-600 px-6 py-4 rounded-t-xl">
|
||
<div className="flex items-center justify-between">
|
||
<h2 className="text-lg font-semibold text-text-primary flex items-center gap-2">
|
||
<span className="text-yellow-500">✦</span>
|
||
Log Shiny Encounter
|
||
</h2>
|
||
<button onClick={onClose} className="text-gray-400 hover:text-text-primary">
|
||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M6 18L18 6M6 6l12 12"
|
||
/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<p className="text-sm text-yellow-600 dark:text-yellow-400 mt-1">
|
||
Shiny catches bypass the one-per-route rule
|
||
</p>
|
||
</div>
|
||
|
||
<div className="px-6 py-4 space-y-4">
|
||
{/* Route selector */}
|
||
<div>
|
||
<label className="block text-sm font-medium text-text-secondary mb-1">Route</label>
|
||
<select
|
||
value={selectedRouteId ?? ''}
|
||
onChange={(e) => handleRouteChange(Number(e.target.value))}
|
||
className="w-full px-3 py-2 rounded-lg border border-border-default bg-surface-2 text-text-primary focus:outline-none focus:ring-2 focus:ring-yellow-500"
|
||
>
|
||
<option value="">Select a route...</option>
|
||
{leafRoutes.map((r) => (
|
||
<option key={r.id} value={r.id}>
|
||
{r.name}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
|
||
{/* Pokemon Selection */}
|
||
{selectedRouteId && (
|
||
<div>
|
||
<label className="block text-sm font-medium text-text-secondary mb-1">Pokemon</label>
|
||
{loadingPokemon ? (
|
||
<div className="flex items-center justify-center py-4">
|
||
<div className="w-6 h-6 border-2 border-yellow-500 border-t-transparent rounded-full animate-spin" />
|
||
</div>
|
||
) : filteredPokemon && filteredPokemon.length > 0 ? (
|
||
<>
|
||
{(routePokemon?.length ?? 0) > 6 && (
|
||
<input
|
||
type="text"
|
||
placeholder="Search pokemon..."
|
||
value={search}
|
||
onChange={(e) => setSearch(e.target.value)}
|
||
className="w-full px-3 py-1.5 mb-2 rounded-lg border border-border-default bg-surface-2 text-text-primary text-sm focus:outline-none focus:ring-2 focus:ring-yellow-500"
|
||
/>
|
||
)}
|
||
<div className="max-h-64 overflow-y-auto space-y-3">
|
||
{groupedPokemon.map(({ method, pokemon }, groupIdx) => (
|
||
<div key={method}>
|
||
{groupIdx > 0 && <div className="border-t border-border-default mb-3" />}
|
||
{hasMultipleGroups && (
|
||
<div className="text-xs font-medium text-text-tertiary mb-1.5">
|
||
{getMethodLabel(method)}
|
||
</div>
|
||
)}
|
||
<div className="grid grid-cols-3 gap-2">
|
||
{pokemon.map((rp) => (
|
||
<button
|
||
key={rp.id}
|
||
type="button"
|
||
onClick={() => setSelectedPokemon(rp)}
|
||
className={`flex flex-col items-center p-2 rounded-lg border text-center transition-colors ${
|
||
selectedPokemon?.id === rp.id
|
||
? 'border-yellow-500 bg-yellow-50 dark:bg-yellow-900/30'
|
||
: 'border-border-default hover:border-border-default'
|
||
}`}
|
||
>
|
||
{rp.pokemon.spriteUrl ? (
|
||
<img
|
||
src={rp.pokemon.spriteUrl}
|
||
alt={rp.pokemon.name}
|
||
className="w-10 h-10"
|
||
/>
|
||
) : (
|
||
<div className="w-10 h-10 rounded-full bg-surface-3 flex items-center justify-center text-xs font-bold">
|
||
{rp.pokemon.name[0]?.toUpperCase()}
|
||
</div>
|
||
)}
|
||
<span className="text-xs text-text-secondary mt-1 capitalize">
|
||
{rp.pokemon.name}
|
||
</span>
|
||
{SPECIAL_METHODS.includes(rp.encounterMethod) && (
|
||
<EncounterMethodBadge method={rp.encounterMethod} />
|
||
)}
|
||
<span className="text-[10px] text-gray-400">
|
||
Lv. {rp.minLevel}
|
||
{rp.maxLevel !== rp.minLevel && `–${rp.maxLevel}`}
|
||
</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</>
|
||
) : (
|
||
<p className="text-sm text-text-tertiary py-2">No pokemon data for this route</p>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* Nickname */}
|
||
{selectedPokemon && (
|
||
<div>
|
||
<label
|
||
htmlFor="shiny-nickname"
|
||
className="block text-sm font-medium text-text-secondary mb-1"
|
||
>
|
||
Nickname
|
||
</label>
|
||
<input
|
||
id="shiny-nickname"
|
||
type="text"
|
||
value={nickname}
|
||
onChange={(e) => setNickname(e.target.value)}
|
||
placeholder="Give it a name..."
|
||
className="w-full px-3 py-2 rounded-lg border border-border-default bg-surface-2 text-text-primary focus:outline-none focus:ring-2 focus:ring-yellow-500"
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
{/* Catch Level */}
|
||
{selectedPokemon && (
|
||
<div>
|
||
<label
|
||
htmlFor="shiny-catch-level"
|
||
className="block text-sm font-medium text-text-secondary mb-1"
|
||
>
|
||
Catch Level
|
||
</label>
|
||
<input
|
||
id="shiny-catch-level"
|
||
type="number"
|
||
min={1}
|
||
max={100}
|
||
value={catchLevel}
|
||
onChange={(e) => setCatchLevel(e.target.value)}
|
||
placeholder={
|
||
selectedPokemon
|
||
? `${selectedPokemon.minLevel}–${selectedPokemon.maxLevel}`
|
||
: 'Level'
|
||
}
|
||
className="w-24 px-3 py-2 rounded-lg border border-border-default bg-surface-2 text-text-primary focus:outline-none focus:ring-2 focus:ring-yellow-500"
|
||
/>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div className="sticky bottom-0 bg-surface-1 border-t border-border-default px-6 py-4 rounded-b-xl flex justify-end gap-3">
|
||
<button
|
||
type="button"
|
||
onClick={onClose}
|
||
className="px-4 py-2 text-text-secondary bg-surface-2 rounded-lg font-medium hover:bg-surface-3 transition-colors"
|
||
>
|
||
Cancel
|
||
</button>
|
||
<button
|
||
type="button"
|
||
disabled={!selectedPokemon || isPending}
|
||
onClick={handleSubmit}
|
||
className="px-4 py-2 bg-yellow-500 text-white rounded-lg font-medium hover:bg-yellow-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||
>
|
||
{isPending ? 'Saving...' : 'Log Shiny'}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|