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

8
var bkcore = bkcore || {};
9
bkcore.hexgl = bkcore.hexgl || {};
10

11
bkcore.hexgl.HUD = function(opts)
12
{
13
	var self = this;
14

15
	this.visible = true;
16
	this.messageOnly = false;
17

18
	this.width = opts.width;
19
	this.height = opts.height;
20

21
	this.canvas = document.createElement('canvas');
22
	this.canvas.width = this.width;
23
	this.canvas.height = this.height;
24

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

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

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

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

34
	this.speedFontRatio = 24;
35
	this.speedBarRatio = 2.91;
36
	this.shieldFontRatio = 64;
37
	this.shieldBarYRatio = 34;
38
	this.shieldBarWRatio = 18.3;
39
	this.shieldBarHRatio = 14.3;
40
	this.timeMarginRatio = 18;
41
	this.timeFontRatio = 19.2;
42

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

45
	this.time = "";
46

47
	this.message = "";
48
	this.previousMessage = "";
49
	this.messageTiming = 0;
50
	this.messagePos = 0.0;
51
	this.messagePosTarget = 0.0;
52
	this.messagePosTargetRatio = 12;
53
	this.messageA = 1.0;
54
	this.messageAS = 1.0;
55
	this.messageDuration = 2*60;
56
	this.messageDurationD = 2*60;
57
	this.messageDurationS = 30;
58
	this.messageYRatio = 34;
59
	this.messageFontRatio = 10;
60
	this.messageFontRatioStart = 6;
61
	this.messageFontRatioEnd = 10;
62
	this.messageFontLerp = 0.4;
63
	this.messageLerp = 0.4;
64
	this.messageFontAlpha = 0.8;
65

66
	this.lapMarginRatio = 14;
67
	this.lap = "";
68
	this.lapSeparator = "/";
69

70
	this.timeSeparators = ["","'", "''",""];
71

72
	this.step = 0;
73
	this.maxStep = 2;
74
};
75

76
bkcore.hexgl.HUD.prototype.resize = function(w, h)
77
{
78
	this.width = w;
79
	this.height = h;
80
	this.canvas.width = w;
81
	this.canvas.height = h;
82
}
83

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

88
	if(this.message != "")
89
	{
90
		this.messageA = this.messageFontAlpha;
91
		this.messagePos = 0.0;
92
		this.messagePosTarget = this.width/this.messagePosTargetRatio;
93
		this.previousMessage = this.message;
94
	}
95

96
	this.messageFontRatio = this.messageFontRatioStart;
97
	this.messageAS = 0.0;
98
	this.message = msg;
99
	this.messageDuration = duration == undefined ? this.messageDurationD : duration*60;
100
}
101

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

107
bkcore.hexgl.HUD.prototype.resetLap = function()
108
{
109
	this.lap = "";
110
}
111

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

117
bkcore.hexgl.HUD.prototype.resetTime = function()
118
{
119
	this.time = "";
120
}
121

122
bkcore.hexgl.HUD.prototype.update = function(speed, speedRatio, shield, shieldRatio)
123
{
124
	var SCREEN_WIDTH = this.width;
125
	var SCREEN_HEIGHT = this.height;
126

127
	var SCREEN_HW = SCREEN_WIDTH / 2;
128
	var SCREEN_HH = SCREEN_HEIGHT / 2;
129

130
	if(!this.visible)
131
	{
132
		this.ctx.clearRect(0 , 0 , SCREEN_WIDTH , SCREEN_HEIGHT);
133
		return;
134
	}
135

136
	var w = this.bg.width;
137
	var h = this.bg.height;
138
	var r = h/w;
139
	var nw = SCREEN_WIDTH;
140
	var nh = nw*r;
141
	var oh = SCREEN_HEIGHT - nh;
142
	var o = 0;
143
	//speedbar
144
	var ba = nh;
145
	var bl = SCREEN_WIDTH/this.speedBarRatio;
146
	var bw = bl * speedRatio;
147
	//shieldbar
148
	var sw = SCREEN_WIDTH/this.shieldBarWRatio;
149
	var sho = SCREEN_WIDTH/this.shieldBarHRatio;
150
	var sh = sho*shieldRatio;
151
	var sy = (SCREEN_WIDTH/this.shieldBarYRatio)+sho-sh;
152
	
153

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

158
		if(!this.messageOnly)
159
		{
160
		    this.ctx.drawImage(this.bg, o, oh, nw, nh);
161

162
		    this.ctx.save();
163
			this.ctx.beginPath();
164
			this.ctx.moveTo(bw+ba+SCREEN_HW, oh);
165
			this.ctx.lineTo(-(bw+ba)+SCREEN_HW, oh);
166
			this.ctx.lineTo(-bw+SCREEN_HW, SCREEN_HEIGHT);
167
			this.ctx.lineTo(bw+SCREEN_HW, SCREEN_HEIGHT);
168
			this.ctx.lineTo(bw+ba+SCREEN_HW, oh);
169
			this.ctx.clip();
170
		    this.ctx.drawImage(this.fgspeed, o, oh, nw, nh);
171
			this.ctx.restore();
172

173
		    this.ctx.save();
174
			this.ctx.beginPath();
175
			this.ctx.moveTo(-sw+SCREEN_HW, oh+sy);
176
			this.ctx.lineTo(sw+SCREEN_HW, oh+sy);
177
			this.ctx.lineTo(sw+SCREEN_HW, oh+sh+sy);
178
			this.ctx.lineTo(-sw+SCREEN_HW, oh+sh+sy);
179
			this.ctx.lineTo(-sw+SCREEN_HW, oh+sh);
180
			this.ctx.clip();
181
		    this.ctx.drawImage(this.fgshield, o, oh, nw, nh);
182
			this.ctx.restore();
183

184
			// SPEED
185
			this.ctx.font = (SCREEN_WIDTH/this.speedFontRatio)+"px "+this.font;
186
		    this.ctx.fillStyle = "rgba(255, 255, 255, 0.8)";
187
		    this.ctx.fillText(speed, SCREEN_HW, SCREEN_HEIGHT - nh*0.57);
188

189
		    // SHIELD
190
			this.ctx.font = (SCREEN_WIDTH/this.shieldFontRatio)+"px "+this.font;
191
		    this.ctx.fillStyle = "rgba(255, 255, 255, 0.4)";
192
		    this.ctx.fillText(shield, SCREEN_HW, SCREEN_HEIGHT - nh*0.44);
193
		}
194
	}
195
	else if(this.step == 1)
196
	{
197
		this.ctx.clearRect(0 , 0 , SCREEN_WIDTH , oh);
198

199
		// TIME
200
	    if(this.time != "")
201
	    {
202
			this.ctx.font = (SCREEN_WIDTH/this.timeFontRatio)+"px "+this.font;
203
		    this.ctx.fillStyle = "rgba(255, 255, 255, 0.8)";
204
		    this.ctx.fillText(this.time, SCREEN_HW, SCREEN_WIDTH/this.timeMarginRatio);
205
		}
206

207
		// LAPS
208
		if(this.lap != "")
209
		{
210
			this.ctx.font = (SCREEN_WIDTH/this.timeFontRatio)+"px "+this.font;
211
		    this.ctx.fillStyle = "rgba(255, 255, 255, 0.8)";
212
		    this.ctx.fillText(this.lap, SCREEN_WIDTH-SCREEN_WIDTH/this.lapMarginRatio, SCREEN_WIDTH/this.timeMarginRatio);
213
		}
214

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

218
	    if(this.messageTiming > this.messageDuration+2000)
219
		{
220
			this.previousMessage = "";
221
			this.message = "";
222
			this.messageA = 0.0;
223
		}
224
		else if(this.messageTiming > this.messageDuration && this.message != "")
225
		{
226
			this.previousMessage = this.message;
227
			this.message = "";
228
			this.messagePos = 0.0;
229
			this.messagePosTarget = SCREEN_WIDTH/this.messagePosTargetRatio;
230
			this.messageA = this.messageFontAlpha;
231
		}
232

233
		if(this.previousMessage != "")
234
		{
235
			if(this.messageA < 0.001)
236
				this.messageA = 0.0;
237
			else
238
				this.messageA += (0.0 - this.messageA) * this.messageLerp;
239

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

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

247
		if(this.message != "")
248
		{
249
			if(this.messageTiming < this.messageDurationS)
250
			{
251
				this.messageAS += (this.messageFontAlpha - this.messageAS) * this.messageFontLerp;
252
				this.messageFontRatio += (this.messageFontRatioEnd - this.messageFontRatio) * this.messageFontLerp;
253
			}
254
			else
255
			{
256
				this.messageAS = this.messageFontAlpha;
257
				this.messageFontRatio = this.messageFontRatioEnd;
258
			}
259

260
			this.ctx.font = (SCREEN_WIDTH/this.messageFontRatio)+"px "+this.font;
261
		    this.ctx.fillStyle = "rgba(255, 255, 255, "+this.messageAS+")";
262
		    this.ctx.fillText(this.message, SCREEN_HW, my);
263
		}
264
	}
265
	
266
	this.messageTiming++;
267

268
	this.step++;
269
	if(this.step == this.maxStep) this.step = 0;
270
}
271