endernon/wynnbuilder-forked-for-changes
1
0
Fork 0
forked from morphNon/wynnbuilder-idk
Code Pull requests Activity

finalize crafter ui changes

Browse source
This commit is contained in:
reschan 2022-07-12 12:10:55 +07:00
parent e6daf9fcbb
commit 8aabacb6eb
2 changed files with 75 additions and 89 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
crafter/index.html
View file

@ -32,10 +32,10 @@
<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> <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>
<div class="container mt-5"> <div class="container mt-5">
<div class="row"> <div class="row row-cols-1 row-cols-lg-3 gy-5">
<div class="col-5"> <div class="col col-lg-5">
<!--crafter ui--> <!--crafter ui-->
<div class="row row-cols-2 gx-5 gy-2"> <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="col" id="recipe-dropdown">
<div class="row dark-shadow dark-5 rounded"> <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"> <div id = "recipe-img-loc" class = "col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon">
@ -217,17 +217,16 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-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 = "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 = "row row-cols-1 recipe-stats " id = "recipe-stats">
<div class = "col" id = "recipe-stats"></div>
</div> </div>
<div class = "row craft-warnings"> <div class = "row craft-warnings">
<div class = "" id = "craft-warnings"></div> <div class = "" id = "craft-warnings"></div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-3"> <div class="col col-lg-3">
<div class = "crafted row hide-container-block" style = "display:none"> <div class = "crafted row hide-container-block" style = "display:none">
<div class = "craft-stats"> <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> <div class = "col rounded dark-6 text-light scaled-font p-3 border-dark dark-shadow g-0" id = "craft-stats"></div>
@ -235,37 +234,33 @@
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="row my-3">
<div class="col ingredients-container hide-container-grid" id = "ingreds" style = "display:none"> <div class="col col-lg-6 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 mb-3">
<div class = "row mb-3"> <div class="col">
<p class="box-title hide-container-block"> <p class="box-title hide-container-block">
Ingredients Ingredients
</p> </p>
</div> </div>
<div class = "row mb-3"> </div>
<div class="ing-stats col-lg-6 col-sm scaled-font" id = "ing-1"> <div class="row row-cols-1 row-cols-lg-2 g-3">
<div class = "rounded col g-0 dark-6 border border-3 border-dark dark-shadow p-3" id = "ing-1-stats"></div> <div class="ing-stats col-lg-6 col scaled-font" id = "ing-1">
</div> <div class = "rounded g-0 dark-6 border border-3 border-dark dark-shadow p-3" id = "ing-1-stats"></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>
</div> </div>
<div class = "row mb-3"> <div class="ing-stats col-lg-6 col scaled-font" id = "ing-2">
<div class="ing-stats col-lg-6 col-sm scaled-font" id = "ing-3"> <div class = "rounded g-0 dark-6 border border-3 border-dark dark-shadow p-3" id = "ing-2-stats"></div>
<div class = "rounded col 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>
</div> </div>
<div class = "row mb-3"> <div class="ing-stats col-lg-6 col scaled-font" id = "ing-3">
<div class="ing-stats col-lg-6 col-sm scaled-font" id = "ing-5"> <div class = "rounded g-0 dark-6 border border-3 border-dark dark-shadow p-3" id = "ing-3-stats"></div>
<div class = "rounded col g-0 dark-6 border border-3 border-dark dark-shadow p-3" id = "ing-5-stats"></div> </div>
</div> <div class="ing-stats col-lg-6 col scaled-font" id = "ing-4">
<div class="ing-stats col-lg-6 col-sm scaled-font" id = "ing-6"> <div class = "rounded g-0 dark-6 border border-3 border-dark dark-shadow p-3" id = "ing-4-stats"></div>
<div class = "rounded col g-0 dark-6 border border-3 border-dark dark-shadow p-3" id = "ing-6-stats"></div> </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="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> </div>

103
js/display.js
View file

@ -550,9 +550,6 @@ function displayExpandedItem(item, parent_id){
*/ */
function displayRecipeStats(craft, parent_id) { function displayRecipeStats(craft, parent_id) {
let elem = document.getElementById(parent_id); let elem = document.getElementById(parent_id);
if (!elem.classList.contains("col")) {
elem.classList.add("col");
}
//local vars //local vars
elem.textContent = ""; elem.textContent = "";
@ -565,91 +562,85 @@ function displayRecipeStats(craft, parent_id) {
let effectiveness = craft["statMap"].get("ingredEffectiveness"); let effectiveness = craft["statMap"].get("ingredEffectiveness");
let title = document.createElement("div"); 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"; title.textContent = "Recipe Stats";
elem.appendChild(title); elem.appendChild(title);
let mats = document.createElement("div"); let mats = document.createElement("div");
mats.classList.add("row"); mats.classList.add("col");
mats.textContent = "Crafting Materials: "; mats.textContent = "Crafting Materials: ";
elem.appendChild(mats); elem.appendChild(mats);
for (let i = 0; i < 2; i++) { for (let i = 0; i < 2; i++) {
let tier = mat_tiers[i]; let tier = mat_tiers[i];
let row = document.createElement("div"); let col = document.createElement("div");
row.classList.add("row", "px-0", "mx-0"); col.classList.add("col", "ps-4");
let b = document.createElement("div"); let b = document.createElement("span");
let mat = recipe.get("materials")[i]; let mat = recipe.get("materials")[i];
b.textContent = "- " + mat.get("amount") + "x " + mat.get("item").split(" ").slice(1).join(" "); b.textContent = "- " + mat.get("amount") + "x " + mat.get("item").split(" ").slice(1).join(" ");
b.classList.add("col"); b.classList.add("col");
row.appendChild(b); col.appendChild(b);
let starsB = document.createElement("div"); let starsContainer = document.createElement("span");
starsB.classList.add("T1-bracket", "col-auto", "px-0"); let starsB = document.createElement("span");
starsB.classList.add("T1-bracket", "px-0");
starsB.textContent = "["; starsB.textContent = "[";
row.appendChild(starsB); starsContainer.appendChild(starsB);
for(let j = 0; j < 3; j ++) { for(let j = 0; j < 3; j ++) {
let star = document.createElement("div"); let star = document.createElement("span");
star.classList.add("col-auto", "px-0"); star.classList.add("px-0");
star.textContent = "\u272B"; star.textContent = "\u272B";
if(j < tier) { if(j < tier) {
star.classList.add("T1"); star.classList.add("T1");
} else { } else {
star.classList.add("T0"); star.classList.add("T0");
} }
row.append(star); starsContainer.append(star);
} }
let starsE = document.createElement("div"); let starsE = document.createElement("span");
starsE.classList.add("T1-bracket", "col-auto", "px-0"); starsE.classList.add("T1-bracket", "px-0");
starsE.textContent = "]"; starsE.textContent = "]";
row.appendChild(starsE); starsContainer.appendChild(starsE);
elem.appendChild(row); col.appendChild(starsContainer);
elem.appendChild(col);
} }
let ingredTable = document.createElement("div"); let ingredTable = document.createElement("div");
ingredTable.classList.add("row"); ingredTable.classList.add("col", "mt-2");
for (let i = 0; i < 3; i++) { let ingredContainer = document.createElement("div");
let row = document.createElement("div"); ingredContainer.classList.add("row", "row-cols-2", "g-3");
row.classList.add("row", "g-1", "justify-content-center"); 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++) { let ingredName = ingreds[i];
if (j == 1) { let ingred_text = document.createElement("p");
let spacer = document.createElement("div"); ingred_text.classList.add("mb-2", "ps-2");
spacer.classList.add("col-1"); ingred_text.textContent = ingredName;
row.appendChild(spacer); ingredTextContainer.appendChild(ingred_text);
}
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 temp_row = document.createElement("div"); let eff_div = document.createElement("p");
temp_row.classList.add("row"); eff_div.classList.add("mb-2", "ps-2");
col.appendChild(temp_row); let e = effectiveness[i];
if (e > 0) {
let ingred_div = document.createElement("div"); eff_div.classList.add("positive");
ingred_div.classList.add("col"); } else if (e < 0) {
ingred_div.textContent = ingredName; eff_div.classList.add("negative");
temp_row.appendChild(ingred_div);
let eff_div = document.createElement("div");
eff_div.classList.add("col-auto");
let e = effectiveness[2 * i + j];
if (e > 0) {
eff_div.classList.add("positive");
} else if (e < 0) {
eff_div.classList.add("negative");
}
eff_div.textContent = "[" + e + "%]";
temp_row.appendChild(eff_div);
row.appendChild(col);
} }
ingredTable.appendChild(row); eff_div.textContent = "[" + e + "%]";
ingredTextContainer.appendChild(eff_div);
ingredCell.appendChild(ingredTextContainer);
ingredContainer.appendChild(ingredCell);
} }
ingredTable.appendChild(ingredContainer);
elem.appendChild(ingredTable); elem.appendChild(ingredTable);
} }
@ -877,7 +868,7 @@ function displayExpandedIngredient(ingred, parent_id) {
row.appendChild(title); row.appendChild(title);
for(const skill of ingred.get("skills")) { for(const skill of ingred.get("skills")) {
let skill_div = document.createElement("div"); 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(); skill_div.textContent = skill.charAt(0) + skill.substring(1).toLowerCase();
row.appendChild(skill_div); row.appendChild(skill_div);
} }