From 93d0d8a9e2c0c0af25f61ed5201d7b17b54f1c82 Mon Sep 17 00:00:00 2001
From: Julian Tabel <julian.tabel@synvert.com>
Date: Fri, 6 Feb 2026 11:51:28 +0100
Subject: [PATCH] Use game.color for GameCard fallback instead of static
 gradients

Replace hardcoded Tailwind gradient classes with dynamic background
color from the game's color field. Falls back to indigo if no color
is set.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 ...nuzlocke-tracker-qeim--ux-improvements-pass.md |  1 +
 frontend/src/components/GameCard.tsx              | 15 ++++-----------
 2 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/.beans/nuzlocke-tracker-qeim--ux-improvements-pass.md b/.beans/nuzlocke-tracker-qeim--ux-improvements-pass.md
index af1f92d..cd67111 100644
--- a/.beans/nuzlocke-tracker-qeim--ux-improvements-pass.md
+++ b/.beans/nuzlocke-tracker-qeim--ux-improvements-pass.md
@@ -18,5 +18,6 @@ Areas to evaluate:
 - Navigation between run dashboard and encounters
 - Empty states and onboarding flow
 - Visual feedback for actions (success/error toasts, optimistic updates)
+- It is unintuitive to not be able to deselect a game on the new run page
 
 Produce a concrete plan with specific UI/UX changes to implement.
\ No newline at end of file
diff --git a/frontend/src/components/GameCard.tsx b/frontend/src/components/GameCard.tsx
index 01e59dc..dfb4d73 100644
--- a/frontend/src/components/GameCard.tsx
+++ b/frontend/src/components/GameCard.tsx
@@ -1,14 +1,6 @@
 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'
+const DEFAULT_COLOR = '#6366f1' // indigo-500
 
 interface GameCardProps {
   game: Game
@@ -17,7 +9,7 @@ interface GameCardProps {
 }
 
 export function GameCard({ game, selected, onSelect }: GameCardProps) {
-  const gradient = GAME_GRADIENTS[game.slug] ?? DEFAULT_GRADIENT
+  const backgroundColor = game.color ?? DEFAULT_COLOR
 
   return (
     <button
@@ -35,7 +27,8 @@ export function GameCard({ game, selected, onSelect }: GameCardProps) {
         />
       ) : (
         <div
-          className={`w-full h-48 bg-gradient-to-br ${gradient} flex items-center justify-center`}
+          className="w-full h-48 flex items-center justify-center"
+          style={{ backgroundColor }}
         >
           <span className="text-white text-2xl font-bold text-center px-4 drop-shadow-md">
             {game.name.replace('Pokemon ', '')}