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>
|
<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>
|
||||||
|
|
|
||||||
|
|
@ -44,12 +44,27 @@ function init_crafter() {
|
||||||
try {
|
try {
|
||||||
document.getElementById("recipe-choice").addEventListener("change", (event) => {
|
document.getElementById("recipe-choice").addEventListener("change", (event) => {
|
||||||
updateMaterials();
|
updateMaterials();
|
||||||
|
calculateCraftSchedule();
|
||||||
});
|
});
|
||||||
document.getElementById("level-choice").addEventListener("change", (event) => {
|
document.getElementById("level-choice").addEventListener("change", (event) => {
|
||||||
updateMaterials();
|
updateMaterials();
|
||||||
|
calculateCraftSchedule();
|
||||||
});
|
});
|
||||||
document.getElementById("recipe-choice").setAttribute("oninput", "updateCraftedImage()");
|
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();
|
populateFields();
|
||||||
decodeCraft(ing_url_tag);
|
decodeCraft(ing_url_tag);
|
||||||
} catch (error) {
|
} 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() {
|
function calculateCraft() {
|
||||||
//Make things display.
|
//Make things display.
|
||||||
for (let i of document.getElementsByClassName("hide-container-block")) {
|
for (let i of document.getElementsByClassName("hide-container-block")) {
|
||||||
|
|
@ -230,11 +259,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 +281,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("-");
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue