Add condition badges for boss Pokemon mechanics
Show colored pill badges (Mega, G-Max, D-Max, Tera) on boss Pokemon in BossDefeatModal and BossTeamPreview. Starter-dependent condition labels are ignored. Follows EncounterMethodBadge pattern. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -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({
|
||||
<span className="text-xs font-medium text-gray-700 dark:text-gray-300">
|
||||
Lv.{bp.level}
|
||||
</span>
|
||||
<ConditionBadge condition={bp.conditionLabel} size="xs" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
36
frontend/src/components/ConditionBadge.tsx
Normal file
36
frontend/src/components/ConditionBadge.tsx
Normal file
@@ -0,0 +1,36 @@
|
||||
const CONDITION_CONFIG: Record<string, { label: string; color: string }> = {
|
||||
'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 (
|
||||
<span className={`${sizeClass} font-medium rounded-full whitespace-nowrap ${config.color}`}>
|
||||
{config.label}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user