colorize cartridges

server/routes/labels.ts

@@ -38,6 +38,7 @@ interface CartNameEntry {
   id: string;
   gameCode: string;
   name: string;
+  color: string;
   region: string;
   languages: string[];
   videoMode: 'NTSC' | 'PAL' | 'Unknown';
@@ -115,6 +116,7 @@ function getCartMetadata(cartId: string): Partial<CartNameEntry> {
   const entry = cartNameMap.get(cartId.toLowerCase());
   if (!entry) return {};
   return {
+    color: entry.color,
     region: entry.region,
     languages: entry.languages,
     videoMode: entry.videoMode,
@@ -296,6 +298,7 @@ interface EnhancedEntry {
   cartId: string;
   index: number;
   name: string;
+  color?: string;
   region?: string;
   languages?: string[];
   videoMode?: 'NTSC' | 'PAL' | 'Unknown';
@@ -322,6 +325,7 @@ async function getSortedEntries(): Promise<EnhancedEntry[] | null> {
     return {
       ...e,
       name: getCartName(e.cartId),
+      color: meta.color,
       region: meta.region,
       languages: meta.languages,
       videoMode: meta.videoMode,
@@ -435,6 +439,7 @@ router.get('/lookup/:cartId', async (req, res) => {
         source: 'internal',
         cartId,
         name: internalEntry.name,
+        color: internalEntry.color,
         region: internalEntry.region,
         languages: internalEntry.languages,
         videoMode: internalEntry.videoMode,
@@ -593,6 +598,7 @@ router.get('/page/:page', async (req, res) => {
             cartId,
             index: -1, // No label index
             name: getCartName(cartId),
+            color: meta.color,
             region: meta.region,
             languages: meta.languages,
             videoMode: meta.videoMode,
@@ -619,6 +625,7 @@ router.get('/page/:page', async (req, res) => {
           cartId,
           index: -1,
           name: getCartName(cartId),
+          color: meta.color,
           region: meta.region,
           languages: meta.languages,
           videoMode: meta.videoMode,

src/components/CartridgeCard.tsx

@@ -4,6 +4,7 @@ import './CartridgeCard.css';
 interface CartridgeCardProps {
   cartId: string;
   name?: string;
+  color: string;
   gridIndex: number;
   hasLabel: boolean;
   selectionMode: boolean;
@@ -15,6 +16,7 @@ interface CartridgeCardProps {
 export function CartridgeCard({
   cartId,
   name,
+  color,
   gridIndex,
   hasLabel,
   selectionMode,
@@ -37,17 +39,10 @@ export function CartridgeCard({
         <CartridgeSprite
           artworkUrl={imageUrl}
           alt={name || cartId}
-          color="dark"
+          color={ color }
           size="large"
           className="cart-sprite-base"
         />
-        <CartridgeSprite
-          artworkUrl={imageUrl}
-          alt={name || cartId}
-          color="black"
-          size="large"
-          className="cart-sprite-hover"
-        />
       </div>
       <div className="cartridge-card-info">
         <span className={`cartridge-card-name ${!name ? 'unknown' : ''}`}>

src/components/CartridgeDetailPanel.tsx

@@ -39,6 +39,7 @@ interface LookupResult {
   source?: 'internal' | 'user';
   cartId: string;
   name?: string;
+  color?: string;
   region?: string;
   videoMode?: string;
 }
@@ -121,6 +122,7 @@ type TabId = 'label' | 'settings' | 'gamepak';
 export function CartridgeDetailPanel({
   cartId,
   gameName,
+  color,
   sdCardPath,
   onClose,
   onUpdate,
@@ -190,7 +192,7 @@ export function CartridgeDetailPanel({
           <CartridgeSprite
             artworkUrl={`/api/labels/${cartId}?v=${imageCacheBuster}`}
             alt={displayName}
-            color="dark"
+            color={lookupResult?.color}
             size="small"
           />
           <div className="slide-over-title">
@@ -543,7 +545,7 @@ function LabelTab({
           <CartridgeSprite
             artworkUrl={imageUrl}
             alt="Current label"
-            color="dark"
+            color={lookupResult?.color}
             size="large"
           />
         </div>

src/components/CartridgeSprite.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import './CartridgeSprite.css';
 
-export type CartridgeSpriteColor = 'dark' | 'black';
+export type CartridgeSpriteColor = 'gray' | 'black' | 'red' | 'green' | 'blue' | 'yellow' | 'gold' | 'gold-silver';
 export type CartridgeSpriteSize = 'large' | 'medium' | 'small';
 
 interface CartridgeSpriteProps {
@@ -10,7 +10,7 @@ interface CartridgeSpriteProps {
   /** Alt text for the artwork */
   alt?: string;
   /** Cart shell color variant */
-  color?: CartridgeSpriteColor;
+  color: CartridgeSpriteColor;
   /** Size of the sprite */
   size?: CartridgeSpriteSize;
   /** Optional className for additional styling */
@@ -22,12 +22,13 @@ const PLACEHOLDER_URL = '/cart-placeholder.png';
 export function CartridgeSprite({
   artworkUrl,
   alt = 'Cartridge artwork',
-  color = 'dark',
+  color,
   size = 'large',
   className = '',
 }: CartridgeSpriteProps) {
   const [imgSrc, setImgSrc] = useState(artworkUrl);
-  const overlayImage = color === 'black' ? '/n64-cart-black.png' : '/n64-cart-dark.png';
+  //const overlayImage = color === 'black' ? '/n64-cart-black.png' : '/n64-cart-dark.png';
+  const overlayImage = '/n64-cart-' + color + '.png';
 
   // Update imgSrc when artworkUrl prop changes
   useEffect(() => {

src/components/LabelsBrowser.tsx

@@ -17,6 +17,7 @@ interface LabelEntry {
   cartId: string;
   index: number;
   name?: string;
+  color?: string;
   region?: string;
   languages?: string[];
   videoMode?: 'NTSC' | 'PAL' | 'Unknown';
@@ -582,6 +583,7 @@ export function LabelsBrowser({ onSelectLabel, refreshKey, sdCardPath }: LabelsB
                     key={entry.cartId}
                     cartId={entry.cartId}
                     name={entry.name}
+                    color={entry.color || 'gray'}
                     gridIndex={i}
                     hasLabel={entry.index >= 0}
                     selectionMode={selectionMode}