Merge pull request #175 from hppeng-wynn/mobile_ui_tweaks
Optimize mobile scrolling experience by decreasing amount of information shown at once.
This commit is contained in:
commit
f029c23ff3
File diff suppressed because one or more lines are too long
|
@ -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,187 +407,190 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<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">
|
||||||
|
Active boosts
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="vanish-boost" onclick="update_boosts('vanish-boost')">
|
||||||
|
Vanish (+80%)
|
||||||
|
</button>
|
||||||
|
<button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="warscream-boost" onclick="update_boosts('warscream-boost')">
|
||||||
|
War Scream
|
||||||
|
</button>
|
||||||
|
<button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="ragnarokkr-boost" onclick="update_boosts('ragnarokkr-boost')">
|
||||||
|
Ragnarokkr (+30%)
|
||||||
|
</button>
|
||||||
|
<button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="yourtotem-boost" onclick="update_boosts('yourtotem-boost')">
|
||||||
|
Your Totem (+35%)
|
||||||
|
</button>
|
||||||
|
<button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="allytotem-boost" onclick="update_boosts('allytotem-boost')">
|
||||||
|
Ally Totem (+15%)
|
||||||
|
</button>
|
||||||
|
<button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="fortitude-boost" onclick="update_boosts('fortitude-boost')">
|
||||||
|
Fortitude (+60%)
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="col" id="boost-toggles">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row row-cols-1 justify-content-center" id="boost-sliders">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<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-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-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-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-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-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>
|
||||||
|
<div class="row row-cols-1 p-0 m-0" id="str-boost" style="display: none;">
|
||||||
|
<div class="col eDam dark-5">
|
||||||
|
Quake (Active)
|
||||||
|
</div>
|
||||||
|
<div class="col skp-tooltip dark-6 rounded-bottom my-3 my-xl-1" >
|
||||||
|
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Quake-1" onclick = "updatePowderSpecials('Quake-1')">
|
||||||
|
Lv.4 [e4e4]
|
||||||
|
</button>
|
||||||
|
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Quake-2" onclick = "updatePowderSpecials('Quake-2')">
|
||||||
|
Lv.4.5 [e5e4]
|
||||||
|
</button>
|
||||||
|
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Quake-3" onclick = "updatePowderSpecials('Quake-3')">
|
||||||
|
Lv.5 [e5e5]
|
||||||
|
</button>
|
||||||
|
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Quake-4" onclick = "updatePowderSpecials('Quake-4')">
|
||||||
|
Lv.5.5 [e6e5]
|
||||||
|
</button>
|
||||||
|
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Quake-5" onclick = "updatePowderSpecials('Quake-5')">
|
||||||
|
Lv.6 [e6e6]
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="col eDam">
|
||||||
|
Rage (Passive)
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row row-cols-1 p-0 m-0" id="dex-boost" style="display: none;">
|
||||||
|
<div class="col tDam dark-5">
|
||||||
|
Chain Lightning (Active)
|
||||||
|
</div>
|
||||||
|
<div class="col skp-tooltip dark-6 rounded-bottom my-3 my-xl-1">
|
||||||
|
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Chain_Lightning-1" onclick = "updatePowderSpecials('Chain_Lightning-1')">
|
||||||
|
Lv.4 [t4t4]
|
||||||
|
</button>
|
||||||
|
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Chain_Lightning-2" onclick = "updatePowderSpecials('Chain_Lightning-2')">
|
||||||
|
Lv.4.5 [t5t4]
|
||||||
|
</button>
|
||||||
|
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Chain_Lightning-3" onclick = "updatePowderSpecials('Chain_Lightning-3')">
|
||||||
|
Lv.5 [t5t5]
|
||||||
|
</button>
|
||||||
|
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Chain_Lightning-4" onclick = "updatePowderSpecials('Chain_Lightning-4')">
|
||||||
|
Lv.5.5 [t6t5]
|
||||||
|
</button>
|
||||||
|
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Chain_Lightning-5" onclick = "updatePowderSpecials('Chain_Lightning-5')">
|
||||||
|
Lv.6 [t6t6]
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="col tDam">
|
||||||
|
Kill Streak (Passive)
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row row-cols-1 p-0 m-0" id="int-boost">
|
||||||
|
<div class="col wDam dark-5">
|
||||||
|
Curse (Active)
|
||||||
|
</div>
|
||||||
|
<div class="col skp-tooltip dark-6 rounded-bottom my-3 my-xl-1">
|
||||||
|
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Curse-1" onclick = "updatePowderSpecials('Curse-1')">
|
||||||
|
Lv.4 [w4w4]
|
||||||
|
</button>
|
||||||
|
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Curse-2" onclick = "updatePowderSpecials('Curse-2')">
|
||||||
|
Lv.4.5 [w5w4]
|
||||||
|
</button>
|
||||||
|
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Curse-3" onclick = "updatePowderSpecials('Curse-3')">
|
||||||
|
Lv.5 [w5w5]
|
||||||
|
</button>
|
||||||
|
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Curse-4" onclick = "updatePowderSpecials('Curse-4')">
|
||||||
|
Lv.5.5 [w6w5]
|
||||||
|
</button>
|
||||||
|
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Curse-5" onclick = "updatePowderSpecials('Curse-5')">
|
||||||
|
Lv.6 [w6w6]
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="col wDam">
|
||||||
|
Concentration (Passive)
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row row-cols-1 p-0 m-0" id="def-boost" style="display: none;">
|
||||||
|
<div class="col fDam dark-5">
|
||||||
|
Courage (Active)
|
||||||
|
</div>
|
||||||
|
<div class="col skp-tooltip dark-6 rounded-bottom my-3 my-xl-1">
|
||||||
|
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Courage-1" onclick = "updatePowderSpecials('Courage-1')">
|
||||||
|
Lv.4 [f4f4]
|
||||||
|
</button>
|
||||||
|
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Courage-2" onclick = "updatePowderSpecials('Courage-2')">
|
||||||
|
Lv.4.5 [f5f4]
|
||||||
|
</button>
|
||||||
|
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Courage-3" onclick = "updatePowderSpecials('Courage-3')">
|
||||||
|
Lv.5 [f5f5]
|
||||||
|
</button>
|
||||||
|
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Courage-4" onclick = "updatePowderSpecials('Courage-4')">
|
||||||
|
Lv.5.5 [f6f5]
|
||||||
|
</button>
|
||||||
|
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Courage-5" onclick = "updatePowderSpecials('Courage-5')">
|
||||||
|
Lv.6 [f6f6]
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="col fDam">
|
||||||
|
Endurance (Passive)
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row row-cols-1 p-0 m-0" id="agi-boost" style="display: none;">
|
||||||
|
<div class="col aDam dark-5">
|
||||||
|
Wind Prison (Active)
|
||||||
|
</div>
|
||||||
|
<div class="col skp-tooltip dark-6 rounded-bottom my-3 my-xl-1">
|
||||||
|
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Wind_Prison-1" onclick = "updatePowderSpecials('Wind_Prison-1')">
|
||||||
|
Lv.4 [a4a4]
|
||||||
|
</button>
|
||||||
|
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Wind_Prison-2" onclick = "updatePowderSpecials('Wind_Prison-2')">
|
||||||
|
Lv.4.5 [a5a4]
|
||||||
|
</button>
|
||||||
|
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Wind_Prison-3" onclick = "updatePowderSpecials('Wind_Prison-3')">
|
||||||
|
Lv.5 [a5a5]
|
||||||
|
</button>
|
||||||
|
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Wind_Prison-4" onclick = "updatePowderSpecials('Wind_Prison-4')">
|
||||||
|
Lv.5.5 [a6a5]
|
||||||
|
</button>
|
||||||
|
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Wind_Prison-5" onclick = "updatePowderSpecials('Wind_Prison-5')">
|
||||||
|
Lv.6 [a6a6]
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="col aDam">
|
||||||
|
Dodge (Passive)
|
||||||
|
</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="col">
|
||||||
<div class="row row-cols-1 gy-3">
|
<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">
|
|
||||||
Active boosts
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="vanish-boost" onclick="update_boosts('vanish-boost')">
|
|
||||||
Vanish (+80%)
|
|
||||||
</button>
|
|
||||||
<button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="warscream-boost" onclick="update_boosts('warscream-boost')">
|
|
||||||
War Scream
|
|
||||||
</button>
|
|
||||||
<button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="ragnarokkr-boost" onclick="update_boosts('ragnarokkr-boost')">
|
|
||||||
Ragnarokkr (+30%)
|
|
||||||
</button>
|
|
||||||
<button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="yourtotem-boost" onclick="update_boosts('yourtotem-boost')">
|
|
||||||
Your Totem (+35%)
|
|
||||||
</button>
|
|
||||||
<button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="allytotem-boost" onclick="update_boosts('allytotem-boost')">
|
|
||||||
Ally Totem (+15%)
|
|
||||||
</button>
|
|
||||||
<button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="fortitude-boost" onclick="update_boosts('fortitude-boost')">
|
|
||||||
Fortitude (+60%)
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="col" id="boost-toggles">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row row-cols-1 justify-content-center" id="boost-sliders">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<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')">
|
|
||||||
Earth
|
|
||||||
</div>
|
|
||||||
<div id = "dex-boost-tab" class="col tDam dark-4u fake-button elem-boost" onclick="toggle_boost_tab('dex')">
|
|
||||||
Thunder
|
|
||||||
</div>
|
|
||||||
<div id = "int-boost-tab" class="col wDam dark-4u fake-button elem-boost" onclick="toggle_boost_tab('int')">
|
|
||||||
Water
|
|
||||||
</div>
|
|
||||||
<div id = "def-boost-tab" class="col fDam dark-4u fake-button elem-boost" onclick="toggle_boost_tab('def')">
|
|
||||||
Fire
|
|
||||||
</div>
|
|
||||||
<div id = "agi-boost-tab" class="col aDam dark-4u fake-button elem-boost" onclick="toggle_boost_tab('agi')">
|
|
||||||
Air
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row row-cols-1 p-0 m-0" id="str-boost" style="display: none;">
|
|
||||||
<div class="col eDam dark-5">
|
|
||||||
Quake (Active)
|
|
||||||
</div>
|
|
||||||
<div class="col skp-tooltip dark-6 rounded-bottom my-3 my-xl-1" >
|
|
||||||
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Quake-1" onclick = "updatePowderSpecials('Quake-1')">
|
|
||||||
Lv.4 [e4e4]
|
|
||||||
</button>
|
|
||||||
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Quake-2" onclick = "updatePowderSpecials('Quake-2')">
|
|
||||||
Lv.4.5 [e5e4]
|
|
||||||
</button>
|
|
||||||
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Quake-3" onclick = "updatePowderSpecials('Quake-3')">
|
|
||||||
Lv.5 [e5e5]
|
|
||||||
</button>
|
|
||||||
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Quake-4" onclick = "updatePowderSpecials('Quake-4')">
|
|
||||||
Lv.5.5 [e6e5]
|
|
||||||
</button>
|
|
||||||
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Quake-5" onclick = "updatePowderSpecials('Quake-5')">
|
|
||||||
Lv.6 [e6e6]
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="col eDam">
|
|
||||||
Rage (Passive)
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row row-cols-1 p-0 m-0" id="dex-boost" style="display: none;">
|
|
||||||
<div class="col tDam dark-5">
|
|
||||||
Chain Lightning (Active)
|
|
||||||
</div>
|
|
||||||
<div class="col skp-tooltip dark-6 rounded-bottom my-3 my-xl-1">
|
|
||||||
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Chain_Lightning-1" onclick = "updatePowderSpecials('Chain_Lightning-1')">
|
|
||||||
Lv.4 [t4t4]
|
|
||||||
</button>
|
|
||||||
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Chain_Lightning-2" onclick = "updatePowderSpecials('Chain_Lightning-2')">
|
|
||||||
Lv.4.5 [t5t4]
|
|
||||||
</button>
|
|
||||||
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Chain_Lightning-3" onclick = "updatePowderSpecials('Chain_Lightning-3')">
|
|
||||||
Lv.5 [t5t5]
|
|
||||||
</button>
|
|
||||||
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Chain_Lightning-4" onclick = "updatePowderSpecials('Chain_Lightning-4')">
|
|
||||||
Lv.5.5 [t6t5]
|
|
||||||
</button>
|
|
||||||
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Chain_Lightning-5" onclick = "updatePowderSpecials('Chain_Lightning-5')">
|
|
||||||
Lv.6 [t6t6]
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="col tDam">
|
|
||||||
Kill Streak (Passive)
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row row-cols-1 p-0 m-0" id="int-boost">
|
|
||||||
<div class="col wDam dark-5">
|
|
||||||
Curse (Active)
|
|
||||||
</div>
|
|
||||||
<div class="col skp-tooltip dark-6 rounded-bottom my-3 my-xl-1">
|
|
||||||
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Curse-1" onclick = "updatePowderSpecials('Curse-1')">
|
|
||||||
Lv.4 [w4w4]
|
|
||||||
</button>
|
|
||||||
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Curse-2" onclick = "updatePowderSpecials('Curse-2')">
|
|
||||||
Lv.4.5 [w5w4]
|
|
||||||
</button>
|
|
||||||
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Curse-3" onclick = "updatePowderSpecials('Curse-3')">
|
|
||||||
Lv.5 [w5w5]
|
|
||||||
</button>
|
|
||||||
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Curse-4" onclick = "updatePowderSpecials('Curse-4')">
|
|
||||||
Lv.5.5 [w6w5]
|
|
||||||
</button>
|
|
||||||
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Curse-5" onclick = "updatePowderSpecials('Curse-5')">
|
|
||||||
Lv.6 [w6w6]
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="col wDam">
|
|
||||||
Concentration (Passive)
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row row-cols-1 p-0 m-0" id="def-boost" style="display: none;">
|
|
||||||
<div class="col fDam dark-5">
|
|
||||||
Courage (Active)
|
|
||||||
</div>
|
|
||||||
<div class="col skp-tooltip dark-6 rounded-bottom my-3 my-xl-1">
|
|
||||||
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Courage-1" onclick = "updatePowderSpecials('Courage-1')">
|
|
||||||
Lv.4 [f4f4]
|
|
||||||
</button>
|
|
||||||
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Courage-2" onclick = "updatePowderSpecials('Courage-2')">
|
|
||||||
Lv.4.5 [f5f4]
|
|
||||||
</button>
|
|
||||||
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Courage-3" onclick = "updatePowderSpecials('Courage-3')">
|
|
||||||
Lv.5 [f5f5]
|
|
||||||
</button>
|
|
||||||
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Courage-4" onclick = "updatePowderSpecials('Courage-4')">
|
|
||||||
Lv.5.5 [f6f5]
|
|
||||||
</button>
|
|
||||||
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Courage-5" onclick = "updatePowderSpecials('Courage-5')">
|
|
||||||
Lv.6 [f6f6]
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="col fDam">
|
|
||||||
Endurance (Passive)
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row row-cols-1 p-0 m-0" id="agi-boost" style="display: none;">
|
|
||||||
<div class="col aDam dark-5">
|
|
||||||
Wind Prison (Active)
|
|
||||||
</div>
|
|
||||||
<div class="col skp-tooltip dark-6 rounded-bottom my-3 my-xl-1">
|
|
||||||
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Wind_Prison-1" onclick = "updatePowderSpecials('Wind_Prison-1')">
|
|
||||||
Lv.4 [a4a4]
|
|
||||||
</button>
|
|
||||||
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Wind_Prison-2" onclick = "updatePowderSpecials('Wind_Prison-2')">
|
|
||||||
Lv.4.5 [a5a4]
|
|
||||||
</button>
|
|
||||||
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Wind_Prison-3" onclick = "updatePowderSpecials('Wind_Prison-3')">
|
|
||||||
Lv.5 [a5a5]
|
|
||||||
</button>
|
|
||||||
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Wind_Prison-4" onclick = "updatePowderSpecials('Wind_Prison-4')">
|
|
||||||
Lv.5.5 [a6a5]
|
|
||||||
</button>
|
|
||||||
<button class = "button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id = "Wind_Prison-5" onclick = "updatePowderSpecials('Wind_Prison-5')">
|
|
||||||
Lv.6 [a6a6]
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="col aDam">
|
|
||||||
Dodge (Passive)
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<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">
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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',
|
||||||
|
|
Loading…
Reference in a new issue