Initial setup of frontend and backend

2026-02-04 17:13:58 +01:00
parent 259c200d93
commit 6ee53a0533
72 changed files with 5687 additions and 0 deletions
--- a/frontend/src/components/RulesConfiguration.tsx
+++ b/frontend/src/components/RulesConfiguration.tsx
@@ -0,0 +1,98 @@
+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>
+  )
+}