Bricks Shape final score screen

Author: nick-lironi-irvine

games/bricks-shape/src/banners.ts

@@ -47,10 +47,10 @@ export function renderTextBanner(
 ) {
   renderBanner(scene, bannerParams);
 
-  const { x: bannerX = HALF_WIDTH, y: bannerY = QUARTER_HEIGHT } = bannerParams;
+  const { y: bannerY = QUARTER_HEIGHT } = bannerParams;
 
   const { text, yOffset } = textParams;
-  renderText(scene, bannerX, bannerY + yOffset, text);
+  renderText(scene, HALF_WIDTH, bannerY + yOffset, text);
 }
 
 export function renderText(

games/bricks-shape/src/scenes/GameOver.ts

@@ -1,25 +1,49 @@
 import { Scene } from "phaser";
+import { renderTextBanner } from "../banners.ts";
+import {
+  HALF_HEIGHT,
+  HALF_WIDTH,
+  PLAYER_ID_PAIR_DATA_KEY,
+  QUARTER_HEIGHT,
+  WIDTH,
+} from "../constants.ts";
+import { getPlayerOverallScore } from "../scoring.ts";
 
 export class GameOver extends Scene {
-  gameover_text: Phaser.GameObjects.Text;
-
   constructor() {
     super("GameOver");
   }
 
+  preload() {
+    this.load.image("home", "assets/home.png");
+  }
+
   create() {
-    this.gameover_text = this.add
-      .text(512, 384, "Game Over", {
-        fontFamily: "Arial Black",
-        fontSize: 64,
-        color: "#ffffff",
-        stroke: "#000000",
-        strokeThickness: 8,
-        align: "center",
-      })
-      .setOrigin(0.5);
+    renderTextBanner(this, {}, { text: "Ngā mihi!", yOffset: 30 });
+
+    const playerIdPair = this.registry.get(PLAYER_ID_PAIR_DATA_KEY);
+    const playerIds = playerIdPair.split("-");
+    const pairScore = getPlayerOverallScore(playerIdPair);
+    renderTextBanner(
+      this,
+      {
+        x: WIDTH / 8,
+        y: HALF_HEIGHT,
+        height: 120,
+        width: (3 / 4) * WIDTH,
+      },
+      {
+        text: `Your Player IDs: ${playerIds[0]} / ${playerIds[1]}\nCompleted Shapes: ${pairScore.totalShapes} in ${Math.floor(pairScore.totalTime / 60)} minutes ${Math.floor(pairScore.totalTime % 60)} seconds.`,
+        yOffset: 15,
+      },
+    );
+
+    const homeButton = this.add
+      .sprite(HALF_WIDTH, HALF_HEIGHT + QUARTER_HEIGHT, "home")
+      .setDisplaySize(50, 50)
+      .setInteractive();
 
-    this.input.once("pointerdown", () => {
+    homeButton.on("pointerdown", () => {
       this.scene.start("MainMenu");
     });
   }