Add title screen

Author: rjoken

public/assets/gfx/maintitle.png

@@ -115,7 +115,7 @@ footer {
 
 @font-face {
   font-family: "Monogram";
-  src: url("fonts/monogram.ttf") format("truetype");
+  src: url("./assets/fonts/monogram.ttf") format("truetype");
 }
 
 .orientation-message {

public/assets/gfx/titlewave.png

@@ -3,6 +3,8 @@ import Phaser from "phaser";
 import { gameConfig } from "../game/config";
 import { ConnectDevice } from "./ConnectDevice";
 import { GameScene } from "../game/scenes/GameScene";
+import { MenuScene } from "../game/scenes/MenuScene";
+import { GameOverScene } from "../game/scenes/GameOverScene";
 
 const Game = () => {
   const [device, setDevice] = useState<HIDDevice | null>(null);
@@ -22,7 +24,10 @@ const Game = () => {
 
     // Small delay to ensure DOM has fully rendered
     const initTimer = setTimeout(() => {
-      gameRef.current = new Phaser.Game(config);
+      gameRef.current = new Phaser.Game({
+        ...config,
+        scene: [MenuScene, GameScene, GameOverScene],
+      });
     }, 50);
 
     // Handle orientation change and resize events

src/App.css

@@ -1,21 +1,22 @@
 import Phaser from "phaser";
 import { GameScene } from "./scenes/GameScene";
 import { GameOverScene } from "./scenes/GameOverScene";
+import { MenuScene } from "./scenes/MenuScene";
 
 export const gameConfig: Phaser.Types.Core.GameConfig = {
   type: Phaser.AUTO,
   backgroundColor: "#9bbc0f",
   width: 160,
   height: 144,
-  zoom: 4,
+  zoom: 6,
   physics: {
     default: "arcade",
     arcade: {
       gravity: { y: 0, x: 0 },
       debug: false,
     },
   },
-  scene: [GameScene, GameOverScene],
+  scene: [MenuScene, GameScene, GameOverScene],
   scale: {
     parent: "game-container",
   },

src/components/Game.tsx

@@ -3,43 +3,49 @@ import Phaser from "phaser";
 export class SpriteAssets {
   static loadSimpleSprites(scene: Phaser.Scene): void {
     if (!scene.textures.exists("screenwipe")) {
-      scene.load.image("screenwipe", "assets/gfx/screenwipe.png");
+      scene.load.image("screenwipe", "./assets/gfx/screenwipe.png");
+    }
+    if (!scene.textures.exists("maintitle")) {
+      scene.load.image("maintitle", "./assets/gfx/maintitle.png");
+    }
+    if (!scene.textures.exists("titlewave")) {
+      scene.load.image("titlewave", "./assets/gfx/titlewave.png");
     }
   }
 
   static loadSpriteSheets(scene: Phaser.Scene): void {
     if (!scene.textures.exists("switchy")) {
-      scene.load.spritesheet("switchy", "assets/gfx/switchy.png", {
+      scene.load.spritesheet("switchy", "./assets/gfx/switchy.png", {
         frameWidth: 16,
         frameHeight: 16,
       });
     }
     if (!scene.textures.exists("briefcase")) {
-      scene.load.spritesheet("briefcase", "assets/gfx/briefcase.png", {
+      scene.load.spritesheet("briefcase", "./assets/gfx/briefcase.png", {
         frameWidth: 16,
         frameHeight: 16,
       });
     }
     if (!scene.textures.exists("mail")) {
-      scene.load.spritesheet("mail", "assets/gfx/mail.png", {
+      scene.load.spritesheet("mail", "./assets/gfx/mail.png", {
         frameWidth: 16,
         frameHeight: 16,
       });
     }
     if (!scene.textures.exists("paper")) {
-      scene.load.spritesheet("paper", "assets/gfx/paper.png", {
+      scene.load.spritesheet("paper", "./assets/gfx/paper.png", {
         frameWidth: 16,
         frameHeight: 16,
       });
     }
     if (!scene.textures.exists("stapler")) {
-      scene.load.spritesheet("stapler", "assets/gfx/stapler.png", {
+      scene.load.spritesheet("stapler", "./assets/gfx/stapler.png", {
         frameWidth: 16,
         frameHeight: 16,
       });
     }
     if (!scene.textures.exists("taxman")) {
-      scene.load.spritesheet("taxman", "assets/gfx/taxman.png", {
+      scene.load.spritesheet("taxman", "./assets/gfx/taxman.png", {
         frameWidth: 32,
         frameHeight: 64,
       });

src/game/config.ts

@@ -17,14 +17,16 @@ export class GameOverScene extends Phaser.Scene {
         .setOrigin(0.5);
 
       this.add
-        .text(width / 2, height / 2 + 10, "Press R to retry", {
+        .text(width / 2, height / 2 + 10, "Press Backspace to go back", {
           fontFamily: "Monogram",
           fontSize: "16px",
           color: "#0f380f",
         })
         .setOrigin(0.5);
     });
 
-    this.input.keyboard?.once("keydown-R", () => this.scene.start("GameScene"));
+    this.input.keyboard?.once("keydown-BACKSPACE", () =>
+      this.scene.start("MenuScene")
+    );
   }
 }

src/game/createSpriteAssets.ts

@@ -0,0 +1,102 @@
+import Phaser from "phaser";
+import { SpriteAssets } from "../createSpriteAssets";
+
+export class MenuScene extends Phaser.Scene {
+  private selectedIndex: number = 0;
+  private options: string[] = ["START GAME", "HI SCORES"];
+  private optionTexts: Phaser.GameObjects.Text[] = [];
+  private cursor!: Phaser.GameObjects.Triangle;
+
+  constructor() {
+    super("MenuScene");
+  }
+
+  preload() {
+    SpriteAssets.loadSimpleSprites(this);
+  }
+
+  create() {
+    const { width, height } = this.cameras.main;
+    this.add.sprite(0, 0, "maintitle").setOrigin(0, 0);
+    this.add.sprite(width, height / 2, "titlewave").setOrigin(1, 0);
+
+    document.fonts.load('16px "Monogram"').then(() => {
+      this.add
+        .text(width / 2, height - 32, "Play with WASD :)", {
+          fontFamily: "Monogram",
+          fontSize: "16px",
+          color: "#0f380f",
+        })
+        .setOrigin(0.5, 0.5);
+      this.add
+        .text(width / 2, height - 16, "2025 heidi@wooting", {
+          fontFamily: "Monogram",
+          fontSize: "14px",
+          color: "#0f380f",
+        })
+        .setOrigin(0.5, 0.5);
+      this.add
+        .text(width / 2, height / 2 - 12, "TAX FRAUD", {
+          fontFamily: "Monogram",
+          fontSize: "20px",
+          color: "#0f380f",
+        })
+        .setOrigin(0.5, 0.5);
+
+      this.options.forEach((label, i) => {
+        const text = this.add
+          .text(width / 2, height / 2 + 8 + i * 16, label, {
+            fontFamily: "Monogram",
+            fontSize: "16px",
+            color: "#0f380f",
+          })
+          .setOrigin(0.5, 0.5);
+        this.optionTexts.push(text);
+      });
+
+      this.cursor = this.add
+        .triangle(
+          width / 2 - 50,
+          this.optionTexts[0].y + 4,
+          0,
+          0,
+          8,
+          4,
+          0,
+          8,
+          0x0f380f
+        )
+        .setOrigin(0.5, 0.75);
+    });
+
+    this.input.keyboard?.on("keydown-W", () => {
+      this.selectedIndex =
+        (this.selectedIndex + this.options.length - 1) % this.options.length;
+      this.updateCursor();
+    });
+
+    this.input.keyboard?.on("keydown-S", () => {
+      this.selectedIndex =
+        (this.selectedIndex + this.options.length + 1) % this.options.length;
+      this.updateCursor();
+    });
+
+    this.input.keyboard?.on("keydown-ENTER", () => {
+      this.selectOption();
+    });
+  }
+
+  updateCursor() {
+    const targetText = this.optionTexts[this.selectedIndex];
+    this.cursor.setY(targetText.y + 4);
+  }
+
+  selectOption() {
+    const selected = this.options[this.selectedIndex];
+    if (selected === "START GAME") {
+      this.scene.start("GameScene");
+    } else if (selected === "HI SCORES") {
+      console.log("TODO: Show high scores");
+    }
+  }
+}