Merge pull request #115 from hppeng-wynn/crafter-redesign
Fix crafter UI inconsistencies
This commit is contained in:
hppeng-wynn
GitHub
commit
067c4de0da
|
|
@ -31,32 +31,30 @@
|
|||
<hr/>
|
||||
<a href = "https://discord.gg/CGavnAnerv" target = "_blank"><img src = "../media/icons/discord.png" alt = "WB Discord" title = "WB Discord"><b>WB Discord</b></a>
|
||||
</div>
|
||||
<div class = "container py-5 vh-100 mx-0 mx-lg-auto">
|
||||
<div class = "col">
|
||||
<div class = "row g-3">
|
||||
<div class = "col-lg-5 col-sm-12 text-center">
|
||||
<div class = "row gx-5 mb-2">
|
||||
<div class = "col-lg-6 col-sm-12">
|
||||
<div id = "recipe-dropdown" class = "row h-100 dark-shadow dark-6 rounded">
|
||||
<div class="container mt-5">
|
||||
<div class="row row-cols-1 row-cols-lg-3 gy-5">
|
||||
<div class="col col-lg-5">
|
||||
<!--crafter ui-->
|
||||
<div class="row row-cols-1 row-cols-lg-2 gx-5 gy-4 gy-lg-2">
|
||||
<div class="col" id="recipe-dropdown">
|
||||
<div class="row dark-shadow dark-5 rounded">
|
||||
<div id = "recipe-img-loc" class = "col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon">
|
||||
<img id = "recipe-img" class = "img-fluid rounded Crafted-shadow" src = "../media/items/new/generic-potion.png">
|
||||
</div>
|
||||
<div class = "col px-0">
|
||||
<div class = "row align-items-center">
|
||||
<div class = "col ps-3">
|
||||
<div class = "row row-cols-2 align-items-center">
|
||||
<div class = "col-4 px-0">
|
||||
<p class = "text-right mb-0 scaled-font fw-bold">Type:</p>
|
||||
<p class = "mb-0 scaled-font fw-bold">Type:</p>
|
||||
</div>
|
||||
<div class = "col-7 px-0">
|
||||
<div class = "col-8 px-0">
|
||||
<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>
|
||||
</div>
|
||||
<div class = "row align-items-center">
|
||||
<div class = "col-4 px-0">
|
||||
<p class = "text-right mb-0 scaled-font fw-bold">Lv:</p>
|
||||
<p class = "mb-0 scaled-font fw-bold">Lv:</p>
|
||||
</div>
|
||||
<div class = "col-7 px-0">
|
||||
<div class = "col-8 px-0">
|
||||
<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>
|
||||
|
|
@ -65,24 +63,24 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class = "col-lg-6 col-sm-12">
|
||||
<div id = "atkSpdChoices" class = "row h-100 dark-shadow dark-6 rounded">
|
||||
<div class = "col py-2">
|
||||
<div class = "row h-50 align-items-center">
|
||||
<p class = "text-right mb-0 scaled-font fw-bold">Attack Speed</p>
|
||||
<div class="col">
|
||||
<div id = "atkSpdChoices" class = "row row-cols-1 dark-shadow dark-5 rounded">
|
||||
<div class="col pt-1">
|
||||
<p class = "text-center scaled-font fw-bold mb-1">Attack Speed</p>
|
||||
</div>
|
||||
<div class = "row h-50">
|
||||
<div class = "col-4 pl-1">
|
||||
<div class="col mb-2">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-auto px-2">
|
||||
<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-4 px-0">
|
||||
<div class="col-auto px-2">
|
||||
<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-4 pr-1">
|
||||
<div class="col-auto px-2">
|
||||
<button class = "button rounded scaled-font fw-bold text-light dark-5" id = "fast-atk-button" onclick = "toggleAtkSpd('fast-atk-button')">
|
||||
Fast
|
||||
</button>
|
||||
|
|
@ -91,12 +89,10 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class = "row gx-5 mb-2">
|
||||
<div class = "col-lg-6 col-sm-12 justify-content-center">
|
||||
<div class="col">
|
||||
<div class = "row dark-shadow dark-6 rounded py-1 align-items-center">
|
||||
<div class = "col-6 px-0">
|
||||
<p class = "mb-0 scaled-font fw-bold" id = "mat-1">Mat 1 Tier:</p>
|
||||
<p class = "mb-0 scaled-font fw-bold text-center" id = "mat-1">Mat 1 Tier:</p>
|
||||
</div>
|
||||
<div class = "col px-0">
|
||||
<button class = "button Star rounded scaled-font fw-bold text-light dark-5" id = "mat-1-1" onclick = "toggleMaterial('mat-1-1')">1</button>
|
||||
|
|
@ -109,10 +105,10 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class = "col-lg-6 col-sm-12 justify-content-center">
|
||||
<div class="col">
|
||||
<div class = "row dark-shadow dark-6 rounded py-1 align-items-center">
|
||||
<div class = "col-6 px-0">
|
||||
<p class = "mb-0 scaled-font fw-bold" id = "mat-2">Mat 2 Tier:</p>
|
||||
<p class = "mb-0 scaled-font fw-bold text-center" id = "mat-2">Mat 2 Tier:</p>
|
||||
</div>
|
||||
<div class = "col px-0">
|
||||
<button class = "button Star rounded scaled-font fw-bold text-light dark-5" id = "mat-2-1" onclick = "toggleMaterial('mat-2-1')">1</button>
|
||||
|
|
@ -125,11 +121,9 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class = "row gx-5 mb-1">
|
||||
<div class = "col">
|
||||
<div class = "row h-100 dark-shadow dark-6 rounded align-items-center">
|
||||
<div class = "col-3 px-0">
|
||||
<div class="col">
|
||||
<div class = "row dark-shadow dark-6 rounded align-items-center just">
|
||||
<div class = "col-3 px-0 ps-2">
|
||||
<p class = "mb-0 scaled-font fw-bold">Ing 1:</p>
|
||||
</div>
|
||||
<div class = "col-9 px-0">
|
||||
|
|
@ -139,9 +133,9 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class = "col">
|
||||
<div class = "row h-100 dark-shadow dark-6 rounded align-items-center">
|
||||
<div class = "col-3 px-0">
|
||||
<div class="col">
|
||||
<div class = "row dark-shadow dark-6 rounded align-items-center">
|
||||
<div class = "col-3 px-0 ps-2">
|
||||
<p class = "mb-0 scaled-font fw-bold">Ing 2:</p>
|
||||
</div>
|
||||
<div class = "col-9 px-0">
|
||||
|
|
@ -151,11 +145,9 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class = "row gx-5 mb-1">
|
||||
<div class = "col">
|
||||
<div class = "row h-100 dark-shadow dark-6 rounded align-items-center">
|
||||
<div class = "col-3 px-0">
|
||||
<div class="col">
|
||||
<div class = "row dark-shadow dark-6 rounded align-items-center">
|
||||
<div class = "col-3 px-0 ps-2">
|
||||
<p class = "mb-0 scaled-font fw-bold">Ing 3:</p>
|
||||
</div>
|
||||
<div class = "col-9 px-0">
|
||||
|
|
@ -165,9 +157,9 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class = "col">
|
||||
<div class = "row h-100 dark-shadow dark-6 rounded align-items-center">
|
||||
<div class = "col-3 px-0">
|
||||
<div class="col">
|
||||
<div class = "row dark-shadow dark-6 rounded align-items-center">
|
||||
<div class = "col-3 px-0 ps-2">
|
||||
<p class = "mb-0 scaled-font fw-bold">Ing 4:</p>
|
||||
</div>
|
||||
<div class = "col-9 px-0">
|
||||
|
|
@ -177,11 +169,9 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class = "row gx-5 mb-1">
|
||||
<div class = "col">
|
||||
<div class = "row h-100 dark-shadow dark-6 rounded align-items-center">
|
||||
<div class = "col-3 px-0">
|
||||
<div class="col">
|
||||
<div class = "row dark-shadow dark-6 rounded align-items-center">
|
||||
<div class = "col-3 px-0 ps-2">
|
||||
<p class = "mb-0 scaled-font fw-bold">Ing 5:</p>
|
||||
</div>
|
||||
<div class = "col-9 px-0">
|
||||
|
|
@ -191,9 +181,9 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class = "col">
|
||||
<div class = "row h-100 dark-shadow dark-6 rounded align-items-center">
|
||||
<div class = "col-3 px-0">
|
||||
<div class="col">
|
||||
<div class = "row dark-shadow dark-6 rounded align-items-center">
|
||||
<div class = "col-3 px-0 ps-2">
|
||||
<p class = "mb-0 scaled-font fw-bold">Ing 6:</p>
|
||||
</div>
|
||||
<div class = "col-9 px-0">
|
||||
|
|
@ -204,41 +194,39 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class = "row rounded dark-shadow dark-6 py-2 gy-3">
|
||||
<div class = "col-lg-2 col-sm-6">
|
||||
<div class = "row rounded dark-shadow dark-6 mt-3 p-2 align-items-center justify-content-center">
|
||||
<div class = "col-auto mx-auto">
|
||||
<button class = "button rounded scaled-font fw-bold text-light dark-5" id = "reset-button" onclick = "resetFields()">
|
||||
Reset
|
||||
</button>
|
||||
</div>
|
||||
<div class = "col-lg-3 col-sm-6">
|
||||
<div class = "col-auto mx-auto">
|
||||
<button class = "button rounded scaled-font fw-bold text-light dark-5" id = "copy-hash-button" onclick = "copyRecipeHash()">
|
||||
Copy Hash
|
||||
</button>
|
||||
</div>
|
||||
<div class = "col-lg-4 col-sm-6">
|
||||
<div class = "col-auto mx-auto">
|
||||
<button class = "button rounded scaled-font fw-bold text-light dark-5" id = "copy-button" onclick = "copyRecipe()">
|
||||
Copy Short
|
||||
</button>
|
||||
</div>
|
||||
<div class = "col-lg-3 col-sm-6">
|
||||
<div class = "col-auto mx-auto">
|
||||
<button class = "button rounded scaled-font fw-bold text-light dark-5" id = "share-button" onclick = "shareRecipe()">
|
||||
Copy Long
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class = "col-lg-4">
|
||||
<div class="col col-lg-4">
|
||||
<div class = "recipe hide-container-block px-3 col rounded dark-6 text-light scaled-font p-3 border-dark dark-shadow g-0" style = "display:none">
|
||||
<div class = "row recipe-stats">
|
||||
<div class = "col" id = "recipe-stats"></div>
|
||||
<div class = "row row-cols-1 recipe-stats " id = "recipe-stats">
|
||||
</div>
|
||||
<div class = "row craft-warnings">
|
||||
<div class = "" id = "craft-warnings"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class = "col-lg-3">
|
||||
<div class="col col-lg-3">
|
||||
<div class = "crafted row hide-container-block" style = "display:none">
|
||||
<div class = "craft-stats">
|
||||
<div class = "col rounded dark-6 text-light scaled-font p-3 border-dark dark-shadow g-0" id = "craft-stats"></div>
|
||||
|
|
@ -246,40 +234,38 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col ingredients-container hide-container-grid" id = "ingreds" style = "display:none">
|
||||
<div class = "col-lg-6 col-sm-12 hide-container-grid" id = "ingreds">
|
||||
<div class="row my-3">
|
||||
<div class="col col-lg-6 ingredients-container hide-container-grid" id = "ingreds" style = "display:none">
|
||||
<div class = "row mb-3">
|
||||
<div class="col">
|
||||
<p class="box-title hide-container-block">
|
||||
Ingredients
|
||||
</p>
|
||||
</div>
|
||||
<div class = "row mb-3">
|
||||
<div class="ing-stats col-lg-6 col-sm scaled-font" id = "ing-1">
|
||||
<div class = "rounded col g-0 dark-6 border border-3 border-dark dark-shadow p-3" id = "ing-1-stats"></div>
|
||||
</div>
|
||||
<div class="ing-stats col-lg-6 col-sm scaled-font" id = "ing-2">
|
||||
<div class = "rounded col g-0 dark-6 border border-3 border-dark dark-shadow p-3" id = "ing-2-stats"></div>
|
||||
<div class="row row-cols-1 row-cols-lg-2 g-3">
|
||||
<div class="ing-stats col-lg-6 col scaled-font" id = "ing-1">
|
||||
<div class = "rounded g-0 dark-6 border border-3 border-dark dark-shadow p-3" id = "ing-1-stats"></div>
|
||||
</div>
|
||||
<div class="ing-stats col-lg-6 col scaled-font" id = "ing-2">
|
||||
<div class = "rounded g-0 dark-6 border border-3 border-dark dark-shadow p-3" id = "ing-2-stats"></div>
|
||||
</div>
|
||||
<div class = "row mb-3">
|
||||
<div class="ing-stats col-lg-6 col-sm scaled-font" id = "ing-3">
|
||||
<div class = "rounded col g-0 dark-6 border border-3 border-dark dark-shadow p-3" id = "ing-3-stats"></div>
|
||||
<div class="ing-stats col-lg-6 col scaled-font" id = "ing-3">
|
||||
<div class = "rounded g-0 dark-6 border border-3 border-dark dark-shadow p-3" id = "ing-3-stats"></div>
|
||||
</div>
|
||||
<div class="ing-stats col-lg-6 col-sm scaled-font" id = "ing-4">
|
||||
<div class = "rounded col g-0 dark-6 border border-3 border-dark dark-shadow p-3" id = "ing-4-stats"></div>
|
||||
<div class="ing-stats col-lg-6 col scaled-font" id = "ing-4">
|
||||
<div class = "rounded g-0 dark-6 border border-3 border-dark dark-shadow p-3" id = "ing-4-stats"></div>
|
||||
</div>
|
||||
<div class="ing-stats col-lg-6 col scaled-font" id = "ing-5">
|
||||
<div class = "rounded g-0 dark-6 border border-3 border-dark dark-shadow p-3" id = "ing-5-stats"></div>
|
||||
</div>
|
||||
<div class = "row mb-3">
|
||||
<div class="ing-stats col-lg-6 col-sm scaled-font" id = "ing-5">
|
||||
<div class = "rounded col g-0 dark-6 border border-3 border-dark dark-shadow p-3" id = "ing-5-stats"></div>
|
||||
</div>
|
||||
<div class="ing-stats col-lg-6 col-sm scaled-font" id = "ing-6">
|
||||
<div class = "rounded col g-0 dark-6 border border-3 border-dark dark-shadow p-3" id = "ing-6-stats"></div>
|
||||
<div class="ing-stats col-lg-6 col scaled-font" id = "ing-6">
|
||||
<div class = "rounded g-0 dark-6 border border-3 border-dark dark-shadow p-3" id = "ing-6-stats"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-2">
|
||||
<div class="col dark-5 scaled-font">
|
||||
<footer class="text-center">
|
||||
<div id="header2">
|
||||
|
|
@ -292,6 +278,7 @@
|
|||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="../js/query.js"></script>
|
||||
<script type="text/javascript" src="../js/query_2.js"></script>
|
||||
<script type="text/javascript" src="../js/utils.js"></script>
|
||||
|
|
|
|||
|
|
@ -550,9 +550,6 @@ function displayExpandedItem(item, parent_id){
|
|||
*/
|
||||
function displayRecipeStats(craft, parent_id) {
|
||||
let elem = document.getElementById(parent_id);
|
||||
if (!elem.classList.contains("col")) {
|
||||
elem.classList.add("col");
|
||||
}
|
||||
|
||||
//local vars
|
||||
elem.textContent = "";
|
||||
|
|
@ -565,91 +562,85 @@ function displayRecipeStats(craft, parent_id) {
|
|||
let effectiveness = craft["statMap"].get("ingredEffectiveness");
|
||||
|
||||
let title = document.createElement("div");
|
||||
title.classList.add("row", "box-title", "fw-bold", "justify-content-center");
|
||||
title.classList.add("col", "box-title", "fw-bold", "justify-content-center", "scaled-font");
|
||||
title.textContent = "Recipe Stats";
|
||||
elem.appendChild(title);
|
||||
|
||||
let mats = document.createElement("div");
|
||||
mats.classList.add("row");
|
||||
mats.classList.add("col");
|
||||
mats.textContent = "Crafting Materials: ";
|
||||
elem.appendChild(mats);
|
||||
|
||||
for (let i = 0; i < 2; i++) {
|
||||
let tier = mat_tiers[i];
|
||||
let row = document.createElement("div");
|
||||
row.classList.add("row", "px-0", "mx-0");
|
||||
let b = document.createElement("div");
|
||||
let col = document.createElement("div");
|
||||
col.classList.add("col", "ps-4");
|
||||
let b = document.createElement("span");
|
||||
let mat = recipe.get("materials")[i];
|
||||
b.textContent = "- " + mat.get("amount") + "x " + mat.get("item").split(" ").slice(1).join(" ");
|
||||
b.classList.add("col");
|
||||
row.appendChild(b);
|
||||
col.appendChild(b);
|
||||
|
||||
let starsB = document.createElement("div");
|
||||
starsB.classList.add("T1-bracket", "col-auto", "px-0");
|
||||
let starsContainer = document.createElement("span");
|
||||
let starsB = document.createElement("span");
|
||||
starsB.classList.add("T1-bracket", "px-0");
|
||||
starsB.textContent = "[";
|
||||
row.appendChild(starsB);
|
||||
starsContainer.appendChild(starsB);
|
||||
for(let j = 0; j < 3; j ++) {
|
||||
let star = document.createElement("div");
|
||||
star.classList.add("col-auto", "px-0");
|
||||
let star = document.createElement("span");
|
||||
star.classList.add("px-0");
|
||||
star.textContent = "\u272B";
|
||||
if(j < tier) {
|
||||
star.classList.add("T1");
|
||||
} else {
|
||||
star.classList.add("T0");
|
||||
}
|
||||
row.append(star);
|
||||
starsContainer.append(star);
|
||||
}
|
||||
let starsE = document.createElement("div");
|
||||
starsE.classList.add("T1-bracket", "col-auto", "px-0");
|
||||
let starsE = document.createElement("span");
|
||||
starsE.classList.add("T1-bracket", "px-0");
|
||||
starsE.textContent = "]";
|
||||
row.appendChild(starsE);
|
||||
starsContainer.appendChild(starsE);
|
||||
|
||||
elem.appendChild(row);
|
||||
col.appendChild(starsContainer);
|
||||
|
||||
elem.appendChild(col);
|
||||
}
|
||||
|
||||
let ingredTable = document.createElement("div");
|
||||
ingredTable.classList.add("row");
|
||||
ingredTable.classList.add("col", "mt-2");
|
||||
|
||||
for (let i = 0; i < 3; i++) {
|
||||
let row = document.createElement("div");
|
||||
row.classList.add("row", "g-1", "justify-content-center");
|
||||
let ingredContainer = document.createElement("div");
|
||||
ingredContainer.classList.add("row", "row-cols-2", "g-3");
|
||||
for (let i = 0; i < 6; i++) {
|
||||
let ingredCell = document.createElement("div");
|
||||
ingredCell.classList.add("col");
|
||||
|
||||
let ingredTextContainer = document.createElement("div");
|
||||
ingredTextContainer.classList.add("border", "border-3", "rounded")
|
||||
|
||||
for (let j = 0; j < 2; j++) {
|
||||
if (j == 1) {
|
||||
let spacer = document.createElement("div");
|
||||
spacer.classList.add("col-1");
|
||||
row.appendChild(spacer);
|
||||
}
|
||||
let ingredName = ingreds[2 * i + j];
|
||||
let col = document.createElement("div");
|
||||
col.classList.add("col-5", "rounded", "dark-6", "border", "border-3", "dark-shadow");
|
||||
let ingredName = ingreds[i];
|
||||
let ingred_text = document.createElement("p");
|
||||
ingred_text.classList.add("mb-2", "ps-2");
|
||||
ingred_text.textContent = ingredName;
|
||||
ingredTextContainer.appendChild(ingred_text);
|
||||
|
||||
let temp_row = document.createElement("div");
|
||||
temp_row.classList.add("row");
|
||||
col.appendChild(temp_row);
|
||||
|
||||
let ingred_div = document.createElement("div");
|
||||
ingred_div.classList.add("col");
|
||||
ingred_div.textContent = ingredName;
|
||||
temp_row.appendChild(ingred_div);
|
||||
|
||||
let eff_div = document.createElement("div");
|
||||
eff_div.classList.add("col-auto");
|
||||
let e = effectiveness[2 * i + j];
|
||||
let eff_div = document.createElement("p");
|
||||
eff_div.classList.add("mb-2", "ps-2");
|
||||
let e = effectiveness[i];
|
||||
if (e > 0) {
|
||||
eff_div.classList.add("positive");
|
||||
} else if (e < 0) {
|
||||
eff_div.classList.add("negative");
|
||||
}
|
||||
eff_div.textContent = "[" + e + "%]";
|
||||
ingredTextContainer.appendChild(eff_div);
|
||||
|
||||
temp_row.appendChild(eff_div);
|
||||
ingredCell.appendChild(ingredTextContainer);
|
||||
|
||||
row.appendChild(col);
|
||||
}
|
||||
ingredTable.appendChild(row);
|
||||
ingredContainer.appendChild(ingredCell);
|
||||
}
|
||||
ingredTable.appendChild(ingredContainer);
|
||||
elem.appendChild(ingredTable);
|
||||
}
|
||||
|
||||
|
|
@ -877,7 +868,7 @@ function displayExpandedIngredient(ingred, parent_id) {
|
|||
row.appendChild(title);
|
||||
for(const skill of ingred.get("skills")) {
|
||||
let skill_div = document.createElement("div");
|
||||
skill_div.classList.add("row");
|
||||
skill_div.classList.add("row", "ps-4");
|
||||
skill_div.textContent = skill.charAt(0) + skill.substring(1).toLowerCase();
|
||||
row.appendChild(skill_div);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue