2018js13k/mainmenu.js

function MainMenu(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;

	this.init = function(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;
		});
	};

	this.end = function() {
		this.mouse.detatch();
	}

	this.updateDelta = function(delta, canvas) {
		if(system.keyboard.isDown(Keys.Space) || system.keyboard.isDown(Keys.Enter)) {

			this.curtain.close(1000, function() {
				system.theater.changeStage("world");	
			});
		}
		this.curtain.updateDelta(delta);
	};

	this.draw = function(context) {

		var title = "Some Robot Game!";
		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);
	};

	this.mouseMove = function(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;
			}
		}
	}

	this.touchMove = function(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;
			}
		}
	}

	this.mouseDown = function(canvas, button, x, y) {
		if(this.isHovered) {
			this.curtain.close(1000, function() {
				system.theater.changeStage("world");	
			});
		}
	}

	this.touchStart = function(canvas, x, y) {
		if(this.isHovered) {
			this.curtain.close(1000, function() {
				system.theater.changeStage("world");	
			});
		}
	};
};