guild-warcraftcn-integration

warcraftcn Integration — Portal + Kiosk

Context

The Guild portal and kiosk currently use generic shadcn/ui components. We’re reskinning everything with warcraftcn — a Warcraft III RTS-themed component library — to match the fantasy RPG aesthetic. Using neutral/default faction only (no faction emblems). Assets stay on warcraftcn.com for now.

Phase 0: Foundation

Copy assets from warcraftcn-ui repo into Guild:

• Create src/components/ui/warcraftcn/styles/warcraft.css (copy + edit: remove 5 instances of height: 300px on tab content)
• Create src/components/ui/warcraftcn/assets/ (copy entire directory — tabs, checkboxes, cursors, accordion, etc.)
• Copy src/components/ui/warcraftcn/assets/spinner-path.ts

Wire CSS into both style entry points:

• src/app/(frontend)/styles.css — add warcraft.css import
• src/app/(kiosk)/styles.css — add warcraft.css import

No new packages needed — radix-ui individual packages already installed. The warcraftcn dropdown-menu uses from "radix-ui" but we’ll adapt it to use @radix-ui/react-dropdown-menu.

Phase 1: Replace Core Components

Replace files in src/components/ui/ with warcraftcn versions. Same export names = no import changes needed in consumers.

Component	Risk	Notes
card.tsx	Low	Most-used component. Adds wc-card-border, fantasy class, border-24
badge.tsx	Low	Same variant names. Adds size, faction, shape props
tabs.tsx	Medium	Background-image textures. TabsContent needs flexible height
tooltip.tsx	Low	Adds rarity variants. Existing API preserved
skeleton.tsx	Low	Adds shimmer + faction variants
input.tsx	Low	Adds wc-input-border border-image
label.tsx	Low	Adds fantasy font + amber color
dropdown-menu.tsx	Medium	Adapt imports from "radix-ui" to "@radix-ui/react-dropdown-menu"
avatar.tsx	High	API change: Radix subcomponents → single component. Update 2 consumers
button.tsx	High	warcraftcn only has default/frame. Must extend with ghost, outline, secondary, destructive, link + sizes sm, lg, icon

New component: src/components/ui/spinner.tsx (copy from warcraftcn, for kiosk loading)

Not replaced (no warcraftcn equivalent): separator.tsx, sheet.tsx, sidebar.tsx, progress.tsx

Phase 2: Theme + Custom Styling

Force dark mode — fantasy textures designed for dark backgrounds:

• src/app/(frontend)/layout.tsx: forcedTheme="dark" on ThemeProvider
• Remove theme toggle from nav-user.tsx

Update CSS variables for warm dark fantasy palette:

• src/app/(frontend)/styles.css — dark mode vars: deep brown-black bg, amber-gold primary, parchment text
• src/app/(kiosk)/styles.css — same palette

Restyle Progress (src/components/ui/progress.tsx):

• Dark stone trough bg, gold gradient fill, inset shadow

Sidebar theming (CSS vars cascade automatically):

• app-sidebar.tsx + nav-main.tsx — add fantasy class to brand text and nav labels

Separator — update color to bg-amber-900/30

Phase 3: Page-Level Adjustments

Avatar API migration (2 files):

• nav-user.tsx — small avatar, use plain div or simple fallback (frame too big at 32px)
• dashboard/page.tsx — character sheet portrait, use warcraftcn Avatar with size="lg"

TabsContent overrides (3 files) — suppress decorative bg/padding for data-dense content:

• activity/activity-feed.tsx
• quests/page.tsx
• rewards/page.tsx

Fantasy class additions:

• dashboard/page.tsx — character name heading, stat labels
• dashboard/xp-bar.tsx — level display
• Card data-size="sm" for KPI cards (thinner borders)

Phase 4: Kiosk Fantasy Theming

• kiosk-screen.tsx:
  • Replace CSS spinner with warcraftcn Spinner
  • Add fantasy class to headings
  • Replace emoji icons with styled alternatives
  • Cards/Badges auto-themed from Phase 1

Verification

1. pnpm build — no type errors
2. All 5 dashboard pages render with fantasy theme
3. Sidebar navigable on desktop + mobile
4. Kiosk check-in flow: idle → loading → welcome (all screens themed)
5. Signup page renders with fantasy inputs/cards
6. No light mode flash (forced dark)

Files Modified (27 total)

Created (3):

• src/components/ui/warcraftcn/styles/warcraft.css
• src/components/ui/warcraftcn/assets/ (directory)
• src/components/ui/spinner.tsx

Replaced (10):

• src/components/ui/{card,button,badge,tabs,tooltip,skeleton,input,label,dropdown-menu,avatar}.tsx

Modified (14):

• src/app/(frontend)/styles.css — CSS vars + import
• src/app/(kiosk)/styles.css — CSS vars + import
• src/app/(frontend)/layout.tsx — force dark
• src/components/ui/progress.tsx — fantasy restyle
• src/components/ui/separator.tsx — amber color
• src/app/(frontend)/components/{app-sidebar,nav-main,nav-user}.tsx — fantasy classes
• src/app/(frontend)/dashboard/page.tsx — avatar API + classes
• src/app/(frontend)/dashboard/xp-bar.tsx — fantasy classes
• src/app/(frontend)/dashboard/activity/activity-feed.tsx — tab overrides
• src/app/(frontend)/dashboard/quests/page.tsx — tab overrides
• src/app/(frontend)/dashboard/rewards/page.tsx — tab overrides
• src/app/(kiosk)/kiosk/kiosk-screen.tsx — spinner + fantasy theme