2019js13k/js/MainMenu.js

require('MouseInput');
require('Curtain');

class MainMenu {

	constructor(game, camera) {
		this.system = null;
		this.canvas = null;
		this.keyboard = null;
		this.mouse = null;

		this.curtain = null;

		this.buttonText = "Enter";
		this.textMetrics = null;
		this.isHovered = false;
	}

	init(systemObject, canvas) {
		var stage = this;
		this.system = systemObject;
		this.canvas = canvas;

		this.mouse = new MouseInput();
		this.mouse.attach(canvas, this);

		this.curtain = new Curtain();
		this.curtain.init(systemObject, canvas);
		this.curtain.open(700, function () {
			stage.isStarted = true;
		});
	}

	end() {
		this.mouse.detach();
	}

	updateDelta(delta, canvas) {
		if (this.system.keyboard.isDown(Keys.Space) || this.system.keyboard.isDown(Keys.Enter)) {
			this.transitionToWorld();
		}
		this.curtain.updateDelta(delta);
	}

	transitionToWorld() {
		this.curtain.close(1000, function () {
			this.system.theater.changeStage("world");
			this.canvas.style.cursor = "auto";
		});
		this.isHovered = false;
	}

	draw(context) {
		this.canvas.style.cursor = "auto";

		if (this.isHovered) {
			this.canvas.style.cursor = "pointer";
		}

		var title = "Back";
		context.font = "72px sans-serif";
		context.textAlign = "center";
		context.textBaseline = "middle";
		var textWidth = context.measureText(title).width;
		context.fillStyle = "#DDDDDD";
		context.strokeStyle = "#333333";
		context.lineWidth = 2;
		context.fillText(title, this.canvas.width / 2, 100);

		this.textMetrics = context.measureText(this.buttonText);
		var textWidth = this.textMetrics.width;

		context.save();
		context.translate(this.canvas.width / 2, this.canvas.height / 2);

		var message = "Play";

		context.font = "72px sans-serif";
		context.textAlign = "center";
		context.textBaseline = "middle";

		if (this.isHovered) {
			context.fillStyle = "#333333";
		} else {
			context.fillStyle = "#777777";
		}
		context.beginPath();
		context.rect(-(textWidth / 2) - 10, -72 / 2, textWidth + 20, 82);
		context.fill();


		context.fillStyle = "#DDDDDD";
		context.strokeStyle = "#333333";
		context.lineWidth = 2;
		context.fillText(message, 0, 0);

		context.restore();

		this.curtain.draw(context);
	}

	mouseMove(canvas, x, y) {
		this.isHovered = false;
		var topLeft = {};
		topLeft.x = (this.canvas.width / 2) - (this.textMetrics.width / 2) - 10;
		topLeft.y = (this.canvas.height / 2) - (72 / 2);

		var bottomRight = {};
		bottomRight.x = (this.canvas.width / 2) + this.textMetrics.width + 20;
		bottomRight.y = (this.canvas.height / 2) + 72;

		if (x > topLeft.x && x < bottomRight.x) {
			if (y > topLeft.y && y < bottomRight.y) {
				this.isHovered = true;
			}
		}
	}

	touchMove(canvas, x, y) {
		this.isHovered = false;
		var topLeft = {};
		topLeft.x = (this.canvas.width / 2) - (this.textMetrics.width / 2) - 10;
		topLeft.y = (this.canvas.height / 2) - (72 / 2);

		var bottomRight = {};
		bottomRight.x = (this.canvas.width / 2) + (this.textMetrics.width + 20) / 2;
		bottomRight.y = (this.canvas.height / 2) + (72 / 2);

		if (x > topLeft.x && x < bottomRight.x) {
			if (y > topLeft.y && y < bottomRight.y) {
				this.isHovered = true;
			}
		}
	}

	mouseDown(canvas, button, x, y) {
		if (this.isHovered) {
			this.transitionToWorld();
		}
	}

	touchStart(canvas, x, y) {
		if (this.isHovered) {
			this.transitionToWorld();
		}
	}
};