[pongwars] add threshold display

docs/pongwars/index.html

@@ -61,7 +61,11 @@
 			#instr {
 				font-family: monospace;
 				font-size: 12px;
-				padding-left: 20px;
+			}
+
+			#threshold {
+				font-family: monospace;
+				font-size: 8px;
 			}
 
 			#made a {
@@ -84,6 +88,7 @@
 				patches from dogeystamp | patched source on
 				<a href="https://github.com/dogeystamp/garbage-monorepo/tree/main/pongwars">github</a>
 			</p>
+			<p id="threshold"></p>
 			<div id="mode">
 				change mode:
 				<a class="modeLink" data-mode="normal">normal</a>
@@ -103,6 +108,7 @@
 	const canvas = document.getElementById("pongCanvas");
 	const ctx = canvas.getContext("2d");
 	const scoreElement = document.getElementById("score");
+	const thresholdElement = document.getElementById("threshold");
 
 	var suddenDeathStart = null;
 	var suddenDeathCoeff = 0;
@@ -182,6 +188,13 @@
 	let squareTaken = [];
 	var squareTime = 0;
 
+	// threshold for territory under which a color starts dying
+	let threshold = 0;
+
+	var nTeams = teams.length;
+	// NTeams but with ease in to avoid instant deaths
+	var smoothNTeams = nTeams;
+
 	// do not edit without editing the code below for key to idx
 	const idxKeyMap = [..."0123456789abcdefghijklmnopqrstuvwxyz"];
 	function keyToIdx(key) {
@@ -211,6 +224,9 @@
 	}
 
 	function initialState({gridW = 4, gridH = 2, cols = teams.length, canvasW=1200, canvasH=800, squareSize=16} = {}) {
+		nTeams = cols;
+		smoothNTeams = cols;
+
 		canvas.width = canvasW;
 		canvas.height = canvasH;
 		window.squareSize = squareSize;
@@ -324,10 +340,6 @@
 		return v*x + (1-v)*y;
 	}
 
-	var nTeams = teams.length;
-	// NTeams but with ease in to avoid instant deaths
-	var smoothNTeams = nTeams;
-
 	function updateSquareAndBounce(x, y, dx, dy, color) {
 		if (state[color].elim) return
 		if (Math.max(Math.abs(dx), Math.abs(dy)) < 0.02) state[color].elim = true
@@ -349,7 +361,7 @@
 		}
 
 		// death coefficient (if not enough territory, slow down)
-		var coeff = Math.min((state[color].score/(numSquaresX*numSquaresY/smoothNTeams/mix(1.2, 4, suddenDeathCoeff))), 1.00);
+		var coeff = Math.min((state[color].score/threshold), 1.00);
 
 		// winners don't slow down
 		if (nTeams === 1) coeff = 1;
@@ -468,6 +480,8 @@
 				.filter((t, idx) => !state[idx].elim)
 				.map((t) => `${t.name} 👑 wins`)
 		}
+
+		thresholdElement.textContent = `threshold: ${Math.round(threshold)}`;
 	}
 
 	function draw() {
@@ -479,6 +493,8 @@
 		smoothNTeams = smoothNTeams * (smoothCoeff) + nTeams * (1 - smoothCoeff);
 		if (isNaN(smoothNTeams)) smoothNTeams = nTeams;
 
+		threshold = numSquaresX*numSquaresY/smoothNTeams/mix(1.2, 4, suddenDeathCoeff);
+
 		ctx.clearRect(0, 0, canvas.width, canvas.height);
 		drawSquares();