Merge pull request #42 from 42core-team/41-blood-stains

41 blood stains

Author: FreddyMSchubert

public/sketch.js

@@ -54,12 +54,86 @@ const BAR_WIDTH       = 20;         // bar thickness
 const BAR_ROUNDING    = 10;         // px corner radius
 const RATIO_EASE      = 0.05;       // lerp factor
 
+let lastHP = {};  // key: unit.id, value: hp
+let bloodStains = [];
+
 const types = {
 	CORE: 0,
 	UNIT: 1,
 	RESOURCE: 2
 }
 
+// ─── Blood settings (area-based) ───────────────────────────────────────────
+const BLOOD_MAX_AREA     = 25000000;
+
+function updateBloodStains() {
+	// compute the same offsets you use in drawBlood/draw_grid
+	const xOff = -cols * boxSize / 2;
+	const yOff = -rows * boxSize / 2;
+	const f    = (cols * boxSize) / config.width;
+
+	for (let unit of game.units || []) {
+		if (!(unit.id in lastHP)) lastHP[unit.id] = unit.hp;
+		const prev = lastHP[unit.id];
+		const lost = prev - unit.hp;
+
+		if (lost > 0) {
+			// instead of top-left, we now add +boxSize/2 to center it
+			const x = unit.pos.x * f + xOff + boxSize / 2;
+			const y = unit.pos.y * f + yOff + boxSize / 2;
+
+			let merged = false;
+			for (let stain of bloodStains) {
+				const r = Math.sqrt(stain.area / Math.PI);
+				if (dist(x, y, stain.x, stain.y) < r) {
+					stain.area += lost;
+					if (stain.area > BLOOD_MAX_AREA) {
+						stain.area = BLOOD_MAX_AREA;
+					}
+					merged = true;
+					break;
+				}
+			}
+			if (!merged) {
+				bloodStains.push({
+					x:    x,
+					y:    y,
+					area: Math.min(lost, BLOOD_MAX_AREA)
+				});
+			}
+		}
+		lastHP[unit.id] = unit.hp;
+	}
+}
+
+function drawBlood() {
+	noStroke();
+	fill(150, 0, 0, 200);
+
+	for (let i = 0; i < bloodStains.length; i++) {
+		const a = bloodStains[i];
+		// compute radius from stored area
+		const rA = Math.sqrt(a.area / Math.PI);
+		ellipse(a.x, a.y, rA*2, rA*2);
+
+		// connect overlaps with a nice bridge
+		for (let j = i + 1; j < bloodStains.length; j++) {
+			const b = bloodStains[j];
+			const rB = Math.sqrt(b.area / Math.PI);
+			if (dist(a.x, a.y, b.x, b.y) < (rA + rB) * 0.5) {
+				const midX = (a.x + b.x) / 2;
+				const midY = (a.y + b.y) / 2;
+				const h    = min(rA, rB) * 0.3;
+				beginShape();
+				  vertex(a.x, a.y);
+				  quadraticVertex(midX, midY - h, b.x, b.y);
+				  quadraticVertex(midX, midY + h, a.x, a.y);
+				endShape(CLOSE);
+			}
+		}
+	}
+}
+
 function updateWinRatio() {
 	if (!game.units || game.units.length === 0) return;
 	if (!game.teams || game.teams.length < 2) return;
@@ -329,6 +403,7 @@ function preload() {
 }
 
 function setupWebSocket() {
+	bloodStains = [];
 	socket = new WebSocket('ws://{{.socket}}/ws');
 
 	// WebSocket event listeners
@@ -421,6 +496,7 @@ function isUnitMoving(unit)
 }
 
 function setup() {
+	bloodStains = [];
 	setupWebSocket();
 
 	cols = config.width / 1000;
@@ -449,6 +525,7 @@ function setup() {
 }
 
 function reconnect() {
+	bloodStains = [];
 	configPresent = false;
 	isGameOver = false;
 	setTimeout(setupWebSocket, 1000);
@@ -881,12 +958,16 @@ function draw_game_over() {
 		stroke(0);
 		strokeWeight(2);
 		text
-		if (game.cores[0].team_id == 1) {
-			fill('lightgray');
-			text("Skeleton Team " + config.teams[0].name + " wins!", 0, 0);
+		if (game.cores.length > 1) {
+			text("Someone exited, Pauls gotta look at the log uwu", 0, 0);
 		} else {
-			fill('greenyellow');
-			text("Goblin Team " + config.teams[1].name + " wins!", 0, 0);
+			if (game.cores[0].team_id == 1) {
+				fill('lightgray');
+				text("Skeleton Team " + config.teams[0].name + " wins!", 0, 0);
+			} else {
+				fill('greenyellow');
+				text("Goblin Team " + config.teams[1].name + " wins!", 0, 0);
+			}
 		}
 		pop();
 		isGameOver = true;
@@ -901,6 +982,8 @@ function draw() {
 
 	// draw playing field and its elements
 	draw_grid();
+	updateBloodStains();
+	drawBlood();
 	draw_target_lines();
 	draw_cores();
 	draw_resources();