330 lines
13 KiB
TypeScript
330 lines
13 KiB
TypeScript
import { useState } from 'react'
|
|
import type { EncounterDetail, UpdateEncounterInput } from '../types'
|
|
import { useEvolutions } from '../hooks/useEncounters'
|
|
import { TypeBadge } from './TypeBadge'
|
|
|
|
interface StatusChangeModalProps {
|
|
encounter: EncounterDetail
|
|
onUpdate: (data: {
|
|
id: number
|
|
data: UpdateEncounterInput
|
|
}) => void
|
|
onClose: () => void
|
|
isPending: boolean
|
|
region?: string
|
|
}
|
|
|
|
function formatEvolutionMethod(evo: { trigger: string; minLevel: number | null; item: string | null; heldItem: string | null; condition: string | null }): string {
|
|
const parts: string[] = []
|
|
if (evo.trigger === 'level-up' && evo.minLevel) {
|
|
parts.push(`Level ${evo.minLevel}`)
|
|
} else if (evo.trigger === 'level-up') {
|
|
parts.push('Level up')
|
|
} else if (evo.trigger === 'use-item' && evo.item) {
|
|
parts.push(evo.item.replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase()))
|
|
} else if (evo.trigger === 'trade') {
|
|
parts.push('Trade')
|
|
} else {
|
|
parts.push(evo.trigger.replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase()))
|
|
}
|
|
if (evo.heldItem) {
|
|
parts.push(`holding ${evo.heldItem.replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase())}`)
|
|
}
|
|
if (evo.condition) {
|
|
parts.push(evo.condition)
|
|
}
|
|
return parts.join(', ')
|
|
}
|
|
|
|
export function StatusChangeModal({
|
|
encounter,
|
|
onUpdate,
|
|
onClose,
|
|
isPending,
|
|
region,
|
|
}: StatusChangeModalProps) {
|
|
const { pokemon, currentPokemon, route, nickname, catchLevel, faintLevel, deathCause } =
|
|
encounter
|
|
const isDead = faintLevel !== null
|
|
const displayPokemon = currentPokemon ?? pokemon
|
|
const [showConfirm, setShowConfirm] = useState(false)
|
|
const [showEvolve, setShowEvolve] = useState(false)
|
|
const [deathLevel, setDeathLevel] = useState('')
|
|
const [cause, setCause] = useState('')
|
|
|
|
const activePokemonId = currentPokemon?.id ?? pokemon.id
|
|
const { data: evolutions, isLoading: evolutionsLoading } = useEvolutions(
|
|
showEvolve ? activePokemonId : null,
|
|
region,
|
|
)
|
|
|
|
const handleConfirmDeath = () => {
|
|
onUpdate({
|
|
id: encounter.id,
|
|
data: {
|
|
faintLevel: deathLevel ? Number(deathLevel) : undefined,
|
|
deathCause: cause || undefined,
|
|
},
|
|
})
|
|
}
|
|
|
|
const handleEvolve = (toPokemonId: number) => {
|
|
onUpdate({
|
|
id: encounter.id,
|
|
data: { currentPokemonId: toPokemonId },
|
|
})
|
|
}
|
|
|
|
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">
|
|
{displayPokemon.spriteUrl ? (
|
|
<img
|
|
src={displayPokemon.spriteUrl}
|
|
alt={displayPokemon.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">
|
|
{displayPokemon.name[0].toUpperCase()}
|
|
</div>
|
|
)}
|
|
<div>
|
|
<div className="font-semibold text-gray-900 dark:text-gray-100">
|
|
{nickname || displayPokemon.name}
|
|
</div>
|
|
{nickname && (
|
|
<div className="text-xs text-gray-500 dark:text-gray-400 capitalize">
|
|
{displayPokemon.name}
|
|
</div>
|
|
)}
|
|
<div className="flex flex-col gap-0.5 mt-1">
|
|
{displayPokemon.types.map((type) => (
|
|
<TypeBadge key={type} type={type} />
|
|
))}
|
|
</div>
|
|
<div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
|
|
Lv. {catchLevel ?? '?'} · {route.name}
|
|
</div>
|
|
{currentPokemon && (
|
|
<div className="text-[10px] text-gray-400 dark:text-gray-500 mt-0.5">
|
|
Originally: {pokemon.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: actions */}
|
|
{!isDead && !showConfirm && !showEvolve && (
|
|
<div className="flex gap-3">
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowEvolve(true)}
|
|
className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors"
|
|
>
|
|
Evolve
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowConfirm(true)}
|
|
className="flex-1 px-4 py-2 bg-red-600 text-white rounded-lg font-medium hover:bg-red-700 transition-colors"
|
|
>
|
|
Mark as Dead
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Evolution selection */}
|
|
{!isDead && showEvolve && (
|
|
<div className="space-y-3">
|
|
<div className="flex items-center justify-between">
|
|
<h3 className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
|
Evolve into:
|
|
</h3>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowEvolve(false)}
|
|
className="text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
|
|
>
|
|
Back
|
|
</button>
|
|
</div>
|
|
{evolutionsLoading && (
|
|
<p className="text-sm text-gray-500 dark:text-gray-400">Loading evolutions...</p>
|
|
)}
|
|
{!evolutionsLoading && evolutions && evolutions.length === 0 && (
|
|
<p className="text-sm text-gray-500 dark:text-gray-400">No evolutions available</p>
|
|
)}
|
|
{!evolutionsLoading && evolutions && evolutions.length > 0 && (
|
|
<div className="space-y-2">
|
|
{evolutions.map((evo) => (
|
|
<button
|
|
key={evo.id}
|
|
type="button"
|
|
disabled={isPending}
|
|
onClick={() => handleEvolve(evo.toPokemon.id)}
|
|
className="w-full flex items-center gap-3 p-3 rounded-lg border border-gray-200 dark:border-gray-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 hover:border-blue-300 dark:hover:border-blue-600 transition-colors disabled:opacity-50"
|
|
>
|
|
{evo.toPokemon.spriteUrl ? (
|
|
<img src={evo.toPokemon.spriteUrl} alt={evo.toPokemon.name} className="w-10 h-10" />
|
|
) : (
|
|
<div className="w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center text-sm font-bold text-gray-600 dark:text-gray-300">
|
|
{evo.toPokemon.name[0].toUpperCase()}
|
|
</div>
|
|
)}
|
|
<div className="text-left">
|
|
<div className="font-medium text-gray-900 dark:text-gray-100 text-sm">
|
|
{evo.toPokemon.name}
|
|
</div>
|
|
<div className="text-xs text-gray-500 dark:text-gray-400">
|
|
{formatEvolutionMethod(evo)}
|
|
</div>
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* 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/no-evolve views */}
|
|
{(isDead || (!isDead && !showConfirm && !showEvolve)) && (
|
|
<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>
|
|
)
|
|
}
|