added status hud at bottom right + speed in tps

public/index.html

@@ -24,7 +24,13 @@
 		<main>
 			<nav></nav>
 			<canvas class="hidden"></canvas>
-			<div id="hud" class="hidden"></div>
+			<div id="hud" class="hidden">
+				<div class="status">
+					<span class="speed"></span>
+					<span class="score"></span>
+					<span class="time"></span>
+				</div>
+			</div>
 		</main>
 		<footer>
 			<img src="assets/icon32.png">

src/js/main.js

@@ -26,7 +26,7 @@
 	let currentGame=null;
 
 	// forward-declare functions
-	let resizeCanvas, getLevel, startGame, stopGame, handleWin, handleDeath, menu, help, settings, restart;
+	let resizeCanvas, getLevel, startGame, stopGame, handleWin, handleDeath, menu, help, settings, restart, updateHud;
 
 	// handle window resize and fullscreen
 	resizeCanvas=() => {
@@ -126,6 +126,7 @@
 			if(evt=='tick') {
 				input.framefn();
 				snek.handleInputs(input.inputs);
+				updateHud();
 			} else if(evt=='win') {
 				handleWin(snek);
 			} else if(evt=='die') {
@@ -195,9 +196,10 @@
 		let popup=new Popup("Finished!");
 		popup.addStrong("You won!");
 		popup.addContent({
-			"Time": snek.playTime/1000+'s',
+			"Time": snek.endPlayTime/1000+'s',
 			"Score": snek.score,
-			"Final length": snek.length
+			"Final length": snek.length,
+			"Final speed": snek.speed+'tps'
 		});
 		popup.buttons={
 			retry: "Retry",
@@ -233,9 +235,10 @@
 		let popup=new Popup("Finished!");
 		popup.addStrong("You died...");
 		popup.addContent({
-			"Time": snek.playTime/1000+'s',
+			"Time": snek.endPlayTime/1000+'s',
 			"Score": snek.score,
-			"Final length": snek.length
+			"Final length": snek.length,
+			"Final speed": snek.speed+'tps'
 		});
 		popup.buttons={
 			retry: "Retry",
@@ -254,6 +257,28 @@
 		}
 	};
 
+	// draw status hud
+	updateHud=() => {
+		// stay safe
+		if(!currentGame) return;
+
+		// get the actual elements
+		const speedDisplay=document.querySelector('#hud .speed');
+		const scoreDisplay=document.querySelector('#hud .score');
+		const timeDisplay=document.querySelector('#hud .time');
+
+		// rpad is useful
+		const rpad=(n, digits=2, pad=' ') =>
+			((''+n).length>=digits)?(''+n):(rpad(pad+n, digits, pad));
+
+		// actually do the hud
+		speedDisplay.innerText=rpad(currentGame.speed, 2, '0')+'tps';
+		scoreDisplay.innerText=currentGame.score;
+		timeDisplay.innerText=rpad(Math.floor(currentGame.playTime/60000), 2, '0')+
+			':'+rpad(Math.floor(currentGame.playTime/1000)%60, 2, '0')+
+			':'+rpad(currentGame.playTime%1000, 3, '0');
+	};
+
 	// quick restart
 	restart=() => {
 		if(currentGame && currentGame.playing) {

src/js/snek.js

@@ -129,6 +129,10 @@ class SnekGame {
 		return Date.now()-this.firstStep;
 	}
 
+	get speed() {
+		return Math.round(1000/this.delay);
+	}
+
 	getTilesOfType(type) {
 		return this
 			.world

src/less/hud.less

@@ -38,4 +38,21 @@
 		transform: translate(-50%, -50%);
 		opacity: .5;
 	}
+
+	.status {
+		bottom: 1rem;
+		right: 1rem;
+		padding: .2rem;
+		font-size: 1.4rem;
+
+		.score::before {
+			content: '\1f34e';
+		}
+		.time::before {
+			content: '\23f1';
+		}
+		.speed::before {
+			content: '\1f684';
+		}
+	}
 }