v2.0: sound library, image upload, DnD, ResourceBrowser, Barotrauma HUD, captain sanity

components/BingoCell.tsx

@@ -9,6 +9,7 @@ type Item = {
   emoji: string;
   soundCategory: string;
   soundUrl?: string | null;
+  imageUrl?: string | null;
   gridIndex: number;
 };
 
@@ -76,8 +77,8 @@ export function BingoCell({ item, index, marked, markCount, markedBy, gridSize,
       className={cn(
         "relative flex flex-col items-center justify-center rounded-lg border transition-all duration-200 overflow-hidden",
         "select-none",
-        "aspect-square",
-        gridSize > 5 ? "p-1 gap-0" : "p-2 gap-0.5",
+        "min-h-[90px]",
+        gridSize > 5 ? "p-1.5 gap-0.5" : "p-2 gap-0.5",
         marked
           ? "border-cyan-500/60 bg-cyan-900/40 hover:bg-cyan-800/40 cursor-pointer"
           : "border-slate-700/40 bg-slate-800/40 hover:bg-slate-700/40 hover:border-cyan-600/40 hover:shadow-lg hover:shadow-cyan-900/20 cursor-pointer active:scale-95",
@@ -88,34 +89,33 @@ export function BingoCell({ item, index, marked, markCount, markedBy, gridSize,
       )}
       title={markedBy.length > 0 ? `Marked by: ${markedBy.join(", ")}` : item.text}
     >
-      <span className={cn("leading-none", gridSize > 5 ? "text-2xl" : "text-3xl")}>
+      {item.imageUrl && (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img src={item.imageUrl} alt="" className="absolute inset-0 w-full h-full object-cover rounded-lg opacity-20 pointer-events-none" />
+      )}
+      <span className={cn("leading-none relative z-10", gridSize > 5 ? "text-2xl" : "text-2xl")}>
         {item.emoji || "💀"}
       </span>
       <span className={cn(
-        "text-center font-medium leading-tight text-slate-200",
-        gridSize > 5 ? "text-xs" : "text-sm",
-        "line-clamp-2"
+        "text-center font-medium leading-tight text-slate-200 relative z-10",
+        "text-xs",
+        "line-clamp-2 px-0.5"
       )}>
         {item.text}
       </span>
       {marked && markCount > 0 && (
-        <span className={cn(
-          "absolute top-0.5 right-1 font-bold text-amber-400",
-          gridSize > 5 ? "text-[9px]" : "text-xs"
-        )}>
+        <span className={cn("absolute top-0.5 right-1 font-bold text-amber-400 z-10", gridSize > 5 ? "text-[9px]" : "text-xs")}>
           {markCount}
         </span>
       )}
       {marked && (
-        <span className="absolute top-0.5 left-1 text-[9px] text-cyan-500/60">✕</span>
+        <span className="absolute top-0.5 left-1 text-[9px] text-cyan-500/60 z-10">✕</span>
       )}
       {!marked && !isFree && (
-        <span className="text-[10px] text-slate-600">{getSoundEmoji(item.soundCategory)}</span>
+        <span className="text-[10px] text-slate-600 relative z-10">{getSoundEmoji(item.soundCategory)}</span>
       )}
       {isFree && !marked && (
-        <span className="text-[10px] text-amber-500/60">
-          🎯 mark me
-        </span>
+        <span className="text-[10px] text-amber-500/60 relative z-10">🎯 mark me</span>
       )}
     </button>
   );