Add run dashboard and encounter tracking interface
Run list at /runs shows all runs with status badges. Run dashboard at /runs/:id displays stats, active team, graveyard, and rule badges. Encounter tracking at /runs/:runId/encounters shows route list with status indicators, progress bar, filters, and a modal for logging or editing encounters with pokemon picker. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
36
frontend/src/components/RuleBadges.tsx
Normal file
36
frontend/src/components/RuleBadges.tsx
Normal file
@@ -0,0 +1,36 @@
|
||||
import type { NuzlockeRules } from '../types'
|
||||
import { RULE_DEFINITIONS } from '../types/rules'
|
||||
|
||||
interface RuleBadgesProps {
|
||||
rules: NuzlockeRules
|
||||
}
|
||||
|
||||
export function RuleBadges({ rules }: RuleBadgesProps) {
|
||||
const enabledRules = RULE_DEFINITIONS.filter((def) => rules[def.key])
|
||||
|
||||
if (enabledRules.length === 0) {
|
||||
return (
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">
|
||||
No rules enabled
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{enabledRules.map((def) => (
|
||||
<span
|
||||
key={def.key}
|
||||
title={def.description}
|
||||
className={`px-2 py-0.5 rounded-full text-xs font-medium ${
|
||||
def.category === 'core'
|
||||
? 'bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300'
|
||||
: 'bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-300'
|
||||
}`}
|
||||
>
|
||||
{def.name}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user