endernon/wynnbuilder-forked-for-changes
1
0
Fork 0
forked from morphNon/wynnbuilder-idk
Code Pull requests Activity

feat: detailed spell show on click

Browse source
This commit is contained in:
reschan 2021-10-26 20:21:06 +07:00
parent 2d853cbd2c
commit cadceb95c4
3 changed files with 28 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
sq2bs.html
View file

@ -710,29 +710,35 @@
<div class="row row-cols-1 gy-3 mb-4 text-center scaled-font"> <div class="row row-cols-1 gy-3 mb-4 text-center scaled-font">
<div class="col"> <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 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>
<div class="col"> <div class="col">
<div class="spell-display dark-5 rounded dark-shadow py-2 border border-dark" id="build-poison-stats">poison</div> <div class="spell-display dark-5 rounded dark-shadow py-2 border border-dark" id="build-poison-stats">poison</div>
</div> </div>
<div class="col"> <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>
<div class="col"> <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>
<div class="col"> <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>
<div class="col"> <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>
<div class="col"> <div class="col">
<div class="spell-display dark-5 rounded dark-shadow py-2 border border-dark" id = "powder-special-stats"></div> <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> </div>
</div> </div>
<div class="col" id="masonry-container"> <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"> <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 id="weapon-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark">
</div> </div>
</div> </div>
<div class="col dark-5"> <div class="col dark-5 scaled-font">
<footer class="text-center"> <footer class="text-center">
<div id="header2"> <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> <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
View file

@ -2,6 +2,8 @@ let equipment_keys = ['helmet', 'chestplate', 'leggings', 'boots', 'ring1', 'rin
let weapon_keys = ['dagger', 'wand', 'bow', 'relik', 'spear'] let weapon_keys = ['dagger', 'wand', 'bow', 'relik', 'spear']
let skp_keys = ['str', 'dex', 'int', 'def', 'agi']; let skp_keys = ['str', 'dex', 'int', 'def', 'agi'];
let spell_disp = ['spell0-info', 'spell1-info', 'spell2-info', 'spell3-info']
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
for (const eq of equipment_keys) { for (const eq of equipment_keys) {
@ -9,6 +11,11 @@ document.addEventListener('DOMContentLoaded', function() {
document.querySelector("#"+eq+"-powder").setAttribute("oninput", "calcBuildSchedule();"); document.querySelector("#"+eq+"-powder").setAttribute("oninput", "calcBuildSchedule();");
document.querySelector("#"+eq+"-tooltip").setAttribute("onclick", "collapse_element('"+ eq +"')"); 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()") document.querySelector("#level-choice").setAttribute("oninput", "calcBuildSchedule()")
let skp_fields = document.getElementsByClassName("skp-update"); 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']; let tabs = ['all-stats', 'minimal-offensive-stats', 'minimal-defensive-stats'];
function show_tab(tab) { function show_tab(tab) {
collapse_element("helmet");
for (const i in tabs) { for (const i in tabs) {
document.querySelector("#"+tabs[i]).style.display = "none"; document.querySelector("#"+tabs[i]).style.display = "none";
} }
document.querySelector("#"+tab).style.display = ""; 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) { 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";

9
sq2display.js
View file

@ -1185,8 +1185,7 @@ function displaysq2SpellDamage(parent_elem, overallparent_elem, build, spell, sp
title_elemavg.appendChild(second); title_elemavg.appendChild(second);
let third = document.createElement("p"); let third = document.createElement("span");
third.classList.add('no-newline');
third.textContent = ") [Base: " + build.getBaseSpellCost(spellIdx, spell.cost) + " ]"; third.textContent = ") [Base: " + build.getBaseSpellCost(spellIdx, spell.cost) + " ]";
title_elem.appendChild(third); title_elem.appendChild(third);
let third_summary = document.createElement("span"); let third_summary = document.createElement("span");
@ -1224,7 +1223,6 @@ function displaysq2SpellDamage(parent_elem, overallparent_elem, build, spell, sp
//console.log(spell_parts); //console.log(spell_parts);
for (const part of spell_parts) { for (const part of spell_parts) {
// parent_elem.append(document.createElement("br"));
let part_div = document.createElement("p"); let part_div = document.createElement("p");
parent_elem.append(part_div); parent_elem.append(part_div);
@ -1269,14 +1267,12 @@ function displaysq2SpellDamage(parent_elem, overallparent_elem, build, spell, sp
overallaverageLabel.appendChild(second); overallaverageLabel.appendChild(second);
// tooltip = createTooltip(tooltip, "p", tooltiptext, overallaverageLabel, ["spell-tooltip", "summary-tooltip"]); // tooltip = createTooltip(tooltip, "p", tooltiptext, overallaverageLabel, ["spell-tooltip", "summary-tooltip"]);
second.classList.add("Damage"); second.classList.add("Damage");
overallaverageLabel.classList.add("itemp");
part_divavg.append(overallaverageLabel); part_divavg.append(overallaverageLabel);
} }
function _damage_display(label_text, average, result_idx) { function _damage_display(label_text, average, result_idx) {
let label = document.createElement("p"); let label = document.createElement("p");
label.textContent = label_text+average.toFixed(2); label.textContent = label_text+average.toFixed(2);
label.classList.add("damageSubtitle");
part_div.append(label); part_div.append(label);
let arrmin = []; let arrmin = [];
@ -1284,11 +1280,8 @@ function displaysq2SpellDamage(parent_elem, overallparent_elem, build, spell, sp
for (let i = 0; i < 6; i++){ for (let i = 0; i < 6; i++){
if (results[i][1] != 0){ if (results[i][1] != 0){
let p = document.createElement("p"); let p = document.createElement("p");
p.classList.add("damagep");
p.classList.add(damageClasses[i]); p.classList.add(damageClasses[i]);
p.textContent = results[i][result_idx] + " \u2013 " + results[i][result_idx + 1]; 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]); arrmin.push(results[i][result_idx]);
arrmax.push(results[i][result_idx + 1]); arrmax.push(results[i][result_idx + 1]);
part_div.append(p); part_div.append(p);