From 0634bac7339a7a6c1539353a3f391072cd8993e9 Mon Sep 17 00:00:00 2001
From: Tom Smeding <tom@tomsmeding.com>
Date: Sun, 18 Feb 2024 19:39:15 +0100
Subject: Debug mode

---
 game.js | 62 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 59 insertions(+), 3 deletions(-)

diff --git a/game.js b/game.js
index 3bbfe30..99a6fb1 100644
--- a/game.js
+++ b/game.js
@@ -4,12 +4,15 @@ const boardRatio = 1.5;
 const ballRadius = 0.01, padWidth = 0.01, padHeight = 0.15, padX = 0.01;
 const padBaseSpeed = 0.8;
 
+const ENABLE_DEBUG_MODE = true;
+
 let gameId;
 let cvs, ctx, cvsW, cvsH, bdW, bdH, bdltX, bdltY;
 let socket;
 let playing = false, flip = false;
 let ballX, ballY, ballVX, ballVY;
 let padPos, padVel, pad2Pos, pad2Vel;
+let debugVectors = [];  // only used if ENABLE_DEBUG_MODE
 
 function redraw() {
 	ctx.fillStyle = "#000000";
@@ -43,6 +46,27 @@ function redrawFast() {
 		ctx.rect(bdltX + bdW * (1 - padX - padWidth), calcRightPadY(), bdW * padWidth, bdH * padHeight);
 		ctx.fill();
 	}
+
+	if (ENABLE_DEBUG_MODE) {
+		for (const obj of debugVectors) {
+			ctx.strokeStyle = obj.color;
+			ctx.lineWidth = 3;
+			ctx.beginPath();
+			ctx.moveTo(calcFlippedX(obj.from[0]), calcY(obj.from[1]));
+			ctx.lineTo(calcFlippedX(obj.from[0] + obj.dir[0]), calcY(obj.from[1] + obj.dir[1]));
+			ctx.stroke();
+
+			ctx.fillStyle = obj.color;
+			ctx.beginPath();
+			ctx.arc(calcFlippedX(obj.from[0] + obj.dir[0]), calcY(obj.from[1] + obj.dir[1]), 5, 0, 2 * Math.PI);
+			ctx.fill();
+
+			ctx.beginPath();
+			ctx.font = "20px sans-serif";
+			ctx.fillText(obj.text, calcFlippedX(obj.from[0]), calcY(obj.from[1]));
+			ctx.fill();
+		}
+	}
 }
 
 function undrawElements() {
@@ -261,7 +285,7 @@ function advancePhysics(deltaT) {
 		ballVY = -ballVY;
 	}
 
-	function bounceLeft(x, y, vx, vy, pady, padvy) {
+	function bounceLeft(x, y, vx, vy, pady, padvy, xisflipped) {
 		if (x + vx * deltaT > padX + padWidth + ballRadius) return null;
 
 		const t = (padX + padWidth + ballRadius - x) / vx;
@@ -278,10 +302,33 @@ function advancePhysics(deltaT) {
 		const newx = x + vx * t + newvx * (deltaT - t);
 		const newy = y + vy * t + newvy * (deltaT - t);
 
+		if (ENABLE_DEBUG_MODE) {
+			const collisionPoint = [x + t * vx, y + t * vy];
+			if (xisflipped) collisionPoint[0] = 1 - collisionPoint[0];
+			debugVectors.push({
+				color: "green",
+				from: collisionPoint,
+				dir: [(xisflipped ? -1 : 1) * vx * 0.3, vy * 0.3],
+				text: "",
+			});
+			debugVectors.push({
+				color: "#f00",
+				from: collisionPoint,
+				dir: [(xisflipped ? -1 : 1) * -vx * 0.3, vy * 0.3],
+				text: "",
+			});
+			debugVectors.push({
+				color: "#44f",
+				from: collisionPoint,
+				dir: [(xisflipped ? -1 : 1) * newvx * 0.3, newvy * 0.3],
+				text: Math.round(frac * 100) / 100 + "",
+			});
+		}
+
 		return [newx, newy, newvx, newvy];
 	}
 
-	let bounce = bounceLeft(ballX, ballY, ballVX, ballVY, padPos, padVel);
+	let bounce = bounceLeft(ballX, ballY, ballVX, ballVY, padPos, padVel, false);
 	if (bounce != null) {
 		newballX = bounce[0];
 		newballY = bounce[1];
@@ -290,7 +337,7 @@ function advancePhysics(deltaT) {
 		ret.bounce = true;
 	}
 
-	bounce = bounceLeft(1 - ballX, ballY, -ballVX, ballVY, pad2Pos, pad2Vel);
+	bounce = bounceLeft(1 - ballX, ballY, -ballVX, ballVY, pad2Pos, pad2Vel, true);
 	if (bounce != null) {
 		newballX = 1 - bounce[0];
 		newballY = bounce[1];
@@ -365,6 +412,15 @@ function setupBindings() {
 		up = down = false;
 		padUpdate();
 	});
+
+	if (ENABLE_DEBUG_MODE) {
+		window.addEventListener("keypress", function(ev) {
+			if (ev.key == "p") {
+				if (loopPhysics) stopPhysicsLoop();
+				else startPhysicsLoop();
+			}
+		});
+	}
 }
 
 window.addEventListener("load", function() {
-- 
cgit v1.2.3