feat: detailed spell show on click
This commit is contained in:
parent
2d853cbd2c
commit
cadceb95c4
3 changed files with 28 additions and 15 deletions
18
sq2bs.html
18
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>
|
||||
|
|
16
sq2bs.js
16
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";
|
||||
|
|
|
@ -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);
|
||||
|
|
Loading…
Reference in a new issue