99 lines
3.1 KiB
TypeScript
99 lines
3.1 KiB
TypeScript
import type { NuzlockeRules } from '../types/rules'
|
|
import { RULE_DEFINITIONS, DEFAULT_RULES } from '../types/rules'
|
|
import { RuleToggle } from './RuleToggle'
|
|
|
|
interface RulesConfigurationProps {
|
|
rules: NuzlockeRules
|
|
onChange: (rules: NuzlockeRules) => void
|
|
onReset?: () => void
|
|
}
|
|
|
|
export function RulesConfiguration({
|
|
rules,
|
|
onChange,
|
|
onReset,
|
|
}: RulesConfigurationProps) {
|
|
const coreRules = RULE_DEFINITIONS.filter((r) => r.category === 'core')
|
|
const difficultyRules = RULE_DEFINITIONS.filter(
|
|
(r) => r.category === 'difficulty'
|
|
)
|
|
|
|
const handleRuleChange = (key: keyof NuzlockeRules, value: boolean) => {
|
|
onChange({ ...rules, [key]: value })
|
|
}
|
|
|
|
const handleResetToDefault = () => {
|
|
onChange(DEFAULT_RULES)
|
|
onReset?.()
|
|
}
|
|
|
|
const enabledCount = Object.values(rules).filter(Boolean).length
|
|
const totalCount = Object.keys(rules).length
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">
|
|
Rules Configuration
|
|
</h2>
|
|
<p className="text-sm text-gray-500 dark:text-gray-400">
|
|
{enabledCount} of {totalCount} rules enabled
|
|
</p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={handleResetToDefault}
|
|
className="text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
|
|
>
|
|
Reset to Default
|
|
</button>
|
|
</div>
|
|
|
|
<div className="bg-white dark:bg-gray-800 rounded-lg shadow">
|
|
<div className="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
|
|
<h3 className="text-lg font-medium text-gray-900 dark:text-gray-100">
|
|
Core Rules
|
|
</h3>
|
|
<p className="text-sm text-gray-500 dark:text-gray-400">
|
|
The fundamental rules of a Nuzlocke challenge
|
|
</p>
|
|
</div>
|
|
<div className="px-4">
|
|
{coreRules.map((rule) => (
|
|
<RuleToggle
|
|
key={rule.key}
|
|
name={rule.name}
|
|
description={rule.description}
|
|
enabled={rules[rule.key]}
|
|
onChange={(value) => handleRuleChange(rule.key, value)}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white dark:bg-gray-800 rounded-lg shadow">
|
|
<div className="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
|
|
<h3 className="text-lg font-medium text-gray-900 dark:text-gray-100">
|
|
Difficulty Modifiers
|
|
</h3>
|
|
<p className="text-sm text-gray-500 dark:text-gray-400">
|
|
Optional rules to increase the challenge
|
|
</p>
|
|
</div>
|
|
<div className="px-4">
|
|
{difficultyRules.map((rule) => (
|
|
<RuleToggle
|
|
key={rule.key}
|
|
name={rule.name}
|
|
description={rule.description}
|
|
enabled={rules[rule.key]}
|
|
onChange={(value) => handleRuleChange(rule.key, value)}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|