Merge pull request #17 from Spring-2023-CISC374/menu_and_tutor

upload the menu scene and tour scene

package-lock.json

@@ -8,7 +8,7 @@
 			"name": "phaser3-typescript-vite-template",
 			"version": "0.0.0",
 			"dependencies": {
-				"phaser": "^3.55.2"
+				"phaser": "^3.60.0"
 			},
 			"devDependencies": {
 				"@typescript-eslint/eslint-plugin": "^5.40.0",
@@ -1119,9 +1119,9 @@
 			}
 		},
 		"node_modules/eventemitter3": {
-			"version": "4.0.7",
-			"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
-			"integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.0.tgz",
+			"integrity": "sha512-riuVbElZZNXLeLEoprfNYoDSwTBRR44X3mnhdI1YcnENpWTCsTTVZ2zFuqQcpoyqPQIUXdiPEU0ECAq0KQRaHg=="
 		},
 		"node_modules/fast-deep-equal": {
 			"version": "3.1.3",
@@ -1404,7 +1404,8 @@
 		"node_modules/inherits": {
 			"version": "2.0.3",
 			"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-			"integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw=="
+			"integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==",
+			"dev": true
 		},
 		"node_modules/is-core-module": {
 			"version": "2.10.0",
@@ -1656,15 +1657,6 @@
 				"node": ">=6"
 			}
 		},
-		"node_modules/path": {
-			"version": "0.12.7",
-			"resolved": "https://registry.npmjs.org/path/-/path-0.12.7.tgz",
-			"integrity": "sha512-aXXC6s+1w7otVF9UletFkFcDsJeO7lSZBPUQhtb5O0xJe8LtYhj/GxldoL09bBj9+ZmE2hNoHqQSFMN5fikh4Q==",
-			"dependencies": {
-				"process": "^0.11.1",
-				"util": "^0.10.3"
-			}
-		},
 		"node_modules/path-exists": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -1708,12 +1700,11 @@
 			}
 		},
 		"node_modules/phaser": {
-			"version": "3.55.2",
-			"resolved": "https://registry.npmjs.org/phaser/-/phaser-3.55.2.tgz",
-			"integrity": "sha512-amKXsbb2Ht29dGPKvt1edq3yGGYKtq8373GpJYGKPNPnneYY6MtVTOgjHDuZwtmUyK4v86FugkT3hzW/N4tjxQ==",
+			"version": "3.60.0",
+			"resolved": "https://registry.npmjs.org/phaser/-/phaser-3.60.0.tgz",
+			"integrity": "sha512-IKUy35EnoEVcl2EmJ8WOyK4X8OoxHYdlhZLgRGpNrvD1fEagYffhVmwHcapE/tGiLgyrnezmXIo5RrH2NcrTHw==",
 			"dependencies": {
-				"eventemitter3": "^4.0.7",
-				"path": "^0.12.7"
+				"eventemitter3": "^5.0.0"
 			}
 		},
 		"node_modules/picocolors": {
@@ -1767,14 +1758,6 @@
 				"node": ">= 0.8.0"
 			}
 		},
-		"node_modules/process": {
-			"version": "0.11.10",
-			"resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
-			"integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
-			"engines": {
-				"node": ">= 0.6.0"
-			}
-		},
 		"node_modules/punycode": {
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
@@ -2092,14 +2075,6 @@
 				"punycode": "^2.1.0"
 			}
 		},
-		"node_modules/util": {
-			"version": "0.10.4",
-			"resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz",
-			"integrity": "sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==",
-			"dependencies": {
-				"inherits": "2.0.3"
-			}
-		},
 		"node_modules/vite": {
 			"version": "3.1.8",
 			"resolved": "https://registry.npmjs.org/vite/-/vite-3.1.8.tgz",
@@ -2862,9 +2837,9 @@
 			"dev": true
 		},
 		"eventemitter3": {
-			"version": "4.0.7",
-			"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
-			"integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.0.tgz",
+			"integrity": "sha512-riuVbElZZNXLeLEoprfNYoDSwTBRR44X3mnhdI1YcnENpWTCsTTVZ2zFuqQcpoyqPQIUXdiPEU0ECAq0KQRaHg=="
 		},
 		"fast-deep-equal": {
 			"version": "3.1.3",
@@ -3082,7 +3057,8 @@
 		"inherits": {
 			"version": "2.0.3",
 			"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-			"integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw=="
+			"integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==",
+			"dev": true
 		},
 		"is-core-module": {
 			"version": "2.10.0",
@@ -3274,15 +3250,6 @@
 				"callsites": "^3.0.0"
 			}
 		},
-		"path": {
-			"version": "0.12.7",
-			"resolved": "https://registry.npmjs.org/path/-/path-0.12.7.tgz",
-			"integrity": "sha512-aXXC6s+1w7otVF9UletFkFcDsJeO7lSZBPUQhtb5O0xJe8LtYhj/GxldoL09bBj9+ZmE2hNoHqQSFMN5fikh4Q==",
-			"requires": {
-				"process": "^0.11.1",
-				"util": "^0.10.3"
-			}
-		},
 		"path-exists": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -3314,12 +3281,11 @@
 			"dev": true
 		},
 		"phaser": {
-			"version": "3.55.2",
-			"resolved": "https://registry.npmjs.org/phaser/-/phaser-3.55.2.tgz",
-			"integrity": "sha512-amKXsbb2Ht29dGPKvt1edq3yGGYKtq8373GpJYGKPNPnneYY6MtVTOgjHDuZwtmUyK4v86FugkT3hzW/N4tjxQ==",
+			"version": "3.60.0",
+			"resolved": "https://registry.npmjs.org/phaser/-/phaser-3.60.0.tgz",
+			"integrity": "sha512-IKUy35EnoEVcl2EmJ8WOyK4X8OoxHYdlhZLgRGpNrvD1fEagYffhVmwHcapE/tGiLgyrnezmXIo5RrH2NcrTHw==",
 			"requires": {
-				"eventemitter3": "^4.0.7",
-				"path": "^0.12.7"
+				"eventemitter3": "^5.0.0"
 			}
 		},
 		"picocolors": {
@@ -3351,11 +3317,6 @@
 			"integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
 			"dev": true
 		},
-		"process": {
-			"version": "0.11.10",
-			"resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
-			"integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A=="
-		},
 		"punycode": {
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
@@ -3550,14 +3511,6 @@
 				"punycode": "^2.1.0"
 			}
 		},
-		"util": {
-			"version": "0.10.4",
-			"resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz",
-			"integrity": "sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==",
-			"requires": {
-				"inherits": "2.0.3"
-			}
-		},
 		"vite": {
 			"version": "3.1.8",
 			"resolved": "https://registry.npmjs.org/vite/-/vite-3.1.8.tgz",

package.json

@@ -16,6 +16,6 @@
 		"vite": "^3.1.0"
 	},
 	"dependencies": {
-		"phaser": "^3.55.2"
+		"phaser": "^3.60.0"
 	}
 }

src/HelloWorldScene.ts

@@ -25,7 +25,7 @@ export default class HelloWorldScene extends Phaser.Scene {
     private nextScene?: Phaser.GameObjects.Text;
 
     constructor() {
-        super('hello-world')
+        super('HelloWorldScene')
 
     }
 

src/MainMenu.ts

@@ -0,0 +1,24 @@
+import { TextButtonObject } from "./Objects/TextButtonObject";
+
+export default class MainMenu extends Phaser.Scene {
+    constructor() {
+        super({ key: 'MainMenu' });
+    }
+
+    create() {      
+        this.add.text(this.cameras.main.centerX, this.cameras.main.centerY * 0.25, 'Reflect', { fontSize: '32px' }).setOrigin(0.5, 0.5);
+
+        // creates the text button object to start tutorial & adds to scene 
+        this.add.existing(new TextButtonObject(this, 400, 
+        "Start Tutorial", () => {
+            // starts up the tutorial scene when clicked
+            this.scene.start('TutorialScene');
+        }))       
+        this.add.existing(new TextButtonObject(this, 500, 
+        "Play Game", () => {
+            // starts up the tutorial scene when clicked
+            this.scene.start('HelloWorldScene');
+        }))  
+    }
+
+}

src/Objects/TextButtonObject.ts

@@ -0,0 +1,33 @@
+/**
+ * Button class heavily based on
+ * https://snowbillr.github.io/blog//2018-07-03-buttons-in-phaser-3/
+ */
+// this is a 'text' button 
+// x location middle but you can change constructor to pass x value
+export class TextButtonObject extends Phaser.GameObjects.Text {
+    constructor(scene: Phaser.Scene, y: number, text: string, callback: () => void) {
+        super(scene, scene.scale.width / 2, y, text, {});
+        console.log("in text button - " + text)
+       
+        this.setInteractive({ useHandCursor: true })
+            .on('pointerover', () => this.enterButtonHoverState())
+            .on('pointerout', () => this.enterButtonRestState())
+            .on('pointerdown', () => this.enterButtonActiveState())
+            .on('pointerup', () => {
+                this.enterButtonHoverState();
+                callback();
+            });           
+    }
+
+    enterButtonHoverState() {
+        this.setStyle({ fill: '#ff0' });
+    }
+
+    enterButtonRestState() {
+        this.setStyle({ fill: '#0f0' });
+    }
+
+    enterButtonActiveState() {
+        this.setStyle({ fill: '#0ff' });
+    }
+}

src/TutorialScene.ts

@@ -0,0 +1,26 @@
+import  {TextButtonObject} from './Objects/TextButtonObject';
+
+
+export default class TutorialScene extends Phaser.Scene {
+
+
+    constructor() {
+        super({ key: 'TutorialScene' });
+        console.log("in tutorial scene constructor");
+    }
+
+
+    create() {
+
+
+        this.add.text(0, this.scale.height, "Unlock the gates to get next level.").setOrigin(0, 1);
+
+        // creates the text button to move to a different level & adds to scene 
+        this.add.existing(new TextButtonObject(this, this.scale.height / 2, "Level 1", () => {
+            this.scene.start("HelloWorldScene");
+        }))
+
+        
+    }
+
+}

src/main.ts

@@ -4,6 +4,8 @@ import HelloWorldScene from './HelloWorldScene'
 import TwoScene from "./TwoScene";
 import ThreeScene from "./ThreeScene";
 import FourScene from "./FourScene";
+import MainMenu from "./MainMenu";
+import TutorialScene from './TutorialScene';
 
 const config: Phaser.Types.Core.GameConfig = {
 	type: Phaser.AUTO,
@@ -16,7 +18,7 @@ const config: Phaser.Types.Core.GameConfig = {
 			gravity: { y: 400 },
 		},
 	},
-	scene: [HelloWorldScene, TwoScene, ThreeScene,FourScene], // 4Scene
+	scene: [MainMenu, TutorialScene,HelloWorldScene, TwoScene, ThreeScene,FourScene], // 4Scene
 }
 
 export default new Phaser.Game(config)