gravitywell/headsupdisplay.js

function HeadsUpDisplay(game, camera) {
	this.ship = null

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

	this.minimapCanvas = null;
	this.minimapContext = null;

	this.radarCanvas = null;
	this.radarContext = null;


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

		this.prepareMinimap();
		this.prepareRadar();
	}

	this.prepareMinimap = function() {
		this.minimapCanvas = document.createElement("canvas");
		this.minimapCanvas.width = 202;
		this.minimapCanvas.height = 202;
		this.minimapContext = this.minimapCanvas.getContext("2d");
	}
	this.prepareRadar = function() {
		this.radarCanvas = document.createElement("canvas");
		this.radarCanvas.width = 202;
		this.radarCanvas.height = 202;
		this.radarContext = this.radarCanvas.getContext("2d");
	}

	this.update = function(delta) {
	}


	this.preRender = function() {
		if(this.spriteContext == null) {
			this.spriteCanvas = document.createElement("canvas");
			this.spriteCanvas.width = this.width;
			this.spriteCanvas.height = this.height;
			this.spriteContext = this.spriteCanvas.getContext("2d");

			this.spriteContext.fillStyle = this.shipColor;
			this.spriteContext.strokeStyle = this.shipColor;
			this.spriteContext.lineWidth = 4;
			this.spriteContext.save();
			this.spriteContext.translate(this.width / 2, this.height / 2);
			this.spriteContext.beginPath();

			this.spriteContext.moveTo(this.width / 2, 0);
			this.spriteContext.lineTo(-(this.width / 2), -(this.height / 3));
			this.spriteContext.lineTo(-(this.width / 2), this.height / 3);
			this.spriteContext.lineTo(this.width / 2, 0);
			this.spriteContext.fill();

			this.spriteContext.restore();
		}
	}

	this.draw = function(context) {

		for(var index in game.planets) {
			var planet = game.planets[index];
			/*
			context.fillStyle = planet.planetColor;
			context.beginPath();
			context.arc((index * 20) + 25, 13, 8 ,0 , 2 * Math.PI);
			context.fill();

			context.fillStyle = planet.teamColor;
			context.beginPath();
			context.rect((index * 20) + 20, 9, 10 , 8);
			context.fill();
			*/

			context.fillStyle = planet.teamColor;
			context.beginPath();
			context.rect((index * 20) + 20, 9, 10 , 8);
			context.fill();
		}

		

		
		/*for(var index in game.systems) {
			var solar = game.systems[index];
			
			if(solar == nearestSystem) {
				context.lineWidth = 1;
				context.strokeStyle = "#00FF00";
				context.beginPath();
				context.moveTo(this.ship.position.x + camera.x, this.ship.position.y + camera.y);
				context.lineTo(solar.position.x + camera.x, solar.position.y + camera.y);
				context.stroke();
			}
		}*/

		//this.preRender();

		//draw minimap
		context.save();
		context.translate(this.canvas.width - (this.minimapCanvas.width + 5), 5);
		context.drawImage(this.drawMinimap(), 0, 0);
		context.restore();


		//draw radar
		context.save();
		context.translate(this.canvas.width - (this.radarCanvas.width + 5), this.canvas.height - (this.radarCanvas.height + 5));
		context.drawImage(this.drawRadar(), 0, 0);
		context.restore();

		context.save();
		context.translate(this.canvas.width - (this.radarCanvas.width + 5), this.canvas.height - (this.radarCanvas.height + 25));

		var healthPercentage = (this.ship.health / this.ship.maxHealth);

		context.font = "16px sans-serif";
		context.textAlign = "center";
		context.fillStyle = "#DDDDDD";
		context.strokeStyle = "#333333";
		context.lineWidth = 2;
		var textMetrics = context.measureText(this.ship.health + " / " + this.ship.maxHealth);
		var textWidth = textMetrics.width;
		context.fillText(this.ship.health + " / " + this.ship.maxHealth, 0, 0);

		context.restore();

		
	}

	this.drawMinimap = function() {
		
		
		this.minimapContext.strokeStyle = "#FFFFFF";
		this.minimapContext.fillStyle = "#000000";
		this.minimapContext.lineWidth = 2;

		this.minimapContext.clearRect(0, 0, this.minimapCanvas.width, this.minimapCanvas.height);

		this.minimapContext.beginPath();
		this.minimapContext.rect(1, 1, 200, 200);
		this.minimapContext.fill();
		this.minimapContext.stroke();

		this.minimapContext.save();
		this.minimapContext.lineWidth = 1;
		this.minimapContext.translate(this.minimapCanvas.width  / 2 + 1, this.minimapCanvas.height / 2 + 1);

		
		var mapScale = 600;

		for(var index in game.systems) {
			var solar = game.systems[index];
			var minimapScaled = {x: solar.position.x / mapScale, y: solar.position.y / mapScale, radius: solar.radius / 100}

			this.minimapContext.strokeStyle = "#FFFF00";
			this.minimapContext.beginPath();
			this.minimapContext.arc(minimapScaled.x, minimapScaled.y, minimapScaled.radius,0, 2 * Math.PI);
			this.minimapContext.stroke();

			for(var planetIndex in solar.planets) {
				var planet = solar.planets[planetIndex];
				var orbit = planet.orbitRadius / mapScale;
				this.minimapContext.strokeStyle = "#0000FF";
				this.minimapContext.beginPath();
				this.minimapContext.arc(minimapScaled.x, minimapScaled.y, orbit, 0, 2 * Math.PI);
				this.minimapContext.stroke();
			}
		}

		for(var index in game.systems) {
			var solar = game.systems[index];
			for(var planetIndex in solar.planets) {
				var planet = solar.planets[planetIndex];
				var minimapScaled = {x: planet.position.x / mapScale, y: planet.position.y / mapScale, planet: planet.radius / 10};
				this.minimapContext.fillStyle = planet.planetColor;
				this.minimapContext.beginPath();
				this.minimapContext.arc(minimapScaled.x - 1, minimapScaled.y - 1, 2,0, 2 * Math.PI);
				this.minimapContext.fill();
			}
		}
		
		this.minimapContext.strokeStyle = "#FFFFFF";
		this.minimapContext.beginPath();
		this.minimapContext.rect((this.ship.position.x / mapScale) - 5, (this.ship.position.y / mapScale) - 5, 10, 10);
		this.minimapContext.stroke();

		this.minimapContext.restore();

		return this.minimapCanvas;
	}

	this.drawRadar = function() {

		this.radarContext.clearRect(0, 0, this.radarCanvas.width, this.radarCanvas.height);

		var nearestSystem = game.getNearestSystem(game, this.ship);
		var nearestSystemAngle = game.calculateAngleTo(nearestSystem, this.ship);

		var nearestPlanet = game.getNearestPlanet(nearestSystem, this.ship);
		var nearestPlanetAngle = game.calculateAngleTo(nearestPlanet, this.ship);

		var nearestShip = game.getNearestShip(game, this.ship);
		var nearestShipAngle = game.calculateAngleTo(nearestShip, this.ship);

		//draw hud container
		this.radarContext.lineWidth = 1;
		this.radarContext.save();
		this.radarContext.translate(this.radarCanvas.width / 2, this.radarCanvas.height / 2);
		this.radarContext.lineWidth = 10;
		this.radarContext.strokeStyle = "#33AA33";
		this.radarContext.beginPath();

		var healthPercentage = Math.max(0, Math.min(this.ship.health / this.ship.maxHealth, 5));

		this.radarContext.arc(0, 0, 95, 0, (2 * Math.PI) * healthPercentage);
		this.radarContext.stroke();

		this.radarContext.lineWidth = 1;
		this.radarContext.strokeStyle = "#FFFFFF";
		this.radarContext.beginPath();
		this.radarContext.arc(0, 0, 100, 0, 2 * Math.PI);
		this.radarContext.stroke();

		this.radarContext.fillStyle = "#000000";
		this.radarContext.beginPath();
		this.radarContext.arc(0, 0, 90, 0, 2 * Math.PI);
		this.radarContext.fill();
		this.radarContext.stroke();


		this.radarContext.save();
		this.radarContext.translate(-40, -40);
		this.radarContext.scale(4, 4);

		this.ship.preRender(this.radarContext, this.ship.targetAngle);
		this.radarContext.restore();

		//draw nearest star
		this.radarContext.save();
		this.radarContext.rotate(nearestSystemAngle);
		this.radarContext.translate(75, 0);
		
		this.radarContext.strokeStyle = "#FFFF00";
		this.radarContext.beginPath();
		this.radarContext.arc(0, 0, nearestSystem.radius / 40, 0, 2 * Math.PI);
		this.radarContext.stroke();
		this.radarContext.restore();

		//draw nearest planet
		this.radarContext.save();
		this.radarContext.rotate(nearestPlanetAngle);
		this.radarContext.translate(78, 0);
		
		this.radarContext.strokeStyle = nearestPlanet.planetColor;
		this.radarContext.beginPath();
		this.radarContext.arc(0, 0, nearestPlanet.radius / 20, 0, 2 * Math.PI);
		this.radarContext.stroke();
		this.radarContext.restore();

		this.radarContext.save();

		this.radarContext.rotate(nearestShipAngle);
		this.radarContext.translate(70, 0);
		this.radarContext.scale(0.5, 0.5);
		nearestShip.preRender(this.radarContext, nearestShip.angleRadians);
		this.radarContext.restore();

		this.radarContext.restore();

		return this.radarCanvas;
	}

};