Add run dashboard and encounter tracking interface

Run list at /runs shows all runs with status badges. Run dashboard at /runs/:id displays stats, active team, graveyard, and rule badges. Encounter tracking at /runs/:runId/encounters shows route list with status indicators, progress bar, filters, and a modal for logging or editing encounters with pokemon picker. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-02-05 15:28:50 +01:00
parent 982154b348
commit 66b3c9286f
19 changed files with 1054 additions and 63 deletions
--- a/frontend/src/components/EncounterModal.tsx
+++ b/frontend/src/components/EncounterModal.tsx
@@ -0,0 +1,356 @@
+import { useState, useEffect } from 'react'
+import { useRoutePokemon } from '../hooks/useGames'
+import type {
+  Route,
+  EncounterDetail,
+  EncounterStatus,
+  RouteEncounterDetail,
+} from '../types'
+
+interface EncounterModalProps {
+  route: Route
+  existing?: EncounterDetail
+  onSubmit: (data: {
+    routeId: number
+    pokemonId: number
+    nickname?: string
+    status: EncounterStatus
+    catchLevel?: number
+  }) => void
+  onUpdate?: (data: {
+    id: number
+    data: { nickname?: string; status?: EncounterStatus; faintLevel?: number }
+  }) => void
+  onClose: () => void
+  isPending: boolean
+}
+
+const statusOptions: { value: EncounterStatus; label: string; color: string }[] =
+  [
+    {
+      value: 'caught',
+      label: 'Caught',
+      color:
+        'bg-green-100 text-green-800 border-green-300 dark:bg-green-900/40 dark:text-green-300 dark:border-green-700',
+    },
+    {
+      value: 'fainted',
+      label: 'Fainted',
+      color:
+        'bg-red-100 text-red-800 border-red-300 dark:bg-red-900/40 dark:text-red-300 dark:border-red-700',
+    },
+    {
+      value: 'missed',
+      label: 'Missed / Ran',
+      color:
+        'bg-gray-100 text-gray-800 border-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600',
+    },
+  ]
+
+export function EncounterModal({
+  route,
+  existing,
+  onSubmit,
+  onUpdate,
+  onClose,
+  isPending,
+}: EncounterModalProps) {
+  const { data: routePokemon, isLoading: loadingPokemon } = useRoutePokemon(
+    route.id,
+  )
+
+  const [selectedPokemon, setSelectedPokemon] =
+    useState<RouteEncounterDetail | null>(null)
+  const [status, setStatus] = useState<EncounterStatus>(
+    existing?.status ?? 'caught',
+  )
+  const [nickname, setNickname] = useState(existing?.nickname ?? '')
+  const [catchLevel, setCatchLevel] = useState<string>(
+    existing?.catchLevel?.toString() ?? '',
+  )
+  const [faintLevel, setFaintLevel] = useState<string>('')
+  const [search, setSearch] = useState('')
+
+  const isEditing = !!existing
+
+  // Pre-select pokemon when editing
+  useEffect(() => {
+    if (existing && routePokemon) {
+      const match = routePokemon.find(
+        (rp) => rp.pokemonId === existing.pokemonId,
+      )
+      if (match) setSelectedPokemon(match)
+    }
+  }, [existing, routePokemon])
+
+  const filteredPokemon = routePokemon?.filter((rp) =>
+    rp.pokemon.name.toLowerCase().includes(search.toLowerCase()),
+  )
+
+  const handleSubmit = () => {
+    if (isEditing && onUpdate) {
+      onUpdate({
+        id: existing.id,
+        data: {
+          nickname: nickname || undefined,
+          status,
+          faintLevel: faintLevel ? Number(faintLevel) : undefined,
+        },
+      })
+    } else if (selectedPokemon) {
+      onSubmit({
+        routeId: route.id,
+        pokemonId: selectedPokemon.pokemonId,
+        nickname: nickname || undefined,
+        status,
+        catchLevel: catchLevel ? Number(catchLevel) : undefined,
+      })
+    }
+  }
+
+  const canSubmit = isEditing || selectedPokemon
+
+  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-white dark:bg-gray-800 rounded-xl shadow-xl max-w-lg w-full max-h-[90vh] overflow-y-auto">
+        <div className="sticky top-0 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 px-6 py-4 rounded-t-xl">
+          <div className="flex items-center justify-between">
+            <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+              {isEditing ? 'Edit Encounter' : 'Log Encounter'}
+            </h2>
+            <button
+              onClick={onClose}
+              className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"
+            >
+              <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-gray-500 dark:text-gray-400 mt-1">
+            {route.name}
+          </p>
+        </div>
+
+        <div className="px-6 py-4 space-y-4">
+          {/* Pokemon Selection (only for new encounters) */}
+          {!isEditing && (
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                Pokemon
+              </label>
+              {loadingPokemon ? (
+                <div className="flex items-center justify-center py-4">
+                  <div className="w-6 h-6 border-2 border-blue-600 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-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    />
+                  )}
+                  <div className="grid grid-cols-3 gap-2 max-h-48 overflow-y-auto">
+                    {filteredPokemon.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-blue-500 bg-blue-50 dark:bg-blue-900/30'
+                            : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
+                        }`}
+                      >
+                        {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-gray-200 dark:bg-gray-600 flex items-center justify-center text-xs font-bold">
+                            {rp.pokemon.name[0].toUpperCase()}
+                          </div>
+                        )}
+                        <span className="text-xs text-gray-700 dark:text-gray-300 mt-1 capitalize">
+                          {rp.pokemon.name}
+                        </span>
+                        <span className="text-[10px] text-gray-400">
+                          Lv. {rp.minLevel}
+                          {rp.maxLevel !== rp.minLevel && `–${rp.maxLevel}`}
+                        </span>
+                      </button>
+                    ))}
+                  </div>
+                </>
+              ) : (
+                <p className="text-sm text-gray-500 dark:text-gray-400 py-2">
+                  No pokemon data for this route
+                </p>
+              )}
+            </div>
+          )}
+
+          {/* Editing: show pokemon info */}
+          {isEditing && existing && (
+            <div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-900/50 rounded-lg">
+              {existing.pokemon.spriteUrl ? (
+                <img
+                  src={existing.pokemon.spriteUrl}
+                  alt={existing.pokemon.name}
+                  className="w-12 h-12"
+                />
+              ) : (
+                <div className="w-12 h-12 rounded-full bg-gray-200 dark:bg-gray-600 flex items-center justify-center text-lg font-bold">
+                  {existing.pokemon.name[0].toUpperCase()}
+                </div>
+              )}
+              <div>
+                <div className="font-medium text-gray-900 dark:text-gray-100 capitalize">
+                  {existing.pokemon.name}
+                </div>
+                <div className="text-xs text-gray-500">
+                  Caught at Lv. {existing.catchLevel ?? '?'}
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Status */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+              Status
+            </label>
+            <div className="flex gap-2">
+              {statusOptions.map((opt) => (
+                <button
+                  key={opt.value}
+                  type="button"
+                  onClick={() => setStatus(opt.value)}
+                  className={`flex-1 px-3 py-2 rounded-lg border text-sm font-medium transition-colors ${
+                    status === opt.value
+                      ? opt.color
+                      : 'border-gray-200 dark:border-gray-700 text-gray-500 dark:text-gray-400 hover:border-gray-300'
+                  }`}
+                >
+                  {opt.label}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Nickname (for caught) */}
+          {status === 'caught' && (
+            <div>
+              <label
+                htmlFor="nickname"
+                className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
+              >
+                Nickname
+              </label>
+              <input
+                id="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-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+              />
+            </div>
+          )}
+
+          {/* Level (for new caught encounters) */}
+          {!isEditing && status === 'caught' && (
+            <div>
+              <label
+                htmlFor="catch-level"
+                className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
+              >
+                Catch Level
+              </label>
+              <input
+                id="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-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+              />
+            </div>
+          )}
+
+          {/* Faint Level (only when editing a caught pokemon to mark dead) */}
+          {isEditing &&
+            existing?.status === 'caught' &&
+            existing?.faintLevel === null && (
+              <div>
+                <label
+                  htmlFor="faint-level"
+                  className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
+                >
+                  Faint Level{' '}
+                  <span className="font-normal text-gray-400">
+                    (mark as dead)
+                  </span>
+                </label>
+                <input
+                  id="faint-level"
+                  type="number"
+                  min={1}
+                  max={100}
+                  value={faintLevel}
+                  onChange={(e) => setFaintLevel(e.target.value)}
+                  placeholder="Leave empty if still alive"
+                  className="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                />
+              </div>
+            )}
+        </div>
+
+        <div className="sticky bottom-0 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 px-6 py-4 rounded-b-xl flex justify-end gap-3">
+          <button
+            type="button"
+            onClick={onClose}
+            className="px-4 py-2 text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 rounded-lg font-medium hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            disabled={!canSubmit || isPending}
+            onClick={handleSubmit}
+            className="px-4 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+          >
+            {isPending
+              ? 'Saving...'
+              : isEditing
+                ? 'Update'
+                : 'Log Encounter'}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -19,16 +19,10 @@ export function Layout() {
                New Run
              </Link>
              <Link
-                to="/dashboard"
+                to="/runs"
                className="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-100 dark:hover:bg-gray-700"
              >
-                Dashboard
-              </Link>
-              <Link
-                to="/encounters"
-                className="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-100 dark:hover:bg-gray-700"
-              >
-                Encounters
+                My Runs
              </Link>
            </div>
          </div>
--- a/frontend/src/components/PokemonCard.tsx
+++ b/frontend/src/components/PokemonCard.tsx
@@ -0,0 +1,82 @@
+import type { EncounterDetail } from '../types'
+
+interface PokemonCardProps {
+  encounter: EncounterDetail
+  showFaintLevel?: boolean
+}
+
+const typeColors: Record<string, string> = {
+  normal: 'bg-gray-400',
+  fire: 'bg-red-500',
+  water: 'bg-blue-500',
+  electric: 'bg-yellow-400',
+  grass: 'bg-green-500',
+  ice: 'bg-cyan-300',
+  fighting: 'bg-red-700',
+  poison: 'bg-purple-500',
+  ground: 'bg-amber-600',
+  flying: 'bg-indigo-300',
+  psychic: 'bg-pink-500',
+  bug: 'bg-lime-500',
+  rock: 'bg-amber-700',
+  ghost: 'bg-purple-700',
+  dragon: 'bg-indigo-600',
+  dark: 'bg-gray-700',
+  steel: 'bg-gray-400',
+  fairy: 'bg-pink-300',
+}
+
+export function PokemonCard({ encounter, showFaintLevel }: PokemonCardProps) {
+  const { pokemon, route, nickname, catchLevel, faintLevel } = encounter
+  const isDead = faintLevel !== null
+
+  return (
+    <div
+      className={`bg-white dark:bg-gray-800 rounded-lg shadow p-4 flex flex-col items-center text-center ${
+        isDead ? 'opacity-60 grayscale' : ''
+      }`}
+    >
+      {pokemon.spriteUrl ? (
+        <img
+          src={pokemon.spriteUrl}
+          alt={pokemon.name}
+          className="w-16 h-16"
+        />
+      ) : (
+        <div className="w-16 h-16 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center text-xl font-bold text-gray-600 dark:text-gray-300">
+          {pokemon.name[0].toUpperCase()}
+        </div>
+      )}
+
+      <div className="mt-2 font-semibold text-gray-900 dark:text-gray-100 text-sm">
+        {nickname || pokemon.name}
+      </div>
+      {nickname && (
+        <div className="text-xs text-gray-500 dark:text-gray-400">
+          {pokemon.name}
+        </div>
+      )}
+
+      <div className="flex gap-1 mt-1">
+        {pokemon.types.map((type) => (
+          <span
+            key={type}
+            className={`px-1.5 py-0.5 rounded text-[10px] font-medium text-white ${typeColors[type] ?? 'bg-gray-500'}`}
+          >
+            {type}
+          </span>
+        ))}
+      </div>
+
+      <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+        {showFaintLevel && isDead
+          ? `Lv. ${catchLevel} → ${faintLevel}`
+          : `Lv. ${catchLevel ?? '?'}`}
+      </div>
+
+      <div className="text-xs text-gray-400 dark:text-gray-500 mt-0.5">
+        {route.name}
+      </div>
+    </div>
+  )
+}
--- a/frontend/src/components/RuleBadges.tsx
+++ b/frontend/src/components/RuleBadges.tsx
@@ -0,0 +1,36 @@
+import type { NuzlockeRules } from '../types'
+import { RULE_DEFINITIONS } from '../types/rules'
+
+interface RuleBadgesProps {
+  rules: NuzlockeRules
+}
+
+export function RuleBadges({ rules }: RuleBadgesProps) {
+  const enabledRules = RULE_DEFINITIONS.filter((def) => rules[def.key])
+
+  if (enabledRules.length === 0) {
+    return (
+      <span className="text-sm text-gray-500 dark:text-gray-400">
+        No rules enabled
+      </span>
+    )
+  }
+
+  return (
+    <div className="flex flex-wrap gap-1.5">
+      {enabledRules.map((def) => (
+        <span
+          key={def.key}
+          title={def.description}
+          className={`px-2 py-0.5 rounded-full text-xs font-medium ${
+            def.category === 'core'
+              ? 'bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300'
+              : 'bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-300'
+          }`}
+        >
+          {def.name}
+        </span>
+      ))}
+    </div>
+  )
+}
--- a/frontend/src/components/StatCard.tsx
+++ b/frontend/src/components/StatCard.tsx
@@ -0,0 +1,34 @@
+interface StatCardProps {
+  label: string
+  value: number
+  total?: number
+  color: string
+}
+
+const colorClasses: Record<string, string> = {
+  blue: 'border-blue-500',
+  green: 'border-green-500',
+  red: 'border-red-500',
+  purple: 'border-purple-500',
+  amber: 'border-amber-500',
+  gray: 'border-gray-500',
+}
+
+export function StatCard({ label, value, total, color }: StatCardProps) {
+  return (
+    <div
+      className={`bg-white dark:bg-gray-800 rounded-lg shadow p-4 border-l-4 ${colorClasses[color] ?? 'border-gray-500'}`}
+    >
+      <div className="text-2xl font-bold text-gray-900 dark:text-gray-100">
+        {value}
+        {total !== undefined && (
+          <span className="text-sm font-normal text-gray-500 dark:text-gray-400">
+            {' '}
+            / {total}
+          </span>
+        )}
+      </div>
+      <div className="text-sm text-gray-600 dark:text-gray-400">{label}</div>
+    </div>
+  )
+}
--- a/frontend/src/components/index.ts
+++ b/frontend/src/components/index.ts
@@ -1,6 +1,10 @@
+export { EncounterModal } from './EncounterModal'
 export { GameCard } from './GameCard'
 export { GameGrid } from './GameGrid'
 export { Layout } from './Layout'
+export { PokemonCard } from './PokemonCard'
+export { RuleBadges } from './RuleBadges'
 export { RuleToggle } from './RuleToggle'
 export { RulesConfiguration } from './RulesConfiguration'
+export { StatCard } from './StatCard'
 export { StepIndicator } from './StepIndicator'