2019js13k/js/HeadsUpDisplay.js

class HeadsUpDisplay {

	constructor(game, camera) {
		this.player = null;

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

	init(player, canvas) {
		this.player = player;
		this.hudCanvas = canvas;
	}

	update(delta) {

	}


	draw(context) {
		// context.strokeStyle = "white";
		// context.lineWidth = 10;
		// context.beginPath();
		// context.rect(5, 5, this.hudCanvas.width - 10, this.hudCanvas.height - 10);
		// context.stroke();

		context.save();
		context.translate(10, 10);

		var message = "2019 js13k Game";

		context.font = "16px sans-serif";
		context.textAlign = "left";
		context.textBaseline = "top";
		context.fillStyle = "#DDDDDD";
		context.strokeStyle = "#333333";
		context.lineWidth = 2;
		var textMetrics = context.measureText(message);
		var textWidth = textMetrics.width;
		context.fillText(message, 0, 0);
		context.restore();



		/*
		context.save();
		context.translate(this.player.position.x + camera.position.x, this.player.position.y + camera.position.y);

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

		context.fillStyle = "#DDDDDD";
		context.strokeStyle = "#333333";
		context.lineWidth = 2;

		//var message = this.player.playerName + " " + this.player.id;
		//var textMetrics = context.measureText(message);
		//var textWidth = textMetrics.width;
		//context.fillText(message, 0, 0);

		var message = parseInt(this.player.position.x) + ", " + parseInt(this.player.position.y);
		var textMetrics = context.measureText(message);
		var textWidth = textMetrics.width;
		context.fillText(message, 0, 0);
		
		context.restore();
		*/


	}
}