Merge wl-CG-0MMLZK4WQ13K0R1P-meta-progression-ui: Surface meta-progression in game-over overlay

Author: Sorra

example-games/main-street/MainStreetCards.ts

@@ -952,3 +952,22 @@ export function cardLabel(card: AnyCard): string {
     case 'upgrade':  return `${card.name} ($${card.cost})`;
   }
 }
+
+// ---------------------------------------------------------------------------
+// Card template ID → display-name lookup
+// ---------------------------------------------------------------------------
+
+/**
+ * Read-only map from card template ID (e.g. `'biz-cafe'`) to its display name
+ * (e.g. `'Cafe'`). Built once at module load from the private template arrays.
+ *
+ * This is used by the meta-progression UI to show which cards a newly unlocked
+ * tier adds to the player's card pool.
+ */
+export const CARD_TEMPLATE_NAMES: ReadonlyMap<string, string> = (() => {
+  const m = new Map<string, string>();
+  for (const t of BUSINESS_TEMPLATES) m.set(t.id, t.name);
+  for (const t of EVENT_TEMPLATES)   m.set(t.id, t.name);
+  for (const t of UPGRADE_TEMPLATES) m.set(t.id, t.name);
+  return m;
+})();

example-games/main-street/MainStreetTiers.ts

@@ -233,3 +233,18 @@ export function deriveUnlockedCardIds(unlockedTiers: string[]): string[] {
   }
   return [...allCardIds];
 }
+
+/**
+ * Returns the highest-order `TierDefinition` among the given unlocked tier IDs,
+ * or `undefined` if `unlockedTiers` is empty / contains no valid IDs.
+ */
+export function highestUnlockedTier(
+  unlockedTiers: string[],
+): TierDefinition | undefined {
+  let best: TierDefinition | undefined;
+  for (const id of unlockedTiers) {
+    const def = TIER_DEFINITIONS[id];
+    if (def && (!best || def.order > best.order)) best = def;
+  }
+  return best;
+}

example-games/main-street/scenes/MainStreetScene.ts

@@ -21,6 +21,7 @@ import {
   GRID_SIZE,
   synergyColor,
   cardLabel,
+  CARD_TEMPLATE_NAMES,
   MARKET_BUSINESS_SLOTS,
   MARKET_INVESTMENT_SLOTS,
   INCIDENT_QUEUE_SIZE,
@@ -58,6 +59,11 @@ import {
   loadCampaignProgress,
   updateCampaignAfterRun,
 } from '../MainStreetSaveLoad';
+import {
+  TIER_DEFINITIONS,
+  ORDERED_TIER_DEFINITIONS,
+  highestUnlockedTier,
+} from '../MainStreetTiers';
 
 // ── Constants ───────────────────────────────────────────────
 
@@ -390,12 +396,16 @@ export class MainStreetScene extends CardGameScene {
   /**
    * Updates campaign progress after a completed run (win or loss).
    * Evaluates tier unlocks and persists the updated campaign.
+   * Returns a Promise that resolves when the update is done (or
+   * immediately if no campaign / store is available).
    */
-  private updateCampaignProgress(): void {
-    if (!this.campaign || !this.saveStore) return;
-    updateCampaignAfterRun(this.campaign, this.state, this.saveStore).catch(() => {
-      // Silently ignore save failures -- campaign will be retried next run
-    });
+  private updateCampaignProgress(): Promise<void> {
+    if (!this.campaign || !this.saveStore) return Promise.resolve();
+    return updateCampaignAfterRun(this.campaign, this.state, this.saveStore)
+      .then(() => {})  // discard the returned campaign (already mutated in place)
+      .catch(() => {
+        // Silently ignore save failures -- campaign will be retried next run
+      });
   }
 
   // ── Day flow ────────────────────────────────────────────
@@ -421,9 +431,22 @@ export class MainStreetScene extends CardGameScene {
     // Brief delay then show result / advance
     this.time.delayedCall(400, () => {
       if (result.gameResult !== 'playing') {
-        // Update campaign progress (tier evaluation + persistence)
-        this.updateCampaignProgress();
-        this.showGameOverOverlay(result);
+        // Snapshot tiers before the campaign update mutates them
+        const tiersBefore = this.campaign
+          ? [...this.campaign.unlockedTiers]
+          : [];
+
+        // Update campaign progress (tier evaluation + persistence),
+        // then compute newly unlocked tiers and show the overlay.
+        this.updateCampaignProgress().then(() => {
+          const tiersAfter = this.campaign
+            ? this.campaign.unlockedTiers
+            : [];
+          const newlyUnlockedTiers = tiersAfter.filter(
+            (t) => !tiersBefore.includes(t),
+          );
+          this.showGameOverOverlay(result, newlyUnlockedTiers);
+        });
       } else {
         // Show income feedback briefly then start next turn
         if (result.income && result.income.total > 0) {
@@ -1483,7 +1506,10 @@ export class MainStreetScene extends CardGameScene {
 
   // ── Game Over Overlay ───────────────────────────────────
 
-  private showGameOverOverlay(result: TurnResult): void {
+  private showGameOverOverlay(
+    result: TurnResult,
+    newlyUnlockedTiers: string[] = [],
+  ): void {
     this.uiPhase = 'game-over';
     this.refreshAll();
 
@@ -1496,7 +1522,23 @@ export class MainStreetScene extends CardGameScene {
     const challengeLineCount = activeChallenges.length;
     // Extra height: section header + one line per challenge
     const challengeExtraH = challengeLineCount > 0 ? 24 + challengeLineCount * 20 : 0;
-    const panelH = 360 + challengeExtraH; // extra 40px for difficulty selector
+
+    // ── Meta-progression section heights ──
+    // Tier unlock notifications (conditional)
+    let tierUnlockH = 0;
+    if (newlyUnlockedTiers.length > 0) {
+      tierUnlockH += 26; // section header
+      for (const tierId of newlyUnlockedTiers) {
+        tierUnlockH += 20; // tier name line
+        const def = TIER_DEFINITIONS[tierId];
+        if (def) tierUnlockH += def.newCardIds.length * 16; // card list
+      }
+      tierUnlockH += 8; // bottom padding
+    }
+    // Current tier + campaign stats (always shown when campaign exists)
+    const campaignH = this.campaign ? 80 : 0; // tier indicator + 3 stat lines + spacing
+
+    const panelH = 360 + challengeExtraH + tierUnlockH + campaignH;
 
     // Overlay background
     const overlay = createOverlayBackground(
@@ -1542,30 +1584,103 @@ export class MainStreetScene extends CardGameScene {
     this.overlayObjects.push(breakdown);
 
     // Per-challenge breakdown (below score breakdown)
-    let challengeBottomY = breakdownY + 100; // approximate height of score breakdown text
+    let cursorY = breakdownY + 100; // approximate height of score breakdown text
     if (challengeLineCount > 0) {
       const sectionTitle = this.add.text(
-        GAME_W / 2, challengeBottomY,
+        GAME_W / 2, cursorY,
         'Challenge Details:',
         { fontSize: '14px', fontStyle: 'bold', color: '#aa9977', fontFamily: FONT_FAMILY },
       ).setOrigin(0.5, 0).setDepth(101);
       this.overlayObjects.push(sectionTitle);
-      challengeBottomY += 22;
+      cursorY += 22;
 
       for (const ac of activeChallenges) {
         const done = ac.completed;
         const icon = done ? '\u2713' : '\u2717'; // checkmark or cross
         const lineColor = done ? '#44ff44' : '#ff6666';
         const challengeLine = this.add.text(
-          GAME_W / 2, challengeBottomY,
+          GAME_W / 2, cursorY,
           `${icon}  ${ac.challenge.title}`,
           { fontSize: '13px', color: lineColor, fontFamily: FONT_FAMILY },
         ).setOrigin(0.5, 0).setDepth(101);
         this.overlayObjects.push(challengeLine);
-        challengeBottomY += 20;
+        cursorY += 20;
       }
     }
 
+    // ── Meta-progression: Tier Unlock Notifications ──
+    if (newlyUnlockedTiers.length > 0) {
+      cursorY += 8;
+      const unlockHeader = this.add.text(
+        GAME_W / 2, cursorY,
+        'Tier Unlocked!',
+        { fontSize: '14px', fontStyle: 'bold', color: '#44ff44', fontFamily: FONT_FAMILY },
+      ).setOrigin(0.5, 0).setDepth(101);
+      this.overlayObjects.push(unlockHeader);
+      cursorY += 22;
+
+      for (const tierId of newlyUnlockedTiers) {
+        const def = TIER_DEFINITIONS[tierId];
+        if (!def) continue;
+
+        // Find the milestone record to determine the trigger type
+        const milestone = this.campaign?.milestoneHistory.find(
+          (m) => m.tierId === tierId,
+        );
+        const triggerLabel = milestone?.triggerType === 'challenge'
+          ? '(via challenges)' : '(via reputation)';
+
+        const tierLine = this.add.text(
+          GAME_W / 2, cursorY,
+          `NEW: Tier ${def.order} - ${def.name} ${triggerLabel}`,
+          { fontSize: '13px', color: '#88ff88', fontFamily: FONT_FAMILY },
+        ).setOrigin(0.5, 0).setDepth(101);
+        this.overlayObjects.push(tierLine);
+        cursorY += 20;
+
+        // List the new cards added by this tier
+        for (const cardId of def.newCardIds) {
+          const cardName = CARD_TEMPLATE_NAMES.get(cardId) ?? cardId;
+          const cardLine = this.add.text(
+            GAME_W / 2, cursorY,
+            `  + ${cardName}`,
+            { fontSize: '12px', color: '#aaddaa', fontFamily: FONT_FAMILY },
+          ).setOrigin(0.5, 0).setDepth(101);
+          this.overlayObjects.push(cardLine);
+          cursorY += 16;
+        }
+      }
+    }
+
+    // ── Meta-progression: Current Tier + Campaign Stats ──
+    if (this.campaign) {
+      cursorY += 8;
+      const highest = highestUnlockedTier(this.campaign.unlockedTiers);
+      const tierCount = ORDERED_TIER_DEFINITIONS.length;
+      const tierLabel = highest
+        ? `Current Tier: ${highest.order} / ${tierCount} - ${highest.name}`
+        : 'Current Tier: --';
+      const tierIndicator = this.add.text(
+        GAME_W / 2, cursorY, tierLabel,
+        { fontSize: '14px', fontStyle: 'bold', color: '#ddbb88', fontFamily: FONT_FAMILY },
+      ).setOrigin(0.5, 0).setDepth(101);
+      this.overlayObjects.push(tierIndicator);
+      cursorY += 22;
+
+      const winRate = this.campaign.totalRuns > 0
+        ? Math.round((this.campaign.totalWins / this.campaign.totalRuns) * 100)
+        : 0;
+      const statsLines = [
+        `Runs: ${this.campaign.totalRuns}  |  Wins: ${this.campaign.totalWins}  (${winRate}%)`,
+        `High Score: ${this.campaign.highestScore}  |  Best Rep: ${this.campaign.persistentReputation}`,
+      ];
+      const statsText = this.add.text(
+        GAME_W / 2, cursorY, statsLines.join('\n'),
+        { fontSize: '13px', color: '#bbaa99', fontFamily: FONT_FAMILY, align: 'center', lineSpacing: 4 },
+      ).setOrigin(0.5, 0).setDepth(101);
+      this.overlayObjects.push(statsText);
+    }
+
     // Difficulty selector
     const diffY = panelTop + panelH - 80;
     const diffLabel = this.add.text(