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>
This commit is contained in:
247
frontend/src/components/StatusChangeModal.tsx
Normal file
247
frontend/src/components/StatusChangeModal.tsx
Normal file
@@ -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 ?? '?'} · {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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user