feat: replace monospace font with ArcadeClassic across all games and scenes

- Add ArcadeClassic font-face definition in index.html
- Update fontFamily in all Phaser text objects to use 'ArcadeClassic, monospace'
- Applies to all game scenes (BurliKong, CodeBugInvaders, ColoradoDefense, DotDude, SmashOut, Vortex) and UI scenes (GameManager, GameOver, LevelComplete, MainMenu)
- Ensures consistent arcade-style typography throughout the application

index.html

@@ -4,6 +4,10 @@
     <meta charset="utf-8">
     <title>Attention Retro Disorder</title>
     <style>
+        @font-face {
+            font-family: 'ArcadeClassic';
+            src: url('assets/fonts/ArcadeClassic.ttf') format('truetype');
+        }
         * { margin: 0; padding: 0; box-sizing: border-box; }
         body { background: #000; display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; }
     </style>

src/games/burli-kong/BurliKong.js

@@ -528,22 +528,22 @@ export default class BurliKong extends Phaser.Scene {
 
     _buildHUD() {
         this.livesText = this.add.text(340, 16, '', {
-            fontSize: '26px', fontFamily: 'monospace',
+            fontSize: '26px', fontFamily: 'ArcadeClassic, monospace',
             color: '#ff4444', stroke: '#000000', strokeThickness: 4,
         }).setDepth(10);
 
         this.barrelsText = this.add.text(800, 16, '', {
-            fontSize: '26px', fontFamily: 'monospace',
+            fontSize: '26px', fontFamily: 'ArcadeClassic, monospace',
             color: '#ffcc44', stroke: '#000000', strokeThickness: 4,
         }).setOrigin(0.5, 0).setDepth(10);
 
         this.levelText = this.add.text(1580, 16, `LEVEL ${this.level}`, {
-            fontSize: '26px', fontFamily: 'monospace',
+            fontSize: '26px', fontFamily: 'ArcadeClassic, monospace',
             color: '#00ccff', stroke: '#000000', strokeThickness: 4,
         }).setOrigin(1, 0).setDepth(10);
 
         this.hintText = this.add.text(800, 875, 'A: Jump   ↑↓: Climb   Reach the top or clear barrels!', {
-            fontSize: '18px', fontFamily: 'monospace',
+            fontSize: '18px', fontFamily: 'ArcadeClassic, monospace',
             color: '#446688', stroke: '#000000', strokeThickness: 3,
         }).setOrigin(0.5, 1).setDepth(10);
     }
@@ -568,7 +568,7 @@ export default class BurliKong extends Phaser.Scene {
 
         const color = success ? '#00ff44' : '#ff2222';
         this.add.text(800, 440, msg, {
-            fontSize: '80px', fontFamily: 'monospace',
+            fontSize: '80px', fontFamily: 'ArcadeClassic, monospace',
             color, stroke: '#000000', strokeThickness: 6,
         }).setOrigin(0.5).setDepth(20);
 

src/games/code-bug-invaders/CodeBugInvaders.js

@@ -56,7 +56,7 @@ export default class CodeBugInvaders extends Phaser.Scene {
             bg.fillRect(Phaser.Math.Between(0, 1599), Phaser.Math.Between(0, 899), 2, 2);
         }
         this.add.text(800, 15, 'CODE BUG INVADERS', {
-            fontSize: '20px', fontFamily: 'monospace', color: '#00ff88', alpha: 0.7,
+            fontSize: '20px', fontFamily: 'ArcadeClassic, monospace', color: '#00ff88', alpha: 0.7,
         }).setOrigin(0.5, 0);
     }
 
@@ -83,10 +83,10 @@ export default class CodeBugInvaders extends Phaser.Scene {
 
     _buildHUD() {
         this.livesText = this.add.text(800, 40, '♥ '.repeat(this.globalLives).trim(), {
-            fontSize: '24px', fontFamily: 'monospace', color: '#ff4444',
+            fontSize: '24px', fontFamily: 'ArcadeClassic, monospace', color: '#ff4444',
         }).setOrigin(0.5, 0);
         this.bugsText = this.add.text(1580, 40, '', {
-            fontSize: '22px', fontFamily: 'monospace', color: '#00ff88',
+            fontSize: '22px', fontFamily: 'ArcadeClassic, monospace', color: '#00ff88',
         }).setOrigin(1, 0);
     }
 
@@ -247,7 +247,7 @@ export default class CodeBugInvaders extends Phaser.Scene {
         const msg = success ? 'BUGS SQUASHED!' : 'BUGS WIN!';
         const color = success ? '#00ff44' : '#ff2222';
         this.add.text(800, 440, msg, {
-            fontSize: '72px', fontFamily: 'monospace',
+            fontSize: '72px', fontFamily: 'ArcadeClassic, monospace',
             color, stroke: '#000000', strokeThickness: 5,
         }).setOrigin(0.5).setDepth(20);
         this.time.delayedCall(2200, () => {

src/games/colorado-defense/ColoradoDefense.js

@@ -70,7 +70,7 @@ export default class ColoradoDefense extends Phaser.Scene {
         bg.lineBetween(0, 865, 1600, 865);
         // Title banner
         this.add.text(800, 15, 'COLORADO DEFENSE', {
-            fontSize: '20px', fontFamily: 'monospace', color: '#00ff00', alpha: 0.7,
+            fontSize: '20px', fontFamily: 'ArcadeClassic, monospace', color: '#00ff00', alpha: 0.7,
         }).setOrigin(0.5, 0);
     }
 
@@ -90,20 +90,20 @@ export default class ColoradoDefense extends Phaser.Scene {
     _buildCityLabels() {
         this.cities.forEach(c => {
             c.label = this.add.text(c.x, 871, c.name, {
-                fontSize: '12px', fontFamily: 'monospace', color: '#aaffaa',
+                fontSize: '12px', fontFamily: 'ArcadeClassic, monospace', color: '#aaffaa',
             }).setOrigin(0.5, 0).setDepth(5);
         });
     }
 
     _buildHUD() {
         this.waveText = this.add.text(20, 40, 'WAVE 1', {
-            fontSize: '24px', fontFamily: 'monospace', color: '#00ff00',
+            fontSize: '24px', fontFamily: 'ArcadeClassic, monospace', color: '#00ff00',
         });
         this.livesText = this.add.text(800, 40, '♥ '.repeat(this.globalLives).trim(), {
-            fontSize: '24px', fontFamily: 'monospace', color: '#ff4444',
+            fontSize: '24px', fontFamily: 'ArcadeClassic, monospace', color: '#ff4444',
         }).setOrigin(0.5, 0);
         this.statusText = this.add.text(1580, 40, `CITIES: 6/6\nWAVES: 0/${this.cfg.wavesToPass}`, {
-            fontSize: '22px', fontFamily: 'monospace', color: '#4488ff',
+            fontSize: '22px', fontFamily: 'ArcadeClassic, monospace', color: '#4488ff',
         }).setOrigin(1, 0);
     }
 
@@ -127,7 +127,7 @@ export default class ColoradoDefense extends Phaser.Scene {
         this.waveText.setText(`WAVE ${this.wave}`);
 
         const waveLabel = this.add.text(800, 450, `WAVE ${this.wave}`, {
-            fontSize: '72px', fontFamily: 'monospace', color: '#ffff00',
+            fontSize: '72px', fontFamily: 'ArcadeClassic, monospace', color: '#ffff00',
             stroke: '#885500', strokeThickness: 4,
         }).setOrigin(0.5).setDepth(10);
         this.time.delayedCall(1200, () => waveLabel.destroy());
@@ -283,7 +283,7 @@ export default class ColoradoDefense extends Phaser.Scene {
         const msg = success ? 'COLORADO DEFENDED!' : 'CITIES DESTROYED!';
         const color = success ? '#00ff00' : '#ff2200';
         this.add.text(800, 440, msg, {
-            fontSize: '64px', fontFamily: 'monospace',
+            fontSize: '64px', fontFamily: 'ArcadeClassic, monospace',
             color, stroke: '#000000', strokeThickness: 5,
         }).setOrigin(0.5).setDepth(20);
         this.time.delayedCall(2200, () => {

src/games/dot-dude/DotDude.js

@@ -139,20 +139,20 @@ export default class DotDude extends Phaser.Scene {
     _buildHUD() {
         // Left panel
         this.add.text(250, 80, 'DOT DUDE', {
-            fontSize: '30px', fontFamily: 'monospace', color: '#ffaa00',
+            fontSize: '30px', fontFamily: 'ArcadeClassic, monospace', color: '#ffaa00',
         }).setOrigin(0.5).setDepth(10);
 
         this.livesText = this.add.text(250, 160, '♥ '.repeat(this.globalLives).trim(), {
-            fontSize: '30px', fontFamily: 'monospace', color: '#ff4444',
+            fontSize: '30px', fontFamily: 'ArcadeClassic, monospace', color: '#ff4444',
         }).setOrigin(0.5).setDepth(10);
 
         // Right panel
         this.add.text(1350, 80, 'EAT', {
-            fontSize: '26px', fontFamily: 'monospace', color: '#aaaaaa',
+            fontSize: '26px', fontFamily: 'ArcadeClassic, monospace', color: '#aaaaaa',
         }).setOrigin(0.5).setDepth(10);
 
         this.dotsText = this.add.text(1350, 140, `0 / ${this.cfg.pelletsToPass}`, {
-            fontSize: '36px', fontFamily: 'monospace', color: '#ffff00',
+            fontSize: '36px', fontFamily: 'ArcadeClassic, monospace', color: '#ffff00',
         }).setOrigin(0.5).setDepth(10);
     }
 
@@ -399,7 +399,7 @@ export default class DotDude extends Phaser.Scene {
         const msg = success ? 'ALL DOTS EATEN!' : 'GHOST GOT YOU!';
         const color = success ? '#ffff00' : '#ff4444';
         this.add.text(800, 440, msg, {
-            fontSize: '72px', fontFamily: 'monospace',
+            fontSize: '72px', fontFamily: 'ArcadeClassic, monospace',
             color, stroke: '#000000', strokeThickness: 5,
         }).setOrigin(0.5).setDepth(20);
         this.time.delayedCall(2200, () => {

src/games/smash-out/SmashOut.js

@@ -53,7 +53,7 @@ export default class SmashOut extends Phaser.Scene {
         for (let x = 0; x < 1600; x += 80) bg.lineBetween(x, 0, x, 900);
         for (let y = 0; y < 900; y += 60) bg.lineBetween(0, y, 1600, y);
         this.add.text(800, 15, 'SMASH OUT', {
-            fontSize: '20px', fontFamily: 'monospace', color: '#aaaaff', alpha: 0.7,
+            fontSize: '20px', fontFamily: 'ArcadeClassic, monospace', color: '#aaaaff', alpha: 0.7,
         }).setOrigin(0.5, 0);
     }
 
@@ -86,13 +86,13 @@ export default class SmashOut extends Phaser.Scene {
 
     _buildHUD() {
         this.livesText = this.add.text(800, 40, '♥ '.repeat(this.globalLives).trim(), {
-            fontSize: '24px', fontFamily: 'monospace', color: '#ff4444',
+            fontSize: '24px', fontFamily: 'ArcadeClassic, monospace', color: '#ff4444',
         }).setOrigin(0.5, 0).setDepth(10);
         this.blocksText = this.add.text(1580, 40, '', {
-            fontSize: '22px', fontFamily: 'monospace', color: '#aaaaff',
+            fontSize: '22px', fontFamily: 'ArcadeClassic, monospace', color: '#aaaaff',
         }).setOrigin(1, 0).setDepth(10);
         this.launchHint = this.add.text(800, 820, 'PRESS A TO LAUNCH', {
-            fontSize: '24px', fontFamily: 'monospace', color: '#ffffff',
+            fontSize: '24px', fontFamily: 'ArcadeClassic, monospace', color: '#ffffff',
         }).setOrigin(0.5, 0).setDepth(10);
         this.tweens.add({ targets: this.launchHint, alpha: 0, duration: 600, yoyo: true, repeat: -1 });
     }
@@ -237,7 +237,7 @@ export default class SmashOut extends Phaser.Scene {
         const msg = success ? 'SMASHED IT!' : 'BALL LOST!';
         const color = success ? '#00ff44' : '#ff2222';
         this.add.text(800, 440, msg, {
-            fontSize: '80px', fontFamily: 'monospace',
+            fontSize: '80px', fontFamily: 'ArcadeClassic, monospace',
             color, stroke: '#000000', strokeThickness: 5,
         }).setOrigin(0.5).setDepth(20);
         this.time.delayedCall(2200, () => {

src/games/vortex/Vortex.js

@@ -50,22 +50,22 @@ export default class Vortex extends Phaser.Scene {
         this._drawBackground();
 
         this.killsText = this.add.text(800, 16, '', {
-            fontSize: '26px', fontFamily: 'monospace',
+            fontSize: '26px', fontFamily: 'ArcadeClassic, monospace',
             color: '#00ffff', stroke: '#000000', strokeThickness: 4,
         }).setOrigin(0.5, 0).setDepth(10);
 
         this.shieldsText = this.add.text(20, 16, '', {
-            fontSize: '26px', fontFamily: 'monospace',
+            fontSize: '26px', fontFamily: 'ArcadeClassic, monospace',
             color: '#ffaa00', stroke: '#000000', strokeThickness: 4,
         }).setDepth(10);
 
         this.livesText = this.add.text(1580, 16, '', {
-            fontSize: '26px', fontFamily: 'monospace',
+            fontSize: '26px', fontFamily: 'ArcadeClassic, monospace',
             color: '#ff4444', stroke: '#000000', strokeThickness: 4,
         }).setOrigin(1, 0).setDepth(10);
 
         this.levelText = this.add.text(800, 860, `LEVEL ${this.level}  |  Arrow Keys: Move   A: Fire`, {
-            fontSize: '20px', fontFamily: 'monospace',
+            fontSize: '20px', fontFamily: 'ArcadeClassic, monospace',
             color: '#446688', stroke: '#000000', strokeThickness: 3,
         }).setOrigin(0.5, 1).setDepth(10);
 
@@ -405,7 +405,7 @@ export default class Vortex extends Phaser.Scene {
         const msg = success ? 'VICTORY!' : 'BREACHED!';
         const color = success ? '#00ff44' : '#ff2222';
         this.add.text(800, 440, msg, {
-            fontSize: '80px', fontFamily: 'monospace',
+            fontSize: '80px', fontFamily: 'ArcadeClassic, monospace',
             color, stroke: '#000000', strokeThickness: 6,
         }).setOrigin(0.5).setDepth(20);
 

src/scenes/GameManager.js

@@ -57,20 +57,20 @@ export default class GameManager extends Phaser.Scene {
         const gameName = this._displayName(this.queue[this.queueIndex]);
 
         const levelText = this.add.text(cx, 320, `LEVEL ${this.level}  —  GAME ${gameNum} OF ${total}`, {
-            fontSize: '32px', fontFamily: 'monospace', color: '#888888',
+            fontSize: '32px', fontFamily: 'ArcadeClassic, monospace', color: '#888888',
         }).setOrigin(0.5);
 
         const nameText = this.add.text(cx, 420, gameName, {
-            fontSize: '72px', fontFamily: 'monospace', color: '#00ff00',
+            fontSize: '72px', fontFamily: 'ArcadeClassic, monospace', color: '#00ff00',
             stroke: '#005500', strokeThickness: 4,
         }).setOrigin(0.5);
 
         const livesText = this.add.text(cx, 530, '♥ '.repeat(this.lives).trim(), {
-            fontSize: '40px', fontFamily: 'monospace', color: '#ff4444',
+            fontSize: '40px', fontFamily: 'ArcadeClassic, monospace', color: '#ff4444',
         }).setOrigin(0.5);
 
         const goText = this.add.text(cx, 640, 'GET READY!', {
-            fontSize: '48px', fontFamily: 'monospace', color: '#ffff00',
+            fontSize: '48px', fontFamily: 'ArcadeClassic, monospace', color: '#ffff00',
         }).setOrigin(0.5).setAlpha(0);
 
         this.announcementGroup.addMultiple([levelText, nameText, livesText, goText]);

src/scenes/GameOver.js

@@ -11,16 +11,16 @@ export default class GameOver extends Phaser.Scene {
         const cx = 800, cy = 450;
 
         this.add.text(cx, 340, 'GAME OVER', {
-            fontSize: '96px', fontFamily: 'monospace',
+            fontSize: '96px', fontFamily: 'ArcadeClassic, monospace',
             color: '#ff0000', stroke: '#550000', strokeThickness: 6,
         }).setOrigin(0.5);
 
         this.add.text(cx, 470, `You reached Level ${this.level}`, {
-            fontSize: '36px', fontFamily: 'monospace', color: '#aaaaaa',
+            fontSize: '36px', fontFamily: 'ArcadeClassic, monospace', color: '#aaaaaa',
         }).setOrigin(0.5);
 
         const prompt = this.add.text(cx, 580, 'PRESS SPACE OR CLICK TO RESTART', {
-            fontSize: '28px', fontFamily: 'monospace', color: '#ffffff',
+            fontSize: '28px', fontFamily: 'ArcadeClassic, monospace', color: '#ffffff',
         }).setOrigin(0.5);
 
         this.tweens.add({ targets: prompt, alpha: 0, duration: 600, yoyo: true, repeat: -1 });

src/scenes/LevelComplete.js

@@ -15,21 +15,21 @@ export default class LevelComplete extends Phaser.Scene {
         const cx = 800, cy = 450;
 
         this.add.text(cx, 300, `LEVEL ${this.level} COMPLETE!`, {
-            fontSize: '80px', fontFamily: 'monospace',
+            fontSize: '80px', fontFamily: 'ArcadeClassic, monospace',
             color: '#00ff00', stroke: '#005500', strokeThickness: 4,
         }).setOrigin(0.5);
 
         this.add.text(cx, 420, '♥ '.repeat(this.lives).trim(), {
-            fontSize: '48px', fontFamily: 'monospace', color: '#ff4444',
+            fontSize: '48px', fontFamily: 'ArcadeClassic, monospace', color: '#ff4444',
         }).setOrigin(0.5);
 
         if (this.hasNextLevel) {
             this.add.text(cx, 530, `PREPARE FOR LEVEL ${this.level + 1}`, {
-                fontSize: '40px', fontFamily: 'monospace', color: '#ffff00',
+                fontSize: '40px', fontFamily: 'ArcadeClassic, monospace', color: '#ffff00',
             }).setOrigin(0.5);
 
             const prompt = this.add.text(cx, 650, 'PRESS SPACE OR CLICK TO CONTINUE', {
-                fontSize: '28px', fontFamily: 'monospace', color: '#ffffff',
+                fontSize: '28px', fontFamily: 'ArcadeClassic, monospace', color: '#ffffff',
             }).setOrigin(0.5);
             this.tweens.add({ targets: prompt, alpha: 0, duration: 600, yoyo: true, repeat: -1 });
 
@@ -37,11 +37,11 @@ export default class LevelComplete extends Phaser.Scene {
             this.input.once('pointerdown', () => this._nextLevel());
         } else {
             this.add.text(cx, 530, 'YOU BEAT THE GAME!', {
-                fontSize: '48px', fontFamily: 'monospace', color: '#ffff00',
+                fontSize: '48px', fontFamily: 'ArcadeClassic, monospace', color: '#ffff00',
             }).setOrigin(0.5);
 
             const prompt = this.add.text(cx, 650, 'PRESS SPACE OR CLICK TO RESTART', {
-                fontSize: '28px', fontFamily: 'monospace', color: '#ffffff',
+                fontSize: '28px', fontFamily: 'ArcadeClassic, monospace', color: '#ffffff',
             }).setOrigin(0.5);
             this.tweens.add({ targets: prompt, alpha: 0, duration: 600, yoyo: true, repeat: -1 });
 

src/scenes/MainMenu.js

@@ -54,7 +54,7 @@ export default class MainMenu extends Phaser.Scene {
 
         // "SELECT MODE:" canvas label
         this.add.text(cx, 572, 'SELECT MODE:', {
-            fontSize: '22px', fontFamily: 'monospace', color: '#667799',
+            fontSize: '22px', fontFamily: 'ArcadeClassic, monospace', color: '#667799',
         }).setOrigin(0.5, 1);
 
         // Native HTML <select> overlaid on the canvas
@@ -63,7 +63,7 @@ export default class MainMenu extends Phaser.Scene {
 
         // Blinking start prompt
         const prompt = this.add.text(cx, 690, 'PRESS SPACE OR CLICK TO START', {
-            fontSize: '32px', fontFamily: 'monospace', color: '#ffffff',
+            fontSize: '32px', fontFamily: 'ArcadeClassic, monospace', color: '#ffffff',
         }).setOrigin(0.5).setInteractive({ useHandCursor: true });
 
         this.tweens.add({ targets: prompt, alpha: 0, duration: 600, yoyo: true, repeat: -1 });
@@ -79,7 +79,7 @@ export default class MainMenu extends Phaser.Scene {
         const select = document.createElement('select');
         select.style.cssText = [
             'position: fixed',
-            'font-family: monospace',
+            'font-family: ArcadeClassic, monospace',
             'background: #000c18',
             'color: #00ff88',
             'border: 2px solid #00aa55',