.

mods/background_changer.js

@@ -1,4 +1,4 @@
-function setCanvasBG(url) {
+function setCanvasBG(url, color) {
     delete settings.bg;
 
     let canvas = document.getElementById("game");
@@ -9,32 +9,45 @@ function setCanvasBG(url) {
     canvas.style.backgroundPosition = "bottom";
 
     settings.bgimg = url;
+    if (color) settings.bgimgcolor = color;
+    else delete settings.bgimgcolor;
+
+    if (color) document.head.insertAdjacentHTML("beforeend", `<style id="canvasBGStyles">* {background-color:${color}} body, html {background-color:${color}!important}</style>`);
+    else document.getElementById("canvasBGStyles")?.remove();
 
     saveSettings()
 }
+function clearCanvasBG() {
+    delete settings.bgimg;
+    let canvas = document.getElementById("game");
+    canvas.style.backgroundImage = "";
+    canvas.style.backgroundRepeat = "";
+    canvas.style.backgroundSize = "";
+    canvas.style.backgroundPosition = "";
+    document.getElementById("canvasBGStyles")?.remove();
+}
 
-keybinds.KeyB = () => {
+function setCanvasBGPrompt() {
     promptInput("Enter an image URL. Leave blank to clear background.", (url) => {
         if (!url) {
-            delete settings.bgimg;
-            let canvas = document.getElementById("game");
-            canvas.style.backgroundImage = "";
-            canvas.style.backgroundRepeat = "";
-            canvas.style.backgroundSize = "";
-            canvas.style.backgroundPosition = "";
+            clearCanvasBG();
         }
         setCanvasBG(url);
     }, "Background")
 }
 
+keybinds.KeyB = () => {
+    setCanvasBGPrompt()
+}
+
 document.addEventListener("load", () => {
     if (settings.bgimg) {
-        setCanvasBG(settings.bgimg)
+        setCanvasBG(settings.bgimg, settings.bgimgcolor)
     }
 })
 
 runAfterReset(() => {
     if (settings.bgimg) {
-        setCanvasBG(settings.bgimg)
+        setCanvasBG(settings.bgimg, settings.bgimgcolor)
     }
 })

mods/borders.js

@@ -18,7 +18,7 @@ window.addEventListener("load", () => {
 				var coords = adjacentCoords[i];
 				var x = pixel.x + coords[0];
 				var y = pixel.y + coords[1];
-				if (isEmpty(x,y)) {
+				if (isEmpty(x,y, true)) {
 					// 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;

mods/content.js

@@ -0,0 +1,98 @@
+dependOn("borders.js", ()=>{}, true);
+dependOn("glow.js", ()=>{},  true);
+dependOn("background_changer.js", ()=>{},  true);
+dependOn("cursor.js", ()=>{},  true);
+
+function minimizeElement(selector) {
+    document.querySelectorAll(selector).forEach(element => {
+        element.classList.add("minimized");
+    });
+}
+function maximizeAll() {
+    document.querySelectorAll(".minimized").forEach((e) => {
+        e.classList.remove("minimized");
+    })
+}
+document.head.insertAdjacentHTML("beforeend", `
+<style>
+    .minimized {display:none!important}
+    button:focus, * {outline:0;}
+    #underDiv {opacity: 0.5; transition: opacity 0.5s}
+    #underDiv:hover {opacity: 1}
+    #categoryControls {flex-wrap: nowrap!important;}
+    #categoryControls button {padding-left:0.9em!important;padding-right:0.9em!important}
+    #promptParent {
+        top: 50%;
+        transform: translate(-50%, -50%);
+    }
+</style>
+`);
+
+settings.pixelsize = "6w";
+
+contentModOptions = {
+    "Set Background": () => {
+        setCanvasBGPrompt();
+    },
+    "Set Cursor Color": () => {
+        promptInput("Enter an image URL. Leave blank to clear background.", (color) => {
+            if (!color) {
+                delete settings.mouseColor;
+                return;
+            }
+            mouseColor = color;
+            settings.mouseColor = color;
+        }, "Mouse Color")
+    },
+    "Clear Background": () => {
+        clearCanvasBG();
+    },
+    "Grassland": () => setCanvasBG("https://i.imgur.com/Id9WZv4.png", "#2d6138ff"),
+    "Sky": () => setCanvasBG("https://i.imgur.com/Er068gC.png", "#647690ff"),
+    "Sky Warm": () => setCanvasBG("https://i.imgur.com/aJeSRLk.png", "#904f45ff"),
+    "Minimize UI": () => {
+        minimizeElement("#stats");
+        minimizeElement("#extraInfo");
+        minimizeElement("#bottomInfoBox");
+        minimizeElement("#logDiv");
+        minimizeElement("#toolControls");
+        document.getElementById("category-tools").style.borderTop = "6px black solid";
+        document.getElementById("category-tools").style.paddingTop = "0.5em";
+        resetPrompt();
+    },
+    "Maximize UI": () => {
+        maximizeAll();
+    },
+    "Content Hub": () => {
+        window.open("https://r74n.com/content/", '_blank');
+    },
+}
+
+keybinds.KeyV = () => {
+    promptChoose("", Object.keys(contentModOptions), (r) => {
+        contentModOptions[r]();
+    })
+}
+
+elements.invis = {
+    renderer: (pixel,ctx) => {
+        if (currentElement === "invis") {
+            drawSquare(ctx,"#00ff00",pixel.x,pixel.y);
+        }
+    },
+    behavior: (pixel) => {
+        doDefaults(pixel);
+    },
+    onPlace: (pixel) => {
+        pixel.alpha = 0;
+    },
+    tool: (pixel) => {
+        pixel.alpha = 0;
+    },
+    category: "special",
+    color: "#00ff00"
+}
+
+window.addEventListener("load", () => {
+    contentModOptions["Minimize UI"]();
+})

mods/devsnacks.js

@@ -5,6 +5,8 @@ smash into tea powder
 tea powder + hot water = colored tea
 */
 
+dependOn("mustard.js", ()=>{}, true);
+
 elements.herb.tempHigh = 100;
 elements.herb.stateHigh = ["steamed_herb","steamed_herb","steam",null];