Merge pull request #43 from owencooke/minor-bugs

Final bug fixes

src/game/components/Dialogue.js

@@ -47,7 +47,7 @@ class Dialogue extends TextBox {
     displayDialogue(isAnimated) {
         this.hideDialogue();
         const { name, text } = this.dialogue[this.currentIndex];
-        const dialogue = `${name}:\n ${text}`;
+        const dialogue = name ? `${name}:\n ${text}` : text;
         if (isAnimated) {
             super.displayDialogue(dialogue);
         } else {
@@ -111,3 +111,4 @@ function startDialogue(scene, script, callback) {
 }
 
 export { startDialogue, Dialogue };
+

src/game/components/HUD.js

@@ -20,10 +20,37 @@ class HUD extends GameObjects.Container {
         this.scene = scene;
         this.counters = {};
         this.createCounters();
+        this.createHelpButton();
         scene.add.existing(this);
         this.setScrollFactor(0);
     }
 
+    createHelpButton() {
+        let offset = 64;
+        let buttonX = this.scene.cameras.main.width - offset;
+        let buttonY = offset;
+        this.questionButton = this.scene.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);
+
+        this.questionButton.on("pointerdown", () => {
+            // Transition to the Rules scene, passing the player's current position
+            this.scene.scene.start("Rules", {
+                nextScene: this.scene.scene.key,
+                playerSpawn: {
+                    x: this.scene.player.x,
+                    y: this.scene.player.y,
+                },
+                doctorType: this.scene.doctorType,
+                minigame: this.scene.minigame,
+            });
+        });
+    }
+
     createCounters() {
         let offsetY = 32;
         VALUES.forEach((name) => {

src/game/scenes/City.js

@@ -14,13 +14,15 @@ const DOCTOR_SYMBOLS_SCALE = {
 export class City extends Scene {
     constructor() {
         super("City");
-        this.playerSpawn = { x: 32 * 51, y: 32 * 30 };
     }
 
     init(data) {
         if (data.doctorType) {
             this.doctorType = data.doctorType;
         }
+        if (data.playerSpawn) {
+            this.playerSpawn = data.playerSpawn;
+        }
     }
 
     create() {
@@ -42,24 +44,22 @@ export class City extends Scene {
         buildingsLayer.setCollisionByExclusion([-1]);
 
         // Add player sprite before above layers (roofs)
-        this.player = new MyPlayer(
-            this,
-            this.playerSpawn.x,
-            this.playerSpawn.y,
-            "down"
-        );
+        this.player = new MyPlayer(this, 32 * 51, 32 * 30, "down");
         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.doctorType = null;
+        } else if (this.playerSpawn) {
+            this.player.setX(this.playerSpawn.x);
+            this.player.setY(this.playerSpawn.y);
         }
 
         this.physics.add.collider(
@@ -70,25 +70,6 @@ export class City extends Scene {
             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);
-
-        this.questionButton.on("pointerdown", () => {
-            // 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 });
-        });
-
         map.createLayer("Roofs", exteriors, 0, 0);
         map.createLayer("RoofDecor", exteriors, 0, 0);
 

src/game/scenes/Pong.js

@@ -12,7 +12,7 @@ export class Pong extends Scene {
         super("Pong");
         this.playerSpeed = 375;
         this.currentDirection = "right";
-        this.scoreWin = 50;
+        this.scoreWin = 3;
         this.ballSpeed = 300;
         this.ballSpeedAmp = 20;
         this.scoreCount = 0;
@@ -35,7 +35,7 @@ export class Pong extends Scene {
         );
 
         // Score
-        this.score = this.add.text(10, 0, "0/" + this.scoreWin, {
+        this.score = this.add.text(0, 0, "0/" + this.scoreWin, {
             fontSize: "72px",
             color: "#ffffff",
             fontFamily: "Arial Black",
@@ -99,7 +99,7 @@ export class Pong extends Scene {
                     ball.body.setVelocity(vec.x, vec.y);
 
                     // Score Update
-                    this.scoreCount += 10;
+                    this.scoreCount += 1;
                     this.score.text = this.scoreCount + "/" + this.scoreWin;
                     this.ColliderActivate = false;
 

src/game/scenes/Rules.js

@@ -8,55 +8,90 @@ export class Rules extends Scene {
 
     preload() {
         // Load the question mark button image
-        this.load.image('close', 'assets/close.png');
+        this.load.image("close", "assets/close.png");
+    }
+
+    init(data) {
+        // Store the position data passed from Scene A
+        this.nextScene = data.nextScene;
+        this.playerSpawn = data.playerSpawn;
+        this.doctorType = data.doctorType;
+        this.minigame = data.minigame;
     }
 
     create() {
         // BACKGROUND
-        const background = this.add.image(this.cameras.main.width / 2, this.cameras.main.height / 2, 'background');
-        background.setDisplaySize(this.cameras.main.width, this.cameras.main.height);
+        const background = this.add.image(
+            this.cameras.main.width / 2,
+            this.cameras.main.height / 2,
+            "background"
+        );
+        background.setDisplaySize(
+            this.cameras.main.width,
+            this.cameras.main.height
+        );
+
+        // title
+        this.add
+            .text(
+                this.game.config.width / 2,
+                this.game.config.height / 2 - 64,
+                "How to Play",
+                {
+                    fontSize: "56px",
+                    fill: "white",
+                    align: "center",
+                    fontFamily: "'Press Start 2P'",
+                }
+            )
+            .setOrigin(0.5);
 
         // Hardcoded dialogue text
         const dialogueScript = [
             {
-                "name": "How to play",
-                "text": "1. The main objective of this game is for the user to visit each hospital in the order of the symptoms presented."
+                name: "",
+                text: "1. The main objective of this game is for the user to visit each hospital in the order of the symptoms presented.",
+            },
+            {
+                name: "",
+                text: "2. Move around the city using the arrow keys on your keyboard.",
+            },
+            {
+                name: "",
+                text: "3. To interact with a doctor, press space upon reaching them.",
             },
             {
-                "name": "How to play",
-                "text": "2. Move around the city using the arrow keys on your keyboard."
+                name: "",
+                text: "4. To play the treatment plan minigame suggested by the doctor, go to their computer and press space.",
             },
             {
-                "name": "How to play",
-                "text": "3. To interact with a doctor, press space upon reaching them."
+                name: "",
+                text: "5. Win minigames to increase your Value Meters! Maintaining high levels of Engagement, Integrity, Inclusion, and Collaboration are essential towards understanding the challenges of rare diseases.",
             },
             {
-                "name": "How to play",
-                "text": "4.To play the treatment plan minigame suggested by the doctor, go to their computer and press space.\n Close this window to go back to the game."
-            }
+                name: "",
+                text: "Close this window to return to the game!",
+            },
         ];
 
         // Start the dialogue
-        startDialogue(this, dialogueScript, () => {
-            console.log('Dialogue completed!');
-            // Perform actions after dialogue ends
-        });
+        startDialogue(this, dialogueScript, () => {});
 
-        let buttonX = this.cameras.main.width - 100; // 30 pixels from the right edge of the camera viewport
-        let buttonY = 80; // 30 pixels from the top of the camera viewport
+        let buttonX = this.cameras.main.width - 64;
+        let buttonY = 64;
 
-        const backButton = this.add.image(buttonX, buttonY, 'close').setScrollFactor(0).setInteractive();
+        const backButton = this.add
+            .image(buttonX, buttonY, "close")
+            .setScrollFactor(0)
+            .setInteractive();
 
-        backButton.on('pointerdown', () => {
-            // Assuming 'this.playerSpawn' was stored in init() or create() from passed data
-            this.scene.start('City', { playerSpawn: this.playerSpawn });
+        backButton.on("pointerdown", () => {
+            this.scene.start(this.nextScene, {
+                playerSpawn: this.playerSpawn,
+                doctorType: this.doctorType,
+                minigame: this.minigame,
+            });
         });
     }
-
-    init(data) {
-        // Store the position data passed from Scene A
-        this.playerSpawn = data.playerSpawn;
-    }
-
 }
 

src/game/scenes/TileJump.js

@@ -161,7 +161,7 @@ export class TileJump extends Phaser.Scene {
         this.score += 1;
         this.scoreLabel.text = this.score.toString();
 
-        if (this.score === 5) {
+        if (this.score >= 3) {
             this.score = 0;
             // Display the congratulatory message
             // Create a box sprite as the background for the text

src/game/scenes/ZebraCatcher.js

@@ -21,7 +21,6 @@ export class ZebraCatcher extends Phaser.Scene {
         super("ZebraCatcher");
         this.player = null;
         this.cursor = null;
-        this.playerSpeed = speedDown + 50;
         this.target = null;
         this.points = 0;
         this.textScore = null;

src/game/scenes/hospital/Hospital.js

@@ -14,7 +14,7 @@ class Hospital extends Scene {
     init(data) {
         this.dialogue = script[data.doctorType];
         this.doctorType = data.doctorType;
-        this.minigameScene = data.minigame;
+        this.minigame = data.minigame;
     }
 
     create() {
@@ -75,6 +75,14 @@ class Hospital extends Scene {
         );
         interiorLayer2.setCollisionByExclusion([-1]);
 
+        // Create doctor
+        const doctor = map.getObjectLayer("doctor").objects[0];
+        this.doctor = this.physics.add
+            .staticSprite(doctor.x + layerX, doctor.y + layerY, "doctorA")
+            .setScale(2);
+        this.doctor.setOffset(4, 24);
+        this.doctor.anims.play("doctorA-animation", true);
+
         //Get the object layer made in the map to indicate where the plaer starts when map is loaded
         const startingPoint = map.getObjectLayer("Player").objects[0];
 
@@ -98,14 +106,6 @@ class Hospital extends Scene {
             this
         );
 
-        // Create doctor
-        const doctor = map.getObjectLayer("doctor").objects[0];
-        this.doctor = this.physics.add
-            .staticSprite(doctor.x + layerX, doctor.y + layerY, "doctorA")
-            .setScale(2);
-        this.doctor.setOffset(4, 24);
-        this.doctor.anims.play("doctorA-animation", true);
-
         // Start dialogue upon collision with the doctor
         this.physics.add.collider(
             this.player,
@@ -195,26 +195,27 @@ class Hospital extends Scene {
             callbackScope: this,
             loop: true,
         });
-    this.minigameOverlay = this.physics.add.sprite(
-        this.doctor.x + 200, 
-        this.doctor.y + 70 + 10, 
-        "spacebar"
-        )
-
-    this.minigameOverlay.setScale(0.1)
-    this.minigameOverlay.setVisible(false)
-    this.time.addEvent({callback: ()=>
-        {
-            if (this.physics.overlap(this.player, minigameTriggerZone) === false) {
-                this.minigameOverlay.setVisible(false)
-            }
-        }, 
-        delay: 5, 
-        callbackScope: 
-        this,
-        loop: true
-    })
+        this.minigameOverlay = this.physics.add.sprite(
+            this.doctor.x + 200,
+            this.doctor.y + 70 + 10,
+            "spacebar"
+        );
 
+        this.minigameOverlay.setScale(0.1);
+        this.minigameOverlay.setVisible(false);
+        this.time.addEvent({
+            callback: () => {
+                if (
+                    this.physics.overlap(this.player, minigameTriggerZone) ===
+                    false
+                ) {
+                    this.minigameOverlay.setVisible(false);
+                }
+            },
+            delay: 5,
+            callbackScope: this,
+            loop: true,
+        });
 
         // Enable keyboard input
         this.cursors = this.input.keyboard.createCursorKeys();
@@ -257,7 +258,7 @@ class Hospital extends Scene {
         if (this.cursors.space.isDown && !this.dialogueInProgess) {
             this.minigameOverlay.setVisible(false);
             this.scene.start("MinigameMenu", {
-                minigame: this.minigameScene,
+                minigame: this.minigame,
             });
         }
     }