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

Merge pull request #168 from hppeng-wynn/atree-ui-tweak

Browse source 
Compactify UI
This commit is contained in:
hppeng-wynn 2022-07-27 09:28:06 -07:00 committed by GitHub
commit 56903da99a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 69 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
builder/index.html
View file

File diff suppressed because one or more lines are too long

63
builder/index_full.html
View file

@ -36,18 +36,18 @@
<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 justify-content-center equipment-input">
<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 id="helmet-img" class="img-fluid rounded item-display-new-toggleable" style="background-image: url('../media/items/new.png'); background-position: 45.45454545454546% 0;"></div>
</div>
@ -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">
<div id="ring1-img" class="img-fluid rounded item-display-new-toggleable" style="background-image: url('../media/items/new.png'); background-position: 81.81818181818181% 0;"></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"/>
</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">
<div id="chestplate-img" class="img-fluid rounded item-display-new-toggleable" style="background-image: url('../media/items/new.png'); background-position: 54.54545454545454% 0;"></div>
</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">
<div id="ring2-img" class="img-fluid rounded item-display-new-toggleable" style="background-image: url('../media/items/new.png'); background-position: 81.81818181818181% 0;"></div>
</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">
<div id="leggings-img" class="img-fluid rounded item-display-new-toggleable" style="background-image: url('../media/items/new.png'); background-position: 63.63636363636363% 0;"></div>
</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">
<div id="bracelet-img" class="img-fluid rounded item-display-new-toggleable" style="background-image: url('../media/items/new.png'); background-position: 90.90909090909092% 0;"></div>
</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">
<div id="boots-img" class="img-fluid rounded item-display-new-toggleable" style="background-image: url('../media/items/new.png'); background-position: 72.72727272727272% 0;"></div>
</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">
<div id="necklace-img" class="img-fluid rounded item-display-new-toggleable" style="background-image: url('../media/items/new.png'); background-position: 100% 0;"></div>
</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-auto 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 id="weapon-img" class="img-fluid rounded item-display-new-toggleable" style = "background-image: url('../media/items/new.png');"></div>
</div>
@ -287,29 +286,25 @@
</div>
</div>
</div>
<div class="col-auto order-xl-0 order-1">
<div class="row h-100 dark-shadow dark-6 rounded">
<div class="col-auto order-xl-0 order-1 level-input">
<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 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-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>
</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 +385,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 +400,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">

47
css/sq2bs.css
View file

@ -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 {
@ -105,6 +103,8 @@ input.equipment-input {
min-height: calc(1.2 * var(--scaled-fontsize) + 2px);
padding: 0rem 0.5rem;
font-size: var(--scaled-fontsize);
--bs-gutter-y: 1rem;
--bs-gutter-x: 3rem
}
input.equipment-input:not(.is-invalid) {
@ -177,11 +177,11 @@ input.equipment-input:not(.is-invalid) {
}
.scaled-item-icon {
width: 8rem;
width: 6rem;
}
.scaled-item-icon img {
width: 6.5rem;
width: 6rem;
}
.scaled-bckgrd {
@ -190,13 +190,28 @@ input.equipment-input:not(.is-invalid) {
}
.scaled-bckgrd img {
width: 6.5rem;
width: 7rem;
}
.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%;
}
.equipment-input {
--bs-gutter-y: 0.5rem;
--bs-gutter-x: 1.5rem;
}
.level-input {
margin-top: 0
}
.scaled-font {
font-size: 1rem;
}
@ -222,11 +237,11 @@ input.equipment-input:not(.is-invalid) {
}
.scaled-item-icon {
width: 3.2rem;
width: 2.6rem;
}
.scaled-item-icon img {
width: 2.8rem;
width: 2.2rem;
}
.scaled-bckgrd {
@ -251,6 +266,17 @@ input.equipment-input:not(.is-invalid) {
:root {
--scaled-fontsize: 1rem;
}
.overall-box {
padding-left: var(--sidebar-width);
max-width: 100%;
}
.equipment-input {
--bs-gutter-y: 0.5rem;
--bs-gutter-x: 1.5rem
}
.level-input {
margin-top: 0
}
.scaled-font {
font-size: 1rem;
}
@ -276,11 +302,11 @@ input.equipment-input:not(.is-invalid) {
}
.scaled-item-icon {
width: 4rem;
width: 3.2rem;
}
.scaled-item-icon img {
width: 3.5rem;
width: 2.7rem;
}
.scaled-bckgrd {
@ -292,7 +318,6 @@ input.equipment-input:not(.is-invalid) {
width: 3.5rem;
}
.warning {
font-size: .8rem;
}
@ -475,4 +500,4 @@ a:hover {
background-size: 500% 100%;
background-position: 100% 0;
aspect-ratio: 1/1;
}
}

14
js/builder_graph.js
View file

@ -736,7 +736,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]
@ -758,20 +758,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");