feat: next spell cost

This commit is contained in:
reschan 2021-10-27 20:51:37 +07:00
parent 50b96ce743
commit f4e60bf5dd
5 changed files with 168 additions and 87 deletions

View file

@ -182,7 +182,7 @@ li.search-item:hover {
.float-tooltip { .float-tooltip {
background-color: hsl(0, 0%, 16%); background-color: hsl(0, 0%, 16%);
position: absolute; position: absolute;
transition: .5s; transition: .3s;
cursor: pointer; cursor: pointer;
} }
@ -214,6 +214,10 @@ input.equipment-input {
font-weight: bold; font-weight: bold;
} }
.spell-expand {
cursor: pointer;
}
.scaled-font { .scaled-font {
font-size: 2.5rem; font-size: 2.5rem;
} }
@ -223,6 +227,11 @@ input.equipment-input {
font-weight: bold; font-weight: bold;
} }
.spellcost-tooltip b {
font-size: 2.1875rem !important;
font-weight: bold;
}
.warning { .warning {
color: #ff8180; color: #ff8180;
font-size: 1.875rem; font-size: 1.875rem;
@ -256,6 +265,10 @@ input.equipment-input {
font-size: .625rem; font-size: .625rem;
} }
.spellcost-tooltip b {
font-size: .625rem !important;
}
.scaled-item-icon { .scaled-item-icon {
width: 3.2rem; width: 3.2rem;
} }
@ -295,6 +308,10 @@ input.equipment-input {
font-size: .78rem; font-size: .78rem;
} }
.spellcost-tooltip b {
font-size: .78rem !important;
}
.scaled-item-icon { .scaled-item-icon {
width: 4rem; width: 4rem;
} }
@ -412,6 +429,10 @@ input.equipment-input {
box-shadow: 0rem 0rem 1.25rem 0.1875rem black; box-shadow: 0rem 0rem 1.25rem 0.1875rem black;
} }
.dark-shadow-sm { .dark-shadow-sm {
box-shadow: 0rem 0rem 0.625rem 0.125rem black; box-shadow: 0rem 0rem 0.625rem 0.125rem black;
}
.border-dark-7 {
border-color:hsl(0, 0%, 14%) !important;
} }

View file

@ -333,8 +333,8 @@
<div class="rounded dark-6 dark-shadow-sm px-2"> <div class="rounded dark-6 dark-shadow-sm px-2">
<label for="str-skp" class="eDam skp-tooltip">Strength</label> <label for="str-skp" class="eDam skp-tooltip">Strength</label>
<input type="string" id="str-skp" name="str-skp" value="0" class="skp-update skp-tooltip border-dark dark-7 text-light text-center rounded" tabindex="2"/> <input type="string" id="str-skp" name="str-skp" value="0" class="skp-update skp-tooltip border-dark dark-7 text-light text-center rounded" tabindex="2"/>
<div id="str-skp-assign" class="skp-tooltip" style="display: none;"> <div id="str-skp-assign" class="skp-tooltip">
Manually Assigned: 0 Assign: 0
</div> </div>
<div id="str-skp-base" class="skp-tooltip"> <div id="str-skp-base" class="skp-tooltip">
Original: 0 Original: 0
@ -347,8 +347,8 @@
<div class="rounded dark-6 dark-shadow-sm px-2"> <div class="rounded dark-6 dark-shadow-sm px-2">
<label for="dex-skp" class="tDam skp-tooltip">Dexterity</label> <label for="dex-skp" class="tDam skp-tooltip">Dexterity</label>
<input type="string" id="dex-skp" name="dex-skp" value="0" class="skp-update skp-tooltip border-dark dark-7 text-light text-center rounded" tabindex="2"/> <input type="string" id="dex-skp" name="dex-skp" value="0" class="skp-update skp-tooltip border-dark dark-7 text-light text-center rounded" tabindex="2"/>
<div id="dex-skp-assign" class="skp-tooltip" style="display: none;"> <div id="dex-skp-assign" class="skp-tooltip">
Manually Assigned: 0 Assign: 0
</div> </div>
<div id="dex-skp-base" class="skp-tooltip"> <div id="dex-skp-base" class="skp-tooltip">
Original: 0 Original: 0
@ -361,8 +361,8 @@
<div class="rounded dark-6 dark-shadow-sm px-2"> <div class="rounded dark-6 dark-shadow-sm px-2">
<label for="int-skp" class="wDam skp-tooltip text-nowrap">Intelligence</label> <label for="int-skp" class="wDam skp-tooltip text-nowrap">Intelligence</label>
<input type="string" id="int-skp" name="int-skp" value="0" class="skp-update skp-tooltip border-dark dark-7 text-light text-center rounded" tabindex="2"/> <input type="string" id="int-skp" name="int-skp" value="0" class="skp-update skp-tooltip border-dark dark-7 text-light text-center rounded" tabindex="2"/>
<div id="int-skp-assign" class="skp-tooltip" style="display: none;"> <div id="int-skp-assign" class="skp-tooltip">
Manually Assigned: 0 Assign: 0
</div> </div>
<div id="int-skp-base" class="skp-tooltip"> <div id="int-skp-base" class="skp-tooltip">
Original: 0 Original: 0
@ -375,8 +375,8 @@
<div class="rounded dark-6 dark-shadow-sm px-2"> <div class="rounded dark-6 dark-shadow-sm px-2">
<label for="def-skp" class="fDam skp-tooltip">Defense</label> <label for="def-skp" class="fDam skp-tooltip">Defense</label>
<input type="string" id="def-skp" name="def-skp" value="0" class="skp-update skp-tooltip border-dark dark-7 text-light text-center rounded" tabindex="2"/> <input type="string" id="def-skp" name="def-skp" value="0" class="skp-update skp-tooltip border-dark dark-7 text-light text-center rounded" tabindex="2"/>
<div id="def-skp-assign" class="skp-tooltip" style="display: none;"> <div id="def-skp-assign" class="skp-tooltip">
Manually Assigned: 0 Assign: 0
</div> </div>
<div id="def-skp-base" class="skp-tooltip"> <div id="def-skp-base" class="skp-tooltip">
Original: 0 Original: 0
@ -389,8 +389,8 @@
<div class="rounded dark-6 dark-shadow-sm px-2"> <div class="rounded dark-6 dark-shadow-sm px-2">
<label for="agi-skp" class="aDam skp-tooltip">Agility</label> <label for="agi-skp" class="aDam skp-tooltip">Agility</label>
<input type="string" id="agi-skp" name="agi-skp" value="0" class="skp-update skp-tooltip border-dark dark-7 text-light text-center rounded" tabindex="2"/> <input type="string" id="agi-skp" name="agi-skp" value="0" class="skp-update skp-tooltip border-dark dark-7 text-light text-center rounded" tabindex="2"/>
<div id="agi-skp-assign" class="skp-tooltip" style="display: none;"> <div id="agi-skp-assign" class="skp-tooltip">
Manually Assigned: 0 Assign: 0
</div> </div>
<div id="agi-skp-base" class="skp-tooltip"> <div id="agi-skp-base" class="skp-tooltip">
Original: 0 Original: 0
@ -690,13 +690,13 @@
<div class="row row-cols-1 rounded dark-shadow dark-6 scaled-font"> <div class="row row-cols-1 rounded dark-shadow dark-6 scaled-font">
<div class="col rounded-top"> <div class="col rounded-top">
<div class="row"> <div class="row">
<div id="tab-offense-btn" class="col-4 text-center fake-button border-bottom border-dark rounded-top dark-4" onclick="show_tab('minimal-offensive-stats')"> <div id="tab-offense-btn" class="col-4 text-center fake-button border-bottom border-dark rounded-top dark-4 border border-2 border-dark-7" onclick="show_tab('minimal-offensive-stats')">
Offense Offense
</div> </div>
<div id="tab-defense-btn" class="col-4 text-center fake-button border-bottom border-dark rounded-top dark-4" onclick="show_tab('minimal-defensive-stats')"> <div id="tab-defense-btn" class="col-4 text-center fake-button border-bottom border-dark rounded-top dark-4 border border-2 border-dark-7" onclick="show_tab('minimal-defensive-stats')">
Defense Defense
</div> </div>
<div id="tab-basic-btn" class="col-4 text-center fake-button border-bottom border-dark rounded-top dark-4" onclick="show_tab('all-stats')"> <div id="tab-basic-btn" class="col-4 text-center fake-button border-bottom border-dark rounded-top dark-4 border border-2 border-dark-7" onclick="show_tab('all-stats')">
Overall Overall
</div> </div>
</div> </div>
@ -740,25 +740,27 @@
</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 dark-shadow p-3">
<div id="helmet-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark">
</div> </div>
<div id="chestplate-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark"> <div id="chestplate-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
</div> </div>
<div id="leggings-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark"> <div id="leggings-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
</div> </div>
<div id="boots-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark"> <div id="boots-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
</div> </div>
<div id="ring1-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark"> <div id="ring1-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
</div> </div>
<div id="ring2-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark"> <div id="ring2-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
</div> </div>
<div id="bracelet-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark"> <div id="bracelet-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
</div> </div>
<div id="necklace-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark"> <div id="necklace-tooltip" class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
</div> </div>
<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 dark-shadow p-3">
</div> </div>
<div class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3" id = "build-order">
</div>
<div class = "rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark p-3" id = "set-info">Set info</div>
</div> </div>
<div class="col dark-5 scaled-font"> <div class="col dark-5 scaled-font">
<footer class="text-center"> <footer class="text-center">
@ -773,49 +775,7 @@
</div> </div>
</div> </div>
</div> </div>
<!--div id="drag-edit-ids" style="display: none;">
<div id="drag-full-eqs" style="display: none;">
<div class = "build hide-container-grid" style="display: none;">
<div class = "center build-order" id = "build-order">
</div>
<div class = "center build-melee-stats" id = "build-melee-stats">
</div>
<div class = "center build-defense-stats" id = "build-defense-stats">
</div>
</div>
</div>
<div id="drag-full-spells" style="display: none;">
<div class = "spells hide-container-grid" style="display: none;">
<div class = "center spell-info" id = "spell0">
<!--div class = "center" id = "spell0-name">Spell 1</div-->
<div class = "center" id = "spell0-info">Spell 1</div>
</div>
<div class = "center spell-info" id = "spell1">
<!--div class = "center" id = "spell1-name">Spell 2</div-->
<div class = "center" id = "spell1-info">Spell 2</div>
</div>
<div class = "center spell-info" id = "spell2">
<!--div class = "center" id = "spell2-name">Spell 3</div-->
<div class = "center" id = "spell2-info">Spell 3</div>
</div>
<div class = "center spell-info" id = "spell3">
<!--div class = "center" id = "spell3-name">Spell 4</div-->
<div class = "center" id = "spell3-info">Spell 4</div>
</div>
</div>
</div>
<div id="drag-additional-info" style="display: none;">
<div class="misc">
<div class = "center set-info" id = "set-info-div" style = "grid-column:1;grid-row:1; display: none;">
<div class = "center" id = "set-info">Set info</div>
</div>
<div class = "center int-info hide-container-block" id = "int-info-div" style = "grid-column:4;grid-row:1; display: none;">
<div class = "center" id = "int-info">Next Spell Costs</div>
</div>
</div>
</div>
<div id="drag-edit-ids" style="display: none;">
<div class="id-box fade-in" id="id-edit" style="display: none"> <div class="id-box fade-in" id="id-edit" style="display: none">
<div class="id-edit1"> <div class="id-edit1">
<table> <table>
@ -1210,7 +1170,7 @@
</table> </table>
</div> </div>
</div> </div>
</div> </div-->
<div style="display: none;"> <div style="display: none;">
<div id="search-container" class="draggable full-border window-container" style="border-top: none;"> <div id="search-container" class="draggable full-border window-container" style="border-top: none;">
<div id="search-container-header" class="window-header"> <div id="search-container-header" class="window-header">

View file

@ -1,8 +1,9 @@
let equipment_keys = ['helmet', 'chestplate', 'leggings', 'boots', 'ring1', 'ring2', 'bracelet', 'necklace', 'weapon']; let equipment_keys = ['helmet', 'chestplate', 'leggings', 'boots', 'ring1', 'ring2', 'bracelet', 'necklace', 'weapon'];
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'] let spell_disp = ['spell0-info', 'spell1-info', 'spell2-info', 'spell3-info'];
let other_disp = ['build-order', 'set-info', 'int-info'];
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
@ -166,6 +167,26 @@ function toggle_boost_tab(tab) {
document.querySelector("#"+tab+"-boost").style.display = ""; document.querySelector("#"+tab+"-boost").style.display = "";
} }
// toggle tab
function toggle_tab(tab) {
if (document.querySelector("#"+tab).style.display == "none") {
document.querySelector("#"+tab).style.display = "";
} else {
document.querySelector("#"+tab).style.display = "none";
}
}
function toggle_edit(id) {
if (document.querySelector("#"+id).style.display == "none") {
document.querySelector("#"+id+"-val").style.display = "none";
document.querySelector("#"+id).style.display = "";
} else {
document.querySelector("#"+id+"-val").style.display = "";
document.querySelector("#"+id).style.display = "none";
updateStatSchedule();
}
}
function collapse_element(eq) { function collapse_element(eq) {
elem_list = document.querySelector("#"+eq+"-tooltip").children elem_list = document.querySelector("#"+eq+"-tooltip").children
for (elem of elem_list) { for (elem of elem_list) {

View file

@ -13,13 +13,14 @@ let editable_item_fields = [ "sdPct", "sdRaw", "mdPct", "mdRaw", "poison", "fDam
let editable_elems = []; let editable_elems = [];
/*
for (let i of editable_item_fields) { for (let i of editable_item_fields) {
let elem = document.getElementById(i); let elem = document.getElementById(i);
elem.addEventListener("change", (event) => { elem.addEventListener("change", (event) => {
elem.classList.add("highlight"); elem.classList.add("highlight");
}); });
editable_elems.push(elem); editable_elems.push(elem);
} }*/
for (let i of skp_order) { for (let i of skp_order) {
let elem = document.getElementById(i+"-skp"); let elem = document.getElementById(i+"-skp");
@ -373,9 +374,7 @@ function calculateBuild(save_skp, skp){
} }
console.log(player_build.toString()); console.log(player_build.toString());
displayEquipOrder(document.getElementById("build-order"),player_build.equip_order); displaysq2EquipOrder(document.getElementById("build-order"),player_build.equip_order);
const assigned = player_build.base_skillpoints; const assigned = player_build.base_skillpoints;
const skillpoints = player_build.total_skillpoints; const skillpoints = player_build.total_skillpoints;
@ -383,11 +382,6 @@ function calculateBuild(save_skp, skp){
setText(skp_order[i] + "-skp-base", "Original: " + skillpoints[i]); setText(skp_order[i] + "-skp-base", "Original: " + skillpoints[i]);
} }
for (let id of editable_item_fields) {
setValue(id, player_build.statMap.get(id));
setText(id+"-base", "Original Value: " + player_build.statMap.get(id));
}
if (save_skp) { if (save_skp) {
// TODO: reduce duplicated code, @updateStats // TODO: reduce duplicated code, @updateStats
let skillpoints = player_build.total_skillpoints; let skillpoints = player_build.total_skillpoints;
@ -509,9 +503,12 @@ function updateStats() {
updatePowderSpecials("skip", false); updatePowderSpecials("skip", false);
updateBoosts("skip", false); updateBoosts("skip", false);
} }
/*
for (let id of editable_item_fields) { for (let id of editable_item_fields) {
player_build.statMap.set(id, parseInt(getValue(id))); player_build.statMap.set(id, parseInt(getValue(id)));
} console.log(player_build.statMap.get(id));
}
}*/
player_build.aggregateStats(); player_build.aggregateStats();
console.log(player_build.statMap); console.log(player_build.statMap);
calculateBuildStats(); calculateBuildStats();
@ -653,7 +650,7 @@ function calculateBuildStats() {
const skillpoints = player_build.total_skillpoints; const skillpoints = player_build.total_skillpoints;
let skp_effects = ["% more damage dealt.","% chance to crit.","% spell cost reduction.","% less damage taken.","% chance to dodge."]; let skp_effects = ["% more damage dealt.","% chance to crit.","% spell cost reduction.","% less damage taken.","% chance to dodge."];
for (let i in skp_order){ //big bren for (let i in skp_order){ //big bren
setText(skp_order[i] + "-skp-assign", "Manually Assigned: " + assigned[i]); setText(skp_order[i] + "-skp-assign", "Assign: " + assigned[i]);
setValue(skp_order[i] + "-skp", skillpoints[i]); setValue(skp_order[i] + "-skp", skillpoints[i]);
let linebreak = document.createElement("br"); let linebreak = document.createElement("br");
linebreak.classList.add("itemp"); linebreak.classList.add("itemp");
@ -754,7 +751,6 @@ function calculateBuildStats() {
displaysq2BuildStats("all-stats", player_build, build_all_display_commands); displaysq2BuildStats("all-stats", player_build, build_all_display_commands);
displaysq2BuildStats("minimal-offensive-stats",player_build, build_offensive_display_commands); displaysq2BuildStats("minimal-offensive-stats",player_build, build_offensive_display_commands);
displaySetBonuses("set-info",player_build); displaySetBonuses("set-info",player_build);
displayNextCosts("int-info",player_build);
let meleeStats = player_build.getMeleeStats(); let meleeStats = player_build.getMeleeStats();
displaysq2MeleeDamage(document.getElementById("build-melee-stats"), document.getElementById("build-melee-statsAvg"), meleeStats); displaysq2MeleeDamage(document.getElementById("build-melee-stats"), document.getElementById("build-melee-statsAvg"), meleeStats);

View file

@ -483,7 +483,7 @@ function displaysq2RolledID(item, id, elemental_format) {
desc_elem.classList.add('col', 'text-center', 'text-nowrap'); desc_elem.classList.add('col', 'text-center', 'text-nowrap');
//TODO elemental format jank //TODO elemental format jank
if (elemental_format) { if (elemental_format) {
apply_elemental_format(desc_elem, id); apply_sq2_elemental_format(desc_elem, id);
} }
else { else {
desc_elem.textContent = idPrefixes[id]; desc_elem.textContent = idPrefixes[id];
@ -541,7 +541,7 @@ function displaysq2FixedID(active, id, value, elemental_format, style) {
desc_elem.classList.add('text-start'); desc_elem.classList.add('text-start');
if (elemental_format) { if (elemental_format) {
apply_elemental_format(desc_elem, id); apply_sq2_elemental_format(desc_elem, id);
} }
else { else {
desc_elem.textContent = idPrefixes[id]; desc_elem.textContent = idPrefixes[id];
@ -565,7 +565,7 @@ function displaysq2FixedID(active, id, value, elemental_format, style) {
let p_elem = document.createElement('div'); let p_elem = document.createElement('div');
p_elem.classList.add('col'); p_elem.classList.add('col');
if (elemental_format) { if (elemental_format) {
apply_elemental_format(p_elem, id, value); apply_sq2_elemental_format(p_elem, id, value);
} }
else { else {
p_elem.textContent = idPrefixes[id].concat(value, idSuffixes[id]); p_elem.textContent = idPrefixes[id].concat(value, idSuffixes[id]);
@ -1200,6 +1200,9 @@ function displaysq2SpellDamage(parent_elem, overallparent_elem, build, spell, sp
parent_elem.append(title_elem); parent_elem.append(title_elem);
overallparent_elem.append(title_elemavg); overallparent_elem.append(title_elemavg);
overallparent_elem.append(displaysq2NextCosts(spell, build));
let critChance = skillPointsToPercentage(build.total_skillpoints[1]); let critChance = skillPointsToPercentage(build.total_skillpoints[1]);
let save_damages = []; let save_damages = [];
@ -1345,3 +1348,83 @@ function displaysq2SpellDamage(parent_elem, overallparent_elem, build, spell, sp
} }
} }
} }
function displaysq2EquipOrder(parent_elem, buildOrder){
parent_elem.textContent = "";
const order = buildOrder.slice();
let title_elem = document.createElement("b");
title_elem.textContent = "Equip order ";
title_elem.classList.add("Normal", "text-center");
parent_elem.append(title_elem);
for (const item of order) {
let p_elem = document.createElement("b");
p_elem.textContent = item.get("displayName");
parent_elem.append(p_elem);
}
}
function displaysq2NextCosts(spell, build) {
let int = build.total_skillpoints[2];
let spells = spell_table[build.weapon.get("type")];
let row = document.createElement("div");
row.classList.add("spellcost-tooltip");
let init_cost = document.createElement("b");
init_cost.textContent = build.getSpellCost(spells.indexOf(spell) + 1, spell.cost);
init_cost.classList.add("Mana");
let arrow = document.createElement("b");
arrow.textContent = "\u279C";
let next_cost = document.createElement("b");
next_cost.textContent = (init_cost.textContent === "1" ? 1 : build.getSpellCost(spells.indexOf(spell) + 1, spell.cost) - 1);
next_cost.classList.add("Mana");
let int_needed = document.createElement("b");
if (init_cost.textContent === "1") {
int_needed.textContent = ": n/a (+0)";
}else { //do math
let target = build.getSpellCost(spells.indexOf(spell) + 1, spell.cost) - 1;
let needed = int;
let noUpdate = false;
//forgive me... I couldn't inverse ceil, floor, and max.
while (build.getSpellCost(spells.indexOf(spell) + 1, spell.cost) > target) {
if(needed > 150) {
noUpdate = true;
break;
}
needed++;
build.total_skillpoints[2] = needed;
}
let missing = needed - int;
//in rare circumstances, the next spell cost can jump.
if (noUpdate) {
next_cost.textContent = (init_cost.textContent === "1" ? 1 : build.getSpellCost(spells.indexOf(spell) + 1, spell.cost)-1);
}else {
next_cost.textContent = (init_cost.textContent === "1" ? 1 : build.getSpellCost(spells.indexOf(spell) + 1, spell.cost));
}
build.total_skillpoints[2] = int;//forgive me pt 2
int_needed.textContent = ": " + (needed > 150 ? ">150" : needed) + " int (+" + (needed > 150 ? "n/a" : missing) + ")";
}
// row.appendChild(init_cost);
row.appendChild(arrow);
row.appendChild(next_cost);
row.appendChild(int_needed);
return row;
}
function apply_sq2_elemental_format(p_elem, id, suffix) {
suffix = (typeof suffix !== 'undefined') ? suffix : "";
// THIS IS SO JANK BUT IM TOO LAZY TO FIX IT TODO
let parts = idPrefixes[id].split(/ (.*)/);
let element_prefix = parts[0];
let desc = parts[1];
let i_elem = document.createElement('span');
i_elem.classList.add(element_prefix);
i_elem.textContent = element_prefix;
p_elem.appendChild(i_elem);
let i_elem2 = document.createElement('span');
i_elem2.textContent = " " + desc + suffix;
p_elem.appendChild(i_elem2);
}