TheFurya/nuzlocke-tracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add pokemon evolution support across the full stack

Browse Source 
- Evolution model with trigger, level, item, and condition fields
- Encounter.current_pokemon_id tracks evolved species separately
- Alembic migration for evolutions table and current_pokemon_id column
- Seed pipeline loads evolution data with manual overrides
- GET /pokemon/{id}/evolutions and PATCH /encounters/{id} endpoints
- Evolve button in StatusChangeModal with evolution method details
- PokemonCard shows evolved species with "Originally" label

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Julian Tabel
2026-02-05 19:26:49 +01:00
parent c8d8e4b445
commit 9728773a94
19 changed files with 1077 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/src/api/encounters.ts
View File

@@ -1,24 +1,29 @@
import { api } from './client'
import type {
Encounter,
EncounterDetail,
CreateEncounterInput,
UpdateEncounterInput,
Evolution,
} from '../types/game'
export function createEncounter(
runId: number,
data: CreateEncounterInput,
): Promise<Encounter> {
): Promise<EncounterDetail> {
return api.post(`/runs/${runId}/encounters`, data)
}
export function updateEncounter(
id: number,
data: UpdateEncounterInput,
): Promise<Encounter> {
): Promise<EncounterDetail> {
return api.patch(`/encounters/${id}`, data)
}
export function deleteEncounter(id: number): Promise<void> {
return api.del(`/encounters/${id}`)
}
export function fetchEvolutions(pokemonId: number): Promise<Evolution[]> {
return api.get(`/pokemon/${pokemonId}/evolutions`)
}

24
frontend/src/components/PokemonCard.tsx
View File

@@ -28,8 +28,10 @@ const typeColors: Record<string, string> = {
}
export function PokemonCard({ encounter, showFaintLevel, onClick }: PokemonCardProps) {
const { pokemon, route, nickname, catchLevel, faintLevel, deathCause } = encounter
const { pokemon, currentPokemon, route, nickname, catchLevel, faintLevel, deathCause } = encounter
const isDead = faintLevel !== null
const displayPokemon = currentPokemon ?? pokemon
const isEvolved = currentPokemon !== null
return (
<div
@@ -38,15 +40,15 @@ export function PokemonCard({ encounter, showFaintLevel, onClick }: PokemonCardP
isDead ? 'opacity-60 grayscale' : ''
} ${onClick ? 'cursor-pointer hover:ring-2 hover:ring-blue-400 transition-shadow' : ''}`}
>
{pokemon.spriteUrl ? (
{displayPokemon.spriteUrl ? (
<img
src={pokemon.spriteUrl}
alt={pokemon.name}
src={displayPokemon.spriteUrl}
alt={displayPokemon.name}
className="w-16 h-16"
/>
) : (
<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()}
{displayPokemon.name[0].toUpperCase()}
</div>
)}
@@ -55,17 +57,17 @@ export function PokemonCard({ encounter, showFaintLevel, onClick }: PokemonCardP
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}
{nickname || displayPokemon.name}
</span>
</div>
{nickname && (
<div className="text-xs text-gray-500 dark:text-gray-400">
{pokemon.name}
{displayPokemon.name}
</div>
)}
<div className="flex gap-1 mt-1">
{pokemon.types.map((type) => (
{displayPokemon.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'}`}
@@ -85,6 +87,12 @@ export function PokemonCard({ encounter, showFaintLevel, onClick }: PokemonCardP
{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}

146
frontend/src/components/StatusChangeModal.tsx
View File

@@ -1,11 +1,12 @@
import { useState } from 'react'
import type { EncounterDetail } from '../types'
import type { EncounterDetail, UpdateEncounterInput } from '../types'
import { useEvolutions } from '../hooks/useEncounters'
interface StatusChangeModalProps {
encounter: EncounterDetail
onUpdate: (data: {
id: number
data: { faintLevel?: number; deathCause?: string }
data: UpdateEncounterInput
}) => void
onClose: () => void
isPending: boolean
@@ -32,19 +33,48 @@ const typeColors: Record<string, string> = {
fairy: 'bg-pink-300',
}
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,
}: StatusChangeModalProps) {
const { pokemon, route, nickname, catchLevel, faintLevel, deathCause } =
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
)
const handleConfirmDeath = () => {
onUpdate({
id: encounter.id,
@@ -55,6 +85,13 @@ export function StatusChangeModal({
})
}
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} />
@@ -87,28 +124,28 @@ export function StatusChangeModal({
<div className="px-6 py-4">
{/* Pokemon info */}
<div className="flex items-center gap-4 mb-4">
{pokemon.spriteUrl ? (
{displayPokemon.spriteUrl ? (
<img
src={pokemon.spriteUrl}
alt={pokemon.name}
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">
{pokemon.name[0].toUpperCase()}
{displayPokemon.name[0].toUpperCase()}
</div>
)}
<div>
<div className="font-semibold text-gray-900 dark:text-gray-100">
{nickname || pokemon.name}
{nickname || displayPokemon.name}
</div>
{nickname && (
<div className="text-xs text-gray-500 dark:text-gray-400 capitalize">
{pokemon.name}
{displayPokemon.name}
</div>
)}
<div className="flex gap-1 mt-1">
{pokemon.types.map((type) => (
{displayPokemon.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'}`}
@@ -120,6 +157,11 @@ export function StatusChangeModal({
<div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
Lv. {catchLevel ?? '?'} &middot; {route.name}
</div>
{currentPokemon && (
<div className="text-[10px] text-gray-400 dark:text-gray-500 mt-0.5">
Originally: {pokemon.name}
</div>
)}
</div>
</div>
@@ -149,15 +191,77 @@ export function StatusChangeModal({
</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>
{/* 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 */}
@@ -229,8 +333,8 @@ export function StatusChangeModal({
)}
</div>
{/* Footer for dead/no-confirm views */}
{(isDead || (!isDead && !showConfirm)) && (
{/* 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"

11
frontend/src/hooks/useEncounters.ts
View File

@@ -1,8 +1,9 @@
import { useMutation, useQueryClient } from '@tanstack/react-query'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import {
createEncounter,
updateEncounter,
deleteEncounter,
fetchEvolutions,
} from '../api/encounters'
import type { CreateEncounterInput, UpdateEncounterInput } from '../types/game'
@@ -41,3 +42,11 @@ export function useDeleteEncounter(runId: number) {
},
})
}
export function useEvolutions(pokemonId: number | null) {
return useQuery({
queryKey: ['evolutions', pokemonId],
queryFn: () => fetchEvolutions(pokemonId!),
enabled: pokemonId !== null,
})
}

14
frontend/src/types/game.ts
View File

@@ -44,6 +44,7 @@ export interface Encounter {
runId: number
routeId: number
pokemonId: number
currentPokemonId: number | null
nickname: string | null
status: EncounterStatus
catchLevel: number | null
@@ -71,9 +72,21 @@ export interface RunDetail extends NuzlockeRun {
export interface EncounterDetail extends Encounter {
pokemon: Pokemon
currentPokemon: Pokemon | null
route: Route
}
export interface Evolution {
id: number
fromPokemonId: number
toPokemon: Pokemon
trigger: string
minLevel: number | null
item: string | null
heldItem: string | null
condition: string | null
}
export interface CreateRunInput {
gameId: number
name: string
@@ -99,6 +112,7 @@ export interface UpdateEncounterInput {
status?: EncounterStatus
faintLevel?: number
deathCause?: string
currentPokemonId?: number
}
// Re-export for convenience