colorful sliders + powder special tab focus

This commit is contained in:
ferricles 2022-01-11 13:31:58 -05:00
parent b6547add2f
commit 3058407be8
4 changed files with 13 additions and 10 deletions

View file

@ -436,19 +436,19 @@
<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="col"> <div class="col">
<div class="row text-nowrap"> <div class="row text-nowrap">
<div class="col eDam dark-4 fake-button elem-boost" onclick="toggle_boost_tab('str')"> <div id = "str-boost-tab" class="col eDam dark-4u fake-button elem-boost" onclick="toggle_boost_tab('str')">
Earth Earth
</div> </div>
<div class="col tDam dark-4 fake-button elem-boost" onclick="toggle_boost_tab('dex')"> <div id = "dex-boost-tab" class="col tDam dark-4u fake-button elem-boost" onclick="toggle_boost_tab('dex')">
Thunder Thunder
</div> </div>
<div class="col wDam dark-4 fake-button elem-boost" onclick="toggle_boost_tab('int')"> <div id = "int-boost-tab" class="col wDam dark-4u fake-button elem-boost" onclick="toggle_boost_tab('int')">
Water Water
</div> </div>
<div class="col fDam dark-4 fake-button elem-boost" onclick="toggle_boost_tab('def')"> <div id = "def-boost-tab" class="col fDam dark-4u fake-button elem-boost" onclick="toggle_boost_tab('def')">
Fire Fire
</div> </div>
<div class="col aDam dark-4 fake-button elem-boost" onclick="toggle_boost_tab('agi')"> <div id = "agi-boost-tab" class="col aDam dark-4u fake-button elem-boost" onclick="toggle_boost_tab('agi')">
Air Air
</div> </div>
</div> </div>

View file

@ -207,8 +207,11 @@ function toggle_spell_tab(tab) {
function toggle_boost_tab(tab) { function toggle_boost_tab(tab) {
for (const i of skp_keys) { for (const i of skp_keys) {
document.querySelector("#"+i+"-boost").style.display = "none"; document.querySelector("#"+i+"-boost").style.display = "none";
document.getElementById(i + "-boost-tab").classList.remove("selected-btn");
} }
document.querySelector("#"+tab+"-boost").style.display = ""; document.querySelector("#"+tab+"-boost").style.display = "";
document.getElementById(tab + "-boost-tab").classList.add("selected-btn");
} }
// toggle tab // toggle tab

View file

@ -674,7 +674,7 @@ function updateArmorPowderSpecials(elem_id) {
//update the slider's graphics //update the slider's graphics
let bg_color = elem_colors[skp_names.indexOf(wynn_elem)]; let bg_color = elem_colors[skp_names.indexOf(wynn_elem)];
let pct = Math.round(100 * value / powderSpecialStats[skp_names.indexOf(wynn_elem)].cap); let pct = Math.round(100 * value / powderSpecialStats[skp_names.indexOf(wynn_elem)].cap);
elem.style.background = `linear-gradient(to right, ${bg_color}, ${bg_color} ${pct}%, #AAAAAA ${pct}%, #AAAAAA ${100 - pct}%)`; elem.style.background = `linear-gradient(to right, ${bg_color}, ${bg_color} ${pct}%, #AAAAAA ${pct}%, #AAAAAA 100%)`;
} }
/* Calculates all build statistics and updates the entire display. /* Calculates all build statistics and updates the entire display.

View file

@ -32,10 +32,10 @@ let elem_chars = [
let elem_colors = [ let elem_colors = [
"#00AA00", "#00AA00",
"FFFF55", "#FFFF55",
"55FFFF", "#55FFFF",
"FF5555", "#FF5555",
"FFFFFF" "#FFFFFF"
] ]
/* /*