Added link parsing

Fixed issue where larger graphs wouldn't reset

analyser.js

@@ -11,6 +11,17 @@ var dataDelta = [];
 
 ///// MATHS FUNCTIONS /////
 
+// Next two functions are for timers... ripped from geeksforgeeks.org
+function sleep(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+async function waitAndReset() {
+    await sleep(2000);
+    var tooltip = document.getElementById("shareButton");
+    tooltip.innerHTML = "Share";
+}
+
 // Calculate Reduction of Area
 function getReduction(startSize, finalSize) {
     var startArea = Math.PI * ((startSize / 2) * (startSize / 2));
@@ -516,9 +527,21 @@ function clearScreen() {
     document.getElementById("spacer2").style.display = 'none';
     document.getElementById("spacer3").style.display = 'none';
 
-    // Add two fresh entries
+    // If we have any search parameters in the URL, clear them too
-    addReduction();
+    var address = window.location;
-    addReduction();
+
+    if ((address.href).includes('?')) {
+        let domain = address.protocol + "//" + address.host + "/";
+        window.history.pushState({},"Wiredraw Setup Analyser",domain);
+    }
+
+    // Reset the arrays used for graph generation
+    dieCount = [];
+    dataROA = [];
+    dataROD = [];
+    dataElong = [];
+    dataAngle = [];
+    dataDelta = [];
 }
 
 ///// END ALGORITHMS SECTION /////
@@ -569,3 +592,133 @@ function formatCheck(value) {
     }
     return value;
 }
+
+function createLink() {
+    // Set our domain to create our link. We will default to the URL hosting the page
+    var domain = window.location.protocol + "//" + window.location.host + "/";
+
+    var shareLink = new URL(domain);
+    
+    // Create the starting point for the setup manually
+    var size = document.getElementById("die0").value;
+    size = formatCheck(size);
+
+    // Check if the metric option is checked and save that
+    if (document.getElementById("metric").checked == true) {
+        var isMetric = "true";
+    } else {
+        var isMetric = "false";
+    }
+
+    // Add the starting information to the link
+    shareLink.searchParams.append("dies", numDies);
+    shareLink.searchParams.append("metric", isMetric);
+    shareLink.searchParams.append("size0", size);
+
+    // Next iterate through all available reductions and add them as well, including their angle
+    for (var i = 1; i <= numDies; i++) {
+        var dieNum = "die" + i;
+        var angleNum = "angle" + i;
+        size = document.getElementById(dieNum).value;
+        size = formatCheck(size);
+        var angle = document.getElementById(angleNum).value;
+
+        // If values are null, change them to zero
+        if (size == null) { 
+            size = 0;
+        }
+        
+        if (angle == null) {
+            angle = 0;
+        }
+
+        // Append the data to the link
+        shareLink.searchParams.append("size" + i, size);
+        shareLink.searchParams.append("angle" + i, angle);
+    }
+    // Display the link to the user... I want to make this prettier some day but this crude solution is GoodEnough™️
+    //window.prompt("Your share link: (Note: it has already been copied to your clipboard!)", shareLink.href);
+    navigator.clipboard.writeText(shareLink.href);
+    
+    var tooltip = document.getElementById("shareButton");
+    tooltip.innerHTML = "Copied";
+    waitAndReset();
+}
+
+function readLink() {
+
+    var address = window.location.href;
+
+    if (address.includes('?')) { // Check if we actually have search parameters or not, otherwise ignore all of this
+        // Get address and setup parsing
+        var params = address.split('?')[1];
+        var query = new URLSearchParams(params);
+    
+        // Setup arrays for sizes and angles
+        let size = [];
+        let angle = [];
+    
+        var metric = true;  // Metric status variable
+        var tableCreated = false;  // This variable keeps track of whether or not we've re-drawn the output table after clearing the screen
+    
+        var i = 0; // Keep track of SIZES
+        var j = 1; // Keep track of ANGLES
+    
+        clearScreen(); // Start by blanking everything to start fresh
+    
+        for (var pair of query.entries()){    
+            // Check our total die count
+            if (pair[0] == "dies") {  
+               numberDies = pair[1];
+            }
+    
+            // Add entries for each die
+            if (tableCreated != true) {
+                for (var k = 0; k < numberDies; k++) {
+                    addReduction();
+                }
+                tableCreated = true;
+            }
+    
+            // Check if our starting size is metric or 'murican
+            if (pair[0] == "metric" && pair[1] == "true"){ // If metric is checked...
+                document.getElementById("metric").checked = true;
+                metric = true;
+            } else if (pair[0] == "metric" && pair[1] == "false"){ // If inches is checked...
+                document.getElementById("inches").checked = true;
+                metric = false;
+            }
+    
+            // Incremental variables for both size and angle
+            // These are separate because it's easier to parse this way
+            sizeNum = "size" + i;
+            angleNum = "angle" + j;
+    
+            // Grab angle or size from the data pair
+            if (pair[0] == angleNum) {
+                angle[i] = pair[1];
+            }
+            if (pair[0] == sizeNum) {
+                size[i] = pair[1];
+            }
+    
+            // If values exist, and are defined, write them to the page
+            if (size[i] != undefined || size[i] != null){
+                // Check if it's metric/rod, if so we only need one decimal
+                if (metric == true && pair[0] == "size0") {
+                    document.getElementById("die" + i).value = Number(size[i]).toFixed(1);
+                } else { // everything else gets three decimal places
+                    document.getElementById("die" + i).value = Number(size[i]).toFixed(3);
+                }
+                i++;
+            }
+            if (angle[i] != undefined || angle[i] != null){
+                document.getElementById(angleNum).value = Number(angle[i]);
+                j++;
+            }
+        }
+        doMath();  // Run the calculations and display the result
+    } else {
+        // If there are no parameters... we will do nothing
+    }
+}

index.html

@@ -10,7 +10,7 @@
     <title id="pageTitle">Wiredraw Setup Analyser</title>
 </head>
 
-<body>
+<body onload="readLink()">
     <div class="content">
         <div class="printHeader">
             <p id="vanity">Taylor Courage's</p>
@@ -44,7 +44,8 @@
                 </table>
                 <p></p>
                 <button name="Calculate" id="calculateButton" onclick="doMath()">Recalculate</button>
-                <button name="Clear" id="clearButton" onclick="clearScreen()">Clear</button>
+                <button name="Clear" id="clearButton" onclick="clearScreen();addReduction();addReduction()">Clear</button>
+                <button name="Share" id="shareButton" onclick="createLink()" style="width:60px;">Share</button>
                 <button name="Print" id="printButton" onclick="printScreen()">Print</button>
                 <script>addReduction()</script>
                 <script>addReduction()</script>