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 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-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="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">
<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>
<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="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>
@ -73,7 +81,7 @@
</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="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>
@ -399,8 +407,7 @@
</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="row row-cols-1 justify-content-center">
<div class="col fw-bold dark-4 rounded-top">
@ -437,19 +444,19 @@
<div class="col mb-1">
<div class="row row-cols-1 rounded text-center dark-5 scaled-font">
<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
</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
</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
</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
</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
</div>
</div>
@ -580,6 +587,10 @@
</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="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">
@ -780,7 +791,7 @@
</div>
<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="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 class="col mx-auto" style="height: 90vh; overflow-y: auto;" id="atree-rhs">
@ -1122,24 +1133,20 @@
</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="col rounded-top">
<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')">
Offense
<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'])">
Detailed
</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')">
Defense
</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 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'])">
Summary
</div>
</div>
</div>
<div style="display: none;" id="offensive-stats" class="col text-nowrap"></div>
<div style="display: none;" id="defensive-stats" class="col text-nowrap"></div>
<div id="overall-stats" class="col text-nowrap"></div>
<div style="display: none;" id="detailed-stats" class="col text-nowrap"></div>
<div id="summary-stats" class="col text-nowrap"></div>
</div>
</div>
<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) {
if (document.querySelector("#"+tab).style.display == "none") {
document.querySelector("#"+tab).style.display = "";
@ -133,24 +133,16 @@ function toggle_tab(tab) {
}
}
function toggle_boost_tab(tab) {
for (const i of skp_order) {
document.querySelector("#"+i+"-boost").style.display = "none";
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) {
// Toggle display of a certain tab, in a group of tabs, given the target tab ID, and a list of associated tabs.
// Also sets visual display of an element with ID of target + "-btn" to selected.
function show_tab(target, tabs) {
//hide all tabs, then show the tab of the div clicked and highlight the correct button
for (const i in tabs) {
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.getElementById("tab-" + tab.split("-")[0] + "-btn").classList.add("selected-btn");
document.querySelector("#" + target).style.display = "";
document.getElementById(target + "-btn").classList.add("selected-btn");
}
// autocomplete initialize

6
js/builder_graph.js
View file

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

62
js/display_constants.js
View file

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