Julian Tabel
a911259ef5
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>
248 lines
8.9 KiB
TypeScript
248 lines
8.9 KiB
TypeScript
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>
|
|
)
|
|
}
|