From 0bed0dab917e145ffd98d8ab2333740343d50448 Mon Sep 17 00:00:00 2001
From: ferricles <ferricles@gmail.com>
Date: Sun, 22 May 2022 14:09:32 -0700
Subject: [PATCH 1/2] added copy hash button, removed craft button, added
 automatic craft upon input, lightened user input fields

---
 crafter/index.html | 40 ++++++++++++++++++++--------------------
 js/crafter.js      | 33 ++++++++++++++++++++++++++++-----
 2 files changed, 48 insertions(+), 25 deletions(-)

diff --git a/crafter/index.html b/crafter/index.html
index 2c6d8c0..645d2b6 100644
--- a/crafter/index.html
+++ b/crafter/index.html
@@ -46,7 +46,7 @@
                                                 <p class = "text-right mb-0 scaled-font fw-bold">Type:</p>
                                             </div>
                                             <div class = "col-7 px-0">
-                                                <input class="recipeinput border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" list="recipe-choices" id="recipe-choice" name="recipe-choice" placeholder="Potion"/>
+                                                <input class="recipeinput border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" list="recipe-choices" id="recipe-choice" name="recipe-choice" placeholder="Potion"/>
                                                 <datalist id="recipe-choices">
                                                 </datalist> 
                                             </div>
@@ -56,7 +56,7 @@
                                                 <p class = "text-right mb-0 scaled-font fw-bold">Lv:</p>
                                             </div>
                                             <div class = "col-7 px-0">
-                                                <input class="levelinput border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" list="level-choices" id="level-choice" name="level-choice" placeholder="103-105" />
+                                                <input class="levelinput border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" list="level-choices" id="level-choice" name="level-choice" placeholder="103-105" />
                                                 <datalist id="level-choices">
                                                 </datalist>
                                             </div>
@@ -71,17 +71,17 @@
                                             <p class = "text-right mb-0 scaled-font fw-bold">Attack Speed</p>
                                         </div>
                                         <div class = "row h-50">
-                                            <div class = "col">
+                                            <div class = "col-4 pl-1">
                                                 <button class = "button rounded scaled-font fw-bold text-light dark-5" id = "slow-atk-button" onclick = "toggleAtkSpd('slow-atk-button')">
                                                     Slow
                                                 </button>
                                             </div>
-                                            <div class = "col">
+                                            <div class = "col-4 px-0">
                                                 <button class = "button rounded scaled-font fw-bold text-light dark-5" id = "normal-atk-button" onclick = "toggleAtkSpd('normal-atk-button')">
                                                     Normal
                                                 </button>
                                             </div>
-                                            <div class = "col">
+                                            <div class = "col-4 pr-1">
                                                 <button class = "button rounded scaled-font fw-bold text-light dark-5" id = "fast-atk-button" onclick = "toggleAtkSpd('fast-atk-button')">
                                                     Fast
                                                 </button>
@@ -132,7 +132,7 @@
                                         <p class = "mb-0 scaled-font fw-bold">Ing 1:</p>
                                     </div>
                                     <div class = "col-9 px-0">
-                                        <input class="inginput border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" list="ing-choices-1" id="ing-choice-1" name="ing-choice-1" placeholder="No Ingredient" />
+                                        <input class="inginput border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" list="ing-choices-1" id="ing-choice-1" name="ing-choice-1" placeholder="No Ingredient" />
                                         <datalist id="ing-choices-1">
                                         </datalist>
                                     </div>   
@@ -144,7 +144,7 @@
                                         <p class = "mb-0 scaled-font fw-bold">Ing 2:</p>
                                     </div>
                                     <div class = "col-9 px-0">
-                                        <input class="inginput border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" list="ing-choices-2" id="ing-choice-2" name="ing-choice-2" placeholder="No Ingredient" />
+                                        <input class="inginput border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" list="ing-choices-2" id="ing-choice-2" name="ing-choice-2" placeholder="No Ingredient" />
                                         <datalist id="ing-choices-2">
                                         </datalist>
                                     </div>   
@@ -158,7 +158,7 @@
                                         <p class = "mb-0 scaled-font fw-bold">Ing 3:</p>
                                     </div>
                                     <div class = "col-9 px-0">
-                                        <input class="inginput border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" list="ing-choices-3" id="ing-choice-3" name="ing-choice-3" placeholder="No Ingredient" />
+                                        <input class="inginput border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" list="ing-choices-3" id="ing-choice-3" name="ing-choice-3" placeholder="No Ingredient" />
                                         <datalist id="ing-choices-3">
                                         </datalist>
                                     </div>   
@@ -170,7 +170,7 @@
                                         <p class = "mb-0 scaled-font fw-bold">Ing 4:</p>
                                     </div>
                                     <div class = "col-9 px-0">
-                                        <input class="inginput border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" list="ing-choices-4" id="ing-choice-4" name="ing-choice-4" placeholder="No Ingredient" />
+                                        <input class="inginput border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" list="ing-choices-4" id="ing-choice-4" name="ing-choice-4" placeholder="No Ingredient" />
                                         <datalist id="ing-choices-4">
                                         </datalist>
                                     </div>   
@@ -184,7 +184,7 @@
                                         <p class = "mb-0 scaled-font fw-bold">Ing 5:</p>
                                     </div>
                                     <div class = "col-9 px-0">
-                                        <input class="inginput border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" list="ing-choices-5" id="ing-choice-5" name="ing-choice-5" placeholder="No Ingredient" />
+                                        <input class="inginput border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" list="ing-choices-5" id="ing-choice-5" name="ing-choice-5" placeholder="No Ingredient" />
                                         <datalist id="ing-choices-5">
                                         </datalist>
                                     </div>   
@@ -196,7 +196,7 @@
                                         <p class = "mb-0 scaled-font fw-bold">Ing 6:</p>
                                     </div>
                                     <div class = "col-9 px-0">
-                                        <input class="inginput border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" list="ing-choices-6" id="ing-choice-6" name="ing-choice-6" placeholder="No Ingredient" />
+                                        <input class="inginput border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" list="ing-choices-6" id="ing-choice-6" name="ing-choice-6" placeholder="No Ingredient" />
                                         <datalist id="ing-choices-6">
                                         </datalist>
                                     </div>   
@@ -204,23 +204,23 @@
                             </div>
                         </div>
                         
-                        <div class = "row rounded dark-shadow dark-6 py-2">
-                            <div class = "col">
-                                <button class = "button rounded scaled-font fw-bold text-light dark-5" id = "craft-button" onclick = "calculateCraft()">
-                                Craft Item
-                                </button>
-                            </div>
-                            <div class = "col">
+                        <div class = "row rounded dark-shadow dark-6 py-2 gy-3">
+                            <div class = "col-lg-2 col-sm-6">
                                 <button class = "button rounded scaled-font fw-bold text-light dark-5" id = "reset-button" onclick = "resetFields()">
                                 Reset
                                 </button>
                             </div>
-                            <div class = "col">
+                            <div class = "col-lg-3 col-sm-6">
+                                <button class = "button rounded scaled-font fw-bold text-light dark-5" id = "craft-button" onclick = "copyRecipeHash()">
+                                Copy Hash
+                                </button>
+                            </div>
+                            <div class = "col-lg-4 col-sm-6">
                                 <button class = "button rounded scaled-font fw-bold text-light dark-5" id = "copy-button" onclick = "copyRecipe()">
                                 Copy Short
                                 </button>
                             </div>
-                            <div class = "col">
+                            <div class = "col-lg-3 col-sm-6">
                                 <button class = "button rounded scaled-font fw-bold text-light dark-5" id = "share-button" onclick = "shareRecipe()">
                                 Copy Long
                                 </button>
diff --git a/js/crafter.js b/js/crafter.js
index e48c598..7fb26be 100644
--- a/js/crafter.js
+++ b/js/crafter.js
@@ -44,12 +44,26 @@ function init_crafter() {
     try {
         document.getElementById("recipe-choice").addEventListener("change", (event) => {
             updateMaterials();
+            calculateCraft();
         });
         document.getElementById("level-choice").addEventListener("change", (event) => {
             updateMaterials();
+            calculateCraft();
         });
         document.getElementById("recipe-choice").setAttribute("oninput", "updateCraftedImage()");
         
+        for (let i = 1; i < 4; ++i) {
+            document.getElementById("mat-1-"+i).setAttribute("onclick", document.getElementById("mat-1-"+i).getAttribute("onclick") + "; calculateCraft();");
+            document.getElementById("mat-2-"+i).setAttribute("onclick", document.getElementById("mat-2-"+i).getAttribute("onclick") + "; calculateCraft();");
+        }
+        for (let i = 1; i < 7; ++i) {
+            document.getElementById("ing-choice-" + i ).setAttribute("oninput", "calculateCraft();");
+        }
+        for (const str of ["slow", "normal", "fast"]) {
+            document.getElementById(str + "-atk-button").setAttribute("onclick", document.getElementById(str + "-atk-button").getAttribute("onclick") + "; calculateCraft();");
+        }
+
+
         populateFields();
         decodeCraft(ing_url_tag);
     } catch (error) {
@@ -230,11 +244,20 @@ function populateFields() {
     
     
 }
-
-
-/* Copy the link
+/*
+    Copies the CR Hash (CR-blahblahblah)
 */
-function copyRecipe(){
+function copyRecipeHash() {
+    if (player_craft) {
+        copyTextToClipboard("CR-"+location.hash);
+        document.getElementById("copy-hash-button").textContent = "Copied!";
+    }
+}
+
+/* 
+    Copies the link (hppeng-wynn.github.io/crafter/#blahblah)
+*/
+function copyRecipe() {
     if (player_craft) {
         copyTextToClipboard(ing_url_base+location.hash);
         document.getElementById("copy-button").textContent = "Copied!";
@@ -243,7 +266,7 @@ function copyRecipe(){
 
 /* Copy the link AND a display of all ingredients
 */
-function shareRecipe(){
+function shareRecipe() {
     if (player_craft) {
         let copyString = ing_url_base+location.hash + "\n";
         let name = player_craft.recipe.get("name").split("-");

From 9ebc65ff90885df0c6b402d491c3c9857cf7f9c4 Mon Sep 17 00:00:00 2001
From: ferricles <ferricles@gmail.com>
Date: Sun, 22 May 2022 14:27:57 -0700
Subject: [PATCH 2/2] calculateCraftSchedule added

---
 js/crafter.js | 27 +++++++++++++++++++++------
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/js/crafter.js b/js/crafter.js
index 7fb26be..dbbbfd6 100644
--- a/js/crafter.js
+++ b/js/crafter.js
@@ -44,23 +44,24 @@ function init_crafter() {
     try {
         document.getElementById("recipe-choice").addEventListener("change", (event) => {
             updateMaterials();
-            calculateCraft();
+            calculateCraftSchedule();
         });
         document.getElementById("level-choice").addEventListener("change", (event) => {
             updateMaterials();
-            calculateCraft();
+            calculateCraftSchedule();
         });
         document.getElementById("recipe-choice").setAttribute("oninput", "updateCraftedImage()");
+        document.getElementById("recipe-choice").setAttribute("change", "updateCraftedImage()");
         
         for (let i = 1; i < 4; ++i) {
-            document.getElementById("mat-1-"+i).setAttribute("onclick", document.getElementById("mat-1-"+i).getAttribute("onclick") + "; calculateCraft();");
-            document.getElementById("mat-2-"+i).setAttribute("onclick", document.getElementById("mat-2-"+i).getAttribute("onclick") + "; calculateCraft();");
+            document.getElementById("mat-1-"+i).setAttribute("onclick", document.getElementById("mat-1-"+i).getAttribute("onclick") + "; calculateCraftSchedule();");
+            document.getElementById("mat-2-"+i).setAttribute("onclick", document.getElementById("mat-2-"+i).getAttribute("onclick") + "; calculateCraftSchedule();");
         }
         for (let i = 1; i < 7; ++i) {
-            document.getElementById("ing-choice-" + i ).setAttribute("oninput", "calculateCraft();");
+            document.getElementById("ing-choice-" + i ).setAttribute("oninput", "calculateCraftSchedule();");
         }
         for (const str of ["slow", "normal", "fast"]) {
-            document.getElementById(str + "-atk-button").setAttribute("onclick", document.getElementById(str + "-atk-button").getAttribute("onclick") + "; calculateCraft();");
+            document.getElementById(str + "-atk-button").setAttribute("onclick", document.getElementById(str + "-atk-button").getAttribute("onclick") + "; calculateCraftSchedule();");
         }
 
 
@@ -102,6 +103,20 @@ function toggleAtkSpd(buttonId) {
     }
 }
 
+let doCraftTask = null;
+
+function calculateCraftSchedule(){
+    console.log("Craft Schedule called");
+    if (doCraftTask !== null) {
+        clearTimeout(doCraftTask);
+    }
+    doCraftTask = setTimeout(function(){
+        doCraftTask = null;
+        calculateCraft();
+        window.dispatchEvent(new Event('resize'));
+    }, 250);
+}
+
 function calculateCraft() {
     //Make things display.
     for (let i of document.getElementsByClassName("hide-container-block")) {