[pongwars] color changes

also make initial state noise rather than rows, which is fairer

pongwars/index.html

@@ -52,6 +52,12 @@
 				padding-left: 20px;
 			}
 
+			#instr {
+				font-family: monospace;
+				font-size: 12px;
+				padding-left: 20px;
+			}
+
 			#made a {
 				color: #172b36;
 			}
@@ -62,9 +68,15 @@
 		<div id="container">
 			<canvas id="pongCanvas" width="1200" height="800"></canvas>
 			<div id="score"></div>
+			<p id="instr">
+			balls can be controlled with number keys
+			</p>
 			<p id="made">
 				made by <a href="https://koenvangilst.nl">Koen van Gilst</a> | source on
 				<a href="https://github.com/vnglst/pong-wars">github</a>
+				<br>
+				patches from dogeystamp | patched source on
+				<a href="https://github.com/dogeystamp/garbage-monorepo/tree/main/pongwars">github</a>
 			</p>
 		</div>
 	</body>
@@ -73,17 +85,20 @@
 		// Based on: https://github.com/vnglst/pong-wars
 		// Idea for Pong wars: https://twitter.com/nicolasdnl/status/1749715070928433161
 
+		// This code is patched: see https://github.com/dogeystamp/garbage-monorepo/tree/main/pongwars
+		// Main features added are controlling balls and colors being able to die
+
 		const canvas = document.getElementById("pongCanvas");
 		const ctx = canvas.getContext("2d");
 		const scoreElement = document.getElementById("score");
-	const startTime = new Date();
-	var suddenDeathCoeff = 0;
+		const startTime = new Date();
+		var suddenDeathCoeff = 0;
 
 		const teams = [
 			{
 				name: "red",
-				color: "#ff5555",
-				backgroundColor: "#aa0000",
+				color: "indianred",
+				backgroundColor: "darkred",
 				x: 256,
 				y: 256,
 				dx: 8,
@@ -92,8 +107,8 @@
 			},
 			{
 				name: "blue",
-				color: "#5555ff",
-				backgroundColor: "#200199",
+				color: "blue",
+				backgroundColor: "darkblue",
 				x: 768,
 				y: 256,
 				dx: -8,
@@ -102,8 +117,8 @@
 			},
 			{
 				name: "green",
-				color: "#a7f070",
-				backgroundColor: "#00aa00",
+				color: "green",
+				backgroundColor: "darkgreen",
 				x: 256,
 				y: 768,
 				dx: 8,
@@ -111,9 +126,9 @@
 				score: 0,
 			},
 			{
-				name: "yellow",
-				color: "#ffff55",
-				backgroundColor: "#aa5500",
+				name: "orange",
+				color: "coral",
+				backgroundColor: "chocolate",
 				x: 768,
 				y: 768,
 				dx: -8,
@@ -122,8 +137,8 @@
 			},
 			{
 				name: "white",
-				color: "#ffffff",
-				backgroundColor: "#aaaaaa",
+				color: "white",
+				backgroundColor: "gainsboro",
 				x: 400,
 				y: 768,
 				dx: -9,
@@ -133,7 +148,7 @@
 			{
 				name: "black",
 				color: "#333333",
-				backgroundColor: "#000000",
+				backgroundColor: "black",
 				x: 400,
 				y: 300,
 				dx: -8,
@@ -142,8 +157,8 @@
 			},
 			{
 				name: "ourple",
-				color: "#dd33dd",
-				backgroundColor: "#aa00aa",
+				color: "violet",
+				backgroundColor: "purple",
 				x: 400,
 				y: 768,
 				dx: -8,
@@ -152,7 +167,7 @@
 			},
 			{
 				name: "gray",
-				color: "#dddddd",
+				color: "gray",
 				backgroundColor: "#333333",
 				x: 400,
 				y: 768,
@@ -185,8 +200,8 @@
 
 		for (let i = 0; i < numSquaresX; i++) {
 			squares[i] = [];
-		const t = randInt(0, teams.length-1);
 			for (let j = 0; j < numSquaresY; j++) {
+				const t = randInt(0, teams.length-1);
 				squares[i][j] = t;
 			}
 		}
@@ -288,7 +303,7 @@
 					const coeff = Math.min((teams[color].score/(numSquaresX*numSquaresY/nTeams/mix(1.2, 4, suddenDeathCoeff))), 1.00);
 					updatedDx *= coeff;
 					updatedDy *= coeff;
-					const speedLim = mix(30, 18, suddenDeathCoeff)
+					const speedLim = mix(30, 13, suddenDeathCoeff)
 					const norm = (updatedDx**2 + updatedDy**2)**(1/2)
 					const scalar = Math.min(speedLim/norm, 1)
 					updatedDx *= scalar;
@@ -328,7 +343,7 @@
 		}
 
 		scoreElement.textContent = teams
-			.map((t) => `${t.name} ${t.score}`)
+			.map((t, idx) => `(${idx}) ${t.name} ${t.score}`)
 		.join(" | ") + (suddenDeathCoeff > 0.1 ? " | sudden death!" : "");
 	}