From f7c1b3e023b9c323401d44e28c9736f98da98122 Mon Sep 17 00:00:00 2001
From: slweeb <91897291+slweeb@users.noreply.github.com>
Date: Tue, 25 Nov 2025 21:57:38 -0500
Subject: [PATCH] borders.js

---
 mod-list.html   |  3 +++
 mods/borders.js | 56 +++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 59 insertions(+)
 create mode 100644 mods/borders.js

diff --git a/mod-list.html b/mod-list.html
index bbe0402d..5ffc9e13 100644
--- a/mod-list.html
+++ b/mod-list.html
@@ -132,6 +132,7 @@
 <!----><tr><td class="modCat" colspan="3">Official</td></tr><!---->
 <tr><td>alchemy.js</td><td>Start with only 4 elements and unlock more by reacting them together (Most are not possible)</td><td><a href="https://R74n.com" class="R74nLink">R74n</a></td></tr>
 <tr><td>background_changer.js</td><td>Press 'B' to change canvas background to a URL</td><td><a href="https://R74n.com" class="R74nLink">R74n</a></td></tr>
+<tr><td>borders.js</td><td>Black borders around pixels (Use bright background)</td><td><a href="https://R74n.com" class="R74nLink">R74n</a></td></tr>
 <tr><td>building.js</td><td>Building generators and materials</td><td><a href="https://R74n.com" class="R74nLink">R74n</a></td></tr>
 <tr><td>classic_explosives.js</td><td>Re-adds 4 explosives removed in v1.9.3</td><td><a href="https://R74n.com" class="R74nLink">R74n</a></td></tr>
 <tr><td>classic_textures.js</td><td>Use textures from early versions of the game</td><td><a href="https://R74n.com" class="R74nLink">R74n</a></td></tr>
@@ -415,6 +416,8 @@
 <!----><tr><td class="modCat" colspan="3">Visual Effects</td></tr><!---->
 <tr><td>acid_and_shapes.js</td><td>Weird visual effects enabled in settings</td><td>Alice</td></tr>
 <tr><td>asciiboxels.js</td><td>Renders pixels as ASCII characters</td><td>Nekonico</td></tr>
+<tr><td>background_changer.js</td><td>Press 'B' to change canvas background to a URL</td><td><a href="https://R74n.com" class="R74nLink">R74n</a></td></tr>
+<tr><td>borders.js</td><td>Black borders around pixels (Use bright background)</td><td><a href="https://R74n.com" class="R74nLink">R74n</a></td></tr>
 <tr><td>clouds.js</td><td>Moving clouds, sky.js recommended</td><td>RedBirdly</td></tr>
 <tr><td>customBackground.js</td><td>Set your background to an image link</td><td>Jayd</td></tr>
 <tr><td>fast_lightmap.js</td><td>Light sources glow, but faster</td><td>RedBirdly</td></tr>
diff --git a/mods/borders.js b/mods/borders.js
new file mode 100644
index 00000000..fdf314b3
--- /dev/null
+++ b/mods/borders.js
@@ -0,0 +1,56 @@
+viewInfo[1].pre = function(ctx) {
+	currentPixels.forEach(pixel => {
+		if (!elements[pixel.element].movable) return;
+		let edge = false;
+		for (var i = 0; i < adjacentCoords.length; i++) {
+			var coords = adjacentCoords[i];
+			var x = pixel.x + coords[0];
+			var y = pixel.y + coords[1];
+			if (isEmpty(x,y)) {
+				// if (elements[pixelMap[x][y].element].id !== elements[pixel.element].id || elements[pixelMap[x][y].element].state !== elements[pixel.element].id) continue
+				edge = true;
+				break;
+			}
+		}
+		if (edge) drawSquare(ctx,"rgb(0,0,0)",pixel.x-0.5,pixel.y-0.5,2);
+	})
+}
+
+let oldPixelRenderer = viewInfo[1].pixel;
+
+viewInfo[1].pixel = function(pixel, ctx) {
+	if (elements[pixel.element].movable) return oldPixelRenderer(pixel, ctx);
+	let edge = false;
+	for (var i = 0; i < adjacentCoords.length; i++) {
+		var coords = adjacentCoords[i];
+		var x = pixel.x + coords[0];
+		var y = pixel.y + coords[1];
+		if (isEmpty(x,y) || (!outOfBounds(x,y) &&
+			elements[pixelMap[x][y].element].movable
+		)) {
+			// if (elements[pixelMap[x][y].element].id !== elements[pixel.element].id || elements[pixelMap[x][y].element].state !== elements[pixel.element].id) continue
+			edge = true;
+			break;
+		}
+	}
+	if (edge) drawSquare(ctx,"rgb(0,0,0)",pixel.x,pixel.y);
+	else oldPixelRenderer(pixel, ctx);
+}
+
+// viewInfo[1].post = function(ctx) {
+// 	currentPixels.forEach(pixel => {
+// 		let edge = false;
+// 		for (var i = 0; i < adjacentCoords.length; i++) {
+// 			var coords = adjacentCoords[i];
+// 			var x = pixel.x + coords[0];
+// 			var y = pixel.y + coords[1];
+// 			if (!isEmpty(x,y,true) && elements[pixelMap[x][y].element].movable !== elements[pixel.element].movable) {
+// 				// if (elements[pixelMap[x][y].element].id !== elements[pixel.element].id || elements[pixelMap[x][y].element].state !== elements[pixel.element].id) continue
+// 				edge = true;
+// 				break;
+// 			}
+// 		}
+// 		if (edge) drawSquare(ctx,"rgb(0,0,0)",pixel.x-0.5,pixel.y-0.5,2);
+// 	})
+// }
+