Character Detail Page

The character detail page (/characters/:characterId) is the richest UI surface in the app — a WoW-style character sheet with a Blizzard-rendered full-body portrait, equipment panels, and spec-aware color theming.

Page Layout

┌─────────────────────────────────┐
│         Page-level aura         │  ← fixed radial gradient, spec color
│  ┌───────────────────────────┐  │
│  │     Profile Card          │  │  ← avatar, name, class, chips
│  └───────────────────────────┘  │
│                                 │
│  ┌──────┬──────────┬──────┐     │
│  │ Left │  Render  │ Right│     │  ← desktop: 3-column grid
│  │ gear │  image   │ gear │     │
│  └──────┴──────────┴──────┘     │
│        [ MH ]  [ OH ]           │  ← weapons centered below
│                                 │
│  ┌──────────────────────────┐   │
│  │  Mobile equipment grid   │   │  ← mobile: flat grid below render
│  └──────────────────────────┘   │
└─────────────────────────────────┘

Responsive Behavior

• Desktop (lg: breakpoint): 3-column CSS grid (220px / 1fr / 220px). Left column shows head→wrist, right column shows hands→trinkets. Weapons sit centered below the portrait. The mobile grid is hidden.
• Mobile: Equipment columns are hidden. A single-column (2-col on sm:) grid renders all items sorted by slot order below the render.

File Map

File	Purpose
routes/characters/-CharacterDetailPage.tsx	Page component, layout, equipment panels
components/game/CharacterRenderImage.tsx	Cached Blizzard full-body render image
components/game/aura-colors.ts	Spec-aware aura color lookup
components/game/CharacterCardBackground.tsx	Faction-tinted card background
components/game/FactionChip.tsx	Horde/Alliance chip

Character render image

The center column shows a cached PNG from Blizzard’s render service (stored after enrichment or fetched on demand via GET /characters/:id/render). The image is landscape (1600×1200); the UI uses object-fit: cover with a vertical crop bias so the figure fills the frame without the heavy WebGL stack.

If no render URL is available yet, the component falls back to the character avatar and class color framing.

Aura Color System

aura-colors.ts provides spec-aware color theming for the page-level gradient and related accents.

How It Works

getAuraColor(class, spec)
  → look up SPEC_AURA_COLORS[class/spec]  (e.g. "priest/shadow" → #6B21A8)
  → fallback: getClassColor(class)         (standard WoW class color)
  → returns [r, g, b] tuple or null

Every class/spec combination has a hand-picked color. Examples:

Spec	Color	Reasoning
Priest / Shadow	#6B21A8	Deep purple
Mage / Frost	#60C5F1	Ice blue
Death Knight / Blood	#8B1A1A	Dark crimson
Evoker / Preservation	#33937F	Teal green

Page-Level Aura

The CharacterDetailPage renders a fixed radial-gradient(circle at 50% 55%, ...) using the spec aura color at 25% opacity. This washes the entire page in the character's spec color, centered on the portrait area.

Equipment Display

Item Quality Colors

Items are color-coded by WoW quality tier:

Quality	Color
Poor	#9d9d9d
Common	#ffffff
Uncommon	#1eff00
Rare	#0070dd
Epic	#a335ee
Legendary	#ff8000

Slot Layout

Desktop splits equipment into three groups:

• Left column (icon right-aligned, text left): Head, Neck, Shoulder, Back, Chest, Tabard, Wrist
• Right column (icon left-aligned, text right): Hands, Waist, Legs, Feet, Ring 1, Ring 2, Trinket 1, Trinket 2
• Weapons row: Main Hand, Off Hand (centered below render)

Mobile shows all items in a flat sorted grid with slot labels, ilvl, enchant/gem indicators.

Design Decisions

• Static image vs WebGL: A previous Wowhead/Zam 3D viewer was removed for performance and reliability. The Blizzard render is a single <img> with optional RTK Query hydration when renderUrl is missing from the character payload.
• Transmog preference: When transmogItemId is present on an equipped item, it's used for tooltip/display where applicable.