Add high scores screen

Author: rjoken

src/components/Game.tsx

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

src/game/config.ts

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

src/game/scenes/HighScoresScene.ts

@@ -0,0 +1,62 @@
+import Phaser from "phaser";
+
+export class HighScoresScene extends Phaser.Scene {
+  constructor() {
+    super("HighScoresScene");
+  }
+
+  create() {
+    const { width, height } = this.cameras.main;
+    const stored = localStorage.getItem("switchy-hiscores");
+    const scores = stored ? JSON.parse(stored) : [];
+
+    document.fonts.load('20px "Monogram"').then(() => {
+      this.add
+        .text(width / 2, 20, "HIGH SCORES", {
+          fontFamily: "Monogram",
+          fontSize: "20px",
+          color: "#0f380f",
+        })
+        .setOrigin(0.5);
+
+      if (scores.length === 0) {
+        this.add
+          .text(width / 2, height / 2, "None yet...\nBe the first!", {
+            fontFamily: "Monogram",
+            fontSize: "20px",
+            color: "#0f380f",
+          })
+          .setOrigin(0.5);
+      } else {
+        scores.forEach((entry: { name: string; score: number }, i: number) => {
+          const y = 40 + i * 12;
+          this.add
+            .text(width / 2 - 40, y, `${i + 1}. ${entry.name}`, {
+              fontFamily: "Monogram",
+              fontSize: "20px",
+              color: "#0f380f",
+            })
+            .setOrigin(0, 0);
+          this.add
+            .text(width / 2 + 40, y, `${entry.score}`, {
+              fontFamily: "Monogram",
+              fontSize: "20px",
+              color: "#0f380f",
+            })
+            .setOrigin(1, 0);
+        });
+      }
+      this.add
+        .text(width / 2, height - 20, "Space to go back!", {
+          fontFamily: "Monogram",
+          fontSize: "20px",
+          color: "#0f380f",
+        })
+        .setOrigin(0.5);
+    });
+
+    this.input.keyboard?.once("keydown-SPACE", () => {
+      this.scene.start("MenuScene");
+    });
+  }
+}

src/game/scenes/MenuScene.ts

@@ -95,10 +95,11 @@ export class MenuScene extends Phaser.Scene {
 
   selectOption() {
     const selected = this.options[this.selectedIndex];
+    this.selectedIndex = 0;
     if (selected === "START GAME") {
       this.scene.start("GameScene");
     } else if (selected === "HI SCORES") {
-      console.log("TODO: Show high scores");
+      this.scene.start("HighScoresScene");
     }
   }
 }

src/game/scenes/NameEntryScene.ts

@@ -11,6 +11,7 @@ export class NameEntryScene extends Phaser.Scene {
 
   init(data: { score: number }) {
     this.score = data.score;
+    this.enteredName = "";
   }
 
   create() {
@@ -34,7 +35,7 @@ export class NameEntryScene extends Phaser.Scene {
         .setOrigin(0.5);
 
       this.nameText = this.add
-        .text(width / 2, height / 2, `${this.nameText ?? ""}`, {
+        .text(width / 2, height / 2, `___`, {
           fontFamily: "Monogram",
           fontSize: "20px",
           color: "#0f380f",
@@ -58,7 +59,8 @@ export class NameEntryScene extends Phaser.Scene {
   }
 
   updateNameDisplay() {
-    this.nameText.setText(this.enteredName);
+    const padded = this.enteredName.padEnd(3, "_");
+    this.nameText.setText(padded);
   }
 
   saveScore() {