Merge branch 'UI_test' of https://github.com/hppeng-wynn/hppeng-wynn.github.io into UI_test
This commit is contained in:
ferricles
commit
42362d5d99
2 changed files with 63 additions and 25 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -44,12 +44,27 @@ function init_crafter() {
|
|||
try {
|
||||
document.getElementById("recipe-choice").addEventListener("change", (event) => {
|
||||
updateMaterials();
|
||||
calculateCraftSchedule();
|
||||
});
|
||||
document.getElementById("level-choice").addEventListener("change", (event) => {
|
||||
updateMaterials();
|
||||
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") + "; 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", "calculateCraftSchedule();");
|
||||
}
|
||||
for (const str of ["slow", "normal", "fast"]) {
|
||||
document.getElementById(str + "-atk-button").setAttribute("onclick", document.getElementById(str + "-atk-button").getAttribute("onclick") + "; calculateCraftSchedule();");
|
||||
}
|
||||
|
||||
|
||||
populateFields();
|
||||
decodeCraft(ing_url_tag);
|
||||
} catch (error) {
|
||||
|
|
@ -88,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")) {
|
||||
|
|
@ -230,11 +259,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 +281,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("-");
|
||||
|
|
|
|||
Loading…
Reference in a new issue