pokemon/nuzlocke-tracker
1
1
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Support both PNG and JPG box art images

Browse Source 
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>
This commit is contained in:
Julian Tabel
2026-02-07 21:37:15 +01:00
parent 7dbf3772df
commit 8915f69215
2 changed files with 10 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/components/GameCard.tsx
View File

@@ -11,8 +11,8 @@ interface GameCardProps {
export function GameCard({ game, selected, onSelect }: GameCardProps) { export function GameCard({ game, selected, onSelect }: GameCardProps) {
const backgroundColor = game.color ?? DEFAULT_COLOR const backgroundColor = game.color ?? DEFAULT_COLOR
const [imgError, setImgError] = useState(false) const [imgIdx, setImgIdx] = useState(0)
const boxArtSrc = `/boxart/${game.slug}.png` const boxArtSrcs = [`/boxart/${game.slug}.png`, `/boxart/${game.slug}.jpg`]
return ( return (
<button <button
@@ -22,12 +22,12 @@ export function GameCard({ game, selected, onSelect }: GameCardProps) {
selected ? 'ring-2 ring-blue-500 scale-105 shadow-lg' : 'shadow' selected ? 'ring-2 ring-blue-500 scale-105 shadow-lg' : 'shadow'
}`} }`}
> >
{!imgError ? ( {imgIdx < boxArtSrcs.length ? (
<img <img
src={boxArtSrc} src={boxArtSrcs[imgIdx]}
alt={game.name} alt={game.name}
className="w-full h-48 object-cover" className="w-full h-48 object-cover"
onError={() => setImgError(true)} onError={() => setImgIdx((i) => i + 1)}
/> />
) : ( ) : (
<div <div

9
frontend/src/pages/NewRun.tsx
View File

@@ -223,10 +223,11 @@ export function NewRun() {
} }
function SelectedGameThumb({ game }: { game: Game }) { function SelectedGameThumb({ game }: { game: Game }) {
const [imgError, setImgError] = useState(false) const [imgIdx, setImgIdx] = useState(0)
const backgroundColor = game.color ?? DEFAULT_COLOR const backgroundColor = game.color ?? DEFAULT_COLOR
const boxArtSrcs = [`/boxart/${game.slug}.png`, `/boxart/${game.slug}.jpg`]
if (imgError) { if (imgIdx >= boxArtSrcs.length) {
return ( return (
<div <div
className="w-10 h-10 rounded flex items-center justify-center flex-shrink-0" className="w-10 h-10 rounded flex items-center justify-center flex-shrink-0"
@@ -241,10 +242,10 @@ function SelectedGameThumb({ game }: { game: Game }) {
return ( return (
<img <img
src={`/boxart/${game.slug}.png`} src={boxArtSrcs[imgIdx]}
alt={game.name} alt={game.name}
className="w-10 h-10 rounded object-cover flex-shrink-0" className="w-10 h-10 rounded object-cover flex-shrink-0"
onError={() => setImgError(true)} onError={() => setImgIdx((i) => i + 1)}
/> />
) )
} }