Release: merge dev into main

example-games/feudalism/scenes/FeudalismRenderer.ts

@@ -34,6 +34,7 @@ import {
   getBonusRenderOrder,
   getTokenRenderOrder,
 } from './FeudalismRenderHelpers';
+import { createFeudalismActionButton } from '../../../src/ui/Renderer/adapters/FeudalismAdapter';
 
 export interface MarketCallbacks {
   onMarketCardClick: (card: DevelopmentCard) => void;
@@ -714,7 +715,7 @@ export class FeudalismRenderer {
       if (availSame.length > 0) totalW += 30 + 80 + availSame.length * 54;
       let bx = centerX - totalW / 2;
 
-      const takeBtn = this.createActionButton(bx, by, 'Take Tokens', () => callbacks.onTakeTokens());
+      const takeBtn = createFeudalismActionButton(this.scene, bx, by, 'Take Tokens', () => callbacks.onTakeTokens());
       this.actionContainer.add(takeBtn);
       bx += 185;
 
@@ -756,37 +757,16 @@ export class FeudalismRenderer {
       bx += 290;
 
       if (canConfirm) {
-        const confirmBtn = this.createActionButton(bx, by, 'Confirm', () => callbacks.onConfirmDifferent());
+        const confirmBtn = createFeudalismActionButton(this.scene, bx, by, 'Confirm', () => callbacks.onConfirmDifferent());
         this.actionContainer.add(confirmBtn);
         bx += 155;
       }
 
-      const cancelBtn = this.createActionButton(bx, by, 'Cancel', () => callbacks.onCancelSelection());
+      const cancelBtn = createFeudalismActionButton(this.scene, bx, by, 'Cancel', () => callbacks.onCancelSelection());
       this.actionContainer.add(cancelBtn);
     }
   }
 
-  private createActionButton(x: number, y: number, text: string, callback: () => void): Phaser.GameObjects.Container {
-    const btnW = 155;
-    const btnH = 42;
-    const container = this.scene.add.container(x + btnW / 2, y);
-    const bg = this.scene.add.rectangle(0, 0, btnW, btnH, 0x335533, 0.8);
-    bg.setStrokeStyle(1, 0x55aa55);
-    container.add(bg);
-
-    const label = this.scene.add.text(0, 0, text, {
-      fontSize: '17px', fontStyle: 'bold', color: '#88ff88', fontFamily: FONT_FAMILY,
-    }).setOrigin(0.5);
-    container.add(label);
-
-    bg.setInteractive({ useHandCursor: true });
-    bg.on('pointerdown', callback);
-    bg.on('pointerover', () => bg.setStrokeStyle(2, 0xffdd44));
-    bg.on('pointerout', () => bg.setStrokeStyle(1, 0x55aa55));
-
-    return container;
-  }
-
   private isValidTokenSelection(): boolean {
     if (this.selectedTokens.length === 0) return false;
     if (new Set(this.selectedTokens).size !== this.selectedTokens.length) return false;

example-games/gym/scenes/GymAudioFeedbackScene.ts

@@ -23,6 +23,7 @@ import {
 import type { SoundPlayer, EventSoundMapping } from '../../../src/core-engine';
 import { popTextOrIcon } from '../../../src/ui/popTextOrIcon';
 import { GAME_W } from '../../../src/ui/constants';
+import { createHudText } from '../../../src/ui/Renderer';
 
 /** A stub SoundPlayer that records play calls instead of producing audio. */
 class StubSoundPlayer implements SoundPlayer {
@@ -132,14 +133,10 @@ export class GymAudioFeedbackScene extends GymSceneBase {
     this.addButton(cx + 220, y, '[ Celebrate ]', () => this.triggerCelebration());
 
     y += 50;
-    this.statusText = this.add.text(cx, y, this.statusString(), {
-      fontSize: '16px',
-      color: '#ffffff',
-      fontFamily: 'monospace',
-    }).setOrigin(0.5);
+    this.statusText = createHudText(this, cx, y, this.statusString(), '#ffffff', { fontSize: '16px' }).setOrigin(0.5);
 
     y += 30;
-    this.addLabel(cx, y, '── Sound Call Log ──', { fontSize: '12px', color: '#669966' }).setOrigin(0.5);
+    createHudText(this, cx, y, '── Sound Call Log ──', '#669966', { fontSize: '12px' }).setOrigin(0.5);
   }
 
   private statusString(): string {
@@ -296,11 +293,7 @@ export class GymAudioFeedbackScene extends GymSceneBase {
     this.callLogTexts = [];
     const baseY = 250;
     for (let i = 0; i < this.callLog.length; i++) {
-      const txt = this.add.text(40, baseY + i * 17, this.callLog[i], {
-        fontSize: '11px',
-        color: '#aaddaa',
-        fontFamily: 'monospace',
-      });
+      const txt = createHudText(this, 40, baseY + i * 17, this.callLog[i], '#aaddaa', { fontSize: '11px' });
       this.callLogTexts.push(txt);
     }
   }

example-games/gym/scenes/GymDeckRngScene.ts

@@ -18,6 +18,7 @@ import type { Card } from '../../../src/card-system/Card';
 import { createSeededRng } from '../../../src/core-engine/SeededRng';
 import { GAME_W, CARD_W, CARD_H } from '../../../src/ui/constants';
 import { preloadCardAssets, getCardTexture, ensureCardTextureFallbacks } from '../../../src/ui/CardTextureHelpers';
+import { createHudText } from '../../../src/ui/Renderer';
 
 /** Default seed for deterministic demonstrations. */
 const DEFAULT_SEED = 42;
@@ -78,11 +79,7 @@ export class GymDeckRngScene extends GymSceneBase {
     let y = controlsAnchor?.y ?? 60;
 
     this.addLabel(cx, y, 'Seed:');
-    this.seedText = this.add.text(cx + 50, y, String(this.seed), {
-      fontSize: '16px',
-      color: '#ffffff',
-      fontFamily: 'monospace',
-    });
+    this.seedText = createHudText(this, cx + 50, y, String(this.seed), '#ffffff', { fontSize: '16px' });
 
     this.addButton(cx + 180, y, '[ -1 ]', () => this.adjustSeed(-1));
     this.addButton(cx + 240, y, '[ +1 ]', () => this.adjustSeed(1));
@@ -94,7 +91,7 @@ export class GymDeckRngScene extends GymSceneBase {
     });
 
     // ── Status ───────────────────────────────────────────
-    this.statusText = this.addLabel(cx + 600, y, '52 cards displayed', { fontSize: '16px', color: '#88ff88' });
+    this.statusText = createHudText(this, cx + 600, y, '52 cards displayed', '#88ff88', { fontSize: '16px' });
 
     // ── Initialize deck, shuffle with default seed, and render ──
     this.seed = DEFAULT_SEED;

example-games/gym/scenes/GymGraphicsLightingSpikeScene.ts

@@ -16,6 +16,7 @@
 
 import { GymSceneBase } from './GymSceneBase';
 import { GAME_W } from '../../../src/ui/constants';
+import { createHudText } from '../../../src/ui/Renderer';
 
 export const GYM_GRAPHICS_LIGHTING_SPIKE_KEY = 'GymGraphicsLightingSpikeScene';
 
@@ -101,16 +102,14 @@ export class GymGraphicsLightingSpikeScene extends GymSceneBase {
       // Show fallback sprites without lighting
       this.add.image(cx - 150, y + 120, 'lighting-sprite-a');
       this.add.image(cx + 150, y + 120, 'lighting-sprite-b');
-      this.add.text(cx, y + 120, 'Lighting unavailable\n(showing fallback sprites)', {
+      createHudText(this, cx, y + 120, 'Lighting unavailable\n(showing fallback sprites)', '#ff8844', {
         fontSize: '12px',
-        color: '#ff8844',
-        fontFamily: 'monospace',
         align: 'center',
       }).setOrigin(0.5);
     }
 
     y += 260;
-    this.addLabel(cx, y, '── Findings & Event Log ──', { fontSize: '12px', color: '#669966' }).setOrigin(0.5);
+    createHudText(this, cx, y, '── Findings & Event Log ──', '#669966', { fontSize: '12px' }).setOrigin(0.5);
 
     // Record findings
     this.logEvent('--- Lighting Spike Findings ---');
@@ -170,11 +169,7 @@ export class GymGraphicsLightingSpikeScene extends GymSceneBase {
     this.logTexts = [];
     const baseY = 370;
     for (let i = 0; i < this.eventLog.length; i++) {
-      const txt = this.add.text(20, baseY + i * 16, this.eventLog[i], {
-        fontSize: '10px',
-        color: '#aaddaa',
-        fontFamily: 'monospace',
-      });
+      const txt = createHudText(this, 20, baseY + i * 16, this.eventLog[i], '#aaddaa', { fontSize: '10px' });
       this.logTexts.push(txt);
     }
   }

example-games/gym/scenes/GymGraphicsShaderSpikeScene.ts

@@ -15,6 +15,7 @@
 
 import { GymSceneBase } from './GymSceneBase';
 import { GAME_W } from '../../../src/ui/constants';
+import { createHudText } from '../../../src/ui/Renderer';
 
 /** The scene key must match the registration in GymRegistry. */
 export const GYM_GRAPHICS_SHADER_SPIKE_KEY = 'GymGraphicsShaderSpikeScene';
@@ -113,7 +114,7 @@ export class GymGraphicsShaderSpikeScene extends GymSceneBase {
     this.addButton(cx + 120, y, '[ Attempt Shader ]', () => this.attemptShader());
 
     y += 30;
-    this.addLabel(cx, y, 'Blend: NORMAL | Tint: None', { fontSize: '12px', color: '#88ff88' }).setOrigin(0.5);
+    createHudText(this, cx, y, 'Blend: NORMAL | Tint: None', '#88ff88', { fontSize: '12px' }).setOrigin(0.5);
 
     y += 30;
     // Create sample sprites
@@ -125,7 +126,7 @@ export class GymGraphicsShaderSpikeScene extends GymSceneBase {
     }
 
     y += 200;
-    this.addLabel(cx, y, '── Event Log ──', { fontSize: '12px', color: '#669966' }).setOrigin(0.5);
+    createHudText(this, cx, y, '── Event Log ──', '#669966', { fontSize: '12px' }).setOrigin(0.5);
   }
 
   private cycleTint(): void {
@@ -198,11 +199,7 @@ export class GymGraphicsShaderSpikeScene extends GymSceneBase {
     this.logTexts = [];
     const baseY = 280;
     for (let i = 0; i < this.eventLog.length; i++) {
-      const txt = this.add.text(40, baseY + i * 17, this.eventLog[i], {
-        fontSize: '11px',
-        color: '#aaddaa',
-        fontFamily: 'monospace',
-      });
+      const txt = createHudText(this, 40, baseY + i * 17, this.eventLog[i], '#aaddaa', { fontSize: '11px' });
       this.logTexts.push(txt);
     }
   }

example-games/gym/scenes/GymHandPileScene.ts

@@ -32,6 +32,7 @@ import { moveGameObject } from '../../../src/ui/moveGameObject';
 import { shakeIllegalMove } from '../../../src/ui/shakeIllegalMove';
 import { CARD_H, CARD_W, GAME_H, GAME_W } from '../../../src/ui/constants';
 import { getCardTexture, ensureCardTextureFallbacks, preloadCardAssets } from '../../../src/ui/CardTextureHelpers';
+import { createHudText } from '../../../src/ui/Renderer';
 import type { Card } from '../../../src/card-system/Card';
 
 const HAND_SIZE = 5;
@@ -185,7 +186,7 @@ export class GymHandPileScene extends GymSceneBase {
     this.addButton(cx + 180, y, '[ Reset ]', () => this.reset());
 
     y += 35;
-    this.addLabel(cx, y, '── Event Log ──', { fontSize: '12px', color: '#669966' }).setOrigin(0.5);
+    createHudText(this, cx, y, '── Event Log ──', '#669966', { fontSize: '12px' }).setOrigin(0.5);
 
     this.createArcRadiusSlider();
     this.createSpacingSlider();
@@ -206,11 +207,7 @@ export class GymHandPileScene extends GymSceneBase {
 
     this.arcSliderHandle = this.add.graphics();
 
-    this.arcSliderValueText = this.add.text(0, sliderY - 20, '', {
-      fontSize: '11px',
-      color: '#88ff88',
-      fontFamily: 'monospace',
-    }).setOrigin(0.5);
+    this.arcSliderValueText = createHudText(this, 0, sliderY - 20, '', '#88ff88', { fontSize: '11px' }).setOrigin(0.5);
 
     this.arcSliderHitArea = this.add.zone(0, sliderY, this.ARC_SLIDER_WIDTH + 24, 28)
       .setInteractive({ useHandCursor: true });
@@ -308,11 +305,7 @@ export class GymHandPileScene extends GymSceneBase {
 
     this.spacingSliderHandle = this.add.graphics();
 
-    this.spacingSliderValueText = this.add.text(0, sliderY - 20, '', {
-      fontSize: '11px',
-      color: '#88ff88',
-      fontFamily: 'monospace',
-    }).setOrigin(0.5);
+    this.spacingSliderValueText = createHudText(this, 0, sliderY - 20, '', '#88ff88', { fontSize: '11px' }).setOrigin(0.5);
 
     this.spacingSliderHitArea = this.add.zone(0, sliderY, this.ARC_SLIDER_WIDTH + 24, 28)
       .setInteractive({ useHandCursor: true });
@@ -416,11 +409,7 @@ export class GymHandPileScene extends GymSceneBase {
 
     this.rotationSliderHandle = this.add.graphics();
 
-    this.rotationSliderValueText = this.add.text(0, sliderY - 20, '', {
-      fontSize: '11px',
-      color: '#88ff88',
-      fontFamily: 'monospace',
-    }).setOrigin(0.5);
+    this.rotationSliderValueText = createHudText(this, 0, sliderY - 20, '', '#88ff88', { fontSize: '11px' }).setOrigin(0.5);
 
     this.rotationSliderHitArea = this.add.zone(0, sliderY, this.ARC_SLIDER_WIDTH + 24, 28)
       .setInteractive({ useHandCursor: true });
@@ -890,11 +879,7 @@ export class GymHandPileScene extends GymSceneBase {
     this.logTexts = [];
     const baseY = 230;
     for (let i = 0; i < this.eventLog.length; i++) {
-      const txt = this.add.text(40, baseY + i * 17, this.eventLog[i], {
-        fontSize: '11px',
-        color: '#aaddaa',
-        fontFamily: 'monospace',
-      });
+      const txt = createHudText(this, 40, baseY + i * 17, this.eventLog[i], '#aaddaa', { fontSize: '11px' });
       this.logTexts.push(txt);
     }
   }

example-games/gym/scenes/GymOverlayUiScene.ts

@@ -17,6 +17,7 @@ import { GymSceneBase } from './GymSceneBase';
 import { GYM_OVERLAY_UI_KEY } from '../GymRegistry';
 import { GAME_W } from '../../../src/ui/constants';
 import { createOverlayBackground, dismissOverlay } from '../../../src/ui/Overlay';
+import { createHudText } from '../../../src/ui/Renderer';
 
 export class GymOverlayUiScene extends GymSceneBase {
   private overlayObjects: Phaser.GameObjects.GameObject[] | null = null;
@@ -65,11 +66,11 @@ export class GymOverlayUiScene extends GymSceneBase {
     this.addButton(cx + 260, y, '[ Intensity + ]', () => this.adjustIntensity(0.2));
 
     y += 40;
-    this.intensityText = this.addLabel(cx, y, 'Feedback Intensity: 1.0', { fontSize: '16px', color: '#88ff88' });
+    this.intensityText = createHudText(this, cx, y, 'Feedback Intensity: 1.0', '#88ff88', { fontSize: '16px' });
     this.intensityText.setOrigin(0.5);
 
     y += 30;
-    this.addLabel(cx, y, '── Event Log ──', { fontSize: '12px', color: '#669966' }).setOrigin(0.5);
+    createHudText(this, cx, y, '── Event Log ──', '#669966', { fontSize: '12px' }).setOrigin(0.5);
   }
 
   private openOverlay(): void {
@@ -131,11 +132,7 @@ export class GymOverlayUiScene extends GymSceneBase {
         'overlay brightness.',
       ];
       for (let i = 0; i < contentLines.length; i++) {
-        const line = this.add.text(10, i * 16, contentLines[i], {
-          fontSize: '12px',
-          color: '#ccddcc',
-          fontFamily: 'monospace',
-        });
+        const line = createHudText(this, 10, i * 16, contentLines[i], '#ccddcc', { fontSize: '12px' });
         this.maskedContainer.add(line);
       }
       this.logEvent('Overlay opened with GeometryMask content area');
@@ -145,21 +142,20 @@ export class GymOverlayUiScene extends GymSceneBase {
     }
 
     // Add central content text (above the mask)
-    const info = this.add.text(
+    const info = createHudText(
+      this,
       GAME_W / 2,
       240,
       'Overlay Active\nScrollable content below.',
-      { fontSize: '16px', color: '#ffffff', fontFamily: 'monospace', align: 'center' },
+      '#ffffff',
+      { fontSize: '16px', align: 'center' },
     ).setOrigin(0.5);
     info.setDepth(11);
     this.overlayObjects.push(info);
 
     // Dismiss link
-    const dismiss = this.add.text(GAME_W / 2, 520, '[ Dismiss Overlay ]', {
+    const dismiss = createHudText(this, GAME_W / 2, 520, '[ Dismiss Overlay ]', '#88ff88', {
       fontSize: '14px',
-      color: '#88ff88',
-      fontFamily: 'monospace',
-      fontStyle: 'bold',
     }).setOrigin(0.5).setInteractive({ useHandCursor: true });
     dismiss.on('pointerdown', () => {
       this.markOverlayInteraction();
@@ -169,17 +165,17 @@ export class GymOverlayUiScene extends GymSceneBase {
     this.overlayObjects.push(dismiss);
 
     // Intensity controls within overlay
-    const minus = this.add.text(GAME_W / 2 - 80, 550, '[-]', { fontSize: '14px', color: '#ff8877', fontFamily: 'monospace' }).setOrigin(0.5).setInteractive({ useHandCursor: true });
+    const minus = createHudText(this, GAME_W / 2 - 80, 550, '[-]', '#ff8877', { fontSize: '14px' }).setOrigin(0.5).setInteractive({ useHandCursor: true });
     minus.on('pointerdown', () => { this.markOverlayInteraction(); this.adjustIntensity(-0.2); });
     minus.setDepth(11);
     this.overlayObjects.push(minus);
 
-    const intensityLabel = this.add.text(GAME_W / 2, 550, `Intensity: ${this.feedbackIntensity}`, { fontSize: '14px', color: '#ffffff', fontFamily: 'monospace' }).setOrigin(0.5);
+    const intensityLabel = createHudText(this, GAME_W / 2, 550, `Intensity: ${this.feedbackIntensity}`, '#ffffff', { fontSize: '14px' }).setOrigin(0.5);
     intensityLabel.setDepth(11);
     this.overlayObjects.push(intensityLabel);
     this.overlayIntensityText = intensityLabel;
 
-    const plus = this.add.text(GAME_W / 2 + 80, 550, '[+]', { fontSize: '14px', color: '#77ff88', fontFamily: 'monospace' }).setOrigin(0.5).setInteractive({ useHandCursor: true });
+    const plus = createHudText(this, GAME_W / 2 + 80, 550, '[+]', '#77ff88', { fontSize: '14px' }).setOrigin(0.5).setInteractive({ useHandCursor: true });
     plus.on('pointerdown', () => { this.markOverlayInteraction(); this.adjustIntensity(0.2); });
     plus.setDepth(11);
     this.overlayObjects.push(plus);
@@ -276,11 +272,7 @@ export class GymOverlayUiScene extends GymSceneBase {
     this.logTexts = [];
     const baseY = 150;
     for (let i = 0; i < this.eventLog.length; i++) {
-      const txt = this.add.text(40, baseY + i * 17, this.eventLog[i], {
-        fontSize: '11px',
-        color: '#aaddaa',
-        fontFamily: 'monospace',
-      });
+      const txt = createHudText(this, 40, baseY + i * 17, this.eventLog[i], '#aaddaa', { fontSize: '11px' });
       this.logTexts.push(txt);
     }
   }