From 890b5252f011675fce56952779639b3c4b1fff1e Mon Sep 17 00:00:00 2001
From: dr-carlos <dr_steven_carlos@outlook.com>
Date: Sun, 12 Sep 2021 15:48:20 +0930
Subject: [PATCH] Add local build saving/loading

---
 builder.js | 31 +++++++++++++++++++++++++++++++
 index.html | 28 ++++++++++++++++++++++++++++
 2 files changed, 59 insertions(+)

diff --git a/builder.js b/builder.js
index 1f42096..9363376 100644
--- a/builder.js
+++ b/builder.js
@@ -885,6 +885,37 @@ function shareBuild() {
     }
 }
 
+function saveBuild() {
+    if (player_build) {
+        let savedBuilds = window.localStorage.getItem("builds") === null ? {} : JSON.parse(window.localStorage.getItem("builds"));
+        let saveName = document.getElementById("build-name").value;
+        if ((!Object.keys(savedBuilds).includes(saveName) || document.getElementById("saved-error").textContent !== "") && location.hash !== "") {
+            savedBuilds[saveName] = location.hash.replace("#", "");
+            window.localStorage.setItem("builds", JSON.stringify(savedBuilds));
+
+            document.getElementById("saved-error").textContent = "";
+            document.getElementById("saved-build").textContent = "Build saved";
+        } else {
+            if (location.hash === "")
+                document.getElementById("saved-error").textContent = "Empty build";
+            else
+                document.getElementById("saved-error").textContent = "Exists. Overwrite?";
+        }
+    }
+}
+
+function loadBuild() {
+    let savedBuilds = window.localStorage.getItem("builds") === null ? {} : JSON.parse(window.localStorage.getItem("builds"));
+    let saveName = document.getElementById("build-name").value;
+
+    document.getElementById("loaded-error").textContent = "";
+    if (Object.keys(savedBuilds).includes(saveName)) { 
+        decodeBuild(savedBuilds[saveName])
+        document.getElementById("loaded-build").textContent = "Build loaded";
+    } else
+        document.getElementById("loaded-error").textContent = "Build doesn't exist";
+}
+
 function resetFields(){
     for (let i in powderInputs) {
         setValue(powderInputs[i], "");
diff --git a/index.html b/index.html
index 875a54b..bca8d3e 100644
--- a/index.html
+++ b/index.html
@@ -47,6 +47,9 @@
                             <th class="center smalltitle">
                                 <label>Accessories</label>
                             </th>
+                            <th class="center smalltitle">
+                                <label>Build</label>
+                            </th>
                         </tr>
                         <tr>
                             <td class="left">
@@ -154,6 +157,31 @@
                                 <p class="error" style="color: red; top: 30px; font-size: 10px; padding: 0; margin: 0; height: 5px; font-family: 'Nunito', sans-serif; word-break:break-word;"></p>
                             </td>
                         </tr>
+                        <tr>
+                            <td class="left">
+                                <label for="build-name">Build Name:</label><br>
+                                <input id="build-name" name="build-name"/>
+
+                                <!-- Dummy <p> tag for horizontal alignment -->
+                                <p style="top: 30px; font-size: 10px; padding: 0; margin: 0; height: 5px; font-family: 'Nunito', sans-serif; white-space: nowrap; word-break:break-word;"></p>
+                            </td>
+                            <td class="left">
+                                <br/>
+                                <button style="font-size: 100%" class="button" id="save-button" onclick="saveBuild()">
+                                Save Build
+                                </button>
+                                <p id="saved-build" style="color: green; top: 30px; font-size: 10px; padding: 0; margin: 0; height: 5px; font-family: 'Nunito', sans-serif; white-space: nowrap; word-break:break-word;"></p>
+                                <p id="saved-error" style="color: red; top: 30px; font-size: 10px; padding: 0; margin: 0; height: 5px; font-family: 'Nunito', sans-serif; word-break:break-word;"></p>
+                            </td>
+                            <td class="left">
+                                <br/>
+                                <button style="font-size: 100%" class="button" id="load-button" onclick="loadBuild()">
+                                Load Build
+                                </button>
+                                <p id="loaded-build" style="color: green; top: 30px; font-size: 10px; padding: 0; margin: 0; height: 5px; font-family: 'Nunito', sans-serif; white-space: nowrap; word-break:break-word;"></p>
+                                <p id="loaded-error" style="color: red; top: 30px; font-size: 10px; padding: 0; margin: 0; height: 5px; font-family: 'Nunito', sans-serif; word-break:break-word;"></p>
+                            </td>
+                        </tr>
                     </table>
                 </div>
                 <div class="center" style="grid-column:1/span 3;grid-row:2">