morphNon/wynnbuilder-idk
2
0
Fork 1
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

40
crafter/index.html
View file

@ -46,7 +46,7 @@
<p class = "text-right mb-0 scaled-font fw-bold">Type:</p> <p class = "text-right mb-0 scaled-font fw-bold">Type:</p>
</div> </div>
<div class = "col-7 px-0"> <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 id="recipe-choices">
</datalist> </datalist>
</div> </div>
@ -56,7 +56,7 @@
<p class = "text-right mb-0 scaled-font fw-bold">Lv:</p> <p class = "text-right mb-0 scaled-font fw-bold">Lv:</p>
</div> </div>
<div class = "col-7 px-0"> <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 id="level-choices">
</datalist> </datalist>
</div> </div>
@ -71,17 +71,17 @@
<p class = "text-right mb-0 scaled-font fw-bold">Attack Speed</p> <p class = "text-right mb-0 scaled-font fw-bold">Attack Speed</p>
</div> </div>
<div class = "row h-50"> <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')"> <button class = "button rounded scaled-font fw-bold text-light dark-5" id = "slow-atk-button" onclick = "toggleAtkSpd('slow-atk-button')">
Slow Slow
</button> </button>
</div> </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')"> <button class = "button rounded scaled-font fw-bold text-light dark-5" id = "normal-atk-button" onclick = "toggleAtkSpd('normal-atk-button')">
Normal Normal
</button> </button>
</div> </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')"> <button class = "button rounded scaled-font fw-bold text-light dark-5" id = "fast-atk-button" onclick = "toggleAtkSpd('fast-atk-button')">
Fast Fast
</button> </button>
@ -132,7 +132,7 @@
<p class = "mb-0 scaled-font fw-bold">Ing 1:</p> <p class = "mb-0 scaled-font fw-bold">Ing 1:</p>
</div> </div>
<div class = "col-9 px-0"> <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 id="ing-choices-1">
</datalist> </datalist>
</div> </div>
@ -144,7 +144,7 @@
<p class = "mb-0 scaled-font fw-bold">Ing 2:</p> <p class = "mb-0 scaled-font fw-bold">Ing 2:</p>
</div> </div>
<div class = "col-9 px-0"> <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 id="ing-choices-2">
</datalist> </datalist>
</div> </div>
@ -158,7 +158,7 @@
<p class = "mb-0 scaled-font fw-bold">Ing 3:</p> <p class = "mb-0 scaled-font fw-bold">Ing 3:</p>
</div> </div>
<div class = "col-9 px-0"> <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 id="ing-choices-3">
</datalist> </datalist>
</div> </div>
@ -170,7 +170,7 @@
<p class = "mb-0 scaled-font fw-bold">Ing 4:</p> <p class = "mb-0 scaled-font fw-bold">Ing 4:</p>
</div> </div>
<div class = "col-9 px-0"> <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 id="ing-choices-4">
</datalist> </datalist>
</div> </div>
@ -184,7 +184,7 @@
<p class = "mb-0 scaled-font fw-bold">Ing 5:</p> <p class = "mb-0 scaled-font fw-bold">Ing 5:</p>
</div> </div>
<div class = "col-9 px-0"> <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 id="ing-choices-5">
</datalist> </datalist>
</div> </div>
@ -196,7 +196,7 @@
<p class = "mb-0 scaled-font fw-bold">Ing 6:</p> <p class = "mb-0 scaled-font fw-bold">Ing 6:</p>
</div> </div>
<div class = "col-9 px-0"> <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 id="ing-choices-6">
</datalist> </datalist>
</div> </div>
@ -204,23 +204,23 @@
</div> </div>
</div> </div>
<div class = "row rounded dark-shadow dark-6 py-2"> <div class = "row rounded dark-shadow dark-6 py-2 gy-3">
<div class = "col"> <div class = "col-lg-2 col-sm-6">
<button class = "button rounded scaled-font fw-bold text-light dark-5" id = "craft-button" onclick = "calculateCraft()">
Craft Item
</button>
</div>
<div class = "col">
<button class = "button rounded scaled-font fw-bold text-light dark-5" id = "reset-button" onclick = "resetFields()"> <button class = "button rounded scaled-font fw-bold text-light dark-5" id = "reset-button" onclick = "resetFields()">
Reset Reset
</button> </button>
</div> </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()"> <button class = "button rounded scaled-font fw-bold text-light dark-5" id = "copy-button" onclick = "copyRecipe()">
Copy Short Copy Short
</button> </button>
</div> </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()"> <button class = "button rounded scaled-font fw-bold text-light dark-5" id = "share-button" onclick = "shareRecipe()">
Copy Long Copy Long
</button> </button>

33
js/crafter.js
View file

@ -44,12 +44,26 @@ function init_crafter() {
try { try {
document.getElementById("recipe-choice").addEventListener("change", (event) => { document.getElementById("recipe-choice").addEventListener("change", (event) => {
updateMaterials(); updateMaterials();
calculateCraft();
}); });
document.getElementById("level-choice").addEventListener("change", (event) => { document.getElementById("level-choice").addEventListener("change", (event) => {
updateMaterials(); updateMaterials();
calculateCraft();
}); });
document.getElementById("recipe-choice").setAttribute("oninput", "updateCraftedImage()"); 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(); populateFields();
decodeCraft(ing_url_tag); decodeCraft(ing_url_tag);
} catch (error) { } catch (error) {
@ -230,11 +244,20 @@ function populateFields() {
} }
/*
Copies the CR Hash (CR-blahblahblah)
/* Copy the link
*/ */
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) { if (player_craft) {
copyTextToClipboard(ing_url_base+location.hash); copyTextToClipboard(ing_url_base+location.hash);
document.getElementById("copy-button").textContent = "Copied!"; document.getElementById("copy-button").textContent = "Copied!";
@ -243,7 +266,7 @@ function copyRecipe(){
/* Copy the link AND a display of all ingredients /* Copy the link AND a display of all ingredients
*/ */
function shareRecipe(){ function shareRecipe() {
if (player_craft) { if (player_craft) {
let copyString = ing_url_base+location.hash + "\n"; let copyString = ing_url_base+location.hash + "\n";
let name = player_craft.recipe.get("name").split("-"); let name = player_craft.recipe.get("name").split("-");