feat: add summoner profile with ranked crests, level borders, and theme lock #21

Merged

toph merged 3 commits from summoners-n-champs into main

2026-03-02 20:38:23 -05:00

toph commented

2026-03-01 15:59:39 -05:00

Owner

⚠️ WIP — Route structure and data plumbing, not final UI

The page content and layout for these routes is still up in the air. This PR sets up the routing, data loading, and infrastructure so the actual UI work can happen on top of it.

Summary

Summoner profile route (/[region]/[name]/[tag]) — loads account, ranked stats, top masteries, match history, profile icon, and ranked crest/level border decoration
Child routes for champion detail and match detail under the summoner tree
Standalone champion route (/champion/[championId]) with splash art, lore, skins, and stats
Global page background system — root layout provides setBackground/clearBackground via context; route-level layouts own cleanup on onDestroy
Image caching — PocketBase-backed cache for ranked crests and level borders with CDN fallback
Isomorphic region utils — decouples region/cluster handling from @fightmegg/riot-api enums so types work on both client and server
Ranked tier + level border helpers — tier ordering, border theme mappings

Infrastructure added

Module	Purpose
`$lib/utils/riot-regions.ts`	Isomorphic LoL region ↔ cluster mapping
`$lib/utils/ranked-tiers.ts`	Tier order + highest-tier helper
`$lib/utils/level-borders.ts`	Level → border theme mapping
`$lib/types/theme.ts`	`RandomSplash`, `PageBackgroundContext`
`$lib/server/image-cache.ts`	PB image cache (fetch + store + fallback)
`$lib/remote/image-cache.remote.ts`	Remote functions for cached emblems/borders
`$lib/remote/data-dragon.remote.ts`	Champion list, DDragon version, splash art

Route structure

(app)/
├── [region]/[name]/[tag]/
│   ├── +layout.svelte          ← owns background cleanup
│   ├── +page.svelte/ts         ← summoner profile
│   ├── champion/[championId]/  ← champion detail (child)
│   └── match/[matchId]/        ← match detail (child)
└── champion/[championId]/
    ├── +layout.svelte          ← owns background cleanup
    └── +page.svelte/ts         ← standalone champion page

## ⚠️ WIP — Route structure and data plumbing, not final UI The page content and layout for these routes is still up in the air. This PR sets up the **routing, data loading, and infrastructure** so the actual UI work can happen on top of it. ## Summary - **Summoner profile route** (`/[region]/[name]/[tag]`) — loads account, ranked stats, top masteries, match history, profile icon, and ranked crest/level border decoration - **Child routes** for champion detail and match detail under the summoner tree - **Standalone champion route** (`/champion/[championId]`) with splash art, lore, skins, and stats - **Global page background system** — root layout provides `setBackground`/`clearBackground` via context; route-level layouts own cleanup on `onDestroy` - **Image caching** — PocketBase-backed cache for ranked crests and level borders with CDN fallback - **Isomorphic region utils** — decouples region/cluster handling from `@fightmegg/riot-api` enums so types work on both client and server - **Ranked tier + level border helpers** — tier ordering, border theme mappings ## Infrastructure added | Module | Purpose | |--------|---------| | `$lib/utils/riot-regions.ts` | Isomorphic LoL region ↔ cluster mapping | | `$lib/utils/ranked-tiers.ts` | Tier order + highest-tier helper | | `$lib/utils/level-borders.ts` | Level → border theme mapping | | `$lib/types/theme.ts` | `RandomSplash`, `PageBackgroundContext` | | `$lib/server/image-cache.ts` | PB image cache (fetch + store + fallback) | | `$lib/remote/image-cache.remote.ts` | Remote functions for cached emblems/borders | | `$lib/remote/data-dragon.remote.ts` | Champion list, DDragon version, splash art | ## Route structure ``` (app)/ ├── [region]/[name]/[tag]/ │ ├── +layout.svelte ← owns background cleanup │ ├── +page.svelte/ts ← summoner profile │ ├── champion/[championId]/ ← champion detail (child) │ └── match/[matchId]/ ← match detail (child) └── champion/[championId]/ ├── +layout.svelte ← owns background cleanup └── +page.svelte/ts ← standalone champion page ```

toph added 1 commit

2026-03-01 15:59:39 -05:00