veridian-wander/client/headsupdisplay.js

function HeadsUpDisplay(game, camera) {
	var ui = this;
	this.player = null;
	this.canvas = null;

	this.hudCanvas = null;
	this.hudContext = null;

	this.settingsButton = null;
	this.chatButton = null;
	this.inChat = false;

	this.chatTimeout = null;

	this.init = function(player, canvas) {
		this.player = player;
		this.canvas = canvas;

		this.settingsButton = new Button(canvas);
		this.settingsButton.addClickEvent(function(button) {
			if(button == 0) {
				var newName = prompt("Please enter your player name:", player.name);
				var newSprite = prompt("Please enter your desired race:", player.sprite);
				player.name = newName || player.name;
				player.sprite = newSprite || player.sprite;
				player.syncData();
			}
		});

		this.chatButton = new Button(canvas);
		this.chatButton.addClickEvent(function(button) {
			if(button == 0) {
				ui.toggleChat();
			}
		});
	};

	this.handleResize = function(canvas) {
		var buttonOptions = {position: {x: 12, y: 24, align: "left", baseline: "middle"}, background: {color: "gray", hover: "white"}, font: {size: 24, color: "white", hover: "black", family: "sans-serif"}, padding: 5};
		this.settingsButton.init("?", buttonOptions);

		var buttonOptions = {position: {x: 50, y: 24, align: "left", baseline: "middle"}, background: {color: "gray", hover: "white"}, font: {size: 24, color: "white", hover: "black", family: "sans-serif"}, padding: 5};
		this.chatButton.init("T", buttonOptions);
	}

	this.update = function(delta) {
		if(system.keyboard.isPressed(Keys.Enter)) {
			if(!this.inChat) {
				this.showChat();
			}
		}

		if(system.keyboard.isPressed(Keys.Escape)) {
			this.hideChat();
		}

		if(this.inChat) {
			document.getElementById("chat-input").focus();
			system.keyboard.clearBuffer();
			return;
		}

		if(system.keyboard.isPressed(Keys.T)) {
			this.showChat();
		}
	}

	this.sendChat = function() {
		var chatInput = document.getElementById("chat-input");
		var message = chatInput.value;
		if(message == "") {
			this.hideChat();
			return;
		}
		var chatAction = {action: "chat",
			data: {
				mobileid: this.player.id,
				message: message
			}
		};
		system.theater.socketSend(chatAction);
		chatInput.value = "";
		clearTimeout(this.chatTimeout);
		chatInput.blur();
	}

	this.draw = function(context) {	
		this.settingsButton.draw(context);
		this.chatButton.draw(context);
	}

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

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

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

	this.mouseUp = function(canvas, button, x, y) {
		//this.settingsButton.mouseUp(button, x, y);
		//this.chatButton.mouseUp(button, x, y);
	}

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

	this.touchEnd = function(canvas, x, y) {
		//this.settingsButton.touchEnd(x, y);
		//this.chatButton.touchEnd(x, y);
	};

	this.showInventory = function() {
		var inventoryWindow = document.getElementById("inventory");
		if(inventoryWindow == null) {
			inventoryWindow = document.createElement("div");
			inventoryWindow.id = "inventory";
			inventoryWindow.style.display = "block";
			inventoryWindow.innerHTML = "Inventory Placeholder";
			document.getElementsByTagName("body")[0].appendChild(inventoryWindow);
		} else {
			if(inventoryWindow.style.display == "block") {
				inventoryWindow.style.display = "none";
			} else {
				inventoryWindow.style.display = "block";
				inventoryWindow.innerHTML = "Inventory Placeholder";
			}
			
		}
	}

	this.toggleChat = function() {
		if(this.inChat) {
			this.hideChat();
		} else {
			this.showChat();
		}
	}

	this.showChatInput = function() {

	}

	this.attachChatIfNonExistant = function() {
		var chatWindow = document.getElementById("chat");
		if(chatWindow == null) {
			chatWindow = document.createElement("div");
			chatWindow.id = "chat";
			chatWindow.style.display = "block";

			var chatOutput = document.createElement("div");
			chatOutput.id = "chat-output";
			chatWindow.appendChild(chatOutput);
			var form = document.createElement("form");
			form.addEventListener("submit", function(event) {
				ui.sendChat();
				event.preventDefault();

			}, false);

			var chatInput = document.createElement("input");
			chatInput.type = "text";
			chatInput.id = "chat-input";
			chatInput.setAttribute("autocomplete", "off");
			chatInput.setAttribute("autocorrect", "off");
			chatInput.setAttribute("autocapitalize", "off");

			chatInput.addEventListener("focus", function() {
				ui.inChat = true;
			});

			form.appendChild(chatInput);
			
			chatWindow.appendChild(form);
			document.getElementsByTagName("body")[0].appendChild(chatWindow);
		}
		return chatWindow;
	}

	this.showChat = function() {
		var chatWindow = this.attachChatIfNonExistant();
		chatWindow.style.display = "block";
		this.inChat = true;
		clearTimeout(this.chatTimeout);
	};

	this.hideChat = function() {
		this.inChat = false;
		var chatWindow = document.getElementById("chat");
		if(chatWindow == null) {
			return;
		}
		var chatInput = document.getElementById("chat-input");
		chatInput.blur();
		
		chatWindow.style.display = "none";
	};

	this.clearChat = function() {
		var chatOutput = document.getElementById("chat-output");
		if(chatOutput != null) {
			chatOutput.innerHTML = "";
			this.hideChat();	
		}
	}

	this.receivedChatMessage = function(mobileId, message) {
		var tmpStatus = this.inChat;
		this.showChat();
		this.inChat = tmpStatus;

		var chatWindow = document.getElementById("chat");
		var chatOutput = document.getElementById("chat-output");
		var height = chatOutput.getElementsByTagName("span").length;
		while(height > 10) {
			chatOutput.removeChild(chatOutput.childNodes[0]);
			height = chatOutput.getElementsByTagName("span").length;
		}
		if(this.canvas.width < 768) {
			while(height > 5) {
				chatOutput.removeChild(chatOutput.childNodes[0]);
				height = chatOutput.getElementsByTagName("span").length;
			}
		}
		
		chatWindow.style.height = ((height * 20) + 60) + "px";
		var span = document.createElement("span");
		span.setAttribute("data-mobileid", mobileId);
		var text = document.createTextNode(message);
		span.appendChild(text);
		chatOutput.appendChild(span);

		clearTimeout(ui.chatTimeout);
		ui.chatTimeout = setTimeout(function() {
			if(!ui.inChat) {
				ui.hideChat();
			}
		}, 3000);	
	}
};