Made Death Screen better

- Double-Jumps will now be displayed
- Forgot to remove debug score set
- Button press function is now otional
- Made GameOver Screen Navigation better

Author: TFJ5183

public/hud/buttons/jumpsLeft.png

@@ -12,19 +12,19 @@ export class Button {
   keyboardKey?: Input.Keyboard.Key;
   gamepadButtonIndex?: number;
   isFocused: boolean = false;
-  onButtonPressed: Function;
+  onButtonPressed?: Function;
   gamepadCheckActive: boolean = false;
   buttonManager?: ButtonManager;
 
   // Constructor
-  constructor(x: number, y: number, scale: number, image: string, curScene: Scene, onButtonPressed: Function, keyboardKey?: string, gamepadButtonIndex?: number, buttonManager?: ButtonManager) {
+  constructor(x: number, y: number, scale: number, image: string, curScene: Scene, onButtonPressed?: Function, keyboardKey?: string, gamepadButtonIndex?: number, buttonManager?: ButtonManager) {
     //initialise variables
     this.x = x; //x position
     this.y = y; //y position
     this.image = image; //image as string
-    this.scene = curScene; //the scene the button is in (this)
+    this.scene = curScene; //in the scene the button is in (this)
     this.onButtonPressed = onButtonPressed;
-    this.gamepadButtonIndex = gamepadButtonIndex;
+    this.gamepadButtonIndex = gamepadButtonIndex; // does this even work?
     this.buttonManager = buttonManager;
 
     // add buttons to the current scene (just "this" in the scene you implement the buttons)
@@ -80,7 +80,7 @@ export class Button {
 
   activate(): void {
     this.setFocus(true);
-    this.onButtonPressed();
+    if (this.onButtonPressed) this.onButtonPressed();
     // Reset focus after a short delay if not managed by ButtonManager
     if (!this.buttonManager) {
       this.scene.time.delayedCall(200, () => {

src/game/custom_classes/Button.ts

@@ -30,6 +30,7 @@ export class Boot extends Scene {
     this.load.image("button_default", "default.png");
     this.load.image("button_gifts", "gifts.png");
     this.load.image("button_highscore", "highscore.png");
+    this.load.image("button_jumpsLeft", "jumpsLeft.png");
     this.load.image("button_keyboard", "keyboard.png");
     this.load.image("button_leaderboard", "leaderboard.png");
     this.load.image("button_music", "music.png");

src/game/loader/Boot.ts

@@ -9,6 +9,8 @@ import {Controls} from './scenes/Controls.ts';
 import Image = Phaser.GameObjects.Image;
 import {ThatGame} from './thatFolder/ThatGame.ts';
 import {Leaderboard} from './scenes/Leaderboard.ts';
+import Gamepad = Phaser.Input.Gamepad.Gamepad;
+import { get3 } from "./thatFolder/ThatPlayer.ts";
 
 // Config
 const gameW: number = 1024;
@@ -94,11 +96,18 @@ export function displayDebug(scene: Scene): void {
 }
 
 // Adds a Shortcut to exit the current menu
-export function escapeOption(that: Scene): void {
+export function escapeOption(that: Scene, gamepad?: Gamepad): void {
   const escKey = that.input.keyboard?.addKey('ESC');
   escKey?.on('down', () => {
     that.scene.start('mainMenu');
   });
 
+  if (gamepad) {
+    if (get3(gamepad)) {
+      that.scene.start('mainMenu');
+      return;
+    }
+  }
+
   // TODO | add controller 2 -> mainMenu
 }

src/game/main.ts

@@ -54,7 +54,7 @@ export class Controls extends Phaser.Scene {
     // Back button
     this.back_button = new Button(globalConsts.gameWidth * 0.5, globalConsts.gameHeight * 0.25, 4, 'button_back', this, () => {
       this.scene.start('mainMenu')
-    }, 'B', 0, this.buttonManager);
+    }, 'B', 3, this.buttonManager);
 
     // Add navigation instructions
     this.add.text(globalConsts.gameWidth * 0.5, globalConsts.gameHeight * 0.9, 'Drücke B oder ESC zum Zurückkehren', {

src/game/scenes/Controls.ts

@@ -9,6 +9,7 @@ const roleColor: string = '#000000';
 const nameColor: string = '#000000';
 const jsonPath: string = "./src/game/scenes/creditsConfig.json";
 
+// TODO | add "thanks to all testers"
 export class Credits extends Phaser.Scene {
   // Types
   creditTexts: Phaser.GameObjects.Text[];

src/game/scenes/Credits.ts

@@ -1,11 +1,11 @@
 import {Scene} from 'phaser';
 import {displayPlayer, globalConsts} from '../main.ts';
-import {formatTime} from '../thatFolder/ThatPlayer.ts';
+import {formatTime, get1, get3} from '../thatFolder/ThatPlayer.ts';
 import {Button} from '../custom_classes/Button.ts';
 import {ButtonManager} from '../custom_classes/ButtonManager.ts';
 import Text = Phaser.GameObjects.Text;
-import Rectangle = Phaser.GameObjects.Rectangle;
 import {fetchLeaderboard, removeEntry, sortedLeaderboard, sortLeaderboard} from './Leaderboard.ts';
+import Gamepad = Phaser.Input.Gamepad.Gamepad;
 
 // config
 const range: number = 2;
@@ -26,7 +26,9 @@ let leaderboardText: Phaser.GameObjects.Text;
 let gameOverImage: Phaser.GameObjects.Image;
 let saveButton: Button;
 let leaderboardIsLoaded: boolean = false;
+let savedScore: boolean = false;
 let buttonManager: ButtonManager;
+let gamePad: Gamepad;
 
 // Scene class
 export class GameOver extends Scene {
@@ -48,12 +50,6 @@ export class GameOver extends Scene {
     // Creates the button manager
     buttonManager = new ButtonManager(scene);
 
-    // Adds the restart button (invisible but functional for keyboard/gamepad)
-    new Button(globalConsts.gameWidth / 2, globalConsts.gameHeight * 0.85, 1, "button_play", scene, () => {
-      window.location.reload();
-    }, 'ENTER', 2, buttonManager).button.setVisible(false);
-
-
     // GameOver Image
     gameOverImage = this.add.image(512, 250, 'gameOverTitle');
     gameOverImage.setScale(0.2);
@@ -62,45 +58,70 @@ export class GameOver extends Scene {
     leaderboardText = scene.add.text(500, 290, "", style).setOrigin(0, 0);
 
     // gets score
-    const item: string | null = localStorage.getItem("score");
+    const item: string | null = localStorage.getItem("last.score");
     score = parseInt(item ? item : "0", 10);
 
     // Game infos
-    new Button(130, 298, 4, "button_yourScore", this.scene.scene, () => {
-    });
-    this.add.text(245, 290, formatTime(score), style).setOrigin(0, 0);
+    new Button(70, 298, 4, "button_yourScore", this.scene.scene).button.setOrigin(0, 0.5);
+    this.add.text(265, 290, formatTime(score), style).setOrigin(0, 0);
+
+    new Button(70, 338, 4, "button_jumpsLeft", this.scene.scene).button.setOrigin(0, 0.5);
+    this.add.text(265, 330, localStorage.getItem("last.jumpsLeft") ?? "0", style).setOrigin(0, 0);
 
     // Renders leaderboard
     renderLeaderboard().then();
 
+
+    // Adds the restart button
+    new Button(globalConsts.gameWidth * 0.8, globalConsts.gameHeight * 0.85, 5, "button_play", scene, () => exit(), 'ENTER', 3, buttonManager).button.setVisible(true);
+
     // Save score button
-    saveButton = new Button(700, 650, 7, "button_save", scene, () => prompt(), 'S', 0, buttonManager);
-
-    // Clicker
-    const blocker: Rectangle = this.add.rectangle(0, 0, globalConsts.gameWidth, globalConsts.gameHeight, 0x000000, 0)
-      .setOrigin(0)
-      .setInteractive();
-    blocker.setDepth(-1);
-    blocker.once('pointerdown', () => {
-      window.location.reload();
-    });
+    saveButton = new Button(600, 650, 7, "button_save", scene, () => prompt(), 'S', 1, buttonManager);
 
     // Add navigation instructions
-    scene.add.text(globalConsts.gameWidth * 0.67, globalConsts.gameHeight * 0.92, "Press S to save", {
+    scene.add.text(globalConsts.gameWidth * 0.67, globalConsts.gameHeight * 0.92, "Press S or 1 to save", {
       font: "16px " + globalConsts.pixelFont,
       color: "#ffffff",
       align: 'center'
     }).setOrigin(0.5);
 
-    scene.add.text(globalConsts.gameWidth * 0.67, globalConsts.gameHeight * 0.95, "Press ENTER to restart", {
+    scene.add.text(globalConsts.gameWidth * 0.67, globalConsts.gameHeight * 0.95, "Press ENTER or 3 to restart", {
       font: "16px " + globalConsts.pixelFont,
       color: "#ffffff",
       align: 'center'
     }).setOrigin(0.5);
+
+    // Sets gamepad
+    if (this.input.gamepad && this.input.gamepad.gamepads.length > 0) {
+      gamePad = this.input.gamepad.getPad(0);
+    }
   }
+
+  update(): void {
+    // 1 -> Save
+    if (get1(gamePad)) {
+      prompt();
+      return;
+    }
+
+    // 3 -> back
+    if (get3(gamePad)) {
+      exit();
+      return
+    }
+  }
+}
+
+// Exit to the main Menu
+function exit(): void {
+  window.location.reload();
 }
 
+// Prompt to save
 function prompt(): void {
+  // Already saved score | TODO | fix me
+  if (savedScore) return;
+
   // Check if the leaderboard is loaded
   if (!leaderboardIsLoaded) {
     alert("The leaderboard could not be loaded\nAnd therefore no score can be uploaded");
@@ -119,7 +140,7 @@ function prompt(): void {
     return;
   }
 
-  /// Neither does xxx
+  // Neither does xxx
   if (prompt.toLowerCase() == "xxx") {
     alert("xxx doesn't work either");
     return;
@@ -157,9 +178,9 @@ function prompt(): void {
     clearsLeaderboardLine();
     renderLeaderboard();
 
-    // Resets button
+    // Disables button
     saveButton.setImage("button_saved");
-    saveButton.button.removeListener("pointerdown");
+    savedScore = true;
   })
 }
 

src/game/scenes/GameOver.ts

@@ -50,9 +50,10 @@ export class MainMenu extends Scene {
     }
 
     // Add navigation instructions
-    this.add.text(this.gameW * 0.7, this.gameH * 0.9, 'Navigation: Arrow keys, Tab, Space\nor Gamepad D-Pad/Stick', {
+    this.add.text(this.gameW * 0.67, this.gameH * 0.9, 'Navigation: Arrow keys, Tab, Space\nor Gamepad Stick and 2', {
       font: "16px " + globalConsts.pixelFont,
       color: "#000000",
+      lineSpacing: 3,
       align: 'center'
     }).setOrigin(0.5);
   }

src/game/scenes/MainMenu.ts

@@ -192,7 +192,8 @@ export class ThatGame extends Phaser.Scene {
     }
 
     // Saves score
-    localStorage.setItem("score", String(1800)) // this.player.score.toString()
+    localStorage.setItem("last.score", this.player.score.toString());
+    localStorage.setItem("last.jumpsLeft", this.player.jumpLefts.toString());
 
     // Switch du different scene
     this.scene.start("gameOver");