feat: integrate CDN art assets across all game panels
CI / Lint, Build & Test (pull_request) Successful in 1m8s
Security Scan and Upload / Security & DefectDojo Upload (pull_request) Successful in 1m10s

Add cdnImage utility and wire zone/boss/quest/adventurer/companion/
equipment/upgrade/prestige/transcendence/achievement/exploration/
crafting/story panels to load art from cdn.nhcarrigan.com/elysium/.
Zone selector tabs display 16:9 zone art thumbnails. Background
image added as fixed overlay at 15% opacity. Document art generation
process in CLAUDE.md for future expansions.

Resolves #15
This commit is contained in:
2026-03-09 16:13:41 -07:00
committed by Naomi Carrigan
parent 7a1c57be9a
commit a618a8a5e9
17 changed files with 217 additions and 25 deletions
@@ -7,6 +7,7 @@
/* eslint-disable react/no-multi-comp -- Sub-component is tightly coupled to this panel */
import { type JSX, useState } from "react";
import { useGame } from "../../context/gameContext.js";
import { cdnImage } from "../../utils/cdn.js";
import { LockToggle } from "../ui/lockToggle.js";
import type { Achievement } from "@elysium/types";
@@ -76,7 +77,11 @@ const AchievementCard = ({
<div className={`achievement-card ${isUnlocked
? "unlocked"
: "locked"}`}>
<div className="achievement-icon">{achievement.icon}</div>
<img
alt={achievement.name}
className="card-thumbnail"
src={cdnImage("achievements", achievement.id)}
/>
<div className="achievement-info">
<h3>{achievement.name}</h3>
<p>{achievement.description}</p>