- Loading...
+
+
+
+
+ {columns.map((col) => (
+ |
+ {col.header}
+ |
+ ))}
+
+
+
+ {Array.from({ length: 5 }).map((_, i) => (
+
+ {columns.map((col) => (
+ |
+
+ |
+ ))}
+
+ ))}
+
+
)
}
if (data.length === 0) {
return (
-
+
{emptyMessage}
)
}
return (
-
-
-
-
- {columns.map((col) => (
- |
- {col.header}
- |
- ))}
-
-
-
- {data.map((row) => (
- onRowClick(row) : undefined}
- className={onRowClick ? 'cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800' : ''}
- >
- {columns.map((col) => (
- |
- {col.accessor(row)}
- |
- ))}
+
+
+
+
+
+ {columns.map((col) => {
+ const sortable = !!col.sortKey
+ const active = sortCol === col.header
+ return (
+ | handleSort(col.header) : undefined}
+ className={`px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider ${col.className ?? ''} ${sortable ? 'cursor-pointer select-none hover:text-gray-700 dark:hover:text-gray-200' : ''}`}
+ >
+
+ {col.header}
+ {sortable && active && (
+
+ {sortDir === 'asc' ? '\u2191' : '\u2193'}
+
+ )}
+
+ |
+ )
+ })}
- ))}
-
-
+
+
+ {sortedData.map((row) => (
+ onRowClick(row) : undefined}
+ className={onRowClick ? 'cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800' : ''}
+ >
+ {columns.map((col) => (
+ |
+ {col.accessor(row)}
+ |
+ ))}
+
+ ))}
+
+
+
)
}
diff --git a/frontend/src/components/admin/EvolutionFormModal.tsx b/frontend/src/components/admin/EvolutionFormModal.tsx
new file mode 100644
index 0000000..3c10023
--- /dev/null
+++ b/frontend/src/components/admin/EvolutionFormModal.tsx
@@ -0,0 +1,124 @@
+import { type FormEvent, useState } from 'react'
+import { FormModal } from './FormModal'
+import { PokemonSelector } from './PokemonSelector'
+import type { EvolutionAdmin, CreateEvolutionInput, UpdateEvolutionInput } from '../../types'
+
+interface EvolutionFormModalProps {
+ evolution?: EvolutionAdmin
+ onSubmit: (data: CreateEvolutionInput | UpdateEvolutionInput) => void
+ onClose: () => void
+ isSubmitting?: boolean
+}
+
+const TRIGGER_OPTIONS = ['level-up', 'trade', 'use-item', 'shed', 'other']
+
+export function EvolutionFormModal({
+ evolution,
+ onSubmit,
+ onClose,
+ isSubmitting,
+}: EvolutionFormModalProps) {
+ const [fromPokemonId, setFromPokemonId] = useState
(
+ evolution?.fromPokemonId ?? null,
+ )
+ const [toPokemonId, setToPokemonId] = useState(
+ evolution?.toPokemonId ?? null,
+ )
+ const [trigger, setTrigger] = useState(evolution?.trigger ?? 'level-up')
+ const [minLevel, setMinLevel] = useState(String(evolution?.minLevel ?? ''))
+ const [item, setItem] = useState(evolution?.item ?? '')
+ const [heldItem, setHeldItem] = useState(evolution?.heldItem ?? '')
+ const [condition, setCondition] = useState(evolution?.condition ?? '')
+
+ const handleSubmit = (e: FormEvent) => {
+ e.preventDefault()
+ if (!fromPokemonId || !toPokemonId) return
+ onSubmit({
+ fromPokemonId,
+ toPokemonId,
+ trigger,
+ minLevel: minLevel ? Number(minLevel) : null,
+ item: item || null,
+ heldItem: heldItem || null,
+ condition: condition || null,
+ })
+ }
+
+ return (
+
+
+
+
+
+
+
+
+
+ setMinLevel(e.target.value)}
+ placeholder="Optional"
+ className="w-full px-3 py-2 border rounded-md dark:bg-gray-700 dark:border-gray-600"
+ />
+
+
+
+ setItem(e.target.value)}
+ placeholder="e.g. thunder-stone"
+ className="w-full px-3 py-2 border rounded-md dark:bg-gray-700 dark:border-gray-600"
+ />
+
+
+
+ setHeldItem(e.target.value)}
+ placeholder="Optional"
+ className="w-full px-3 py-2 border rounded-md dark:bg-gray-700 dark:border-gray-600"
+ />
+
+
+
+ setCondition(e.target.value)}
+ placeholder="e.g. high-happiness, daytime"
+ className="w-full px-3 py-2 border rounded-md dark:bg-gray-700 dark:border-gray-600"
+ />
+
+
+ )
+}
diff --git a/frontend/src/components/admin/PokemonSelector.tsx b/frontend/src/components/admin/PokemonSelector.tsx
new file mode 100644
index 0000000..fb0a5e9
--- /dev/null
+++ b/frontend/src/components/admin/PokemonSelector.tsx
@@ -0,0 +1,78 @@
+import { useState, useRef, useEffect } from 'react'
+import { usePokemonList } from '../../hooks/useAdmin'
+
+interface PokemonSelectorProps {
+ label: string
+ selectedId: number | null
+ initialName?: string
+ onChange: (id: number | null) => void
+}
+
+export function PokemonSelector({
+ label,
+ selectedId,
+ initialName,
+ onChange,
+}: PokemonSelectorProps) {
+ const [search, setSearch] = useState(initialName ?? '')
+ const [open, setOpen] = useState(false)
+ const ref = useRef(null)
+ const { data } = usePokemonList(search || undefined, 20, 0)
+ const pokemon = data?.items ?? []
+
+ useEffect(() => {
+ function handleClick(e: MouseEvent) {
+ if (ref.current && !ref.current.contains(e.target as Node)) {
+ setOpen(false)
+ }
+ }
+ document.addEventListener('mousedown', handleClick)
+ return () => document.removeEventListener('mousedown', handleClick)
+ }, [])
+
+ return (
+
+
+
{
+ setSearch(e.target.value)
+ setOpen(true)
+ if (!e.target.value) onChange(null)
+ }}
+ onFocus={() => setOpen(true)}
+ placeholder="Search pokemon..."
+ className="w-full px-3 py-2 border rounded-md dark:bg-gray-700 dark:border-gray-600"
+ />
+ {selectedId && (
+
+ )}
+ {open && pokemon.length > 0 && (
+
+ {pokemon.map((p) => (
+ - {
+ onChange(p.id)
+ setSearch(p.name)
+ setOpen(false)
+ }}
+ className={`px-3 py-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 text-sm flex items-center gap-2 ${
+ p.id === selectedId ? 'bg-blue-50 dark:bg-blue-900/30' : ''
+ }`}
+ >
+ {p.spriteUrl && (
+
+ )}
+
+ #{p.nationalDex} {p.name}
+
+
+ ))}
+
+ )}
+
+ {e.fromPokemon.spriteUrl && (
+
+ )}
+
{e.fromPokemon.name}
+
+ {e.toPokemon.spriteUrl && (
+
+ )}
+
{e.toPokemon.name}
+
+
+
+
+ ),
+ },
+ ]
+
+ return (
+
+
+
Evolutions
+
+
+
+
+ {
+ setSearch(e.target.value)
+ setPage(0)
+ }}
+ placeholder="Search by pokemon name, trigger, or item..."
+ className="w-full max-w-sm px-3 py-2 border rounded-md dark:bg-gray-700 dark:border-gray-600"
+ />
+
+ {total} evolutions
+
+
+
+
e.id}
+ />
+
+ {totalPages > 1 && (
+
+
+ Showing {offset + 1}-{Math.min(offset + PAGE_SIZE, total)} of {total}
+
+
+
+
+
+ Page {page + 1} of {totalPages}
+
+
+
+
+
onClick(route)}
+ >
+ |
+
+ |
+ {route.order} |
+ {route.name} |
+
+ e.stopPropagation()}>
+
+
+
+ |
+
+ )
+}
+
export function AdminGameDetail() {
const { gameId } = useParams<{ gameId: string }>()
const navigate = useNavigate()
@@ -27,69 +108,36 @@ export function AdminGameDetail() {
const [editing, setEditing] = useState(null)
const [deleting, setDeleting] = useState(null)
+ const sensors = useSensors(
+ useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+ useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
+ )
+
if (isLoading) return Loading...
if (!game) return Game not found
const routes = game.routes ?? []
- const moveRoute = (route: GameRoute, direction: 'up' | 'down') => {
- const idx = routes.findIndex((r) => r.id === route.id)
- if (direction === 'up' && idx <= 0) return
- if (direction === 'down' && idx >= routes.length - 1) return
+ const handleDragEnd = (event: DragEndEvent) => {
+ const { active, over } = event
+ if (!over || active.id === over.id) return
- const swapIdx = direction === 'up' ? idx - 1 : idx + 1
- const newRoutes = routes.map((r, i) => {
- if (i === idx) return { id: r.id, order: routes[swapIdx].order }
- if (i === swapIdx) return { id: r.id, order: routes[idx].order }
- return { id: r.id, order: r.order }
- })
- reorderRoutes.mutate(newRoutes)
+ const oldIndex = routes.findIndex((r) => r.id === active.id)
+ const newIndex = routes.findIndex((r) => r.id === over.id)
+ if (oldIndex === -1 || newIndex === -1) return
+
+ // Build new order assignments based on rearranged positions
+ const reordered = [...routes]
+ const [moved] = reordered.splice(oldIndex, 1)
+ reordered.splice(newIndex, 0, moved)
+
+ const newOrders = reordered.map((r, i) => ({
+ id: r.id,
+ order: i + 1,
+ }))
+ reorderRoutes.mutate(newOrders)
}
- const columns: Column[] = [
- { header: 'Order', accessor: (r) => r.order, className: 'w-16' },
- { header: 'Name', accessor: (r) => r.name },
- {
- header: 'Actions',
- className: 'w-48',
- accessor: (r) => {
- const idx = routes.findIndex((rt) => rt.id === r.id)
- return (
- e.stopPropagation()}>
-
-
-
-
-
- )
- },
- },
- ]
-
return (
- navigate(`/admin/games/${id}/routes/${r.id}`)}
- keyFn={(r) => r.id}
- />
+ {routes.length === 0 ? (
+
+ No routes yet. Add one to get started.
+
+ ) : (
+
+
+
+
+
+ |
+
+ Order
+ |
+
+ Name
+ |
+
+ Actions
+ |
+
+
+
+ r.id)}
+ strategy={verticalListSortingStrategy}
+ >
+
+ {routes.map((route) => (
+ navigate(`/admin/games/${id}/routes/${r.id}`)}
+ />
+ ))}
+
+
+
+
+
+