carpentry/client/js/game/states/MenuState.js

import { Button } from "../../libraries/components/Button.js";
import { Global } from "../../libraries/Global.js";

export class MenuState {
    constructor(fsm) {
        this.stateMachine = fsm;
        this.boundEvents = {};
    }

    init() {
        this.boundEvents['mousedown'] = this.mouseDown.bind(this);
        this.boundEvents['mousemove'] = this.mouseMove.bind(this);
        for(let key in this.boundEvents) {
            window.addEventListener(key, this.boundEvents[key]);
        }

        this.playButton = new Button(0, 0, 160, 70, "Play", {textFillStyle: "white", backgroundFillStyle: "rgba(255,255,255,0.5)",});

        this.playButton.hoverFunction((ctx) => {
            ctx.fillStyle = "rgba(255,255,255,0.8)";
        });
        this.playButton.clickFunction(() => {
            this.stateMachine.transitionTo("game");
        });

        // this.deleteButton = new Button(0,0, 80, 20, "delete save", 
        //     {textFillStyle: "red", fontSize: 14, fontFamily: "Ariel", textStrokeStyle: null, backgroundFillStyle: null}
        // );

        // this.deleteButton.clickFunction(() => {
        //     if(confirm("Are you sure you want to reset your save data? This cannot be undone.")) {
        //         localStorage.removeItem('ballsort-playerdata');
        //         window.location.reload();
        //     }
        // })
    }

    draw(ctx) {
        let canvasBounds = Global.screenBounds
        let center = canvasBounds.center;
        
        this.playButton.setPosition(center.x, center.y);
        this.playButton.draw(ctx);
 
    }

    update(delta) {

    }   

    mouseDown(event) {
        this.playButton.mouseDown(event);
    }

    mouseMove(event) {
        document.body.style.cursor = "default";
        this.playButton.mouseMove(event);
    }

    enter() {
        this.init();
    }
    leave() {
        for(let key in this.boundEvents) {
            window.removeEventListener(key, this.boundEvents[key]);
        }
    }
}