Add name entry for high scores

Author: rjoken

src/components/Game.tsx

@@ -5,6 +5,7 @@ import { ConnectDevice } from "./ConnectDevice";
 import { GameScene } from "../game/scenes/GameScene";
 import { MenuScene } from "../game/scenes/MenuScene";
 import { GameOverScene } from "../game/scenes/GameOverScene";
+import { NameEntryScene } from "../game/scenes/NameEntryScene";
 
 const Game = () => {
   const [device, setDevice] = useState<HIDDevice | null>(null);
@@ -26,7 +27,7 @@ const Game = () => {
     const initTimer = setTimeout(() => {
       gameRef.current = new Phaser.Game({
         ...config,
-        scene: [MenuScene, GameScene, GameOverScene],
+        scene: [MenuScene, GameScene, GameOverScene, NameEntryScene],
       });
     }, 50);
 

src/game/config.ts

@@ -2,6 +2,7 @@ import Phaser from "phaser";
 import { GameScene } from "./scenes/GameScene";
 import { GameOverScene } from "./scenes/GameOverScene";
 import { MenuScene } from "./scenes/MenuScene";
+import { NameEntryScene } from "./scenes/NameEntryScene";
 
 export const gameConfig: Phaser.Types.Core.GameConfig = {
   type: Phaser.AUTO,
@@ -16,7 +17,7 @@ export const gameConfig: Phaser.Types.Core.GameConfig = {
       debug: false,
     },
   },
-  scene: [MenuScene, GameScene, GameOverScene],
+  scene: [MenuScene, GameScene, GameOverScene, NameEntryScene],
   scale: {
     parent: "game-container",
   },

src/game/scenes/GameOverScene.ts

@@ -31,16 +31,16 @@ export class GameOverScene extends Phaser.Scene {
         .setOrigin(0.5);
 
       this.add
-        .text(width / 2, height / 2 + 16, "Press Enter to continue", {
+        .text(width / 2, height / 2 + 16, "Press Space to continue", {
           fontFamily: "Monogram",
           fontSize: "16px",
           color: "#0f380f",
         })
         .setOrigin(0.5);
     });
 
-    this.input.keyboard?.once("keydown-ENTER", () =>
-      this.scene.start("MenuScene")
+    this.input.keyboard?.once("keydown-SPACE", () =>
+      this.scene.start("NameEntryScene", { score: this.score })
     );
   }
 }

src/game/scenes/MenuScene.ts

@@ -83,7 +83,7 @@ export class MenuScene extends Phaser.Scene {
       this.updateCursor();
     });
 
-    this.input.keyboard?.on("keydown-ENTER", () => {
+    this.input.keyboard?.on("keydown-SPACE", () => {
       this.selectOption();
     });
   }

src/game/scenes/NameEntryScene.ts

@@ -0,0 +1,75 @@
+import Phaser from "phaser";
+
+export class NameEntryScene extends Phaser.Scene {
+  private enteredName: string = "";
+  private score: number = 0;
+  private nameText!: Phaser.GameObjects.Text;
+
+  constructor() {
+    super("NameEntryScene");
+  }
+
+  init(data: { score: number }) {
+    this.score = data.score;
+  }
+
+  create() {
+    const { width, height } = this.cameras.main;
+
+    document.fonts.load('20px "Monogram"').then(() => {
+      this.add
+        .text(width / 2, 10, "ENTER YOUR INITIALS", {
+          fontFamily: "Monogram",
+          fontSize: "20px",
+          color: "#0f380f",
+        })
+        .setOrigin(0.5);
+
+      this.add
+        .text(width / 2, height - 24, "Confirm: SPACE", {
+          fontFamily: "Monogram",
+          fontSize: "20px",
+          color: "#0f380f",
+        })
+        .setOrigin(0.5);
+
+      this.nameText = this.add
+        .text(width / 2, height / 2, `${this.nameText ?? ""}`, {
+          fontFamily: "Monogram",
+          fontSize: "20px",
+          color: "#0f380f",
+        })
+        .setOrigin(0.5);
+
+      this.input.keyboard?.on("keydown", (event: KeyboardEvent) => {
+        const key = event.key;
+        if (/^[a-zA-Z]$/.test(key) && this.enteredName.length < 3) {
+          this.enteredName += key.toUpperCase();
+          this.updateNameDisplay();
+        } else if (event.key === "Backspace" && this.enteredName.length > 0) {
+          this.enteredName = this.enteredName.slice(0, -1);
+          this.updateNameDisplay();
+        } else if (event.key === " ") {
+          this.saveScore();
+          this.scene.start("MenuScene");
+        }
+      });
+    });
+  }
+
+  updateNameDisplay() {
+    this.nameText.setText(this.enteredName);
+  }
+
+  saveScore() {
+    const newEntry = { name: this.enteredName, score: this.score };
+    const stored = localStorage.getItem("switchy-hiscores");
+    let scores = stored ? JSON.parse(stored) : [];
+
+    scores.push(newEntry);
+    scores.sort((a: any, b: any) => b.score - a.score);
+    scores = scores.slice(0, 5); // Keep only top 5 scores
+
+    localStorage.setItem("switchy-hiscores", JSON.stringify(scores));
+  }
+}