inertialrush-game-test/dist/components/game/bkcore/hexgl/HUD.js

This package enables the integration of the Inertial Rush game into any React application, making it easy to showcase the game.

 /*
 * HexGL
 * @author Thibaut 'BKcore' Despoulain <http://bkcore.com>
 * @license This work is licensed under the Creative Commons Attribution-NonCommercial 3.0 Unported License. 
 *          To view a copy of this license, visit http://creativecommons.org/licenses/by-nc/3.0/.
 */

var bkcore = bkcore || {};
bkcore.hexgl = bkcore.hexgl || {};

 //Map settings size and position
 var sx, sy, mx, dh, dw;
 sx = 500;
 sy = 500;
 mx = 0
 dh = 300;
 dw = 300;
 var shipPositions = {};
 var lPos = { x: 50, y: 50 };
 var rPos = { x: 50, y: 50 };

bkcore.hexgl.HUD = function(opts)
{
	dh = sizeMap(opts.width);
	dw = sizeMap(opts.width);

	var self = this;

	this.map = document.createElement('img');
	this.map.src = 'textures.full/tracks-analysers/collision.png';

	this.visible = opts.visible;
	this.messageOnly = false;

	this.width = opts.width;
	this.height = opts.height;

	this.canvas = document.createElement('canvas');
	this.canvas.width = this.width;
	this.canvas.height = this.height;

	this.ctx = this.canvas.getContext('2d');
	this.ctx.textAlign = "center";

	this.bg = opts.bg;//"textures/hud/hud-bg.png";

	this.fgspeed = opts.speed;//"textures/hud/hud-fg-speed.png";

	this.fgshield = opts.shield;//"textures/hud/hud-fg-shield.png";

	this.speedFontRatio = 24;
	this.speedBarRatio = 2.91;
	this.shieldFontRatio = 40;
	this.shieldBarYRatio = 34;
	this.shieldBarWRatio = 18.3;
	this.shieldBarHRatio = 14.3;
	this.timeMarginRatio = 18;
	// this.timeFontRatio = 19.2;
	this.timeFontRatio = 35;

	this.font = opts.font || "Arial";

	this.time = "";

	this.message = "";
	this.previousMessage = "";
	this.messageTiming = 0;
	this.messagePos = 0.0;
	this.messagePosTarget = 0.0;
	this.messagePosTargetRatio = 12;
	this.messageA = 1.0;
	this.messageAS = 1.0;
	this.messageDuration = 2*60;
	this.messageDurationD = 2*60;
	this.messageDurationS = 30;
	this.messageYRatio = 34;
	this.messageFontRatio = 10;
	this.messageFontRatioStart = 6;
	this.messageFontRatioEnd = 10;
	this.messageFontLerp = 0.4;
	this.messageLerp = 0.4;
	this.messageFontAlpha = 0.8;

	this.lapMarginRatio = 14;
	this.lap = "";
	this.lapSeparator = "/";

	this.timeSeparators = ["",":", ":",""];

	this.step = 0;
	this.maxStep = 2;
};

bkcore.hexgl.HUD.prototype.resize = function(w, h)
{
	this.width = w;
	this.height = h;
	this.canvas.width = w;
	this.canvas.height = h;
}

bkcore.hexgl.HUD.prototype.display = function(msg, duration)
{
	this.messageTiming = 0;

	if(this.message != "")
	{
		this.messageA = this.messageFontAlpha;
		this.messagePos = 0.0;
		this.messagePosTarget = this.width/this.messagePosTargetRatio;
		this.previousMessage = this.message;
	}

	this.messageFontRatio = this.messageFontRatioStart;
	this.messageAS = 0.0;
	this.message = msg;
	this.messageDuration = duration == undefined ? this.messageDurationD : duration*60;
}

bkcore.hexgl.HUD.prototype.updateLap = function(current, total)
{
	this.lap = current + this.lapSeparator + total;
}

bkcore.hexgl.HUD.prototype.resetLap = function()
{
	this.lap = "";
}

bkcore.hexgl.HUD.prototype.updateTime = function(time)
{
	this.time = this.timeSeparators[0] + time.m + this.timeSeparators[1] + time.s + this.timeSeparators[2] + time.ms + this.timeSeparators[3];
}

bkcore.hexgl.HUD.prototype.resetTime = function()
{
	this.time = "";
}

bkcore.hexgl.HUD.prototype.update = function(speed, speedRatio, shield, shieldRatio, ship)
{
	var SCREEN_WIDTH = this.width;
	var SCREEN_HEIGHT = this.height;

	var SCREEN_HW = SCREEN_WIDTH / 2;
	var SCREEN_HH = SCREEN_HEIGHT / 2;

	if (this.visible === 2) {
		drawMap.call(this);
		return;
	}

	if (this.visible === 0) {
		this.ctx.clearRect(0 , 0 , SCREEN_WIDTH , SCREEN_HEIGHT);
		return;
	}

	var w = this.bg.width;
	var h = this.bg.height;
	var r = h/w;
	var nw = SCREEN_WIDTH;
	var nh = nw*r;
	var oh = SCREEN_HEIGHT - nh;
	var o = 0;
	//speedbar
	var ba = 0;
	var bl = SCREEN_WIDTH/2.09;
	var bw = bl * speedRatio;
	//shieldbar
	var sw = SCREEN_WIDTH/this.shieldBarWRatio
	var sho = SCREEN_WIDTH/6.6;
	var sh = sho*shieldRatio;
	var sy = (SCREEN_WIDTH/this.shieldBarYRatio)+sho-sh;
	

	if(this.step == 0)
	{
		this.ctx.clearRect(0 , oh , SCREEN_WIDTH , nh);

		if(!this.messageOnly)
		{

		    this.ctx.save();
			this.ctx.beginPath();
			this.ctx.moveTo(bw+ba+SCREEN_HW, oh);
			this.ctx.lineTo(-(bw+ba)+SCREEN_HW, oh);
			this.ctx.lineTo(-bw+SCREEN_HW, SCREEN_HEIGHT);
			this.ctx.lineTo(bw+SCREEN_HW, SCREEN_HEIGHT);
			this.ctx.lineTo(bw+ba+SCREEN_HW, oh);
			this.ctx.clip();
				this.ctx.drawImage(this.fgspeed, o, oh, nw, nh);
			this.ctx.restore();

		    this.ctx.save();
			this.ctx.beginPath();
			this.ctx.moveTo(sh+SCREEN_HW, oh);
			this.ctx.lineTo(-(sh)+SCREEN_HW, oh);
			this.ctx.lineTo(-sh+SCREEN_HW, SCREEN_HEIGHT);
			this.ctx.lineTo(sh+SCREEN_HW, SCREEN_HEIGHT);
			this.ctx.lineTo(sh+SCREEN_HW, oh);
			this.ctx.clip();
		    this.ctx.drawImage(this.fgshield, o, oh, nw, nh);
				
			this.ctx.restore();

			// SPEED
			this.ctx.font = (SCREEN_WIDTH/this.speedFontRatio)+"px "+this.font;
		    this.ctx.fillStyle = "rgba(255, 255, 255, 1)";
		    this.ctx.fillText(speed, SCREEN_HW, SCREEN_HEIGHT - nh*0.47);

		    // SHIELD
			this.ctx.font = (SCREEN_WIDTH/this.shieldFontRatio)+"px "+this.font;
		    this.ctx.fillStyle = "rgba(255, 255, 255, 1)";
				this.ctx.fillText(shield, SCREEN_HW, SCREEN_HEIGHT - nh*0.06);
				
			this.ctx.drawImage(this.bg, o, oh, nw, nh);

		}
	}
	else if(this.step == 1)
	{
		this.ctx.clearRect(0 , 0 , SCREEN_WIDTH , oh);

		// TIME
	    if(this.time != "")
	    {
			this.ctx.fillText('TIME', SCREEN_WIDTH/this.timeMarginRatio + SCREEN_WIDTH/80 , SCREEN_WIDTH/this.timeMarginRatio/2);
			this.ctx.font = (SCREEN_WIDTH/this.timeFontRatio)+"px "+this.font;
				this.ctx.fillStyle = "rgba(255, 255, 255)";
				this.ctx.fillText(this.time, SCREEN_WIDTH/this.timeMarginRatio + SCREEN_WIDTH/40 , SCREEN_WIDTH/this.timeMarginRatio);
		}

		// LAPS
		if(this.lap != "")
		{
			this.ctx.font = (SCREEN_WIDTH/this.timeFontRatio)+"px "+this.font;
				this.ctx.fillStyle = "rgba(255, 255, 255)";
		    this.ctx.fillText('racing lap', SCREEN_WIDTH-SCREEN_WIDTH/this.lapMarginRatio, SCREEN_WIDTH/this.timeMarginRatio/2);
		    this.ctx.fillText(this.lap, SCREEN_WIDTH-SCREEN_WIDTH/this.lapMarginRatio, SCREEN_WIDTH/this.timeMarginRatio);
		}

	    // MESSAGE
	    var my = SCREEN_HH-SCREEN_WIDTH/this.messageYRatio;

	    if(this.messageTiming > this.messageDuration+2000)
		{
			this.previousMessage = "";
			this.message = "";
			this.messageA = 0.0;
		}
		else if(this.messageTiming > this.messageDuration && this.message != "")
		{
			this.previousMessage = this.message;
			this.message = "";
			this.messagePos = 0.0;
			this.messagePosTarget = SCREEN_WIDTH/this.messagePosTargetRatio;
			this.messageA = this.messageFontAlpha;
		}

		if(this.previousMessage != "")
		{
			if(this.messageA < 0.001)
				this.messageA = 0.0;
			else
				this.messageA += (0.0 - this.messageA) * this.messageLerp;

			this.messagePos += (this.messagePosTarget - this.messagePos) * this.messageLerp;

			this.ctx.font = (SCREEN_WIDTH/this.messageFontRatioEnd)+"px "+this.font;
		    this.ctx.fillStyle = "rgba(255, 255, 255, "+this.messageA+")";
		    this.ctx.fillText(this.previousMessage, SCREEN_HW, my+this.messagePos);
		}

		if(this.message != "")
		{
			if(this.messageTiming < this.messageDurationS)
			{
				this.messageAS += (this.messageFontAlpha - this.messageAS) * this.messageFontLerp;
				this.messageFontRatio += (this.messageFontRatioEnd - this.messageFontRatio) * this.messageFontLerp;
			}
			else
			{
				this.messageAS = this.messageFontAlpha;
				this.messageFontRatio = this.messageFontRatioEnd;
			}

			this.ctx.font = (SCREEN_WIDTH/this.messageFontRatio)+"px "+this.font;
		    this.ctx.fillStyle = "rgba(255, 255, 255, "+this.messageAS+")";
		    this.ctx.fillText(this.message, SCREEN_HW, my);
		}
	}

	/*drawMap.call(this, ship);*/
	
	this.messageTiming++;

	this.step++;
	if(this.step == this.maxStep) this.step = 0;
}

 function drawMap(ship) {
	 this.ctx.drawImage(this.map, 0, 0, this.map.width, this.map.height, 0, mx, 300, 300);

	 const pos = ship.position;
	 console.log(pos);

	 let x = pos.x;
	 let z = pos.z;

	 const ratio = 300 / 2048;
	 x = Math.round((2048 / 2 + x * 2048 / 6000));
	 z = Math.round((2048 / 2 + z * 2048 / 6000));

	 x = Math.round(x * ratio);
	 z = Math.round(z * ratio);

	 this.ctx.beginPath();
	 this.ctx.arc(x, z, 2, 0, 2 * Math.PI, false);
	 this.ctx.fillStyle = "#FF0000";
	 this.ctx.fill();
	 this.ctx.stroke();
	 //this.ctx.clip();


	 /*if (Object.keys(shipPositions).length !== 0) {
		 Object.entries(shipPositions).forEach((pos) => {
			 this.ctx.beginPath();
			 this.ctx.arc(pos[1].x, pos[1].y, 2, 0, 2 * Math.PI, false);
			 /!*console.log("-----",pos);*!/
			 if (pos[0].includes('Bot')) this.ctx.fillStyle = "#F08C69";
			 else this.ctx.fillStyle = "#FF0000";
			 this.ctx.fill();
			 this.ctx.stroke();
			 //this.ctx.clip();
		 }, this)
	 }*/
 }

 function sizeMap(screenWidth) {
	 if (screenWidth < 400) return screenWidth / 2.5;
	 if (screenWidth < 1100) return screenWidth / 3.5;
	 if (screenWidth >= 1100) return screenWidth / 5;
 }