Compactify UI
- remove optimize str/dex button - cram all the equip inputs together - highlight sharing buttons
This commit is contained in:
hppeng
parent
bcc309c682
commit
336762ffb0
3 changed files with 49 additions and 53 deletions
|
|
@ -36,20 +36,20 @@
|
|||
<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-fluid me-4" style="max-width: 95%;">
|
||||
<div class="container-fluid overall-box">
|
||||
<!-- REMOVE THIS DIV AT SOME POINT. -->
|
||||
<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>
|
||||
<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="row row-cols-1 mb-3 gy-4">
|
||||
<div class="row row-cols-1 mb-3 gy-3">
|
||||
<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="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">
|
||||
<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 class="col-3">
|
||||
<div class="row row-cols-1 h-100 align-items-center">
|
||||
|
|
@ -74,7 +74,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<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">
|
||||
<img id="ring1-img" class="img-fluid rounded" src="../media/items/new/generic-ring.png">
|
||||
</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"/>
|
||||
</div>
|
||||
<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 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">
|
||||
<img id="chestplate-img" class="img-fluid rounded" src="../media/items/new/generic-chestplate.png">
|
||||
</div>
|
||||
|
|
@ -128,7 +127,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<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">
|
||||
<img id="ring2-img" class="img-fluid rounded" src="../media/items/new/generic-ring.png">
|
||||
</div>
|
||||
|
|
@ -154,7 +153,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<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">
|
||||
<img id="leggings-img" class="img-fluid rounded" src="../media/items/new/generic-leggings.png">
|
||||
</div>
|
||||
|
|
@ -181,7 +180,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<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">
|
||||
<img id="bracelet-img" class="img-fluid rounded" src="../media/items/new/generic-bracelet.png">
|
||||
</div>
|
||||
|
|
@ -208,7 +207,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<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">
|
||||
<img id="boots-img" class="img-fluid rounded" src="../media/items/new/generic-boots.png">
|
||||
</div>
|
||||
|
|
@ -235,7 +234,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<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">
|
||||
<img id="necklace-img" class="img-fluid rounded" src="../media/items/new/generic-necklace.png">
|
||||
</div>
|
||||
|
|
@ -261,7 +260,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<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">
|
||||
<img id="weapon-img" class="img-fluid rounded" src="../media/items/new/generic-dagger.png">
|
||||
</div>
|
||||
|
|
@ -288,28 +287,22 @@
|
|||
</div>
|
||||
</div>
|
||||
<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="row align-items-center">
|
||||
<div class="col-3 text-nowrap fw-bold scaled-font">
|
||||
<div class="row align-items-center justify-content-left">
|
||||
<div class="col-auto text-nowrap fw-bold scaled-font">
|
||||
Level:
|
||||
</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"/>
|
||||
</div>
|
||||
<div class="col-auto px-1 text-nowrap scaled-font">
|
||||
<button class="button fw-bold text-light dark-5 scaled-font rounded" id="reset-button" onclick="resetFields()">Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row align-items-center justify-content-center my-1">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto px-1 text-nowrap scaled-font">
|
||||
<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 class="col-auto px-1 scaled-font">
|
||||
<button class="button py-0 fw-bold text-light dark-5 scaled-font rounded" id="reset-button" onclick="resetFields()">Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row align-items-left justify-content-left my-1">
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -390,12 +383,9 @@
|
|||
</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 class="col text-center">
|
||||
<div class="col text-center py-1">
|
||||
<div id="summary-box"></div>
|
||||
<div id="err-box"></div>
|
||||
<div id="stack-box"></div>
|
||||
|
|
@ -408,8 +398,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<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="row row-cols-1 justify-content-center">
|
||||
<div class="col fw-bold dark-4 rounded-top">
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@
|
|||
}
|
||||
/* builder containers */
|
||||
|
||||
|
||||
.slider {
|
||||
-webkit-appearance: none;
|
||||
background: #AAAAAA;
|
||||
|
|
@ -46,7 +45,6 @@ input[type=range]:focus {
|
|||
outline: none; /* Removes the border. */
|
||||
}
|
||||
|
||||
|
||||
/* equipment field specifics */
|
||||
/* inputs and dropdowns */
|
||||
.form-control {
|
||||
|
|
@ -174,11 +172,11 @@ input.equipment-input {
|
|||
}
|
||||
|
||||
.scaled-item-icon {
|
||||
width: 8rem;
|
||||
width: 6rem;
|
||||
}
|
||||
|
||||
.scaled-item-icon img {
|
||||
width: 6.5rem;
|
||||
width: 5.5rem;
|
||||
}
|
||||
|
||||
.scaled-bckgrd {
|
||||
|
|
@ -190,10 +188,18 @@ input.equipment-input {
|
|||
width: 6.5rem;
|
||||
}
|
||||
|
||||
.overall-box {
|
||||
max-width: 95%;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1200px) and (max-width: 1400px) {
|
||||
:root {
|
||||
--scaled-fontsize: 1rem;
|
||||
}
|
||||
.overall-box {
|
||||
padding-left: var(--sidebar-width);
|
||||
max-width: 100%;
|
||||
}
|
||||
.scaled-font {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
|
@ -219,11 +225,11 @@ input.equipment-input {
|
|||
}
|
||||
|
||||
.scaled-item-icon {
|
||||
width: 3.2rem;
|
||||
width: 2.6rem;
|
||||
}
|
||||
|
||||
.scaled-item-icon img {
|
||||
width: 2.8rem;
|
||||
width: 2.2rem;
|
||||
}
|
||||
|
||||
.scaled-bckgrd {
|
||||
|
|
@ -248,6 +254,11 @@ input.equipment-input {
|
|||
:root {
|
||||
--scaled-fontsize: 1rem;
|
||||
}
|
||||
.overall-box {
|
||||
padding-left: var(--sidebar-width);
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.scaled-font {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
|
@ -273,11 +284,11 @@ input.equipment-input {
|
|||
}
|
||||
|
||||
.scaled-item-icon {
|
||||
width: 4rem;
|
||||
width: 3.2rem;
|
||||
}
|
||||
|
||||
.scaled-item-icon img {
|
||||
width: 3.5rem;
|
||||
width: 2.7rem;
|
||||
}
|
||||
|
||||
.scaled-bckgrd {
|
||||
|
|
|
|||
|
|
@ -702,7 +702,7 @@ class DisplayBuildWarningsNode extends ComputeNode {
|
|||
input_map.get('def'),
|
||||
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;
|
||||
for (let i in skp_order){ //big bren
|
||||
const assigned = skillpoints[i] - base_totals[i] + min_assigned[i]
|
||||
|
|
@ -724,20 +724,16 @@ class DisplayBuildWarningsNode extends ComputeNode {
|
|||
|
||||
let summarybox = document.getElementById("summary-box");
|
||||
summarybox.textContent = "";
|
||||
let skpRow = document.createElement("p");
|
||||
|
||||
let remainingSkp = document.createElement("p");
|
||||
remainingSkp.classList.add("scaled-font");
|
||||
let remainingSkpTitle = document.createElement("b");
|
||||
remainingSkpTitle.textContent = "Assigned " + total_assigned + " skillpoints. Remaining skillpoints: ";
|
||||
let remainingSkp = make_elem("p", ['scaled-font', 'my-0']);
|
||||
let remainingSkpTitle = make_elem("b", [], { textContent: "Assigned " + total_assigned + " skillpoints. Remaining skillpoints: " });
|
||||
let remainingSkpContent = document.createElement("b");
|
||||
remainingSkpContent.textContent = "" + (levelToSkillPoints(build.level) - total_assigned);
|
||||
remainingSkpContent.classList.add(levelToSkillPoints(build.level) - total_assigned < 0 ? "negative" : "positive");
|
||||
|
||||
remainingSkp.appendChild(remainingSkpTitle);
|
||||
remainingSkp.appendChild(remainingSkpContent);
|
||||
remainingSkp.append(remainingSkpTitle);
|
||||
remainingSkp.append(remainingSkpContent);
|
||||
|
||||
summarybox.append(skpRow);
|
||||
summarybox.append(remainingSkp);
|
||||
if(total_assigned > levelToSkillPoints(build.level)){
|
||||
let skpWarning = document.createElement("span");
|
||||
|
|
|
|||
Loading…
Reference in a new issue