From cadceb95c480eea525d48dadadc718529e5f6221 Mon Sep 17 00:00:00 2001
From: reschan <reschan>
Date: Tue, 26 Oct 2021 20:21:06 +0700
Subject: [PATCH] feat: detailed spell show on click

---
 sq2bs.html    | 18 ++++++++++++------
 sq2bs.js      | 16 +++++++++++++++-
 sq2display.js |  9 +--------
 3 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/sq2bs.html b/sq2bs.html
index e9f76bc..b08dec5 100644
--- a/sq2bs.html
+++ b/sq2bs.html
@@ -710,29 +710,35 @@
                         <div class="row row-cols-1 gy-3 mb-4 text-center scaled-font">
                             <div class="col">
                                 <div class="spell-display dark-5 rounded dark-shadow py-2 border border-dark" id="build-melee-statsAvg">melee</div>
+                                <div class = "spell-display dark-5 rounded-bottom py-2 dark-shadow" id = "build-melee-stats" style="display: none;"></div>
                             </div>
                             <div class="col">
                                 <div class="spell-display dark-5 rounded dark-shadow py-2 border border-dark" id="build-poison-stats">poison</div>
                             </div>
                             <div class="col">
-                                <div class="spell-display dark-5 rounded dark-shadow py-2 border border-dark" id="spell0-infoAvg">spell1</div>
+                                <div class="spell-display spell-expand dark-5 rounded dark-shadow py-2 border border-dark" id="spell0-infoAvg">spell1</div>
+                                <div class = "spell-display dark-5 rounded dark-shadow py-2" id = "spell0-info" style="display: none;">Spell 1</div>
                             </div>
                             <div class="col">
-                                <div class="spell-display dark-5 rounded dark-shadow py-2 border border-dark" id="spell1-infoAvg">spell2</div>
+                                <div class="spell-display spell-expand dark-5 rounded dark-shadow py-2 border border-dark" id="spell1-infoAvg">spell2</div>
+                                <div class = "spell-display dark-5 rounded dark-shadow py-2" id = "spell1-info" style="display: none;">Spell 2</div>
                             </div>
                             <div class="col">
-                                <div class="spell-display dark-5 rounded dark-shadow py-2 border border-dark" id="spell2-infoAvg">spell3</div>
+                                <div class="spell-display spell-expand dark-5 rounded dark-shadow py-2 border border-dark" id="spell2-infoAvg">spell3</div>
+                                <div class = "spell-display dark-5 rounded dark-shadow py-2" id = "spell2-info" style="display: none;">Spell 3</div>
                             </div>
                             <div class="col">
-                                <div class="spell-display dark-5 rounded dark-shadow py-2 border border-dark" id="spell3-infoAvg">spell4</div>
+                                <div class="spell-display spell-expand dark-5 rounded dark-shadow py-2 border border-dark" id="spell3-infoAvg">spell4</div>
+                                <div class = "spell-display dark-5 rounded dark-shadow py-2" id = "spell3-info" style="display: none;">Spell 4</div>
                             </div>
                             <div class="col">
                                 <div class="spell-display dark-5 rounded dark-shadow py-2 border border-dark" id = "powder-special-stats"></div>
                             </div>
+                            
                         </div>
                     </div>
                 </div>
-            </div>    
+            </div>
             <div class="col" id="masonry-container">
 
                 <div id="helmet-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark">
@@ -754,7 +760,7 @@
                 <div id="weapon-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark">
                 </div>
             </div>
-            <div class="col dark-5">
+            <div class="col dark-5 scaled-font">
                 <footer class="text-center">
                     <div id="header2">
                         <p>Made by <b class = "hppeng">hppeng</b> and <b class = "ferricles">ferricles</b> with <a href = "./atlas.html" target = "_blank" class = "link">Atlas Inc</a> (JavaScript required to function, nothing works without js)</p>
diff --git a/sq2bs.js b/sq2bs.js
index 1daf968..54cfc6f 100644
--- a/sq2bs.js
+++ b/sq2bs.js
@@ -2,6 +2,8 @@ let equipment_keys = ['helmet', 'chestplate', 'leggings', 'boots', 'ring1', 'rin
 let weapon_keys = ['dagger', 'wand', 'bow', 'relik', 'spear']
 let skp_keys = ['str', 'dex', 'int', 'def', 'agi'];
 
+let spell_disp = ['spell0-info', 'spell1-info', 'spell2-info', 'spell3-info']
+
 document.addEventListener('DOMContentLoaded', function() {
 
     for (const eq of equipment_keys) {
@@ -9,6 +11,11 @@ document.addEventListener('DOMContentLoaded', function() {
         document.querySelector("#"+eq+"-powder").setAttribute("oninput", "calcBuildSchedule();");
         document.querySelector("#"+eq+"-tooltip").setAttribute("onclick", "collapse_element('"+ eq +"')");
     }
+
+    for (const i of spell_disp) {
+        document.querySelector("#"+i+"Avg").setAttribute("onclick", "toggle_spell_tab('"+i+"')");
+    }
+
     document.querySelector("#level-choice").setAttribute("oninput", "calcBuildSchedule()")
 
     let skp_fields = document.getElementsByClassName("skp-update");
@@ -138,13 +145,20 @@ function update_field(field) {
 let tabs = ['all-stats', 'minimal-offensive-stats', 'minimal-defensive-stats'];
 
 function show_tab(tab) {
-    collapse_element("helmet");
     for (const i in tabs) {
         document.querySelector("#"+tabs[i]).style.display = "none";
     }
     document.querySelector("#"+tab).style.display = "";
 }
 
+function toggle_spell_tab(tab) {
+    if (document.querySelector("#"+tab).style.display == "none") {
+        document.querySelector("#"+tab).style.display = "";
+    } else {
+        document.querySelector("#"+tab).style.display = "none";
+    }
+}
+
 function toggle_boost_tab(tab) {
     for (const i of skp_keys) {
         document.querySelector("#"+i+"-boost").style.display = "none";
diff --git a/sq2display.js b/sq2display.js
index a3c6ddc..8275629 100644
--- a/sq2display.js
+++ b/sq2display.js
@@ -1185,8 +1185,7 @@ function displaysq2SpellDamage(parent_elem, overallparent_elem, build, spell, sp
         title_elemavg.appendChild(second);
         
 
-        let third = document.createElement("p");
-        third.classList.add('no-newline');
+        let third = document.createElement("span");
         third.textContent = ") [Base: " + build.getBaseSpellCost(spellIdx, spell.cost) + " ]";
         title_elem.appendChild(third);
         let third_summary = document.createElement("span");
@@ -1224,7 +1223,6 @@ function displaysq2SpellDamage(parent_elem, overallparent_elem, build, spell, sp
     //console.log(spell_parts);
 
     for (const part of spell_parts) {
-        // parent_elem.append(document.createElement("br"));
         let part_div = document.createElement("p");
         parent_elem.append(part_div);
 
@@ -1269,14 +1267,12 @@ function displaysq2SpellDamage(parent_elem, overallparent_elem, build, spell, sp
                 overallaverageLabel.appendChild(second);
                 // tooltip = createTooltip(tooltip, "p", tooltiptext, overallaverageLabel, ["spell-tooltip", "summary-tooltip"]);
                 second.classList.add("Damage");
-                overallaverageLabel.classList.add("itemp");
                 part_divavg.append(overallaverageLabel);
             }
             
             function _damage_display(label_text, average, result_idx) {
                 let label = document.createElement("p");
                 label.textContent = label_text+average.toFixed(2);
-                label.classList.add("damageSubtitle");
                 part_div.append(label);
                 
                 let arrmin = [];
@@ -1284,11 +1280,8 @@ function displaysq2SpellDamage(parent_elem, overallparent_elem, build, spell, sp
                 for (let i = 0; i < 6; i++){
                     if (results[i][1] != 0){
                         let p = document.createElement("p");
-                        p.classList.add("damagep");
                         p.classList.add(damageClasses[i]);
                         p.textContent = results[i][result_idx] + " \u2013 " + results[i][result_idx + 1];
-                        tooltiptext = tooltipinfo.get("damageformulas")[i].slice(0,2).join("\n");
-                        // tooltip = createTooltip(tooltip, "p", tooltiptext, p, ["spell-tooltip"]);
                         arrmin.push(results[i][result_idx]);
                         arrmax.push(results[i][result_idx + 1]);
                         part_div.append(p);