veridian-wander/client/mainmenu.js

include("mouseinput.js");
include("curtain.js");
include("button.js");

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

	this.curtain = null;

	this.playButton = null;
	this.textMetrics = null;

	this.showError = 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.playButton = new Button(canvas);
		this.playButton.addClickEvent(this.joinGame);

		this.showError = false;

		this.handleResize(canvas);
	};

	this.handleResize = function(canvas) {
		var buttonOptions = {position: {x: this.canvas.width / 2, y: this.canvas.height / 2}, font:{color:"#DDDDDD", stroke: "#333333", size: 72, family: "sans-serif"}};
		if(this.canvas.width < 768) {
			buttonOptions.font.size = 36;
		}

		this.playButton.init("Join", buttonOptions);
	}

	this.end = function(callback) {
		this.mouse.detatch();
		this.closeCurtain(callback);
	}
	this.closeCurtain = function(callback) {
		system.theater.stage.curtain.close(700, function() {
			callback();
		});
	}

	this.joinGame = function() {
		system.theater.socketConnect(function() {
			system.theater.changeStage("world");
		},
		function() {
			system.theater.stage.showError = true;
		},
		function() {
			system.theater.changeStage("mainmenu");
			system.theater.playerSocket = null;
		});
	}

	this.updateDelta = function(delta, canvas) {
		if(system.keyboard.isPressed(Keys.Space) || system.keyboard.isPressed(Keys.Enter)) {
			this.joinGame();
		}
		this.curtain.updateDelta(delta);
	};

	this.draw = function(context) {

		var title = "Veridian Wander";
		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;

		if(this.canvas.width < 768) {
			context.font = "36px sans-serif";
		}

		context.fillText(title, this.canvas.width  /2 , 100);
		
		this.playButton.draw(context);

		if(this.showError) {
			var errorMessage = "Unable to connect to the server. Please try again later.";
			context.font = "16px sans-serif";
			context.textAlign = "center";
			context.textBaseline = "middle";
			var textWidth = context.measureText(errorMessage).width;
			context.fillStyle = "#DD3333";
			context.strokeStyle = "#DD3333";
			context.lineWidth = 2;

			if(this.canvas.width < 768) {
				context.font = "12px sans-serif";
			}

			context.fillText(errorMessage, this.canvas.width  /2 , this.canvas.height - 32);
		}
		this.curtain.draw(context);
	};

	this.mouseMove = function(canvas, x, y) {
		this.playButton.mouseMove(x, y);
	}

	this.touchMove = function(canvas, x, y) {
		this.playButton.touchMove(x, y);
	}

	this.mouseDown = function(canvas, button, x, y) {
		this.playButton.mouseDown(button, x, y);
	}

	this.touchStart = function(canvas, x, y) {
		this.playButton.touchStart(x, y);
	};
};