Add game selection screen and new run wizard

Build a 3-step wizard at /runs/new: select game (themed gradient cards grouped by generation with filter tabs), configure rules (reuses existing RulesConfiguration), and name/create run. Remove standalone Games and Rules pages since they're now integrated into the wizard flow. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-02-05 15:09:25 +01:00
parent 7c65775c8b
commit 982154b348
11 changed files with 465 additions and 81 deletions
--- a/frontend/src/components/StepIndicator.tsx
+++ b/frontend/src/components/StepIndicator.tsx
@@ -0,0 +1,78 @@
+const STEPS = ['Select Game', 'Configure Rules', 'Create Run']
+
+interface StepIndicatorProps {
+  currentStep: number
+  onStepClick: (step: number) => void
+}
+
+export function StepIndicator({ currentStep, onStepClick }: StepIndicatorProps) {
+  return (
+    <nav aria-label="Progress" className="mb-8">
+      <ol className="flex items-center">
+        {STEPS.map((label, i) => {
+          const step = i + 1
+          const isCompleted = step < currentStep
+          const isCurrent = step === currentStep
+
+          return (
+            <li
+              key={label}
+              className={`flex items-center ${i < STEPS.length - 1 ? 'flex-1' : ''}`}
+            >
+              <button
+                type="button"
+                onClick={() => isCompleted && onStepClick(step)}
+                disabled={!isCompleted}
+                className={`flex items-center gap-2 text-sm font-medium ${
+                  isCompleted
+                    ? 'text-blue-600 dark:text-blue-400 cursor-pointer hover:text-blue-700 dark:hover:text-blue-300'
+                    : isCurrent
+                      ? 'text-gray-900 dark:text-gray-100'
+                      : 'text-gray-400 dark:text-gray-500 cursor-default'
+                }`}
+              >
+                <span
+                  className={`flex items-center justify-center w-8 h-8 rounded-full text-sm font-bold shrink-0 ${
+                    isCompleted
+                      ? 'bg-blue-600 text-white'
+                      : isCurrent
+                        ? 'border-2 border-blue-600 text-blue-600 dark:border-blue-400 dark:text-blue-400'
+                        : 'border-2 border-gray-300 dark:border-gray-600 text-gray-400 dark:text-gray-500'
+                  }`}
+                >
+                  {isCompleted ? (
+                    <svg
+                      className="w-4 h-4"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                      strokeWidth={3}
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        d="M5 13l4 4L19 7"
+                      />
+                    </svg>
+                  ) : (
+                    step
+                  )}
+                </span>
+                <span className="hidden sm:inline">{label}</span>
+              </button>
+              {i < STEPS.length - 1 && (
+                <div
+                  className={`flex-1 h-0.5 mx-3 ${
+                    step < currentStep
+                      ? 'bg-blue-600'
+                      : 'bg-gray-300 dark:bg-gray-600'
+                  }`}
+                />
+              )}
+            </li>
+          )
+        })}
+      </ol>
+    </nav>
+  )
+}