From 2d5f589777707efcd0510a98f5e8e1e21777843c Mon Sep 17 00:00:00 2001
From: Jacob Mathison <jacob@mathisonprojects.com>
Date: Sat, 11 Apr 2026 11:59:33 -0500
Subject: [PATCH] =?UTF-8?q?feat:=20Aaron's=20character=20art=20=E2=80=94?=
 =?UTF-8?q?=20Cat=5FHD=20+=20Minion=5FBookie=5FHD=20added=20to=20/world/ch?=
 =?UTF-8?q?aracters?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- public/character-cat.jpg: skeletal demon chihuahua with bat wings (Aaron Pressey)
- public/character-bookie.jpg: skeleton wizard/scholar with spellbook (Aaron Pressey)
- world/characters.tsx: card grid now supports real image assets (Next/Image fill)
  - Cat and Bookie displayed with art, names kept as ??? per Aaron's request
  - Remaining slots still show emoji placeholder until art is ready
  - objectPosition: top to prioritize character faces/upper body
  - aspect-ratio 2:3 to match portrait art dimensions
---
 pages/world/characters.tsx | 112 +++++++++++++++++++++++++------------
 1 file changed, 77 insertions(+), 35 deletions(-)

diff --git a/pages/world/characters.tsx b/pages/world/characters.tsx
index 387c955..242407c 100644
--- a/pages/world/characters.tsx
+++ b/pages/world/characters.tsx
@@ -1,3 +1,4 @@
+import Image from "next/image";
 import SiteLayout from "@/pages/components/SiteLayout";
 
 const s = {
@@ -36,45 +37,61 @@ const s = {
   } as React.CSSProperties,
   grid: {
     display: "grid",
-    gridTemplateColumns: "repeat(3, 1fr)",
-    gap: "20px",
+    gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
+    gap: "24px",
     marginBottom: "40px",
   } as React.CSSProperties,
   card: {
-    background: "#1a1510",
-    border: "1px solid rgba(232,220,200,0.12)",
-    borderRadius: "8px",
-    padding: "36px 28px",
+    background: "rgba(15, 8, 24, 0.82)",
+    border: "1px solid rgba(180,140,255,0.18)",
+    borderRadius: "6px",
+    overflow: "hidden" as const,
+    transition: "border-color 0.2s, transform 0.2s",
   } as React.CSSProperties,
-  cardEmoji: {
-    fontSize: "2.4rem",
-    display: "block",
-    marginBottom: "20px",
+  cardImage: {
+    position: "relative" as const,
+    aspectRatio: "2/3",
+    width: "100%",
+    background: "#06030f",
+    overflow: "hidden" as const,
+  } as React.CSSProperties,
+  cardImagePlaceholder: {
+    position: "absolute" as const,
+    inset: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "4rem",
+    opacity: 0.12,
+  } as React.CSSProperties,
+  cardBody: {
+    padding: "20px 22px 24px",
   } as React.CSSProperties,
   cardName: {
     fontFamily: "'Georgia', 'Times New Roman', serif",
-    fontSize: "1.3rem",
+    fontSize: "1.2rem",
     fontWeight: 700,
     color: "#e8dcc8",
-    marginBottom: "6px",
+    marginBottom: "4px",
   } as React.CSSProperties,
   cardRole: {
-    fontSize: "0.75rem",
+    fontSize: "0.72rem",
     fontWeight: 700,
-    letterSpacing: "0.12em",
+    letterSpacing: "0.14em",
     textTransform: "uppercase" as const,
     color: "#c0392b",
-    marginBottom: "16px",
+    marginBottom: "12px",
   } as React.CSSProperties,
   cardDesc: {
-    fontSize: "0.92rem",
+    fontSize: "0.88rem",
     color: "#9e9080",
-    lineHeight: 1.65,
+    lineHeight: 1.7,
   } as React.CSSProperties,
   credit: {
     textAlign: "center" as const,
-    fontSize: "0.82rem",
+    fontSize: "0.8rem",
     color: "#9e9080",
+    opacity: 0.55,
     marginTop: "8px",
     letterSpacing: "0.04em",
   } as React.CSSProperties,
@@ -82,41 +99,49 @@ const s = {
 
 const CHARACTERS = [
   {
+    image: null,
     emoji: "🦴",
     name: "Bone Lord Bob",
     role: "The Protagonist",
     desc: "A man cursed to walk between worlds — carrying the weight of the dead and the rage of the living. He answers to no one.",
   },
   {
+    image: "/character-cat.jpg",
+    imageAlt: "Character — ???",
+    emoji: "🐾",
+    name: "???",
+    role: "Coming Soon",
+    desc: "A creature that shouldn't exist — and yet here it is, collar and all. Whatever side it's on, it has teeth.",
+  },
+  {
+    image: "/character-bookie.jpg",
+    imageAlt: "Character — ???",
+    emoji: "📖",
+    name: "???",
+    role: "Coming Soon",
+    desc: "Knowledge is power in the Bone Kingdom. This one has both — and charges accordingly. The ledger is always open.",
+  },
+  {
+    image: null,
     emoji: "🔥",
     name: "???",
     role: "Coming Soon",
-    desc: "More characters will be revealed as the story unfolds.",
+    desc: "A figure from the oldest part of the war. Their allegiance changes everything.",
   },
   {
+    image: null,
     emoji: "⚔️",
     name: "???",
     role: "Coming Soon",
     desc: "Every legend needs its foil. Every bone lord needs someone willing to break them.",
   },
   {
-    emoji: "💀",
-    name: "???",
-    role: "Coming Soon",
-    desc: "The dead keep their secrets. This one keeps more than most.",
-  },
-  {
+    image: null,
     emoji: "🌑",
     name: "???",
     role: "Coming Soon",
     desc: "Some figures are felt before they are seen. This one you feel first.",
   },
-  {
-    emoji: "🔮",
-    name: "???",
-    role: "Coming Soon",
-    desc: "Knowledge is power in the Bone Kingdom. This character has both — and charges accordingly.",
-  },
 ];
 
 export default function Characters() {
@@ -140,10 +165,27 @@ export default function Characters() {
         <div style={s.grid}>
           {CHARACTERS.map((c, i) => (
             <div key={i} style={s.card}>
-              <span style={s.cardEmoji}>{c.emoji}</span>
-              <div style={s.cardName}>{c.name}</div>
-              <div style={s.cardRole}>{c.role}</div>
-              <p style={s.cardDesc}>{c.desc}</p>
+              {/* Art panel */}
+              <div style={s.cardImage}>
+                {c.image ? (
+                  <Image
+                    src={c.image}
+                    alt={c.imageAlt || c.name}
+                    fill
+                    style={{ objectFit: "cover", objectPosition: "top" }}
+                    sizes="(max-width: 768px) 100vw, 33vw"
+                  />
+                ) : (
+                  <div style={s.cardImagePlaceholder}>{c.emoji}</div>
+                )}
+              </div>
+
+              {/* Info */}
+              <div style={s.cardBody}>
+                <div style={s.cardName}>{c.name}</div>
+                <div style={s.cardRole}>{c.role}</div>
+                <p style={s.cardDesc}>{c.desc}</p>
+              </div>
             </div>
           ))}
         </div>