Only try to read params if overlay and base are set; set url immediately on start

xray.js

@@ -321,6 +321,55 @@ document.addEventListener("DOMContentLoaded", e => {
 
         firstTime = false;
 
+        if (url.searchParams.has("radius")) {
+            try {
+                radius = parseInt(url.searchParams.get("radius"));
+                document.querySelector("#radius-slider").value = radius;
+                document.querySelector("#radius-input").value = radius;
+            } catch {
+                console.warn("That was a bogus radius...");
+            }
+        }
+        if (url.searchParams.has("softness")) {
+            try {
+                softness = parseInt(url.searchParams.get("softness"));
+                document.querySelector("#softness-slider").value = softness;
+                document.querySelector("#softness-input").value = softness;
+            } catch {
+                console.warn("That was a bogus softness...");
+            }
+        }
+        if (url.searchParams.has("darkness")) {
+            try {
+                darkness = parseInt(url.searchParams.get("darkness"));
+                document.querySelector("#darkness-slider").value = darkness;
+                document.querySelector("#darkness-input").value = darkness;
+                document.querySelector("#shadow").style.setProperty("--opacity", darkness / 100);
+            } catch {
+                console.warn("That was a bogus darkness...");
+            }
+        }
+        if (url.searchParams.has("opacity")) {
+            try {
+                opacity = parseInt(url.searchParams.get("opacity"));
+                document.querySelector("#opacity-slider").value = opacity;
+                document.querySelector("#opacity-input").value = opacity;
+                document.querySelector("#overlay").style.setProperty("--opacity", opacity / 100);
+            } catch {
+                console.warn("That was a bogus opacity...");
+            }
+        }
+    
+        if (url.searchParams.has("border")) {
+            try {
+                border = 1 == parseInt(url.searchParams.get("border"));
+            } catch {
+                
+            }
+        } else {
+            border = false;
+        }
+
 
 
         load();
@@ -334,55 +383,7 @@ document.addEventListener("DOMContentLoaded", e => {
         }
     }
 
-    if (url.searchParams.has("radius")) {
-        try {
-            radius = parseInt(url.searchParams.get("radius"));
-            document.querySelector("#radius-slider").value = radius;
-            document.querySelector("#radius-input").value = radius;
-        } catch {
-            console.warn("That was a bogus radius...");
-        }
-    }
-    if (url.searchParams.has("softness")) {
-        try {
-            softness = parseInt(url.searchParams.get("softness"));
-            document.querySelector("#softness-slider").value = softness;
-            document.querySelector("#softness-input").value = softness;
-        } catch {
-            console.warn("That was a bogus softness...");
-        }
-    }
-    if (url.searchParams.has("darkness")) {
-        try {
-            darkness = parseInt(url.searchParams.get("darkness"));
-            document.querySelector("#darkness-slider").value = darkness;
-            document.querySelector("#darkness-input").value = darkness;
-            document.querySelector("#shadow").style.setProperty("--opacity", darkness / 100);
-        } catch {
-            console.warn("That was a bogus darkness...");
-        }
-    }
-    if (url.searchParams.has("opacity")) {
-        try {
-            opacity = parseInt(url.searchParams.get("opacity"));
-            document.querySelector("#opacity-slider").value = opacity;
-            document.querySelector("#opacity-input").value = opacity;
-            document.querySelector("#overlay").style.setProperty("--opacity", opacity / 100);
-        } catch {
-            console.warn("That was a bogus opacity...");
-        }
-    }
-
-    if (url.searchParams.has("border")) {
-        try {
-            border = 1 == parseInt(url.searchParams.get("border"));
-            console.log(border);
-        } catch {
-            
-        }
-    } else {
-        border = false;
-    }
+    
     document.querySelector("#show-border").checked = border;
 
     window.addEventListener("resize", e => {
@@ -532,6 +533,8 @@ function setup() {
     document.querySelector("#radius-input").max = Math.max(baseImg.width, baseImg.height);
     document.querySelector("#radius-slider").max = Math.max(baseImg.width, baseImg.height);
 
+    setURL();
+
     console.log("Done");
 }
 
@@ -541,6 +544,10 @@ function ease(t, k) {
 
 function updateOverlay(points, clicked) {
 
+    if (!running) {
+        return;
+    }
+
     const overlay = document.querySelector("#overlay");
     const overlayResized = document.querySelector("#overlay-resized");