brianfertig
/
attention-retro-disorder
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
This commit is contained in:
Brian Fertig 2026-05-09 21:01:13 -06:00
parent d39249e9c8
commit 94d4927cdd
11 changed files with 51 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -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>

10
src/games/burli-kong/BurliKong.js
View File

@ -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);

8
src/games/code-bug-invaders/CodeBugInvaders.js
View File

@ -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, () => {

14
src/games/colorado-defense/ColoradoDefense.js
View File

@ -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, () => {

10
src/games/dot-dude/DotDude.js
View File

@ -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, () => {

10
src/games/smash-out/SmashOut.js
View File

@ -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, () => {

10
src/games/vortex/Vortex.js
View File

@ -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);

8
src/scenes/GameManager.js
View File

@ -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]);

6
src/scenes/GameOver.js
View File

@ -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 });

12
src/scenes/LevelComplete.js
View File

@ -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 });

6
src/scenes/MainMenu.js
View File

@ -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',