From 8915f6921503d009f5fad8989103a43f7d35c142 Mon Sep 17 00:00:00 2001
From: Julian Tabel <juliantabel.jt@gmail.com>
Date: Sat, 7 Feb 2026 21:37:15 +0100
Subject: [PATCH] Support both PNG and JPG box art images

Try .png first, then .jpg, falling back to the color swatch only if
neither format exists for a game slug.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/GameCard.tsx | 10 +++++-----
 frontend/src/pages/NewRun.tsx        |  9 +++++----
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/GameCard.tsx b/frontend/src/components/GameCard.tsx
index 5d96e27..0d47d6c 100644
--- a/frontend/src/components/GameCard.tsx
+++ b/frontend/src/components/GameCard.tsx
@@ -11,8 +11,8 @@ interface GameCardProps {
 
 export function GameCard({ game, selected, onSelect }: GameCardProps) {
   const backgroundColor = game.color ?? DEFAULT_COLOR
-  const [imgError, setImgError] = useState(false)
-  const boxArtSrc = `/boxart/${game.slug}.png`
+  const [imgIdx, setImgIdx] = useState(0)
+  const boxArtSrcs = [`/boxart/${game.slug}.png`, `/boxart/${game.slug}.jpg`]
 
   return (
     <button
@@ -22,12 +22,12 @@ export function GameCard({ game, selected, onSelect }: GameCardProps) {
         selected ? 'ring-2 ring-blue-500 scale-105 shadow-lg' : 'shadow'
       }`}
     >
-      {!imgError ? (
+      {imgIdx < boxArtSrcs.length ? (
         <img
-          src={boxArtSrc}
+          src={boxArtSrcs[imgIdx]}
           alt={game.name}
           className="w-full h-48 object-cover"
-          onError={() => setImgError(true)}
+          onError={() => setImgIdx((i) => i + 1)}
         />
       ) : (
         <div
diff --git a/frontend/src/pages/NewRun.tsx b/frontend/src/pages/NewRun.tsx
index 51e05e0..33eda9b 100644
--- a/frontend/src/pages/NewRun.tsx
+++ b/frontend/src/pages/NewRun.tsx
@@ -223,10 +223,11 @@ export function NewRun() {
 }
 
 function SelectedGameThumb({ game }: { game: Game }) {
-  const [imgError, setImgError] = useState(false)
+  const [imgIdx, setImgIdx] = useState(0)
   const backgroundColor = game.color ?? DEFAULT_COLOR
+  const boxArtSrcs = [`/boxart/${game.slug}.png`, `/boxart/${game.slug}.jpg`]
 
-  if (imgError) {
+  if (imgIdx >= boxArtSrcs.length) {
     return (
       <div
         className="w-10 h-10 rounded flex items-center justify-center flex-shrink-0"
@@ -241,10 +242,10 @@ function SelectedGameThumb({ game }: { game: Game }) {
 
   return (
     <img
-      src={`/boxart/${game.slug}.png`}
+      src={boxArtSrcs[imgIdx]}
       alt={game.name}
       className="w-10 h-10 rounded object-cover flex-shrink-0"
-      onError={() => setImgError(true)}
+      onError={() => setImgIdx((i) => i + 1)}
     />
   )
 }