From 3058407be8b545b86f5f53680a4c84f75a2d98f9 Mon Sep 17 00:00:00 2001
From: ferricles <ferricles@gmail.com>
Date: Tue, 11 Jan 2022 13:31:58 -0500
Subject: [PATCH] colorful sliders + powder special tab focus

---
 sq2bs.html              | 10 +++++-----
 sq2bs.js                |  3 +++
 sq2builder.js           |  2 +-
 sq2display_constants.js |  8 ++++----
 4 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/sq2bs.html b/sq2bs.html
index 0c5adfe..576703c 100644
--- a/sq2bs.html
+++ b/sq2bs.html
@@ -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>
diff --git a/sq2bs.js b/sq2bs.js
index a2daed2..793fa43 100644
--- a/sq2bs.js
+++ b/sq2bs.js
@@ -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
diff --git a/sq2builder.js b/sq2builder.js
index 16d3816..ffb63d5 100644
--- a/sq2builder.js
+++ b/sq2builder.js
@@ -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.
diff --git a/sq2display_constants.js b/sq2display_constants.js
index 0d90f99..73106c0 100644
--- a/sq2display_constants.js
+++ b/sq2display_constants.js
@@ -32,10 +32,10 @@ let elem_chars = [
 
 let elem_colors = [
     "#00AA00",
-    "FFFF55",
-    "55FFFF",
-    "FF5555",
-    "FFFFFF"
+    "#FFFF55",
+    "#55FFFF",
+    "#FF5555",
+    "#FFFFFF"
 ]
 
 /*