Julian Tabel
c3bbd365a9
Use the predefined METHOD_ORDER/METHOD_CONFIG from EncounterMethodBadge to populate a select dropdown with all known encounter methods plus an "Other" option for custom values. Shows a colored badge preview on selection. Correctly handles editing encounters with non-standard methods. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
100 lines
2.4 KiB
TypeScript
100 lines
2.4 KiB
TypeScript
export const METHOD_CONFIG: Record<string, { label: string; color: string }> = {
|
|
starter: {
|
|
label: 'Starter',
|
|
color:
|
|
'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/40 dark:text-yellow-300',
|
|
},
|
|
gift: {
|
|
label: 'Gift',
|
|
color: 'bg-pink-100 text-pink-800 dark:bg-pink-900/40 dark:text-pink-300',
|
|
},
|
|
fossil: {
|
|
label: 'Fossil',
|
|
color:
|
|
'bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-300',
|
|
},
|
|
trade: {
|
|
label: 'Trade',
|
|
color:
|
|
'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-300',
|
|
},
|
|
walk: {
|
|
label: 'Grass',
|
|
color:
|
|
'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300',
|
|
},
|
|
headbutt: {
|
|
label: 'Headbutt',
|
|
color: 'bg-lime-100 text-lime-800 dark:bg-lime-900/40 dark:text-lime-300',
|
|
},
|
|
surf: {
|
|
label: 'Surfing',
|
|
color: 'bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300',
|
|
},
|
|
'rock-smash': {
|
|
label: 'Rock Smash',
|
|
color:
|
|
'bg-orange-100 text-orange-800 dark:bg-orange-900/40 dark:text-orange-300',
|
|
},
|
|
'old-rod': {
|
|
label: 'Old Rod',
|
|
color: 'bg-cyan-100 text-cyan-800 dark:bg-cyan-900/40 dark:text-cyan-300',
|
|
},
|
|
'good-rod': {
|
|
label: 'Good Rod',
|
|
color: 'bg-sky-100 text-sky-800 dark:bg-sky-900/40 dark:text-sky-300',
|
|
},
|
|
'super-rod': {
|
|
label: 'Super Rod',
|
|
color:
|
|
'bg-indigo-100 text-indigo-800 dark:bg-indigo-900/40 dark:text-indigo-300',
|
|
},
|
|
}
|
|
|
|
/** Display order for encounter method groups */
|
|
export const METHOD_ORDER = [
|
|
'starter',
|
|
'gift',
|
|
'fossil',
|
|
'trade',
|
|
'walk',
|
|
'headbutt',
|
|
'surf',
|
|
'rock-smash',
|
|
'old-rod',
|
|
'good-rod',
|
|
'super-rod',
|
|
]
|
|
|
|
export function getMethodLabel(method: string): string {
|
|
return (
|
|
METHOD_CONFIG[method]?.label ??
|
|
method
|
|
.replace(/-/g, ' ')
|
|
.replace(/\b\w/g, (c) => c.toUpperCase())
|
|
)
|
|
}
|
|
|
|
export function getMethodColor(method: string): string {
|
|
return METHOD_CONFIG[method]?.color ?? 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300'
|
|
}
|
|
|
|
export function EncounterMethodBadge({
|
|
method,
|
|
size = 'sm',
|
|
}: {
|
|
method: string
|
|
size?: 'sm' | 'xs'
|
|
}) {
|
|
const config = METHOD_CONFIG[method]
|
|
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>
|
|
)
|
|
}
|