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

Merge pull request #175 from hppeng-wynn/mobile_ui_tweaks

Browse source 
Optimize mobile scrolling experience by decreasing amount of information shown at once.
This commit is contained in:
hppeng-wynn 2022-07-28 18:43:49 -07:00 committed by GitHub
commit f029c23ff3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 257 additions and 232 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

53
builder/index_full.html
View file

@ -43,10 +43,18 @@
</div> </div>
<div class="row h-100 gx-lg-5 gy-3 mx-2 mx-lg-3 py-3 gx-0"> <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-3"> <div class="row my-2 dark-6 rounded text-center g-0 px-3 d-flex d-lg-none">
<div class="col"> <div class="col">
<div class="row row-cols-1 row-cols-xl-2 dark-shadow dark-6 justify-content-center equipment-input"> <p class="fake-button scaled-font mb-0 selected-btn" id="equipment-inputs-btn" onclick="show_tab('equipment-inputs', ['equipment-inputs', 'adjust-id'])">Equipments</p>
<div class="col-auto rounded order-xl-0 order-0"> </div>
<div class="col">
<p class="fake-button scaled-font mb-0" id="adjust-id-btn" onclick="show_tab('adjust-id', ['equipment-inputs', 'adjust-id'])">Ability Tree</p>
</div>
</div>
<div class="row row-cols-1 mb-3 gy-4" id="equipment-inputs">
<div class="col">
<div class="row row-cols-1 row-cols-xl-2 dark-shadow dark-6 justify-content-center equipment-input rounded gy-3 gy-lg-0 mt-auto">
<div class="col-auto rounded order-xl-0 order-0 my-0">
<div class="row h-100 px-1" 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">
<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 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>
@ -73,7 +81,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-auto order-xl-0 order-1"> <div class="col-auto order-xl-0 order-1 my-0">
<div class="row h-100 px-1" 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">
<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 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>
@ -399,8 +407,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col">
<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">
@ -437,19 +444,19 @@
<div class="col mb-1"> <div class="col mb-1">
<div class="row row-cols-1 rounded text-center dark-5 scaled-font"> <div class="row row-cols-1 rounded text-center dark-5 scaled-font">
<div class="row p-0 m-0 text-nowrap"> <div class="row p-0 m-0 text-nowrap">
<div id = "str-boost-tab" class="col eDam dark-4u fake-button elem-boost" onclick="toggle_boost_tab('str')"> <div id = "str-boost-btn" class="col eDam dark-4u fake-button elem-boost" onclick="show_tab('str-boost', ['str-boost', 'dex-boost', 'int-boost', 'def-boost', 'agi-boost'])">
Earth Earth
</div> </div>
<div id = "dex-boost-tab" class="col tDam dark-4u fake-button elem-boost" onclick="toggle_boost_tab('dex')"> <div id = "dex-boost-btn" class="col tDam dark-4u fake-button elem-boost" onclick="show_tab('dex-boost', ['str-boost', 'dex-boost', 'int-boost', 'def-boost', 'agi-boost'])">
Thunder Thunder
</div> </div>
<div id = "int-boost-tab" class="col wDam dark-4u fake-button elem-boost" onclick="toggle_boost_tab('int')"> <div id = "int-boost-btn" class="col wDam dark-4u fake-button elem-boost" onclick="show_tab('int-boost', ['str-boost', 'dex-boost', 'int-boost', 'def-boost', 'agi-boost'])">
Water Water
</div> </div>
<div id = "def-boost-tab" class="col fDam dark-4u fake-button elem-boost" onclick="toggle_boost_tab('def')"> <div id = "def-boost-btn" class="col fDam dark-4u fake-button elem-boost" onclick="show_tab('def-boost', ['str-boost', 'dex-boost', 'int-boost', 'def-boost', 'agi-boost'])">
Fire Fire
</div> </div>
<div id = "agi-boost-tab" class="col aDam dark-4u fake-button elem-boost" onclick="toggle_boost_tab('agi')"> <div id = "agi-boost-btn" class="col aDam dark-4u fake-button elem-boost" onclick="show_tab('agi-boost', ['str-boost', 'dex-boost', 'int-boost', 'def-boost', 'agi-boost'])">
Air Air
</div> </div>
</div> </div>
@ -580,6 +587,10 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="row row-cols-1 d-lg-flex" id="adjust-id" style="display: none;">
<div class="col">
<div class="row row-cols-1 gy-3">
<div class="col mb-1"> <div class="col mb-1">
<div class="row row-cols-1 row-cols-1 text-center scaled-font dark-5 rounded dark-shadow"> <div class="row row-cols-1 row-cols-1 text-center scaled-font dark-5 rounded dark-shadow">
<div class="col fw-bold dark-4 rounded-top"> <div class="col fw-bold dark-4 rounded-top">
@ -780,7 +791,7 @@
</div> </div>
<div class = "col dark-6 rounded-bottom my-3 my-xl-1" id = "atree-dropdown" style = "display:none;"> <div class = "col dark-6 rounded-bottom my-3 my-xl-1" id = "atree-dropdown" style = "display:none;">
<div class="row row-cols-1 row-cols-xl-2"> <div class="row row-cols-1 row-cols-xl-2">
<div class="col border border-semi-light rounded dark-9 hide-scroll" id="atree-ui" style="height: 90vh; overflow-y: auto; overflow-x: hidden;"> <div class="col border border-semi-light rounded dark-9 hide-scroll" id="atree-ui" style="height: 90vh; overflow-y: auto;">
</div> </div>
<div class="col mx-auto" style="height: 90vh; overflow-y: auto;" id="atree-rhs"> <div class="col mx-auto" style="height: 90vh; overflow-y: auto;" id="atree-rhs">
@ -1122,24 +1133,20 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-xl-3 mb-3"> <div class="col-xl-3 mb-3 order-2 order-lg-0">
<div class="row row-cols-1 rounded dark-shadow dark-6 scaled-font"> <div class="row row-cols-1 rounded dark-shadow dark-6 scaled-font">
<div class="col rounded-top"> <div class="col rounded-top">
<div class="row"> <div class="row">
<div id="tab-offensive-btn" class="col-4 text-center fake-button border-bottom border-dark rounded-top dark-4u border border-2 border-dark-7" onclick="show_tab('offensive-stats')"> <div id="detailed-stats-btn" class="col text-center fake-button border-bottom border-dark rounded-top dark-4u border border-2 border-dark-7" onclick="show_tab('detailed-stats', ['detailed-stats', 'summary-stats'])">
Offense Detailed
</div> </div>
<div id="tab-defensive-btn" class="col-4 text-center fake-button border-bottom border-dark rounded-top dark-4u border border-2 border-dark-7" onclick="show_tab('defensive-stats')"> <div id="summary-stats-btn" class="col text-center fake-button border-bottom border-dark rounded-top dark-4u border border-2 border-dark-7 selected-btn" onclick="show_tab('summary-stats', ['detailed-stats', 'summary-stats'])">
Defense Summary
</div>
<div id="tab-overall-btn" class="col-4 text-center fake-button border-bottom border-dark rounded-top dark-4u border border-2 border-dark-7 selected-btn" onclick="show_tab('overall-stats')">
Overall
</div> </div>
</div> </div>
</div> </div>
<div style="display: none;" id="offensive-stats" class="col text-nowrap"></div> <div style="display: none;" id="detailed-stats" class="col text-nowrap"></div>
<div style="display: none;" id="defensive-stats" class="col text-nowrap"></div> <div id="summary-stats" class="col text-nowrap"></div>
<div id="overall-stats" class="col text-nowrap"></div>
</div> </div>
</div> </div>
<div class="col-xl-3 mb-3 px-0"> <div class="col-xl-3 mb-3 px-0">

22
js/builder.js
View file

@ -124,7 +124,7 @@ function toggleButton(button_id) {
} }
} }
// toggle tab // Toggles display of a certain element, given the ID.
function toggle_tab(tab) { function toggle_tab(tab) {
if (document.querySelector("#"+tab).style.display == "none") { if (document.querySelector("#"+tab).style.display == "none") {
document.querySelector("#"+tab).style.display = ""; document.querySelector("#"+tab).style.display = "";
@ -133,24 +133,16 @@ function toggle_tab(tab) {
} }
} }
function toggle_boost_tab(tab) { // Toggle display of a certain tab, in a group of tabs, given the target tab ID, and a list of associated tabs.
for (const i of skp_order) { // Also sets visual display of an element with ID of target + "-btn" to selected.
document.querySelector("#"+i+"-boost").style.display = "none"; function show_tab(target, tabs) {
document.getElementById(i + "-boost-tab").classList.remove("selected-btn");
}
document.querySelector("#"+tab+"-boost").style.display = "";
document.getElementById(tab + "-boost-tab").classList.add("selected-btn");
}
let tabs = ['overall-stats', 'offensive-stats', 'defensive-stats'];
function show_tab(tab) {
//hide all tabs, then show the tab of the div clicked and highlight the correct button //hide all tabs, then show the tab of the div clicked and highlight the correct button
for (const i in tabs) { for (const i in tabs) {
document.querySelector("#" + tabs[i]).style.display = "none"; document.querySelector("#" + tabs[i]).style.display = "none";
document.getElementById("tab-" + tabs[i].split("-")[0] + "-btn").classList.remove("selected-btn"); document.getElementById(tabs[i] + "-btn").classList.remove("selected-btn");
} }
document.querySelector("#" + tab).style.display = ""; document.querySelector("#" + target).style.display = "";
document.getElementById("tab-" + tab.split("-")[0] + "-btn").classList.add("selected-btn"); document.getElementById(target + "-btn").classList.add("selected-btn");
} }
// autocomplete initialize // autocomplete initialize

6
js/builder_graph.js
View file

@ -705,11 +705,11 @@ class BuildDisplayNode extends ComputeNode {
compute_func(input_map) { compute_func(input_map) {
const build = input_map.get('build'); const build = input_map.get('build');
const stats = input_map.get('stats'); const stats = input_map.get('stats');
displayBuildStats('overall-stats', build, build_all_display_commands, stats); displayBuildStats('summary-stats', build, build_overall_display_commands, stats);
displayBuildStats("offensive-stats", build, build_offensive_display_commands, stats); displayBuildStats("detailed-stats", build, build_detailed_display_commands, stats);
displaySetBonuses("set-info", build); displaySetBonuses("set-info", build);
// TODO: move weapon out? // TODO: move weapon out?
displayDefenseStats(document.getElementById("defensive-stats"), stats); // displayDefenseStats(document.getElementById("defensive-stats"), stats);
displayPoisonDamage(document.getElementById("build-poison-stats"), build); displayPoisonDamage(document.getElementById("build-poison-stats"), build);
displayEquipOrder(document.getElementById("build-order"), build.equip_order); displayEquipOrder(document.getElementById("build-order"), build.equip_order);

62
js/display_constants.js
View file

@ -209,7 +209,25 @@ let posModSuffixes = {
/* /*
* Display commands * Display commands
*/ */
let build_all_display_commands = [ let build_overall_display_commands = [
"#defense-stats",
"str", "dex", "int", "def", "agi",
"!spacer",
"mr", "ms",
"ls",
"poison",
"ref", "thorns",
"expd",
"spd",
"sprint", "sprintReg",
"jh",
"xpb", "lb", "lq",
"spRegen",
"eSteal",
"gXp", "gSpd",
];
let build_detailed_display_commands = [
"#defense-stats", "#defense-stats",
"str", "dex", "int", "def", "agi", "str", "dex", "int", "def", "agi",
"!spacer", "!spacer",
@ -236,23 +254,31 @@ let build_all_display_commands = [
"gXp", "gSpd", "gXp", "gSpd",
]; ];
let build_offensive_display_commands = [ // full
"str", "dex", "int", "def", "agi", //"#defense-stats",
"mr", "ms", //"str", "dex", "int", "def", "agi",
"sdRaw", "sdPct", //"!spacer",
"mdRaw", "mdPct", //"mr", "ms",
"ref", "thorns", //"hprRaw", "hprPct",
"ls", //"ls",
"poison", //"sdRaw", "sdPct",
"expd", //"mdRaw", "mdPct",
"spd", //"!elemental",
"atkTier", //"fDamPct", "wDamPct", "aDamPct", "tDamPct", "eDamPct",
"rainbowRaw", //"!elemental",
"!elemental", //"spPct1", "spRaw1", "spPct2", "spRaw2", "spPct3", "spRaw3", "spPct4", "spRaw4",
"fDamPct", "wDamPct", "aDamPct", "tDamPct", "eDamPct", //"atkTier",
"!elemental", //"poison",
"spPct1", "spRaw1", "spPct2", "spRaw2", "spPct3", "spRaw3", "spPct4", "spRaw4", //"ref", "thorns",
]; //"expd",
//"spd",
//"rainbowRaw",
//"sprint", "sprintReg",
//"jh",
//"xpb", "lb", "lq",
//"spRegen",
//"eSteal",
//"gXp", "gSpd",
let build_basic_display_commands = [ let build_basic_display_commands = [
'#defense-stats', '#defense-stats',