Julian Tabel
3a64661760
- Add missing tsconfig strictness flags (noUncheckedIndexedAccess, exactOptionalPropertyTypes, noImplicitOverride, noPropertyAccessFromIndexSignature) and fix all resulting type errors - Replace ESLint/Prettier with oxlint 1.48.0 and oxfmt 0.33.0 - Pin all frontend and backend dependencies to exact versions - Pin GitHub Actions to SHA hashes with persist-credentials: false - Fix CI Python version mismatch (3.12 -> 3.14) and ruff target-version - Add vitest 4.0.18 with jsdom environment for frontend testing - Add ty 0.0.17 for Python type checking (non-blocking in CI) - Add actionlint and zizmor CI job for workflow linting and security audit - Add Dependabot config for npm, pip, and github-actions - Update CLAUDE.md and pre-commit hooks to reflect new tooling - Ignore Claude Code sandbox artifacts in gitignore Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
71 lines
2.5 KiB
TypeScript
71 lines
2.5 KiB
TypeScript
import type { EncounterDetail } from '../types'
|
|
import { TypeBadge } from './TypeBadge'
|
|
|
|
export interface PokemonCardProps {
|
|
encounter: EncounterDetail
|
|
showFaintLevel?: boolean | undefined
|
|
onClick?: (() => void) | undefined
|
|
}
|
|
|
|
export function PokemonCard({ encounter, showFaintLevel, onClick }: PokemonCardProps) {
|
|
const { pokemon, currentPokemon, route, nickname, catchLevel, faintLevel, deathCause } = encounter
|
|
const isDead = faintLevel !== null
|
|
const displayPokemon = currentPokemon ?? pokemon
|
|
const isEvolved = currentPokemon !== 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' : ''}`}
|
|
>
|
|
{displayPokemon.spriteUrl ? (
|
|
<img src={displayPokemon.spriteUrl} alt={displayPokemon.name} className="w-25 h-25" />
|
|
) : (
|
|
<div className="w-25 h-25 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 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 || displayPokemon.name}
|
|
</span>
|
|
</div>
|
|
{nickname && (
|
|
<div className="text-xs text-gray-500 dark:text-gray-400">{displayPokemon.name}</div>
|
|
)}
|
|
|
|
<div className="flex flex-col items-center 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">
|
|
{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>
|
|
|
|
{isEvolved && (
|
|
<div className="text-[10px] text-gray-400 dark:text-gray-500 mt-0.5">
|
|
Originally: {pokemon.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>
|
|
)
|
|
}
|