Simple Main Menu

added for now - make prettier later

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

src/shattered_sword/Scenes/MainMenu.ts

@@ -1,15 +1,175 @@
 import Scene from "../../Wolfie2D/Scene/Scene";
 import ConfigManager from "../Tools/ConfigManager";
 import SaveManager from "../Tools/SaveManager";
+import Vec2 from "../../Wolfie2D/DataTypes/Vec2";
+import { GameEventType } from "../../Wolfie2D/Events/GameEventType";
+import AnimatedSprite from "../../Wolfie2D/Nodes/Sprites/AnimatedSprite";
+import Button from "../../Wolfie2D/Nodes/UIElements/Button";
+import { UIElementType } from "../../Wolfie2D/Nodes/UIElements/UIElementTypes";
+import Color from "../../Wolfie2D/Utils/Color";
+import Layer from "../../Wolfie2D/Scene/Layer";
+import Label from "../../Wolfie2D/Nodes/UIElements/Label";
+import Levels from "./Levels";
 
 export default class MainMenu extends Scene {
     protected config: ConfigManager;
     protected save: SaveManager;
 
-    // TODO
+    // Layers, for multiple main menu screens
-    startScene(): void {
+    private mainMenu: Layer;
-        this.config = new ConfigManager();
+    private about: Layer;
-        this.save = new SaveManager();
+    private control: Layer;
+    
+
+    animatedSprite: AnimatedSprite;
+
+    loadScene(): void {
+        // Load the menu song
+        //this.load.audio("menu", "hw5_assets/music/menu.mp3");
     }
 
+    //TODO 
+    
+    startScene(): void{
+        this.config = new ConfigManager();
+        this.save = new SaveManager();
+
+
+        // Scene has started, so start playing music
+        //this.emitter.fireEvent(GameEventType.PLAY_SOUND, {key: "menu", loop: true, holdReference: true});
+
+        const center = this.viewport.getCenter();
+
+        // The main menu
+        this.mainMenu = this.addUILayer("mainMenu");
+
+        // Add map button, and give it an event to emit on press
+        const map = this.add.uiElement(UIElementType.BUTTON, "mainMenu", {position: new Vec2(center.x, center.y - 100), text: "Map"});
+        map.size.set(200, 50);
+        map.borderWidth = 2;
+        map.borderColor = Color.WHITE;
+        map.backgroundColor = Color.TRANSPARENT;
+        map.onClickEventId = "map";
+
+
+        // Add about button
+        const about = this.add.uiElement(UIElementType.BUTTON, "mainMenu", {position: new Vec2(center.x, center.y + 100), text: "About"});
+        about.size.set(200, 50);
+        about.borderWidth = 2;
+        about.borderColor = Color.WHITE;
+        about.backgroundColor = Color.TRANSPARENT;
+        about.onClickEventId = "about";
+
+        
+        // Add control button, and give it an event to emit on press
+        const control = this.add.uiElement(UIElementType.BUTTON, "mainMenu", {position: new Vec2(center.x, center.y), text: "Controls"});
+        control.size.set(200, 50);
+        control.borderWidth = 2;
+        control.borderColor = Color.WHITE;
+        control.backgroundColor = Color.TRANSPARENT;
+        control.onClickEventId = "control";
+
+        /* ########## ABOUT SCREEN ########## */
+        this.about = this.addUILayer("about");
+        this.about.setHidden(true);
+
+        const aboutHeader = <Label>this.add.uiElement(UIElementType.LABEL, "about", {position: new Vec2(center.x, center.y - 250), text: "About"});
+        aboutHeader.textColor = Color.WHITE;
+
+        // HOMEWORK 4 - TODO: Give yourself credit and add your name to the about page!
+        const text1 = "This game was created by Henry Chen, Kelly Peng, and Xinyu Xu";
+        const text2 = "using the Wolfie2D game engine, a TypeScript game engine created by";
+        const text3 = "Joe Weaver and Richard McKenna.";
+
+        const line1 = <Label>this.add.uiElement(UIElementType.LABEL, "about", {position: new Vec2(center.x, center.y - 50), text: text1});
+        const line2 = <Label>this.add.uiElement(UIElementType.LABEL, "about", {position: new Vec2(center.x, center.y), text: text2});
+        const line3 = <Label>this.add.uiElement(UIElementType.LABEL, "about", {position: new Vec2(center.x, center.y + 50), text: text3});
+
+        line1.textColor = Color.WHITE;
+        line2.textColor = Color.WHITE;
+        line3.textColor = Color.WHITE;
+
+        const aboutBack = this.add.uiElement(UIElementType.BUTTON, "about", {position: new Vec2(center.x, center.y + 250), text: "Back"});
+        aboutBack.size.set(200, 50);
+        aboutBack.borderWidth = 2;
+        aboutBack.borderColor = Color.WHITE;
+        aboutBack.backgroundColor = Color.TRANSPARENT;
+        aboutBack.onClickEventId = "menu";
+
+        // Subscribe to the button events
+        this.receiver.subscribe("map");
+        this.receiver.subscribe("about");
+        this.receiver.subscribe("menu");
+        this.receiver.subscribe("control");
+
+       
+        //Control screen
+        this.control = this.addUILayer("control");
+        this.control.setHidden(true);
+
+    
+        
+        const header = <Label>this.add.uiElement(UIElementType.LABEL, "control", {position: new Vec2(center.x, center.y - 250), text: "Controls"});
+        header.textColor = Color.WHITE;
+        const lc = <Label>this.add.uiElement(UIElementType.LABEL, "control", {position: new Vec2(center.x, center.y - 150), text: "A/D - Move Left/Right"});
+        lc.textColor = Color.WHITE;
+        const rc = <Label>this.add.uiElement(UIElementType.LABEL, "control", {position: new Vec2(center.x, center.y - 100), text: "W/S - Look Up/Down"});
+        rc.textColor = Color.WHITE;
+        const wasd = <Label>this.add.uiElement(UIElementType.LABEL, "control", {position: new Vec2(center.x, center.y - 50), text: "J/Z/Enter - Confirm Attack"});
+        wasd.textColor = Color.WHITE;
+        
+        const e = <Label>this.add.uiElement(UIElementType.LABEL, "control", {position: new Vec2(center.x, center.y), text: "SPACE/X - Jump"});
+        e.textColor = Color.WHITE;
+        const q = <Label>this.add.uiElement(UIElementType.LABEL, "control", {position: new Vec2(center.x, center.y + 50), text: "K/C - Dash"});
+        q.textColor = Color.WHITE;
+        const oneTwo = <Label>this.add.uiElement(UIElementType.LABEL, "control", {position: new Vec2(center.x, center.y + 100), text: "L/V - Use Skill"});
+        oneTwo.textColor = Color.WHITE
+        const zx = <Label>this.add.uiElement(UIElementType.LABEL, "control", {position: new Vec2(center.x, center.y + 150), text: "I/B - open Backpack"});
+        zx.textColor = Color.WHITE;
+        const tb = <Label>this.add.uiElement(UIElementType.LABEL, "control", {position: new Vec2(center.x, center.y + 200), text: "ESC - Pause"});
+        tb.textColor = Color.WHITE;
+
+        const back = this.add.uiElement(UIElementType.BUTTON, "control", {position: new Vec2(center.x, center.y + 250), text: "Back"});
+        back.size.set(200, 50);
+        back.borderWidth = 2;
+        back.borderColor = Color.WHITE;
+        back.backgroundColor = Color.TRANSPARENT;
+        back.onClickEventId = "menu";
+        
+
+    }
+
+    unloadScene(): void {
+        // The scene is being destroyed, so we can stop playing the song
+        //this.emitter.fireEvent(GameEventType.STOP_SOUND, {key: "menu"});
+    }
+
+    
+    updateScene(){
+        while(this.receiver.hasNextEvent()){
+            let event = this.receiver.getNextEvent();
+
+            console.log(event);
+
+            if(event.type === "map"){
+                this.sceneManager.changeToScene(Levels, {});
+            }
+
+            if(event.type === "about"){
+                this.about.setHidden(false);
+                this.mainMenu.setHidden(true);
+            }
+
+            if(event.type === "menu"){
+                this.mainMenu.setHidden(false);
+                this.about.setHidden(true);
+                this.control.setHidden(true);
+            }
+            if(event.type === "control"){
+                this.mainMenu.setHidden(true);
+                this.control.setHidden(false);
+            }
+
+        }
+    }
 }