Add pokemon status management with death tracking

Implement status change workflow (alive → dead) with confirmation modal, death cause recording, and visual status indicators on pokemon cards. Includes backend migration for death_cause field and graveyard view on the run dashboard. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-02-05 18:36:08 +01:00
parent 628c621fa9
commit a911259ef5
12 changed files with 462 additions and 53 deletions
--- a/frontend/src/components/EncounterModal.tsx
+++ b/frontend/src/components/EncounterModal.tsx
@@ -19,7 +19,12 @@ interface EncounterModalProps {
  }) => void
  onUpdate?: (data: {
    id: number
-    data: { nickname?: string; status?: EncounterStatus; faintLevel?: number }
+    data: {
+      nickname?: string
+      status?: EncounterStatus
+      faintLevel?: number
+      deathCause?: string
+    }
  }) => void
  onClose: () => void
  isPending: boolean
@@ -69,6 +74,7 @@ export function EncounterModal({
    existing?.catchLevel?.toString() ?? '',
  )
  const [faintLevel, setFaintLevel] = useState<string>('')
+  const [deathCause, setDeathCause] = useState('')
  const [search, setSearch] = useState('')

  const isEditing = !!existing
@@ -95,6 +101,7 @@ export function EncounterModal({
          nickname: nickname || undefined,
          status,
          faintLevel: faintLevel ? Number(faintLevel) : undefined,
+          deathCause: deathCause || undefined,
        },
      })
    } else if (selectedPokemon) {
@@ -301,31 +308,53 @@ export function EncounterModal({
            </div>
          )}

-          {/* Faint Level (only when editing a caught pokemon to mark dead) */}
+          {/* Faint Level + Death Cause (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>
+                  <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>
+                  <label
+                    htmlFor="death-cause"
+                    className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
+                  >
+                    Cause of Death{' '}
+                    <span className="font-normal text-gray-400">
+                      (optional)
+                    </span>
+                  </label>
+                  <input
+                    id="death-cause"
+                    type="text"
+                    maxLength={100}
+                    value={deathCause}
+                    onChange={(e) => setDeathCause(e.target.value)}
+                    placeholder="e.g. Crit from rival's Charizard"
+                    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>

--- a/frontend/src/components/PokemonCard.tsx
+++ b/frontend/src/components/PokemonCard.tsx
@@ -3,6 +3,7 @@ import type { EncounterDetail } from '../types'
 interface PokemonCardProps {
  encounter: EncounterDetail
  showFaintLevel?: boolean
+  onClick?: () => void
 }

 const typeColors: Record<string, string> = {
@@ -26,15 +27,16 @@ const typeColors: Record<string, string> = {
  fairy: 'bg-pink-300',
 }

-export function PokemonCard({ encounter, showFaintLevel }: PokemonCardProps) {
-  const { pokemon, route, nickname, catchLevel, faintLevel } = encounter
+export function PokemonCard({ encounter, showFaintLevel, onClick }: PokemonCardProps) {
+  const { pokemon, route, nickname, catchLevel, faintLevel, deathCause } = encounter
  const isDead = faintLevel !== null

  return (
    <div
+      onClick={onClick}
      className={`bg-white dark:bg-gray-800 rounded-lg shadow p-4 flex flex-col items-center text-center ${
        isDead ? 'opacity-60 grayscale' : ''
-      }`}
+      } ${onClick ? 'cursor-pointer hover:ring-2 hover:ring-blue-400 transition-shadow' : ''}`}
    >
      {pokemon.spriteUrl ? (
        <img
@@ -48,8 +50,13 @@ export function PokemonCard({ encounter, showFaintLevel }: PokemonCardProps) {
        </div>
      )}

-      <div className="mt-2 font-semibold text-gray-900 dark:text-gray-100 text-sm">
-        {nickname || pokemon.name}
+      <div className="mt-2 flex items-center gap-1.5">
+        <span
+          className={`w-2 h-2 rounded-full shrink-0 ${isDead ? 'bg-red-500' : 'bg-green-500'}`}
+        />
+        <span className="font-semibold text-gray-900 dark:text-gray-100 text-sm">
+          {nickname || pokemon.name}
+        </span>
      </div>
      {nickname && (
        <div className="text-xs text-gray-500 dark:text-gray-400">
@@ -77,6 +84,12 @@ export function PokemonCard({ encounter, showFaintLevel }: PokemonCardProps) {
      <div className="text-xs text-gray-400 dark:text-gray-500 mt-0.5">
        {route.name}
      </div>
+
+      {isDead && deathCause && (
+        <div className="text-[10px] italic text-gray-400 dark:text-gray-500 mt-0.5 line-clamp-2">
+          {deathCause}
+        </div>
+      )}
    </div>
  )
 }
--- a/frontend/src/components/StatusChangeModal.tsx
+++ b/frontend/src/components/StatusChangeModal.tsx
@@ -0,0 +1,247 @@
+import { useState } from 'react'
+import type { EncounterDetail } from '../types'
+
+interface StatusChangeModalProps {
+  encounter: EncounterDetail
+  onUpdate: (data: {
+    id: number
+    data: { faintLevel?: number; deathCause?: string }
+  }) => void
+  onClose: () => void
+  isPending: 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 StatusChangeModal({
+  encounter,
+  onUpdate,
+  onClose,
+  isPending,
+}: StatusChangeModalProps) {
+  const { pokemon, route, nickname, catchLevel, faintLevel, deathCause } =
+    encounter
+  const isDead = faintLevel !== null
+  const [showConfirm, setShowConfirm] = useState(false)
+  const [deathLevel, setDeathLevel] = useState('')
+  const [cause, setCause] = useState('')
+
+  const handleConfirmDeath = () => {
+    onUpdate({
+      id: encounter.id,
+      data: {
+        faintLevel: deathLevel ? Number(deathLevel) : undefined,
+        deathCause: cause || undefined,
+      },
+    })
+  }
+
+  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-sm w-full">
+        {/* Header */}
+        <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
+          <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+            {isDead ? 'Death Details' : 'Pokemon Status'}
+          </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>
+
+        <div className="px-6 py-4">
+          {/* Pokemon info */}
+          <div className="flex items-center gap-4 mb-4">
+            {pokemon.spriteUrl ? (
+              <img
+                src={pokemon.spriteUrl}
+                alt={pokemon.name}
+                className={`w-16 h-16 ${isDead ? 'grayscale opacity-60' : ''}`}
+              />
+            ) : (
+              <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>
+              <div className="font-semibold text-gray-900 dark:text-gray-100">
+                {nickname || pokemon.name}
+              </div>
+              {nickname && (
+                <div className="text-xs text-gray-500 dark:text-gray-400 capitalize">
+                  {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">
+                Lv. {catchLevel ?? '?'} &middot; {route.name}
+              </div>
+            </div>
+          </div>
+
+          {/* Dead pokemon: view-only details */}
+          {isDead && (
+            <div className="bg-red-50 dark:bg-red-900/20 rounded-lg p-4 space-y-2">
+              <div className="flex items-center gap-2 text-red-700 dark:text-red-400 font-medium text-sm">
+                <span className="w-2 h-2 rounded-full bg-red-500" />
+                Deceased
+              </div>
+              {faintLevel !== null && (
+                <div className="text-sm text-gray-700 dark:text-gray-300">
+                  <span className="text-gray-500 dark:text-gray-400">
+                    Level at death:
+                  </span>{' '}
+                  {faintLevel}
+                </div>
+              )}
+              {deathCause && (
+                <div className="text-sm text-gray-700 dark:text-gray-300">
+                  <span className="text-gray-500 dark:text-gray-400">
+                    Cause:
+                  </span>{' '}
+                  {deathCause}
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Alive pokemon: mark as dead */}
+          {!isDead && !showConfirm && (
+            <button
+              type="button"
+              onClick={() => setShowConfirm(true)}
+              className="w-full px-4 py-2 bg-red-600 text-white rounded-lg font-medium hover:bg-red-700 transition-colors"
+            >
+              Mark as Dead
+            </button>
+          )}
+
+          {/* Confirmation form */}
+          {!isDead && showConfirm && (
+            <div className="space-y-3">
+              <div className="bg-red-50 dark:bg-red-900/20 rounded-lg p-3">
+                <p className="text-sm text-red-700 dark:text-red-400 font-medium">
+                  This cannot be undone (Nuzlocke rules).
+                </p>
+              </div>
+
+              <div>
+                <label
+                  htmlFor="death-level"
+                  className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
+                >
+                  Level at Death{' '}
+                  <span className="font-normal text-gray-400">(optional)</span>
+                </label>
+                <input
+                  id="death-level"
+                  type="number"
+                  min={1}
+                  max={100}
+                  value={deathLevel}
+                  onChange={(e) => setDeathLevel(e.target.value)}
+                  placeholder="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-red-500"
+                />
+              </div>
+
+              <div>
+                <label
+                  htmlFor="death-cause"
+                  className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
+                >
+                  Cause of Death{' '}
+                  <span className="font-normal text-gray-400">(optional)</span>
+                </label>
+                <input
+                  id="death-cause"
+                  type="text"
+                  maxLength={100}
+                  value={cause}
+                  onChange={(e) => setCause(e.target.value)}
+                  placeholder="e.g. Crit from rival's Charizard"
+                  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-red-500"
+                />
+              </div>
+
+              <div className="flex gap-3 pt-1">
+                <button
+                  type="button"
+                  onClick={() => setShowConfirm(false)}
+                  className="flex-1 px-4 py-2 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg font-medium hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="button"
+                  disabled={isPending}
+                  onClick={handleConfirmDeath}
+                  className="flex-1 px-4 py-2 bg-red-600 text-white rounded-lg font-medium hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                >
+                  {isPending ? 'Saving...' : 'Confirm Death'}
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Footer for dead/no-confirm views */}
+        {(isDead || (!isDead && !showConfirm)) && (
+          <div className="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex justify-end">
+            <button
+              type="button"
+              onClick={onClose}
+              className="px-4 py-2 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg font-medium hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
+            >
+              Close
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
--- a/frontend/src/components/index.ts
+++ b/frontend/src/components/index.ts
@@ -4,6 +4,7 @@ export { GameGrid } from './GameGrid'
 export { Layout } from './Layout'
 export { PokemonCard } from './PokemonCard'
 export { RuleBadges } from './RuleBadges'
+export { StatusChangeModal } from './StatusChangeModal'
 export { RuleToggle } from './RuleToggle'
 export { RulesConfiguration } from './RulesConfiguration'
 export { StatCard } from './StatCard'
--- a/frontend/src/pages/RunDashboard.tsx
+++ b/frontend/src/pages/RunDashboard.tsx
@@ -1,8 +1,10 @@
+import { useState } from 'react'
 import { useParams, Link } from 'react-router-dom'
 import { useRun } from '../hooks/useRuns'
 import { useGameRoutes } from '../hooks/useGames'
-import { StatCard, PokemonCard, RuleBadges } from '../components'
-import type { RunStatus } from '../types'
+import { useUpdateEncounter } from '../hooks/useEncounters'
+import { StatCard, PokemonCard, RuleBadges, StatusChangeModal } from '../components'
+import type { RunStatus, EncounterDetail } from '../types'

 const statusStyles: Record<RunStatus, string> = {
  active: 'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300',
@@ -13,8 +15,12 @@ const statusStyles: Record<RunStatus, string> = {

 export function RunDashboard() {
  const { runId } = useParams<{ runId: string }>()
-  const { data: run, isLoading, error } = useRun(Number(runId))
+  const runIdNum = Number(runId)
+  const { data: run, isLoading, error } = useRun(runIdNum)
  const { data: routes } = useGameRoutes(run?.gameId ?? null)
+  const updateEncounter = useUpdateEncounter(runIdNum)
+  const [selectedEncounter, setSelectedEncounter] =
+    useState<EncounterDetail | null>(null)

  if (isLoading) {
    return (
@@ -118,7 +124,11 @@ export function RunDashboard() {
        ) : (
          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-3">
            {alive.map((enc) => (
-              <PokemonCard key={enc.id} encounter={enc} />
+              <PokemonCard
+                key={enc.id}
+                encounter={enc}
+                onClick={() => setSelectedEncounter(enc)}
+              />
            ))}
          </div>
        )}
@@ -132,7 +142,12 @@ export function RunDashboard() {
          </h2>
          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-3">
            {dead.map((enc) => (
-              <PokemonCard key={enc.id} encounter={enc} showFaintLevel />
+              <PokemonCard
+                key={enc.id}
+                encounter={enc}
+                showFaintLevel
+                onClick={() => setSelectedEncounter(enc)}
+              />
            ))}
          </div>
        </div>
@@ -147,6 +162,20 @@ export function RunDashboard() {
          Log Encounter
        </Link>
      </div>
+
+      {/* Status Change Modal */}
+      {selectedEncounter && (
+        <StatusChangeModal
+          encounter={selectedEncounter}
+          onUpdate={(data) => {
+            updateEncounter.mutate(data, {
+              onSuccess: () => setSelectedEncounter(null),
+            })
+          }}
+          onClose={() => setSelectedEncounter(null)}
+          isPending={updateEncounter.isPending}
+        />
+      )}
    </div>
  )
 }
--- a/frontend/src/pages/RunEncounters.tsx
+++ b/frontend/src/pages/RunEncounters.tsx
@@ -121,7 +121,12 @@ export function RunEncounters() {

  const handleUpdate = (data: {
    id: number
-    data: { nickname?: string; status?: EncounterStatus; faintLevel?: number }
+    data: {
+      nickname?: string
+      status?: EncounterStatus
+      faintLevel?: number
+      deathCause?: string
+    }
  }) => {
    updateEncounter.mutate(data, {
      onSuccess: () => {
@@ -225,7 +230,9 @@ export function RunEncounters() {
                      {encounter.nickname ?? encounter.pokemon.name}
                      {encounter.status === 'caught' &&
                        encounter.faintLevel !== null &&
-                        ' (dead)'}
+                        (encounter.deathCause
+                          ? ` — ${encounter.deathCause}`
+                          : ' (dead)')}
                    </span>
                  </div>
                )}
--- a/frontend/src/types/game.ts
+++ b/frontend/src/types/game.ts
@@ -48,6 +48,7 @@ export interface Encounter {
  status: EncounterStatus
  catchLevel: number | null
  faintLevel: number | null
+  deathCause: string | null
  caughtAt: string
 }

@@ -97,6 +98,7 @@ export interface UpdateEncounterInput {
  nickname?: string
  status?: EncounterStatus
  faintLevel?: number
+  deathCause?: string
 }

 // Re-export for convenience