colorful sliders + powder special tab focus
This commit is contained in:
parent
b6547add2f
commit
3058407be8
4 changed files with 13 additions and 10 deletions
10
sq2bs.html
10
sq2bs.html
|
@ -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>
|
||||||
|
|
3
sq2bs.js
3
sq2bs.js
|
@ -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
|
||||||
|
|
|
@ -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.
|
||||||
|
|
|
@ -32,10 +32,10 @@ let elem_chars = [
|
||||||
|
|
||||||
let elem_colors = [
|
let elem_colors = [
|
||||||
"#00AA00",
|
"#00AA00",
|
||||||
"FFFF55",
|
"#FFFF55",
|
||||||
"55FFFF",
|
"#55FFFF",
|
||||||
"FF5555",
|
"#FF5555",
|
||||||
"FFFFFF"
|
"#FFFFFF"
|
||||||
]
|
]
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
Loading…
Add table
Reference in a new issue