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="col">
<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
</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
</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
</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
</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
</div>
</div>

View file

@ -207,8 +207,11 @@ function toggle_spell_tab(tab) {
function toggle_boost_tab(tab) {
for (const i of skp_keys) {
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");
}
// toggle tab

View file

@ -674,7 +674,7 @@ function updateArmorPowderSpecials(elem_id) {
//update the slider's graphics
let bg_color = elem_colors[skp_names.indexOf(wynn_elem)];
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.

View file

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