added copy hash button, removed craft button, added automatic craft upon input, lightened user input fields

This commit is contained in:
ferricles 2022-05-22 14:09:32 -07:00
parent df54d6beea
commit 0bed0dab91
2 changed files with 48 additions and 25 deletions

View file

@ -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>

View file

@ -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,9 +244,18 @@ function populateFields() {
}
/*
Copies the CR Hash (CR-blahblahblah)
*/
function copyRecipeHash() {
if (player_craft) {
copyTextToClipboard("CR-"+location.hash);
document.getElementById("copy-hash-button").textContent = "Copied!";
}
}
/* Copy the link
/*
Copies the link (hppeng-wynn.github.io/crafter/#blahblah)
*/
function copyRecipe() {
if (player_craft) {