[iiamlewis]

Resolves #5785

Stacked on #5775, the top of the levels stack (#5726 → #5734 → #5774 → #5775). The base is that PR's branch, so this diff shows only this change. It changes code first added in #5726, but is kept separate so that PR's review isn't disturbed. Part of #5760.

Description:

Five pieces of polish for the end-of-game XP reveal and the level badges, all approved from mockups and prototype clips.

1. A colour and outline for every prestige rank

Today ranks come in groups of three that look nearly identical, e.g. P4 → P5 only adds a gem. Now every rank has its own colour and silhouette:

Rank	Colour	Outline
P1	bronze	plain
P2	silver	four points
P3	jade	laurel
P4	sapphire	eight-point star
P5	amethyst	wings, double rim, star and glow
P6	crimson	tiara
P7	ember	compass rays
P8	gold	sun
P9	diamond	crystal
P10	prismatic	rays, big wings, star and glow

• Telling ranks apart: neighbouring ranks differ in outline as well as colour, so colour-blind players can still tell them apart.
• Milestones: P5 and P10 are the only winged, glowing ranks, marking the middle and final milestones.
• The frame inside the emblem: once a player has prestiged, the inner level frame keeps its level-band shape but takes the rank's colour, so each badge reads as one colour. The number stays white, and P0 is unchanged.
• Legend: gets a stronger crown, with a gold sunburst halo, gems on the points and a glow.
• P tab and spacing: the P tab is tinted to the rank, and winged ranks get a 12% side margin so the wings never touch a name.
• In code:
  • Progression.ts replaces PrestigeTier / prestigeTier() with a per-rank table and prestigeStyle(p), plus prestigeAccent(p).
  • levelBadgeAccent() and the prestige ceremony's colours use the rank colour.
  • data-prestige-tier now holds the rank id.
• Share cards: the share card's emblem art has the matching change in openfrontio/infra#901.

2. The XP bar's leading edge glows while it fills

While the bar fills, its front edge glows and a sheen runs along the fill. It uses ::after / ::before, moved by transform only. It shows only while barAnimate is on, and it's off under reduced motion.

3. A game's level rewards, shown and claimed in the reveal

When the confirmed result (never the provisional one) levels you up, a row shows what those levels paid. It reads rewards / flares from GET /users/@me/xp/:gameId (openfrontio/infra#907, #911):

• One level: "Level 47 reward +100 Caps".
• Several levels: "Levels 45–47 +300 Caps (3 × 100)".
• A milestone: "Level 50 rewards +100 Caps +25 Plutonium".
• A cosmetic unlocked: "Unlocked · Firebird Trail · Boat trail · in your Locker" wipes into the milestone card. On phones it wraps under it.

How the row behaves:

• Arrival: it rises in after the level-up lands, and its amounts count up.
• Claim: it claims only this game's reward ids. It shows "Claiming", then "✓ Claimed" with the balance counting up.
  • On failure: an inline error, and a retry claims only what didn't go through.
  • If the rewards were already claimed, it opens in the claimed state.
• Account refresh: after a game that unlocked a cosmetic, /users/@me is refreshed so the Locker shows it.
• Reduced motion: the final state, without animation.
• Code: GameRewards.ts (sums, claiming, unlock lookup) and GameXpRewardSchema / GameXpFlareSchema. The new fields are optional, so an older API still parses.

4. The nav's XP bar catches up after a game

When a refreshed /users/@me shows more XP, the account menu's bar fills to the end, the badge pops as the new level lands, the bar resets, then it grows to the new progress.

• When it animates: only when XP went up, the menu is on screen, the page is visible and reduced motion is off. First load, a prestige and anything else snap straight to the new value.
• Overlap fix: the badge and avatar now sit in their own row, with the bar only under them. The avatar is 28px while there's a bar, and the email badge moved to the icon's top corner. The 32px avatar used to reach 3px down into the bar. That overlap was already on Show player levels and the XP each game earns #5726.

5. Reduced motion on the "calculating" spinner

The reveal's spinner now has motion-reduce:animate-none.

New en.json keys

All under progression:

• rewards_balance
• rewards_balance_caps
• rewards_claimed
• rewards_claiming
• rewards_each
• rewards_level_many
• rewards_level_one
• rewards_levels
• unlock_in_locker
• unlocked
• unlocked_cosmetic

Screenshots

From this branch at 2x, using the real components. The player and rewards are sample data (Wonder / wonder01). The 24px and 28px rows are mock rows holding the real <level-badge>, because the lobby and leaderboard rows with badges aren't on this stack.

Every rank at 24 / 28 / 64 px:

In list rows and the compact profile card, then the full profile card:

The bar's leading edge while it fills:

clip-bar-edge.mp4

Rewards: one level, several levels, a milestone with an unlock, and claimed:

The full reveal to level 50, the unlock, the rewards row and a Claim:

clip-rewards-claim.mp4

Phone, milestone:

Nav menu at rest, then catching up after a game:

clip-nav-catchup-v2.mp4

Testing

New:

• GameXpRewards.test.ts (18 tests):
  • result only;
  • one, several and milestone;
  • the unlock;
  • Claim calls only this game's ids;
  • claimed, failure and retry, and already claimed;
  • mid-reveal clicks;
  • reduced motion.
• NavAccountCatchUp.test.ts: when it animates or snaps, the fill → pop → reset → grow sequence, the fallback, and the layout (bar inside the badge-and-avatar row; the avatar node is kept).

Updated:

• LevelBadge.test.ts: per-rank outlines and colours, frame tint only once prestiged, tab tint, winged margin, Legend crown.
• GameXpPanelReveal.test.ts: the bar edge class and the spinner.
• ProgressionSchemas.test.ts.
• WinModalXp.test.ts.

Results: npx tsc --noEmit and npm run lint are clean. The translation tests and all of tests/client (277 files, 3,574 tests) pass.

Performance: draw each badge look once (2026-10-05, f09b2aac9)

Benchmarks showed the per-rank emblems made long badge lists slow to draw the first time. Each look (rank, level band, digit count, size class) is now built once as a cached template and cloned per badge. The P10 gradient is one shared definition, not one per badge. <level-badge>'s API is unchanged.

• Pixel-identical: the markup is identical for all 4,224 size × rank × level × Legend combinations, and screenshots of the lineup, the lobby and the profile cards have 0 differing pixels.
• Timings (Chromium production build, 150 badged players, median of 5; measured on a loaded machine, so compare columns, not absolute values):

	main	before	after
Lobby FFA render	2.8 ms	21.5 ms	11.9 ms
Lobby team render	4.4 ms	38.2 ms	23.8 ms
Lobby team, until the next frame	20.7 ms	130 ms	107 ms
Clan members	45.7 ms	76.6 ms	46.7 ms

• Ruled out: a <use> sprite measured slower, because each <use> builds its own hidden copy.
• What's left: most of the remaining first-paint cost is the browser laying out the SVG. A follow-up on Show level badges in the lobby list and in-game player panel #5763 fills badges in after the rows to remove that first-paint hitch.
• Tests: LevelBadge.test.ts +6:
  • one shared gradient and no definitions per badge;
  • the gradient restored after the body is replaced, and inside shadow roots;
  • shared drawings with their own numbers;
  • redraws when level, rank or size changes.

Please complete the following:

• I have added screenshots for all UI updates
• I process any text displayed to the user through translateText() and I've added it to the en.json file
• I have added relevant tests to the test directory

Please put your Discord username so you can be contacted if a bug or regression is found:

Iamlewis

🤖 Generated with Claude Code

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

🗂️ Base branches to auto review (1)

• v\d.*

---

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

• Configuration used: Organization UI
• Review profile: CHILL
• Plan: Advanced
• Run ID: b3d9fbd9-d3ed-4005-bb6e-0dc55fa15a90

---

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

---

_{Comment @coderabbitai help to get the list of available commands.}

[iiamlewis]

Folded into #5774 (GitHub shows this one as merged because its commits are now in #5774's branch). Kept: the glowing XP bar edge, the level rewards row with Claim and the Unlocked card, the nav XP bar catch-up and the spinner reduced-motion fix. Dropped: the per-rank prestige emblems and the cached-template speed-up that came with them. The designer has replaced that emblem design with a unit-icon one, which will come as its own PR, so #5774's badges are main's current ones (LevelBadge.ts is identical to main). Review continues on #5774.

🤖 Generated with Claude Code