veridian-wander/client/button.js

function Button(canvas) {

	this.text = "Button";
	this.options = {position:{x: 0, y: 0, align: "center", baseline: "middle"}, padding: 10, background: {color: "#777777", hover: "#333333"}, font: {color:"#DDDDDD", stroke: "#333333", size: 72, family: "sans-serif"}};
	this.textMetrics = null;
	this.clickHandler = function() {};

	this.init = function(text, options) {
		this.text = text;
		this.options = Object.assign(this.options, options || {});

	}

	this.updateDelta = function(delta, canvas) {

	};

	this.addClickEvent = function(handler) {
		this.clickHandler = handler;
	}

	this.draw = function(context) {
		context.save();
		context.translate(this.options.position.x, this.options.position.y);

		context.font = this.options.font.size + "px " + this.options.font.family;
		context.textAlign = this.options.position.align;
		context.textBaseline = this.options.position.baseline;
		context.lineWidth = 2;

		if(this.isHovered) {
			context.fillStyle = this.options.background.hover;
			canvas.style.cursor = "pointer";
		} else {
			context.fillStyle = this.options.background.color;
			canvas.style.cursor = "default";
		}

		this.textMetrics = context.measureText(this.text);

		context.beginPath();
		var buttonRect = {x:0, y: 0, width: 100, height: 100};
		buttonRect.x = -(this.textMetrics.width / 2) - this.options.padding;
		if(this.options.position.align == "left") {
			buttonRect.x = -this.options.padding;
		}
		buttonRect.y = -(this.options.font.size) / 2 - this.options.padding;
		buttonRect.width = this.textMetrics.width + (this.options.padding * 2);
		buttonRect.height = this.options.font.size + (this.options.padding * 2);
		context.rect(buttonRect.x, buttonRect.y, buttonRect.width, buttonRect.height);
		context.fill();

		context.fillStyle = this.options.font.color;
		context.strokeStyle = this.options.font.stroke;

		if(this.isHovered) {
			context.fillStyle = this.options.font.hover;
		}

		context.fillText(this.text, 0, 0);

		context.restore();

	};

	this.checkIfHovered = function(x, y) {
		if(this.textMetrics == null) {
			return false;
		}
		var topLeft = {};
		topLeft.x = this.options.position.x - (this.textMetrics.width / 2) - this.options.padding;
		topLeft.y = this.options.position.y - (this.options.font.size / 2) - this.options.padding;

		var bottomRight = {};
		bottomRight.x = this.options.position.x + (this.textMetrics.width / 2) + this.options.padding;
		bottomRight.y = this.options.position.y + (this.options.font.size / 2) + this.options.padding;

		if(x > topLeft.x && x < bottomRight.x) {
			if(y > topLeft.y && y < bottomRight.y) {
				return true;
			}
		}
		return false;
	}

	this.mouseMove = function(x, y) {
		this.isHovered = this.checkIfHovered(x, y);
	}

	this.touchMove = function(x, y) {
		this.isHovered = this.checkIfHovered(x, y);
	}

	this.mouseUp = function(button, x, y) {
		if(this.checkIfHovered(x, y)) {
			this.clickHandler(button);
		}
	}

	this.mouseDown = function(button, x, y) {
		if(this.checkIfHovered(x, y)) {
			this.clickHandler(button);
		}
	}

	this.touchStart = function(x, y) {
		if(this.checkIfHovered(x, y)) {
			this.clickHandler(0);
		}
	};

	this.touchEnd = function(x, y) {
		if(this.checkIfHovered(x, y)) {
			this.clickHandler(0);
		}
	};
};