The leagues, phase 3: the character card, the honours collection, the skill trail

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

src/config.js

@@ -875,12 +875,15 @@ export const DIFFS = [
 // `band` is [lo, hi] inclusive rungs. Court order deliberately rides the bounce table: clay is
 // the slowest surface for the slowest league, grass the first prestige, and the top of the club
 // plays on THE MEMBERS' GROUND. The pace tier is TUNE.leaguePace (gameplay.leaguePace()).
+// `color` is the league's SKILL COLOUR — the identity tint the meta game hands the player:
+// the sprint-dust trail (league 2 up; league 1 keeps the shipped court dust), the character card's
+// accent, the badge row. Each rides its court's own palette so the colour reads as belonging.
 export const LEAGUES = [
-  { id: 1, name: 'THE GRAVEYARD SHIFT', court: 'clay',    band: [1, 4] },
-  { id: 2, name: 'THE CLUB STAFF',      court: 'hard',    band: [5, 8] },
-  { id: 3, name: 'THE OFFICIALS',       court: 'grass',   band: [9, 12] },
-  { id: 4, name: 'THE COACHING STAFF',  court: 'gloom',   band: [13, 15] },
-  { id: 5, name: 'THE HONOURS BOARD',   court: 'members', band: [16, 18] },
+  { id: 1, name: 'THE GRAVEYARD SHIFT', court: 'clay',    band: [1, 4],   color: '#c4652f' },
+  { id: 2, name: 'THE CLUB STAFF',      court: 'hard',    band: [5, 8],   color: '#4f7fc9' },
+  { id: 3, name: 'THE OFFICIALS',       court: 'grass',   band: [9, 12],  color: '#4cae52' },
+  { id: 4, name: 'THE COACHING STAFF',  court: 'gloom',   band: [13, 15], color: '#8fd8ff' },
+  { id: 5, name: 'THE HONOURS BOARD',   court: 'members', band: [16, 18], color: '#e8b23a' },
 ];
 export const leagueOf = lg => LEAGUES[Math.min(LEAGUES.length, Math.max(1, lg | 0 || 1)) - 1];
 

src/gameplay.js

@@ -1,6 +1,6 @@
 // Game logic: ballistics, swings, serves, rules/scoring, AI, and the per-frame update.
 
-import { TUNE, UI, bossArt, APPLAUSE_T, EATEN_BURST, EATEN_SUMMARY, COURT, CONTACT, VOLLEY, ZONE_DEPTH, HOME, P_BOUNDS, TOSS, SHOT_DEPTH, POSE_TIME, BOUNCE_IDLE, zombieH, Z_CHEST , WEAPONS, RACK_MAX , BARREL_WEAPONS, racketStage, matchWound, LADDER } from './config.js';
+import { TUNE, UI, bossArt, APPLAUSE_T, EATEN_BURST, EATEN_SUMMARY, COURT, CONTACT, VOLLEY, ZONE_DEPTH, HOME, P_BOUNDS, TOSS, SHOT_DEPTH, POSE_TIME, BOUNCE_IDLE, zombieH, Z_CHEST , WEAPONS, RACK_MAX , BARREL_WEAPONS, racketStage, matchWound, LADDER, LEAGUES } from './config.js';
 import { P, O, ball, score, crowd, G, court, tour, other, deuceSide, setupPoint, sendBoy, resetState } from './state.js';
 import { audio, pock, swish, whoosh, applause, voice, voiceSeq, sfx, aww, zombieMusic, zombieDuck, menuDuck, splat, shriek, boom } from './audio.js';
 import { haptic } from './haptics.js';
@@ -8,7 +8,7 @@ import { axisX, axisZ, takeFlickAim, touchPX, resetInput } from './input.js';
 import { W } from './render.js'; // runtime-only cycle (render imports gameplay), same pattern as input/zombies
 import { updateDrill } from './drill.js';
 import { endRun, beginRun, MODE_CLASSIC } from './stats.js';
-import { award, beginRunXp } from './profile.js';
+import { award, beginRunXp, prof } from './profile.js';
 import { updateZombies, updateParts, spawnZombie, spawnRacketZombie, spawnMachine, spawnChapterBoss, zombies, gore, explode, meleeSwipe, extras, parts, pellets, shots, playerGore, eatenBleed, resetZombies , firePellet , spawnBarrel , fireBeam , pops, popText } from './zombies.js';
 import { proceedAfterClear, startDuel, startHorde, warnHorde, resolveInterlude, watchdog, updateBench, benchKey, tickMatchFall, placeReceiver } from './beats.js'; // runtime-only cycle: beats calls back into cheer/aside/endBurst/deliverTin/showModal/logSwing
 import { netSendShot, netSendToss, netTick, netJudging, netSendPoint, netSendFault, netClose } from './net.js'; // runtime-only cycle: net calls back into pointTo/fault/tossBall/showModal
@@ -81,13 +81,18 @@ function praiseWord() {
 // grass, grit on the slab. Squarely inside the "blood, fire, smoke" procedural exemption; the ball's
 // bounce and the sidestep both kick it, which is what pins fast feet and fast balls to the ground.
 const DUST_COL = { grass: '#8fa06a', clay: '#c9895a', hard: '#8494a4' };
-function dustPuff(x, z, n = 5, sp = 1) {
+function dustPuff(x, z, n = 5, sp = 1, col = null) {
   for (let k = 0; k < n; k++) parts.push({
     x: x + (Math.random() * 2 - 1) * 0.15, y: 0.05, z: z + (Math.random() * 2 - 1) * 0.1,
     vx: (Math.random() * 2 - 1) * 1.2 * sp, vy: 0.5 + Math.random() * 0.9 * sp,
     vz: (Math.random() * 2 - 1) * 1.2 * sp,
-    t: 0.25 + Math.random() * 0.2, spark: DUST_COL[court.id] || '#98948a' });
+    t: 0.25 + Math.random() * 0.2, spark: col || DUST_COL[court.id] || '#98948a' });
 }
+// THE SKILL TRAIL (the leagues, phase 3): the player's OWN sprint dust wears the league colour —
+// the aura made of motion, never paint (the painted-layer veto). League 1 keeps the shipped court
+// dust: the tint itself is a progression reward. Read off the profile, not G.league, so the gore
+// mode shows your colour too.
+const skillDust = () => prof.lg > 1 ? (LEAGUES[prof.lg - 1] || LEAGUES[0]).color : null;
 
 export function flickTarget(ch, aim) { // exported: render draws the live reticle with it
   const q = pullQuality(aim.mag), f = pullFrac(aim.mag);
@@ -1930,7 +1935,7 @@ export function update(dt) {
     const pSpd = Math.hypot(P.vx, P.vz);
     if (TUNE.trailMin && pSpd > TUNE.trailMin
         && (P.dustAcc = (P.dustAcc || 0) + pSpd * dt) > TUNE.runDustEvery) {
-      P.dustAcc = 0; dustPuff(P.x, P.z, 2, 0.6);
+      P.dustAcc = 0; dustPuff(P.x, P.z, 2, 0.6, skillDust());
     }
   }
   // ...and out of 'rally' he STANDS. 'run' is the one pose nothing else expires (expirePose only

src/main.js

@@ -257,7 +257,8 @@ for (const t of TOURS) {
 // way this can show a wrong colour is if the court would show it too.
 // The sprite sheets load asynchronously and the menu deliberately parks the game loop, so the first
 // draw can land before the art does: retry on a slow poll that stops itself the moment it succeeds.
-const lookCv = document.getElementById('look'), pLookCv = document.getElementById('pLook');
+const lookCv = document.getElementById('look'), pLookCv = document.getElementById('pLook'),
+      cdLookCv = document.getElementById('cdLook');
 let lookPoll = 0;
 function refreshLook() {
   const t = TOURS.find(x => x.id === pickedTour) || TOURS[0];
@@ -265,7 +266,7 @@ function refreshLook() {
   const s = SKINS.find(e => e.id === pickedSkin) || SKINS[0];
   // both live players — the setup screen's and the identity screen's — are the same man and must
   // move together; drawing to whichever is hidden is a no-op-cheap blit
-  const ok = drawLook(lookCv, t, k, s) & drawLook(pLookCv, t, k, s);
+  const ok = drawLook(lookCv, t, k, s) & drawLook(pLookCv, t, k, s) & drawLook(cdLookCv, t, k, s);
   clearTimeout(lookPoll);
   if (!ok) lookPoll = setTimeout(refreshLook, 200);   // sprites still coming; ask again shortly
 }
@@ -350,12 +351,16 @@ function buildPlayer() {
   refreshLook();
 }
 document.getElementById('pDice').addEventListener('click', () => { pName.value = profile.zombieName(); });
-document.getElementById('pBack').addEventListener('click', () => go('splash')); // setup stays open — it re-asks
+document.getElementById('pBack').addEventListener('click', () => {
+  if (playerReturn === 'card') { playerReturn = null; buildCard(); go('card'); return; }
+  go('splash');   // setup stays unset — it re-asks
+});
 document.getElementById('pGo').addEventListener('click', () => {
   // an emptied field is not a refusal to have a name — the die decides, like the prefill did
   stats.saveName(stats.tidyName(pName.value) || profile.zombieName());
   try { localStorage.setItem('tour', pickedTour); } catch {}
   profile.prof.setup = 1; profile.save(); profile.push();
+  if (playerReturn === 'card') { playerReturn = null; buildCard(); go('card'); return; }
   buildTops(); go('mode');
 });
 pName.addEventListener('keydown', e => { if (e.key === 'Enter') document.getElementById('pGo').click(); });
@@ -495,6 +500,58 @@ function buildTrain() {
 }
 document.getElementById('trBack').addEventListener('click', () => go('setup'));
 
+// --- THE CHARACTER CARD (the leagues, phase 3). The splash's level strip is the door. The
+// honours row is a COLLECTION: every slot always visible, earned badges bright, the rest dark —
+// the empty slots are the incentive. The ledger reads the same stats module the BODY COUNT does.
+const fig = (label, val) => `<div class="fig"><b>${label}</b><i>${val}</i></div>`;
+function buildCard() {
+  const lg = leagueOf(profile.prof.lg), pr = profile.progress();
+  document.getElementById('cdName').textContent = stats.savedName() || 'THE WALK-ON';
+  document.getElementById('cdBadge').src = `assets/badge_l${lg.id}.png?v=${SPRV}`;
+  const el = document.getElementById('cdLeague');
+  el.textContent = `LEAGUE ${lg.id} OF ${LEAGUES.length} — ${lg.name}`;
+  el.style.color = lg.color;
+  document.getElementById('cdLevel').textContent =
+    'LEVEL ' + pr.level + (pr.need ? '' : ' · THE CAP');
+  document.getElementById('cdFill').style.width = Math.round(pr.frac * 100) + '%';
+  document.getElementById('cdXp').textContent = profile.prof.xp.toLocaleString('en-GB') + ' XP'
+    + (pr.need ? ' · ' + (pr.need - pr.into).toLocaleString('en-GB') + ' TO LEVEL ' + (pr.level + 1) : '');
+  const row = document.getElementById('cdBadges');
+  row.innerHTML = '';
+  for (const l of LEAGUES) {
+    const img = document.createElement('img');
+    img.src = `assets/badge_l${l.id}.png?v=${SPRV}`;
+    img.title = l.name;
+    // a league's badge is EARNED by finishing it — winning its cup. Being past it means exactly
+    // that; league five has no "past", so its shield lights with the champion's crown.
+    img.className = l.id < profile.prof.lg || (l.id === LEAGUES.length && profile.prof.ch) ? '' : 'dark';
+    row.appendChild(img);
+  }
+  const champ = document.createElement('img');
+  champ.src = `assets/badge_champ.png?v=${SPRV}`;
+  champ.title = 'CHAMPION OF THE DEAD CLUB';
+  champ.className = profile.prof.ch ? '' : 'dark';
+  row.appendChild(champ);
+  const g = stats.read('all', undefined, stats.MODE_GORE),
+        z = stats.read('all', undefined, stats.MODE_MATCH),
+        c = stats.read('all', undefined, stats.MODE_CLASSIC);
+  document.getElementById('cdFigs1').innerHTML =
+    fig('KILLS', (g.kills + z.kills + c.kills).toLocaleString('en-GB'))
+    + fig('MULTI-KILLS', (g.multi + z.multi + c.multi).toLocaleString('en-GB'))
+    + fig('DEATHS', (g.deaths + z.deaths + c.deaths).toLocaleString('en-GB'));
+  document.getElementById('cdFigs2').innerHTML =
+    fig('BEST RUN', g.longest + ' G')
+    + fig('MOST FELLED', z.longest)
+    + fig('RUNS', (g.matches + z.matches + c.matches).toLocaleString('en-GB'));
+  refreshLook();
+}
+document.getElementById('xpRow').addEventListener('click', () => { buildCard(); go('card'); });
+document.getElementById('cdBack').addEventListener('click', () => go('splash'));
+let playerReturn = null;   // EDIT PLAYER borrows the identity screen and comes back to the card
+document.getElementById('cdEdit').addEventListener('click', () => {
+  playerReturn = 'card'; buildPlayer(); go('player');
+});
+
 // --- THE PROMOTION CEREMONY (the leagues). beats.cupWon parks it in the profile module; the tap
 // off the cup summary lands here (maybeRestart) before the title screen. The court tile IS the
 // reward on screen; the name prompt, if the run also earned one, queues behind the ceremony.