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/GameCard.tsx
+++ b/frontend/src/components/GameCard.tsx
@@ -0,0 +1,79 @@
+import type { Game } from '../types'
+
+const GAME_GRADIENTS: Record<string, string> = {
+  firered: 'from-red-500 to-orange-500',
+  leafgreen: 'from-green-500 to-emerald-500',
+  emerald: 'from-emerald-500 to-teal-500',
+  heartgold: 'from-amber-400 to-yellow-500',
+  soulsilver: 'from-gray-400 to-slate-500',
+}
+
+const DEFAULT_GRADIENT = 'from-blue-500 to-indigo-500'
+
+interface GameCardProps {
+  game: Game
+  selected: boolean
+  onSelect: (game: Game) => void
+}
+
+export function GameCard({ game, selected, onSelect }: GameCardProps) {
+  const gradient = GAME_GRADIENTS[game.slug] ?? DEFAULT_GRADIENT
+
+  return (
+    <button
+      type="button"
+      onClick={() => onSelect(game)}
+      className={`relative w-full rounded-lg overflow-hidden transition-all duration-200 hover:scale-105 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 ${
+        selected ? 'ring-2 ring-blue-500 scale-105 shadow-lg' : 'shadow'
+      }`}
+    >
+      {game.boxArtUrl ? (
+        <img
+          src={game.boxArtUrl}
+          alt={game.name}
+          className="w-full h-48 object-cover"
+        />
+      ) : (
+        <div
+          className={`w-full h-48 bg-gradient-to-br ${gradient} flex items-center justify-center`}
+        >
+          <span className="text-white text-2xl font-bold text-center px-4 drop-shadow-md">
+            {game.name.replace('Pokemon ', '')}
+          </span>
+        </div>
+      )}
+      <div className="p-3 bg-white dark:bg-gray-800 text-left">
+        <h3 className="font-semibold text-gray-900 dark:text-gray-100">
+          {game.name}
+        </h3>
+        <div className="flex items-center gap-2 mt-1">
+          <span className="text-xs px-2 py-0.5 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400">
+            {game.region}
+          </span>
+          {game.releaseYear && (
+            <span className="text-xs text-gray-500 dark:text-gray-400">
+              {game.releaseYear}
+            </span>
+          )}
+        </div>
+      </div>
+      {selected && (
+        <div className="absolute top-2 right-2 w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center">
+          <svg
+            className="w-4 h-4 text-white"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth={3}
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M5 13l4 4L19 7"
+            />
+          </svg>
+        </div>
+      )}
+    </button>
+  )
+}