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

Compactify UI

Browse source 
- remove optimize str/dex button
- cram all the equip inputs together
- highlight sharing buttons
This commit is contained in:
hppeng 2022-07-24 12:35:06 -07:00
parent bcc309c682
commit 336762ffb0
3 changed files with 49 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
builder/index_full.html
View file

@ -36,20 +36,20 @@
<hr/> <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> <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-fluid me-4" style="max-width: 95%;"> <div class="container-fluid overall-box">
<!-- REMOVE THIS DIV AT SOME POINT. --> <!-- REMOVE THIS DIV AT SOME POINT. -->
<div class = "row scaled-font mx-auto" id = "discord-banner-dev"> <div class = "row scaled-font mx-auto" id = "discord-banner-dev">
<div class = "col text-center item-title">Join the <a class = "link" href = "https://discord.gg/CGavnAnerv" target = "_blank">discord</a> today to suggest new features, submit bug reports, and hangout/talk to devs!</div> <div class = "col text-center item-title">Join the <a class = "link" href = "https://discord.gg/CGavnAnerv" target = "_blank">discord</a> today to suggest new features, submit bug reports, and hangout/talk to devs!</div>
</div> </div>
<div class="row h-100 gx-lg-5 gy-3 mx-2 mx-lg-3 py-3"> <div class="row h-100 gx-lg-5 gy-3 mx-2 mx-lg-3 py-3 gx-0">
<div class="col-xl-6"> <div class="col-xl-6">
<div class="row row-cols-1 mb-3 gy-4"> <div class="row row-cols-1 mb-3 gy-3">
<div class="col"> <div class="col">
<div class="row row-cols-1 row-cols-xl-2 rounded gy-4 gx-5 justify-content-center"> <div class="row row-cols-1 row-cols-xl-2 dark-shadow dark-6 gy-1 justify-content-center">
<div class="col-auto rounded order-xl-0 order-0"> <div class="col-auto rounded order-xl-0 order-0">
<div class="row h-100 dark-shadow dark-6 rounded" id="helmet-dropdown"> <div class="row h-100 px-1" id="helmet-dropdown">
<div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="helmet-img-loc"> <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="helmet-img-loc">
<img id="helmet-img" class="img-fluid rounded" src="../media/items/new/generic-helmet.png"> <img id="helmet-img" class="img-fluid rounded item-img" src="../media/items/new/generic-helmet.png">
</div> </div>
<div class="col-3"> <div class="col-3">
<div class="row row-cols-1 h-100 align-items-center"> <div class="row row-cols-1 h-100 align-items-center">
@ -74,7 +74,7 @@
</div> </div>
</div> </div>
<div class="col-auto order-xl-0 order-1"> <div class="col-auto order-xl-0 order-1">
<div class="row h-100 dark-shadow dark-6 rounded" id="ring1-dropdown"> <div class="row h-100 px-1" id="ring1-dropdown">
<div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="ring1-img-loc"> <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="ring1-img-loc">
<img id="ring1-img" class="img-fluid rounded" src="../media/items/new/generic-ring.png"> <img id="ring1-img" class="img-fluid rounded" src="../media/items/new/generic-ring.png">
</div> </div>
@ -94,14 +94,13 @@
<input class="equipment-input text-light form-control" id="ring1-choice" name="ring1-choice" placeholder="No ring" value="" tabindex="2"/> <input class="equipment-input text-light form-control" id="ring1-choice" name="ring1-choice" placeholder="No ring" value="" tabindex="2"/>
</div> </div>
<div class="col d-flex justify-content-end" style="height: 100%;"> <div class="col d-flex justify-content-end" style="height: 100%;">
<!-- <input class="equipment-input text-light form-control" type="text" id="ring1-powder" name="ring1-powder" placeholder="no powders" tabindex="2"/> -->
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-auto order-xl-0 order-0"> <div class="col-auto order-xl-0 order-0">
<div class="row h-100 dark-shadow dark-6 rounded" id="chestplate-dropdown"> <div class="row h-100 px-1" id="chestplate-dropdown">
<div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="chestplate-img-loc"> <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="chestplate-img-loc">
<img id="chestplate-img" class="img-fluid rounded" src="../media/items/new/generic-chestplate.png"> <img id="chestplate-img" class="img-fluid rounded" src="../media/items/new/generic-chestplate.png">
</div> </div>
@ -128,7 +127,7 @@
</div> </div>
</div> </div>
<div class="col-auto order-xl-0 order-1"> <div class="col-auto order-xl-0 order-1">
<div class="row h-100 dark-shadow dark-6 rounded" id="ring2-dropdown"> <div class="row h-100 px-1" id="ring2-dropdown">
<div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="ring2-img-loc"> <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="ring2-img-loc">
<img id="ring2-img" class="img-fluid rounded" src="../media/items/new/generic-ring.png"> <img id="ring2-img" class="img-fluid rounded" src="../media/items/new/generic-ring.png">
</div> </div>
@ -154,7 +153,7 @@
</div> </div>
</div> </div>
<div class="col-auto order-xl-0 order-0"> <div class="col-auto order-xl-0 order-0">
<div class="row h-100 dark-shadow dark-6 rounded" id="leggings-dropdown"> <div class="row h-100 px-1" id="leggings-dropdown">
<div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="leggings-img-loc"> <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="leggings-img-loc">
<img id="leggings-img" class="img-fluid rounded" src="../media/items/new/generic-leggings.png"> <img id="leggings-img" class="img-fluid rounded" src="../media/items/new/generic-leggings.png">
</div> </div>
@ -181,7 +180,7 @@
</div> </div>
</div> </div>
<div class="col-auto order-xl-0 order-1"> <div class="col-auto order-xl-0 order-1">
<div class="row h-100 dark-shadow dark-6 rounded" id="bracelet-dropdown"> <div class="row h-100 px-1" id="bracelet-dropdown">
<div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="bracelet-img-loc"> <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="bracelet-img-loc">
<img id="bracelet-img" class="img-fluid rounded" src="../media/items/new/generic-bracelet.png"> <img id="bracelet-img" class="img-fluid rounded" src="../media/items/new/generic-bracelet.png">
</div> </div>
@ -208,7 +207,7 @@
</div> </div>
</div> </div>
<div class="col-auto order-xl-0 order-0"> <div class="col-auto order-xl-0 order-0">
<div class="row h-100 dark-shadow dark-6 rounded" id="boots-dropdown"> <div class="row h-100 px-1" id="boots-dropdown">
<div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="boots-img-loc"> <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="boots-img-loc">
<img id="boots-img" class="img-fluid rounded" src="../media/items/new/generic-boots.png"> <img id="boots-img" class="img-fluid rounded" src="../media/items/new/generic-boots.png">
</div> </div>
@ -235,7 +234,7 @@
</div> </div>
</div> </div>
<div class="col-auto order-xl-0 order-1"> <div class="col-auto order-xl-0 order-1">
<div class="row h-100 dark-shadow dark-6 rounded" id="necklace-dropdown"> <div class="row h-100 px-1" id="necklace-dropdown">
<div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="necklace-img-loc"> <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="necklace-img-loc">
<img id="necklace-img" class="img-fluid rounded" src="../media/items/new/generic-necklace.png"> <img id="necklace-img" class="img-fluid rounded" src="../media/items/new/generic-necklace.png">
</div> </div>
@ -261,7 +260,7 @@
</div> </div>
</div> </div>
<div class="col-auto order-xl-0 order-1"> <div class="col-auto order-xl-0 order-1">
<div class="row h-100 dark-shadow dark-6 rounded" id='weapon-dropdown'> <div class="row h-100 px-1" id='weapon-dropdown'>
<div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="weapon-img-loc"> <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="weapon-img-loc">
<img id="weapon-img" class="img-fluid rounded" src="../media/items/new/generic-dagger.png"> <img id="weapon-img" class="img-fluid rounded" src="../media/items/new/generic-dagger.png">
</div> </div>
@ -288,28 +287,22 @@
</div> </div>
</div> </div>
<div class="col-auto order-xl-0 order-1"> <div class="col-auto order-xl-0 order-1">
<div class="row h-100 dark-shadow dark-6 rounded"> <div class="row h-100 px-1">
<div class="col"> <div class="col">
<div class="row align-items-center"> <div class="row align-items-center justify-content-left">
<div class="col-3 text-nowrap fw-bold scaled-font"> <div class="col-auto text-nowrap fw-bold scaled-font">
Level: Level:
</div> </div>
<div class="col d-flex justify-content-end"> <div class="col d-flex px-1">
<input class="equipment-input text-light form-control form-control-sm" id="level-choice" name="level-choice" value="106" placeholder="Build level" value="" tabindex="2"/> <input class="equipment-input text-light form-control form-control-sm" id="level-choice" name="level-choice" value="106" placeholder="Build level" value="" tabindex="2"/>
</div> </div>
<div class="col-auto px-1 text-nowrap scaled-font"> <div class="col-auto px-1 scaled-font">
<button class="button fw-bold text-light dark-5 scaled-font rounded" id="reset-button" onclick="resetFields()">Reset</button> <button class="button py-0 fw-bold text-light dark-5 scaled-font rounded" id="reset-button" onclick="resetFields()">Reset</button>
</div> </div>
</div> </div>
<div class="row align-items-center justify-content-center my-1"> <div class="row align-items-left justify-content-left my-1">
<div class="row align-items-center"> <button class="col-auto mx-1 px-1 py-0 border-info text-light dark-5 scaled-font rounded fake-button" id=copy-button onclick="copyBuild()">Copy short</button>
<div class="col-auto px-1 text-nowrap scaled-font"> <button class="col-auto mx-1 px-1 py-0 border-info text-light dark-5 scaled-font rounded fake-button" id=share-button onclick="shareBuild(player_build)">Copy for sharing</button>
<button class="border-dark text-light dark-5 scaled-font rounded" id=copy-button onclick="copyBuild()">Copy short</button>
</div>
<div class="col-auto px-1 text-nowrap scaled-font">
<button class="border-dark text-light dark-5 scaled-font rounded" id=share-button onclick="shareBuild(player_build)">Copy for sharing</button>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -390,12 +383,9 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-12 text-center gx-2">
<button class = "button fw-bold text-light dark-5 rounded scaled-font" id = "optimize-strdex" onclick = "optimizeStrDex()">Optimize Str/Dex</button>
</div>
</div> </div>
</div> </div>
<div class="col text-center"> <div class="col text-center py-1">
<div id="summary-box"></div> <div id="summary-box"></div>
<div id="err-box"></div> <div id="err-box"></div>
<div id="stack-box"></div> <div id="stack-box"></div>
@ -408,8 +398,7 @@
</div> </div>
</div> </div>
<div class="col"> <div class="col">
<div class="row row-cols-1 gy-4"> <div class="row row-cols-1 gy-3">
<div class="col mb-1 text-center scaled-font dark-5 rounded dark-shadow"> <div class="col mb-1 text-center scaled-font dark-5 rounded dark-shadow">
<div class="row row-cols-1 justify-content-center"> <div class="row row-cols-1 justify-content-center">
<div class="col fw-bold dark-4 rounded-top"> <div class="col fw-bold dark-4 rounded-top">

27
css/sq2bs.css
View file

@ -7,7 +7,6 @@
} }
/* builder containers */ /* builder containers */
.slider { .slider {
-webkit-appearance: none; -webkit-appearance: none;
background: #AAAAAA; background: #AAAAAA;
@ -46,7 +45,6 @@ input[type=range]:focus {
outline: none; /* Removes the border. */ outline: none; /* Removes the border. */
} }
/* equipment field specifics */ /* equipment field specifics */
/* inputs and dropdowns */ /* inputs and dropdowns */
.form-control { .form-control {
@ -174,11 +172,11 @@ input.equipment-input {
} }
.scaled-item-icon { .scaled-item-icon {
width: 8rem; width: 6rem;
} }
.scaled-item-icon img { .scaled-item-icon img {
width: 6.5rem; width: 5.5rem;
} }
.scaled-bckgrd { .scaled-bckgrd {
@ -190,10 +188,18 @@ input.equipment-input {
width: 6.5rem; width: 6.5rem;
} }
.overall-box {
max-width: 95%;
}
@media screen and (min-width: 1200px) and (max-width: 1400px) { @media screen and (min-width: 1200px) and (max-width: 1400px) {
:root { :root {
--scaled-fontsize: 1rem; --scaled-fontsize: 1rem;
} }
.overall-box {
padding-left: var(--sidebar-width);
max-width: 100%;
}
.scaled-font { .scaled-font {
font-size: 1rem; font-size: 1rem;
} }
@ -219,11 +225,11 @@ input.equipment-input {
} }
.scaled-item-icon { .scaled-item-icon {
width: 3.2rem; width: 2.6rem;
} }
.scaled-item-icon img { .scaled-item-icon img {
width: 2.8rem; width: 2.2rem;
} }
.scaled-bckgrd { .scaled-bckgrd {
@ -248,6 +254,11 @@ input.equipment-input {
:root { :root {
--scaled-fontsize: 1rem; --scaled-fontsize: 1rem;
} }
.overall-box {
padding-left: var(--sidebar-width);
max-width: 100%;
}
.scaled-font { .scaled-font {
font-size: 1rem; font-size: 1rem;
} }
@ -273,11 +284,11 @@ input.equipment-input {
} }
.scaled-item-icon { .scaled-item-icon {
width: 4rem; width: 3.2rem;
} }
.scaled-item-icon img { .scaled-item-icon img {
width: 3.5rem; width: 2.7rem;
} }
.scaled-bckgrd { .scaled-bckgrd {

14
js/builder_graph.js
View file

@ -702,7 +702,7 @@ class DisplayBuildWarningsNode extends ComputeNode {
input_map.get('def'), input_map.get('def'),
input_map.get('agi') input_map.get('agi')
]; ];
let skp_effects = ["% more damage dealt.","% chance to crit.","% spell cost reduction.","% less damage taken.","% chance to dodge."]; let skp_effects = ["% damage","% crit","% cost red.","% resist","% dodge"];
let total_assigned = 0; let total_assigned = 0;
for (let i in skp_order){ //big bren for (let i in skp_order){ //big bren
const assigned = skillpoints[i] - base_totals[i] + min_assigned[i] const assigned = skillpoints[i] - base_totals[i] + min_assigned[i]
@ -724,20 +724,16 @@ class DisplayBuildWarningsNode extends ComputeNode {
let summarybox = document.getElementById("summary-box"); let summarybox = document.getElementById("summary-box");
summarybox.textContent = ""; summarybox.textContent = "";
let skpRow = document.createElement("p");
let remainingSkp = document.createElement("p"); let remainingSkp = make_elem("p", ['scaled-font', 'my-0']);
remainingSkp.classList.add("scaled-font"); let remainingSkpTitle = make_elem("b", [], { textContent: "Assigned " + total_assigned + " skillpoints. Remaining skillpoints: " });
let remainingSkpTitle = document.createElement("b");
remainingSkpTitle.textContent = "Assigned " + total_assigned + " skillpoints. Remaining skillpoints: ";
let remainingSkpContent = document.createElement("b"); let remainingSkpContent = document.createElement("b");
remainingSkpContent.textContent = "" + (levelToSkillPoints(build.level) - total_assigned); remainingSkpContent.textContent = "" + (levelToSkillPoints(build.level) - total_assigned);
remainingSkpContent.classList.add(levelToSkillPoints(build.level) - total_assigned < 0 ? "negative" : "positive"); remainingSkpContent.classList.add(levelToSkillPoints(build.level) - total_assigned < 0 ? "negative" : "positive");
remainingSkp.appendChild(remainingSkpTitle); remainingSkp.append(remainingSkpTitle);
remainingSkp.appendChild(remainingSkpContent); remainingSkp.append(remainingSkpContent);
summarybox.append(skpRow);
summarybox.append(remainingSkp); summarybox.append(remainingSkp);
if(total_assigned > levelToSkillPoints(build.level)){ if(total_assigned > levelToSkillPoints(build.level)){
let skpWarning = document.createElement("span"); let skpWarning = document.createElement("span");