[pongwars] compensate squaresize in more places

docs/pongwars/index.html

@@ -31,7 +31,7 @@
 				display: block;
 				border-radius: 4px;
 				overflow: hidden;
-				width: 100%;
+				max-width: 150%;
 				margin-top: auto;
 				box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
 			}
@@ -95,6 +95,7 @@
 				<a class="modeLink" data-mode="big">big</a>
 				<a class="modeLink" data-mode="small">small</a>
 				<a class="modeLink" data-mode="massive">massive</a>
+				<a class="modeLink" data-mode="battle-royale">battle-royale</a>
 			</div>
 		</div>
 	</body>
@@ -202,7 +203,7 @@
 		},
 		{
 			name: "sand",
-			color: "cornsilk",
+			color: "#BA9500",
 			backgroundColor: "burlywood",
 		},
 		{
@@ -215,6 +216,86 @@
 			color: "mediumspringgreen",
 			backgroundColor: "mediumseagreen",
 		},
+		{
+			name: "peachpuff",
+			color: "white",
+			backgroundColor: "peachpuff",
+		},
+		{
+			name: "dark-brown",
+			color: "saddlebrown",
+			backgroundColor: "#3B1503",
+		},
+		{
+			name: "swamp",
+			color: "darkseagreen",
+			backgroundColor: "#2B2503",
+		},
+		{
+			name: "light-sea-green",
+			color: "mediumspringgreen",
+			backgroundColor: "darkseagreen",
+		},
+		{
+			name: "wood",
+			color: "cornsilk",
+			backgroundColor: "#BE9867",
+		},
+		{
+			name: "lavender",
+			color: "honeydew",
+			backgroundColor: "thistle",
+		},
+		{
+			name: "pale-violet",
+			color: "coral",
+			backgroundColor: "palevioletred",
+		},
+		{
+			name: "violet",
+			color: "violet",
+			backgroundColor: "blueviolet",
+		},
+		{
+			name: "epaper-white",
+			color: "black",
+			backgroundColor: "lemonchiffon",
+		},
+		{
+			name: "lcd-green",
+			color: "#A8C64E",
+			backgroundColor: "#4C412C",
+		},
+		{
+			name: "orange-blue",
+			color: "tomato",
+			backgroundColor: "darkslateblue",
+		},
+		{
+			name: "cyan",
+			color: "cornsilk",
+			backgroundColor: "#00AAAA",
+		},
+		{
+			name: "neon-green",
+			color: "olivedrab",
+			backgroundColor: "greenyellow",
+		},
+		{
+			name: "r",
+			color: "white",
+			backgroundColor: "#DD0000",
+		},
+		{
+			name: "g",
+			color: "white",
+			backgroundColor: "#00DD00",
+		},
+		{
+			name: "b",
+			color: "white",
+			backgroundColor: "#0000DD",
+		},
 	];
 
 	var state = {}
@@ -265,6 +346,11 @@
 		modeLinks[i].href = loc.href;
 	}
 
+	// a lot of things are based on canvas coords not real square coords
+	function compensateSquareSize(x) {
+		return x / 16 * squareSize;
+	}
+
 	function initialState({gridW = 4, gridH = 2, cols = teams.length, canvasW=1200, canvasH=800, squareSize=16} = {}) {
 		ctx.clearRect(0, 0, canvas.width, canvas.height);
 
@@ -327,8 +413,7 @@
 
 			for (let i = 0; i < teams.length; i++) {
 				const angle = randomNum(0, 2 * Math.PI);
-				// this is in canvas coords so compensate squareSize
+				const initSpeed = compensateSquareSize(8);
-				const initSpeed = 0.5 * squareSize;
 				state[i].dx = initSpeed * Math.cos(angle);
 				state[i].dy = initSpeed * Math.sin(angle);
 			}
@@ -355,6 +440,9 @@
 		case "massive":
 			initialState({gridW: 5, gridH: 4, cols: 20, canvasW: 2000, canvasH: 1500, squareSize: 10});
 			break;
+		case "battle-royale":
+			initialState({gridW: 9, gridH: 4, cols: 36, canvasW: 2000, canvasH: 1000, squareSize: 5});
+			break;
 		case "small":
 			initialState({gridW: 2, gridH: 1, cols: 2, canvasW: 600, canvasH: 600, squareSize: 25});
 			break;
@@ -422,7 +510,7 @@
 
 	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
+		if (Math.max(Math.abs(dx), Math.abs(dy)) < compensateSquareSize(0.02)) state[color].elim = true
 
 		if (Math.min(x, y) < 0 || isNaN(x) || isNaN(y)) {
 			console.warn(`warped ${teams[color].name}`)
@@ -506,12 +594,11 @@
 						updatedDy = -updatedDy;
 					}
 
-					updatedDx += randomNum(-0.15, mix(0.153, 0.15, suddenDeathCoeff));
+					updatedDx += compensateSquareSize(randomNum(-0.15, mix(0.153, 0.15, suddenDeathCoeff)))
-					updatedDy += randomNum(-0.15, 0.15);
+					updatedDy += compensateSquareSize(randomNum(-0.15, 0.15))
 					updatedDx *= coeff;
 					updatedDy *= coeff;
-					// speedLim is based on canvas coords but we should compensate it when squareSize changes
+					const speedLim = compensateSquareSize(mix(30, 15, suddenDeathCoeff))
-					const speedLim = mix(30, 13, suddenDeathCoeff) / 16 * squareSize
 					const norm = (updatedDx**2 + updatedDy**2)**(1/2)
 					const scalar = Math.min(speedLim/norm, 1)
 					updatedDx *= scalar;