Added link parsing

Fixed issue where larger graphs wouldn't reset

analyser.js

@@ -527,9 +527,21 @@ function clearScreen() {
     document.getElementById("spacer2").style.display = 'none';
     document.getElementById("spacer3").style.display = 'none';
 
-    // Add two fresh entries
-    addReduction();
-    addReduction();
+    // If we have any search parameters in the URL, clear them too
+    var address = window.location;
+
+    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 /////
@@ -592,29 +604,35 @@ function createLink() {
     size = formatCheck(size);
 
     // Check if the metric option is checked and save that
-    if (i == 1 && document.getElementById("metric").checked == true) {
+    if (document.getElementById("metric").checked == true) {
         var isMetric = "true";
     } else {
         var isMetric = "false";
     }
 
     // Add the starting information to the link
-    shareLink.searchParams.append("die", "0");
-    shareLink.searchParams.append("size0", size);
+    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;
-        if (!null)
-            var angleNum = "angle" + i;
+        var angleNum = "angle" + i;
         size = document.getElementById(dieNum).value;
         size = formatCheck(size);
         var angle = document.getElementById(angleNum).value;
-        console.log(dieNum + "=" + size);
-        console.log(angleNum + "=" + angle);
+
+        // If values are null, change them to zero
+        if (size == null) { 
+            size = 0;
+        }
         
-        shareLink.searchParams.append("die", i);
+        if (angle == null) {
+            angle = 0;
+        }
+
+        // Append the data to the link
         shareLink.searchParams.append("size" + i, size);
         shareLink.searchParams.append("angle" + i, angle);
     }
@@ -628,5 +646,79 @@ function createLink() {
 }
 
 function readLink() {
-    //TODO
+
+    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,7 @@
                 </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>