Minigame launch (#29)

* added minigame launch * added return to hospital * hospital placeholder * fixes * map minigames to correct hospitals and return to city in proper spot * must talk to doctor before minigame * allow stopping computer for multiple hospitals * add ugly minigame menu screen * fix minigame menu styling * connect spy zebra to hospital * link zebra catcher minigame * rename to iSpy and update script * remove check if doctor talked to * fix click to be anywhere not text --------- Co-authored-by: Owen Cooke <[email protected]>
owencooke · Mar 25, 2024 · 4969bdb · 4969bdb
1 parent b98f360
commit 4969bdb
Show file tree

Hide file tree

Showing 11 changed files with 431 additions and 286 deletions.
diff --git a/src/game/scenes/City.js b/src/game/scenes/City.js
@@ -1,6 +1,7 @@
 import { Scene, Cameras } from "phaser";
 import { MyPlayer } from "../components/MyPlayer";
 import { startDialogue } from "../components/Dialogue";
+import { startSpecialistScene } from "./hospital/Hospital";
 
 const DOCTOR_SYMBOLS_SCALE = {
     Pediatrician: 0.125,
@@ -17,25 +18,19 @@ export class City extends Scene {
     }
 
     init(data) {
-        // Check if data.playerSpawn is provided and valid
-        if (data.playerSpawn && typeof data.playerSpawn.x === 'number' && typeof data.playerSpawn.y === 'number') {
-            this.playerSpawn = {
-                x: data.playerSpawn.x,
-                y: data.playerSpawn.y,
-            };
-        } else {
-            // Default case: Set a default spawn position if not provided
-            // This can be the initial spawn point or any safe location you prefer
-            this.playerSpawn = {
-                x: 32 * 51, // Example default x position
-                y: 32 * 30, // Example default y position
-            };
+        if (data.doctorType) {
+            this.doctorType = data.doctorType;
         }
     }
-
+
+    preload() {
+        // Load the question mark button image
+        this.load.image("question", "assets/question.png");
+    }
+
     preload() {
         // Load the question mark button image
-        this.load.image('question', 'assets/question.png');
+        this.load.image("question", "assets/question.png");
     }
 
     create() {
@@ -66,47 +61,57 @@ export class City extends Scene {
         this.physics.add.collider(this.player, buildingsLayer);
 
         // Bind door objects to next scene handler
+        const doors = map.createFromObjects("Doors");
+        if (this.doctorType) {
+            doors.forEach((door) => {
+                if (this.doctorType === door.name) {
+                    // this.player.setOrigin(door.x, door.y + 32);
+                    this.player.setX(door.x);
+                    this.player.setY(door.y + 32);
+                }
+            });
+        }
+
         this.physics.add.collider(
             this.player,
-            this.physics.add.staticGroup(map.createFromObjects("Doors")),
+            this.physics.add.staticGroup(doors),
             this.handleEnterDoor,
             null,
             this
         );
 
+        // Insert the button code here
+        let buttonX = this.cameras.main.width - 80; // 30 pixels from the right edge of the camera viewport
+        let buttonY = 80; // 30 pixels from the top of the camera viewport
+        this.questionButton = this.add
+            .image(buttonX, buttonY, "question")
+            .setScrollFactor(0)
+            .setInteractive();
+        this.questionButton.setScale(0.1, 0.1);
+        this.questionButton.setOrigin(0.5, 0.5);
+        this.questionButton.setDepth(100);
+
+        // Adjust the button's position on resize
+        this.scale.on("resize", (gameSize) => {
+            // No need to manually adjust camera size here; it's handled by Phaser
+            this.questionButton.setPosition(this.cameras.main.width - 30, 30);
+        });
 
-    // Insert the button code here
-    let buttonX = this.cameras.main.width - 80; // 30 pixels from the right edge of the camera viewport
-    let buttonY = 80; // 30 pixels from the top of the camera viewport
-    this.questionButton = this.add.image(buttonX, buttonY, 'question').setScrollFactor(0).setInteractive();
-    this.questionButton.setScale(0.1, 0.1);
-    this.questionButton.setOrigin(0.5, 0.5);
-    this.questionButton.setDepth(100);
-
-    // Adjust the button's position on resize
-    this.scale.on('resize', (gameSize) => {
-        // No need to manually adjust camera size here; it's handled by Phaser
-        this.questionButton.setPosition(this.cameras.main.width - 30, 30);
-    });
+        this.questionButton.on("pointerdown", () => {
+            console.log("Question button clicked!");
 
-    this.questionButton.on('pointerdown', () => {
-        console.log('Question button clicked!');
-
-        // Capture the player's current position
-        const playerPosition = { x: this.player.x, y: this.player.y };
+            // Capture the player's current position
+            const playerPosition = { x: this.player.x, y: this.player.y };
 
-        // Transition to the Rules scene, passing the player's current position
-        this.scene.start('Rules', { playerSpawn: playerPosition });
-    });
+            // Transition to the Rules scene, passing the player's current position
+            this.scene.start("Rules", { playerSpawn: playerPosition });
+        });
 
         map.createLayer("Roofs", exteriors, 0, 0);
         map.createLayer("RoofDecor", exteriors, 0, 0);
 
         // Setup doctor symbols for buildings
-        let doorsGroup = this.physics.add.staticGroup(
-            map.createFromObjects("Doctor Symbols")
-        );
-        doorsGroup.getChildren().forEach((door) => {
+        map.createFromObjects("Doctor Symbols").forEach((door) => {
             door.setTexture(door.name);
             door.setScale(DOCTOR_SYMBOLS_SCALE[door.name]);
         }, this);
@@ -140,13 +145,9 @@ export class City extends Scene {
     handleEnterDoor(_, door) {
         this.allowMovement = false;
         const doctorType = door.name;
-        const doorPosition = { x: door.x, y: door.y };
         this.cameras.main.fadeOut(250, 0, 0, 0);
         this.cameras.main.once(Cameras.Scene2D.Events.FADE_OUT_COMPLETE, () =>
-            this.scene.start("Hospital", {
-                doctorType,
-                doorPosition,
-            })
+            startSpecialistScene(this, doctorType)
         );
     }
 }

diff --git a/src/game/scenes/Maze.js b/src/game/scenes/Maze.js
@@ -1,5 +1,6 @@
 import { Scene } from "phaser";
 import { MyPlayer } from "../components/MyPlayer";
+import { startSpecialistScene } from "./hospital/Hospital";
 
 export class Maze extends Scene {
     constructor() {
@@ -73,6 +74,7 @@ export class Maze extends Scene {
             map.heightInPixels
         );
         this.cameras.main.startFollow(this.player);
+        this.cameras.main.setZoom(1.5);
 
         this.homeButton = this.add
             .image(this.cameras.main.width - 32, 32, "home")
@@ -81,10 +83,10 @@ export class Maze extends Scene {
             .setScale(0.2)
             .setInteractive();
 
-        this.scale.on("resize", (gameSize) => {
-            this.cameras.main.setSize(gameSize.width, gameSize.height);
-            this.homeButton.setPosition(this.cameras.main.width - 32, 32);
-        });
+        // this.scale.on("resize", (gameSize) => {
+        //     this.cameras.main.setSize(gameSize.width, gameSize.height);
+        //     this.homeButton.setPosition(this.cameras.main.width - 32, 32);
+        // });
 
         this.homeButton.on("pointerover", () => {
             this.game.canvas.style.cursor = "pointer";
@@ -95,7 +97,7 @@ export class Maze extends Scene {
         });
 
         this.homeButton.on("pointerdown", () => {
-            this.scene.start("City");
+            startSpecialistScene(this, "Neurologist");
         });
 
         this.cursors = this.input.keyboard.createCursorKeys();
@@ -125,7 +127,7 @@ export class Maze extends Scene {
             1000,
             () => {
                 message.destroy();
-                this.scene.start("City");
+                startSpecialistScene(this, "Neurologist");
             },
             [],
             this

diff --git a/src/game/scenes/MinigameMenu.js b/src/game/scenes/MinigameMenu.js
@@ -0,0 +1,83 @@
+import { Scene } from "phaser";
+
+const howToPlay = {
+    TileJump:
+        "Jump up to the next rising layer without falling! Use the left and right arrow keys to move horizontally, and press the spacebar or the up arrow key to jump.",
+    Pong: "Keep the ball up using your head and to prevent the ball from hitting the ground. Move left and right using the arrow keys.",
+    Maze: "Navigate through the maze to reach the zebra-striped goal. Use the arrow keys to move up, down, left, and right.",
+    iSpy: `This exercise is simple: just spot the zebra! Use the mouse to click.\n\n PS: Did you know that the zebra is the symbol of rare diseases? Because When you hear hoofbeats behind you, you don't expect to see a zebra, similar to common rare disease diagnoses.`,
+    ZebraCatcher:
+        "Oh no, the zebras are falling from the sky! Catch them by moving your player with the left and right arrow keys. ",
+};
+
+const textStyle = {
+    fontSize: "24px",
+    fill: "black",
+    align: "center",
+    fontFamily: "'Press Start 2P'",
+};
+
+export class MinigameMenu extends Scene {
+    constructor() {
+        super("MinigameMenu");
+    }
+
+    init(data) {
+        this.minigame = data.minigame;
+    }
+
+    create() {
+        // Background
+
+        const background = this.add.image(
+            this.cameras.main.width / 2,
+            this.cameras.main.height / 2,
+            "bg"
+        );
+        background.setDisplaySize(
+            this.cameras.main.width,
+            this.cameras.main.height
+        );
+
+        // Title text
+        this.add
+            .text(
+                this.game.config.width / 2,
+                this.game.config.height / 4,
+                this.minigame,
+                { ...textStyle, fontSize: "48px" }
+            )
+            .setOrigin(0.5);
+
+        // Instructions text
+        this.add
+            .text(
+                this.game.config.width / 2,
+                this.game.config.height / 2,
+                howToPlay[this.minigame],
+                {
+                    ...textStyle,
+                    wordWrap: { width: this.game.config.width - 100 },
+                }
+            )
+            .setOrigin(0.5);
+
+        // Click to start text
+        this.add
+            .text(
+                this.game.config.width / 2,
+                (this.game.config.height * 3) / 4,
+                "Click Anywhere or Press Spacebar to Start!",
+                textStyle
+            )
+            .setOrigin(0.5);
+
+        this.input.on("pointerdown", this.startGame, this);
+        this.input.keyboard.on("keydown-SPACE", this.startGame, this);
+    }
+
+    startGame() {
+        this.scene.start(this.minigame);
+    }
+}
+
diff --git a/src/game/scenes/Pong.js b/src/game/scenes/Pong.js
@@ -1,5 +1,5 @@
-import { Scene } from "phaser";
-import Phaser from "phaser";
+import { Scene, Math } from "phaser";
+import { startSpecialistScene } from "./hospital/Hospital";
 
 export class Pong extends Scene {
     constructor() {
@@ -67,7 +67,7 @@ export class Pong extends Scene {
             "worldbounds",
             function (ball) {
                 this.ColliderActivate = true;
-                const angle = Phaser.Math.Between(25, 360);
+                const angle = Math.Between(25, 360);
                 const vec = this.physics.velocityFromAngle(
                     angle,
                     100 + this.ballSpeed
@@ -84,7 +84,7 @@ export class Pong extends Scene {
             function (player, ball) {
                 // Make sure hitbox overlap doesnt give > 10 points
                 if (this.ColliderActivate) {
-                    const angle = Phaser.Math.Between(25, 360);
+                    const angle = Math.Between(25, 360);
                     const vec = this.physics.velocityFromAngle(
                         angle,
                         100 + this.ballSpeed
@@ -188,7 +188,7 @@ export class gameEnd extends Scene {
                 .setOrigin(0.5)
                 .setInteractive();
             continueButton.on("pointerdown", () => {
-                this.scene.start("City");
+                startSpecialistScene(this, "Pulmonologist");
             });
         } else {
             const playButton = this.add

diff --git a/src/game/scenes/SpyGame.js b/src/game/scenes/SpyGame.js