Skip to content

Player progression pages

The exported progression guide and global rankings use a small shared visual layer in assets/stylesheets/progression-pages.css and DaisyUI components compiled from web/src/styles/progression-pages-ui.css by the Vite build to assets/vue-apps/progression-pages-ui.css. Keep the shared header, page-width rules, focus treatment, color tokens, and reduced-motion behavior aligned across both pages. Page-specific layout and components live in progression-unlocks.css and global-rankings.css.

The guide remains a Vue applet and owns the skill preview, search, section navigation, level overview, and unlock interactions. The rankings page renders the published JSON snapshot and adds client-side player-name search and leaderboard-type filtering. Both controls filter only the data already supplied to the page; they do not send player queries to a server.

The shared stylesheet and page HTML are packaged into the self-hosted player guide by Gradle. Keep the Gradle resource include list and verifyPlayerGuideJar expected-file list in sync when adding another exported-page asset.

The visual language borrows familiar component patterns from Vue and Tailwind UI kits—clear surface hierarchy, compact controls, readable cards, and keyboard-visible focus—without adding a runtime UI framework or changing the plugin's existing applet contracts.