Implement a share build link

Author: rmkane

dist/js/bundle.js

@@ -691,6 +691,7 @@ class GunplaCalculator {
         this.searchPart = "";
         this.sort = "";
         this.currentPart = "";
+        this.shareLinkDisplay = document.querySelector(".share-link-display");
     }
     init() {
         Sorters.filter(s => s.isParam !== false).forEach(sorter => {
@@ -709,6 +710,7 @@ class GunplaCalculator {
         this._initApplyMapBonus();
         this._initSearchPart();
         this._initRemove();
+        this._initSharedData();
     }
     _generateSkillIcon(exData) {
         return `<span class='ex-cat-icon gbgw-skill-${exData.category.toLowerCase().replace(/\s/g, "-")}'></span>`;
@@ -841,6 +843,31 @@ class GunplaCalculator {
         }
         return true;
     }
+    _showShareLink() {
+        var selected = {};
+        const inputs = this.inputs;
+        for (let input in inputs) {
+            if (inputs.hasOwnProperty(input) && inputs[input]) {
+                selected[inputs[input].dataset.part] = inputs[input].dataset.partname;
+            }
+        }
+        var result = JSON.stringify(selected);
+        var curLink = new URL(window.location.href);
+        var genLink = curLink.protocol + "//" + curLink.host + curLink.pathname + "?d=" + window.btoa(result);
+        this.shareLinkDisplay.innerHTML = '<a href="' + genLink + '">' + genLink + "</a>";
+    }
+    _initSharedData() {
+        var curLink = new URL(window.location.href);
+        var selected = {};
+        var nextUrlParam = curLink.searchParams.entries().next();
+        if (!nextUrlParam.done) {
+            selected = JSON.parse(window.atob(nextUrlParam.value[1]));
+            for (let key in selected) {
+                this._handleInputClick(document.querySelector(".js-input-" + key));
+                this._handlePartSelection(document.querySelector('div[data-partname="' + selected[key] + '"]'));
+            }
+        }
+    }
     _showPartList(partToShow) {
         let Collections = this.dataStoreManager.getStoreData("Collections");
         if (this.partList && Collections && Array.isArray(Collections)) {
@@ -922,6 +949,7 @@ class GunplaCalculator {
             }
         }
         this._calculate(partData);
+        this._showShareLink();
     }
     _getPartSlotClass(dataset, forcePart) {
         let partClass = "gbgw-";

dist/js/bundle.min.js

@@ -69,6 +69,10 @@ <h1>GBGW Calculator v1.2.4</h1>
           </div>
         </div>
       </header>
+      <div style="width: calc(1380px + 1em); margin: auto">
+        <h3>Share selected parts and gear</h3>
+        <div class="share-link-display" style="overflow-wrap:anywhere;"></div>
+      </div>
       <div class="container js-container"></div>
       <footer>
         <div class="notice">

dist/js/bundle.min.js.map

@@ -30,6 +30,7 @@ class GunplaCalculator {
     this.searchPart = '';
     this.sort = '';
     this.currentPart = '';
+    this.shareLinkDisplay = document.querySelector('.share-link-display');
   }
 
   init() {
@@ -49,6 +50,7 @@ class GunplaCalculator {
     this._initApplyMapBonus();
     this._initSearchPart();
     this._initRemove();
+    this._initSharedData();
   }
 
   _generateSkillIcon(exData) {
@@ -190,6 +192,38 @@ class GunplaCalculator {
     return true;
   }
 
+  _showShareLink(){
+    var selected = {};
+
+    const inputs = this.inputs;
+    for (let input in inputs) {
+      if (inputs.hasOwnProperty(input) && inputs[input]) {
+        selected[inputs[input].dataset.part]=inputs[input].dataset.partname;
+      }
+    }
+
+    var result = JSON.stringify(selected);
+    var curLink = new URL(window.location.href);
+    var genLink = curLink.protocol + "//" + curLink.host + curLink.pathname + "?d=" + window.btoa(result);
+
+    this.shareLinkDisplay.innerHTML = '<a href="' + genLink + '">' + genLink + '</a>';
+  }
+
+  _initSharedData(){
+    var curLink = new URL(window.location.href);
+    var selected = {};
+
+    var nextUrlParam = curLink.searchParams.entries().next();
+    if(!nextUrlParam.done){
+      selected = JSON.parse(window.atob(nextUrlParam.value[1]));
+
+      for(let key in selected){
+        this._handleInputClick(document.querySelector(".js-input-"+key));
+        this._handlePartSelection(document.querySelector('div[data-partname="' + selected[key] + '"]'));
+      }
+    }
+  }
+
   _showPartList(partToShow) {
     let Collections = this.dataStoreManager.getStoreData('Collections');
     if (this.partList && Collections && Array.isArray(Collections)) {
@@ -278,6 +312,7 @@ class GunplaCalculator {
       }
     }
     this._calculate(partData);
+    this._showShareLink();
   }
 
   _getPartSlotClass(dataset, forcePart) {