diff --git a/.beans/nuzlocke-tracker-l12w--add-condition-badges-for-boss-pokemon-mechanics.md b/.beans/nuzlocke-tracker-l12w--add-condition-badges-for-boss-pokemon-mechanics.md new file mode 100644 index 0000000..8f9b04f --- /dev/null +++ b/.beans/nuzlocke-tracker-l12w--add-condition-badges-for-boss-pokemon-mechanics.md @@ -0,0 +1,18 @@ +--- +# nuzlocke-tracker-l12w +title: Add condition badges for boss Pokemon mechanics +status: in-progress +type: feature +priority: normal +created_at: 2026-02-16T20:11:02Z +updated_at: 2026-02-16T20:11:52Z +--- + +Add visible badges on boss Pokemon that have mechanic-related conditions (Mega Evolution, Gigantamax, Dynamax, Terastallize). Create a ConditionBadge component following the EncounterMethodBadge pattern and integrate it into BossDefeatModal and BossTeamPreview. + +## Checklist + +- [x] Create ConditionBadge component in frontend/src/components/ConditionBadge.tsx +- [x] Add ConditionBadge to BossDefeatModal.tsx boss team preview +- [x] Add ConditionBadge to RunEncounters.tsx BossTeamPreview +- [x] Verify with tsc and oxlint \ No newline at end of file diff --git a/frontend/src/components/BossDefeatModal.tsx b/frontend/src/components/BossDefeatModal.tsx index 6765d41..6def625 100644 --- a/frontend/src/components/BossDefeatModal.tsx +++ b/frontend/src/components/BossDefeatModal.tsx @@ -1,5 +1,6 @@ import { type FormEvent, useState, useMemo } from 'react' import type { BossBattle, CreateBossResultInput } from '../types/game' +import { ConditionBadge } from './ConditionBadge' interface BossDefeatModalProps { boss: BossBattle @@ -108,6 +109,7 @@ export function BossDefeatModal({ Lv.{bp.level} + ))} diff --git a/frontend/src/components/ConditionBadge.tsx b/frontend/src/components/ConditionBadge.tsx new file mode 100644 index 0000000..aba3aaf --- /dev/null +++ b/frontend/src/components/ConditionBadge.tsx @@ -0,0 +1,36 @@ +const CONDITION_CONFIG: Record = { + 'Mega Evolution': { + label: 'Mega', + color: 'bg-fuchsia-100 text-fuchsia-800 dark:bg-fuchsia-900/40 dark:text-fuchsia-300', + }, + Gigantamax: { + label: 'G-Max', + color: 'bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-300', + }, + Dynamax: { + label: 'D-Max', + color: 'bg-rose-100 text-rose-800 dark:bg-rose-900/40 dark:text-rose-300', + }, + Terastallize: { + label: 'Tera', + color: 'bg-teal-100 text-teal-800 dark:bg-teal-900/40 dark:text-teal-300', + }, +} + +export function ConditionBadge({ + condition, + size = 'sm', +}: { + condition: string | null + size?: 'sm' | 'xs' +}) { + if (!condition) return null + const config = CONDITION_CONFIG[condition] + if (!config) return null + const sizeClass = size === 'xs' ? 'text-[8px] px-1 py-0' : 'text-[9px] px-1.5 py-0.5' + return ( + + {config.label} + + ) +} diff --git a/frontend/src/pages/RunEncounters.tsx b/frontend/src/pages/RunEncounters.tsx index 30f7eaf..f6b8842 100644 --- a/frontend/src/pages/RunEncounters.tsx +++ b/frontend/src/pages/RunEncounters.tsx @@ -22,6 +22,7 @@ import { TypeBadge, } from '../components' import { BossDefeatModal } from '../components/BossDefeatModal' +import { ConditionBadge } from '../components/ConditionBadge' import type { Route, RouteWithChildren, @@ -239,7 +240,10 @@ function BossTeamPreview({ ) : (
)} - Lvl {bp.level} +
+ Lvl {bp.level} + +
))}