feat: integrate art assets across all game panels (#43)
Security Scan and Upload / Security & DefectDojo Upload (push) Successful in 1m2s
CI / Lint, Build & Test (push) Successful in 1m6s

## Summary

- Adds `apps/web/src/utils/cdn.ts` with a `cdnImage(folder, id)` helper that builds URLs from `https://cdn.nhcarrigan.com/elysium/`
- Wires CDN art into all 13 game panels (bosses, quests, adventurers, companions, equipment, upgrades, prestige, transcendence, achievements, explorations, crafting, story, codex)
- Zone selector tabs now display 16:9 zone art thumbnails in place of emoji icons
- Adds a fixed background image at 15% opacity via `body::before`
- Documents the art generation and CDN upload process in `CLAUDE.md` for future expansions

Resolves #15

 This PR was created with help from Hikari~ 🌸

Reviewed-on: #43
Co-authored-by: Hikari <hikari@nhcarrigan.com>
Co-committed-by: Hikari <hikari@nhcarrigan.com>
This commit was merged in pull request #43.
This commit is contained in:
2026-03-09 16:21:44 -07:00
committed by Naomi Carrigan
parent 7a1c57be9a
commit 11e97325cb
17 changed files with 217 additions and 25 deletions
+44 -2
View File
@@ -33,6 +33,20 @@ body {
color: var(--colour-text);
font-family: var(--font);
min-height: 100vh;
position: relative;
}
body::before {
background-attachment: fixed;
background-image: url("https://cdn.nhcarrigan.com/elysium/background.jpg");
background-position: center;
background-size: cover;
content: "";
inset: 0;
opacity: 0.15;
pointer-events: none;
position: fixed;
z-index: -1;
}
/* ===================== RESOURCE BAR ===================== */
@@ -2056,8 +2070,11 @@ body {
opacity: 0.45;
}
.zone-emoji {
font-size: 1.4rem;
.zone-tab-image {
aspect-ratio: 16 / 9;
border-radius: 0.35rem;
object-fit: cover;
width: 96px;
}
.zone-name {
@@ -4465,3 +4482,28 @@ body {
font-size: 0.8rem;
line-height: 1.5;
}
/* ===================== CDN ASSET IMAGES ===================== */
.card-thumbnail {
border-radius: var(--radius);
flex-shrink: 0;
height: 72px;
object-fit: cover;
width: 72px;
}
.story-chapter-banner {
border-radius: var(--radius);
height: 220px;
margin-bottom: 1rem;
object-fit: cover;
width: 100%;
}
.codex-entry-image {
border-radius: var(--radius);
height: 80px;
margin-bottom: 0.5rem;
object-fit: cover;
width: 80px;
}