Add a share button

xray.html

@@ -27,6 +27,7 @@
             Radius:
             <input type="number" id="radius" placeholder="200" value="200">
         </label>
+        <button id="share-button">Share</button>
     </div>
     
     <canvas id="overlay"></canvas>

xray.js

@@ -43,16 +43,9 @@ document.addEventListener("DOMContentLoaded", e => {
             console.error("Couldn't set something in local storage :(")
         }
     });
+
+    let url = new URL(window.location);
     
-    const baseInput = document.querySelector("#base-url");
-    const overlayInput = document.querySelector("#overlay-url");
-
-    try {
-        baseInput.value = localStorage.getItem("base");
-        overlayInput.value = localStorage.getItem("overlay");
-    } catch {
-        console.error("Couldn't get something from local storage :(")
-    }
 
     const overlay = document.querySelector("#overlay");
     
@@ -82,8 +75,58 @@ document.addEventListener("DOMContentLoaded", e => {
         } catch {
             console.warn("That wasn't a valid radius: " + 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");
+
+    if (url.searchParams.has("base") && url.searchParams.has("overlay")) {
+        let baseURL = url.searchParams.get("base");
+        let overlayURL = url.searchParams.get("overlay");
+
+        baseImg.src = baseURL;
+        overlayImg.src = overlayURL;
+
+        load();
+    } else {
+        const baseInput = document.querySelector("#base-url");
+        const overlayInput = document.querySelector("#overlay-url");
+    
+        try {
+            baseInput.value = localStorage.getItem("base");
+            overlayInput.value = localStorage.getItem("overlay");
+        } catch {
+            console.error("Couldn't get something from local storage :(")
+        }
+    }
+
+    if (url.searchParams.has("radius")) {
+        try {
+            radius = parseInt(url.searchParams.get("radius"));
+            document.querySelector("#radius").value = radius;
+        } catch {
+            console.warn("That was a bogus radius...");
+        }
         
+    }
+
+    document.querySelector("#share-button").addEventListener("click", e => {
+       let shareURL = new URL(window.location);
+       
+       for (var key of shareURL.searchParams.keys()) {
+           shareURL.searchParams.delete(key);
+       }
+
+       shareURL.searchParams.append("base", baseImg.src);
+       shareURL.searchParams.append("overlay", overlayImg.src);
+
+       console.log(shareURL);
+
+       window.location = shareURL;
     });
+    
 });
 
 function load() {