Add softness; hide some options before loading; fix duplicate params

xray.css

@@ -2,6 +2,10 @@ canvas {
     position: absolute;
 }
 
+canvas.hidden {
+    display: none;
+}
+
 img {
     display: none;
 }
@@ -14,10 +18,15 @@ img {
     display: flex;
     flex-direction: row;
     transition: 0.5s;
+    flex-wrap: wrap;
 }
 
 #menu.start input,
 #menu.start button,
 #menu.start label {
     font-size: 36pt;
+}
+
+#menu.start .nostart {
+    display: none;
 }

xray.html

@@ -23,15 +23,19 @@
             <input type="text" id="overlay-url" placeholder="URL for overlay image">
         </label>
         <button id="load-button">Load</button>
-        <label>
+        <label class="nostart">
             Radius:
             <input type="number" id="radius" placeholder="200" value="200">
         </label>
-        <button id="share-button">Share</button>
+        <label class="nostart">
+            Softness:
+            <input type="range" id="softness" min="0" max="100" value="25">
+        </label>
+        <button id="share-button" class="nostart">Share</button>
     </div>
     
-    <canvas id="overlay"></canvas>
-    <canvas id="base"></canvas>
+    <canvas class="hidden" id="overlay"></canvas>
+    <canvas class="hidden" id="base"></canvas>
     <img id="overlay-img" src="overlay.png">
     <img id="base-img" src="base.png">
 </body>

xray.js

@@ -4,6 +4,7 @@ let overlayLoaded = false;
 let baseLoaded = false;
 
 let radius = 200;
+let softness = 25;
 
 document.addEventListener("DOMContentLoaded", e => {
     document.querySelector("#load-button").addEventListener("click", e => {
@@ -74,11 +75,21 @@ document.addEventListener("DOMContentLoaded", e => {
             console.warn("That wasn't a valid radius: " + e.target.value);
         }
     });
+    
+    document.querySelector("#softness").addEventListener("change", e => {
+        try {
+            softness = parseInt(e.target.value);
+        } catch {
+            console.warn("That wasn't a valid softness: " + e.target.value);
+        }
+    });
 
     // see if we have params already; if so, use them!
 
     const overlayImg = document.querySelector("#overlay-img");
     const baseImg = document.querySelector("#base-img");
+    const baseInput = document.querySelector("#base-url");
+    const overlayInput = document.querySelector("#overlay-url");
 
     if (url.searchParams.has("base") && url.searchParams.has("overlay")) {
         let baseURL = url.searchParams.get("base");
@@ -87,10 +98,12 @@ document.addEventListener("DOMContentLoaded", e => {
         baseImg.src = baseURL;
         overlayImg.src = overlayURL;
 
+        baseInput.value = baseURL;
+        overlayInput.value = overlayURL;
+
+
         load();
     } else {
-        const baseInput = document.querySelector("#base-url");
-        const overlayInput = document.querySelector("#overlay-url");
     
         try {
             baseInput.value = localStorage.getItem("base");
@@ -107,19 +120,34 @@ document.addEventListener("DOMContentLoaded", e => {
         } catch {
             console.warn("That was a bogus radius...");
         }
-        
     }
-
+    if (url.searchParams.has("softness")) {
+        try {
+            softness = parseInt(url.searchParams.get("softness"));
+            document.querySelector("#softness").value = softness;
+        } catch {
+            console.warn("That was a bogus softness...");
+        }
+    }
+    
     document.querySelector("#share-button").addEventListener("click", e => {
        let shareURL = new URL(window.location);
-       
-       for (var key of shareURL.searchParams.keys()) {
-           shareURL.searchParams.delete(key);
-       }
+
+       // for some reason, the parser gets confused by urlencoded urls...
+       // so, to get rid of all parameters, we do this
+
+       let keys = Array.from(shareURL.searchParams.keys());
+       do {
+           keys = Array.from(shareURL.searchParams.keys());
+           keys.forEach(key => {
+               shareURL.searchParams.delete(key);
+           });
+       } while (keys.length > 0)
 
        shareURL.searchParams.append("base", baseImg.src);
        shareURL.searchParams.append("overlay", overlayImg.src);
        shareURL.searchParams.append("radius", radius);
+       shareURL.searchParams.append("softness", softness);
 
        console.log(shareURL);
 
@@ -159,6 +187,9 @@ function setup() {
     const overlay = document.querySelector("#overlay");
     const base = document.querySelector("#base");
 
+    overlay.classList.remove("hidden");
+    base.classList.remove("hidden");
+
     const overlayImg = document.querySelector("#overlay-img");
     const baseImg = document.querySelector("#base-img");
 
@@ -199,7 +230,7 @@ function updateOverlay(points) {
         overlayCtx.ellipse(x, y, radius, radius, 0, 0, 2 * Math.PI);
     
         const gradient = overlayCtx.createRadialGradient(x, y, 0, x, y, radius);
-        gradient.addColorStop(0.75, '#000000FF');
+        gradient.addColorStop((100-softness)/100, '#000000FF');
         gradient.addColorStop(1, '#00000000');
         overlayCtx.fillStyle = gradient;