From 2fe88957a49838759a0fe031485919b79b8adf22 Mon Sep 17 00:00:00 2001 From: hppeng Date: Thu, 4 Aug 2022 23:24:53 -0700 Subject: [PATCH 1/4] Just a code cleanup --- js/atree.js | 154 +++++++++++++++++++++++----------------------------- 1 file changed, 68 insertions(+), 86 deletions(-) diff --git a/js/atree.js b/js/atree.js index 2bf49dc..2896468 100644 --- a/js/atree.js +++ b/js/atree.js @@ -469,24 +469,18 @@ const atree_render_active = new (class extends ComputeNode { this.list_elem.innerHTML = ""; //reset all atree actives - should be done in a more general way later // TODO: move to display? if (errors.length > 0) { - let errorbox = document.createElement('div'); - errorbox.classList.add("rounded-bottom", "dark-4", "border", "p-0", "mx-2", "my-4", "dark-shadow"); - this.list_elem.appendChild(errorbox); + const errorbox = make_elem('div', ['rounded-bottom', 'dark-4', 'border', 'p-0', 'mx-2', 'my-4', 'dark-shadow']); + this.list_elem.append(errorbox); - let error_title = document.createElement('b'); - error_title.classList.add("warning", "scaled-font"); - error_title.innerHTML = "ATree Error!"; - errorbox.appendChild(error_title); + const error_title = document.createElement('b', ['warning', 'scaled-font'], { innerHTML: "ATree Error!" }); + errorbox.append(error_title); for (let i = 0; i < 5 && i < errors.length; ++i) { - const error = errors[i]; - const atree_warning = make_elem("p", ["warning", "small-text"], {textContent: error}); - errorbox.appendChild(atree_warning); + errorbox.append(make_elem("p", ["warning", "small-text"], {textContent: errors[i]})); } if (errors.length > 5) { const error = '... ' + (errors.length-5) + ' errors not shown'; - const atree_warning = make_elem("p", ["warning", "small-text"], {textContent: error}); - errorbox.appendChild(atree_warning); + errorbox.append(make_elem("p", ["warning", "small-text"], {textContent: error})); } } const ret_map = new Map(); @@ -500,23 +494,15 @@ const atree_render_active = new (class extends ComputeNode { for (const id of to_render_id) { const abil = merged_abils.get(id); - let active_tooltip = document.createElement('div'); - active_tooltip.classList.add("rounded-bottom", "dark-4", "border", "p-0", "mx-2", "my-4", "dark-shadow"); - - let active_tooltip_title = document.createElement('b'); - active_tooltip_title.classList.add("scaled-font"); - active_tooltip_title.innerHTML = abil.display_name; - active_tooltip.appendChild(active_tooltip_title); + const active_tooltip = make_elem('div', ['rounded-bottom', 'dark-4', 'border', 'p-0', 'mx-2', 'my-4', 'dark-shadow']); + active_tooltip.append(make_elem('b', ['scaled-font'], { innerHTML: abil.display_name })); for (const desc of abil.desc) { - let active_tooltip_desc = document.createElement('p'); - active_tooltip_desc.classList.add("scaled-font-sm", "my-0", "mx-1", "text-wrap"); - active_tooltip_desc.textContent = desc; - active_tooltip.appendChild(active_tooltip_desc); + active_tooltip.append(make_elem('p', ['scaled-font-sm', 'my-0', 'mx-1', 'text-wrap'], { textContent: desc })); } ret_map.set(abil.id, active_tooltip); - this.list_elem.appendChild(active_tooltip); + this.list_elem.append(active_tooltip); } return ret_map; } @@ -573,27 +559,29 @@ const atree_collect_spells = new (class extends ComputeNode { let found_part = false; for (let part of ret_spell.parts) { // TODO: replace with Map? to avoid this linear search... idk prolly good since its not more verbose to type in json - if (part.name === target_part) { - if ('multipliers' in effect) { - for (const [idx, v] of effect.multipliers.entries()) { // python: enumerate() - part.multipliers[idx] += v; - } - } - else if ('power' in effect) { - part.power += effect.power; - } - else if ('hits' in effect) { - for (const [idx, v] of Object.entries(effect.hits)) { // looks kinda similar to multipliers case... hmm... can we unify all of these three? (make healpower a list) - if (idx in part.hits) { part.hits[idx] += v; } - else { part.hits[idx] = v; } - } - } - else { - throw "uhh invalid spell add effect"; - } - found_part = true; - break; + if (part.name !== target_part) { + continue; } + + if ('multipliers' in effect) { + for (const [idx, v] of effect.multipliers.entries()) { // python: enumerate() + part.multipliers[idx] += v; + } + } + else if ('power' in effect) { + part.power += effect.power; + } + else if ('hits' in effect) { + for (const [idx, v] of Object.entries(effect.hits)) { // looks kinda similar to multipliers case... hmm... can we unify all of these three? (make healpower a list) + if (idx in part.hits) { part.hits[idx] += v; } + else { part.hits[idx] = v; } + } + } + else { + throw "uhh invalid spell add effect"; + } + found_part = true; + break; } if (!found_part && behavior === 'merge') { // add part. if behavior is merge let spell_part = deepcopy(effect); @@ -874,29 +862,28 @@ class AbilityTreeEnsureNodesNode extends ComputeNode { // TODO shortcut update path for sliders for (const [spell_id, spell] of new Map([...spell_map].sort((a, b) => a[0] - b[0])).entries()) { - let spell_node = new SpellSelectNode(spell); - spell_node.link_to(build_node, 'build'); + let spell_node = new SpellSelectNode(spell) + .link_to(build_node, 'build'); - let calc_node = new SpellDamageCalcNode(spell.base_spell); - calc_node.link_to(build_node, 'build').link_to(stat_agg_node, 'stats') + let calc_node = new SpellDamageCalcNode(spell.base_spell) + .link_to(build_node, 'build') + .link_to(stat_agg_node, 'stats') .link_to(spell_node, 'spell-info'); this.spelldmg_nodes.push(calc_node); - let display_elem = document.createElement('div'); - display_elem.classList.add("col", "pe-0"); + let display_elem = make_elem('div', ["col", "pe-0"]); // TODO: just pass these elements into the display node instead of juggling the raw IDs... let spell_summary = make_elem('div', ["col", "spell-display", "fake-button", "dark-5", "rounded", "dark-shadow", "pt-2", "border", "border-dark"], { id: "spell"+spell.base_spell+"-infoAvg" }); let spell_detail = make_elem('div', ["col", "spell-display", "dark-5", "rounded", "dark-shadow", "py-2"], - { id: "spell"+spell.base_spell+"-info" }); - spell_detail.style.display = "none"; + { id: "spell"+spell.base_spell+"-info", style: { display: 'none' } }); - display_elem.appendChild(spell_summary); display_elem.appendChild(spell_detail); + display_elem.append(spell_summary, spell_detail); - let display_node = new SpellDisplayNode(spell.base_spell); - display_node.link_to(stat_agg_node, 'stats'); - display_node.link_to(spell_node, 'spell-info'); - display_node.link_to(calc_node, 'spell-damage'); + let display_node = new SpellDisplayNode(spell.base_spell) + .link_to(stat_agg_node, 'stats') + .link_to(spell_node, 'spell-info') + .link_to(calc_node, 'spell-damage'); this.spell_display_elem.appendChild(display_elem); } @@ -919,25 +906,25 @@ function render_AT(UI_elem, list_elem, tree) { UI_elem.style.paddingTop = "calc(var(--bs-gutter-x) * .5)"; // add in the "Active" title to atree - let active_row = make_elem("div", ["row", "item-title", "mx-auto", "justify-content-center"]); - let active_word = make_elem("div", ["col-auto"], {textContent: "Active Abilities:"}); + const active_row = make_elem("div", ["row", "item-title", "mx-auto", "justify-content-center"]); + const active_word = make_elem("div", ["col-auto"], {textContent: "Active Abilities:"}); - let active_AP_container = make_elem("div", ["col-auto"]); - let active_AP_subcontainer = make_elem("div", ["row"]); - let active_AP_cost = make_elem("div", ["col-auto", "mx-0", "px-0"], {id: "active_AP_cost", textContent: "0"}); + const active_AP_container = make_elem("div", ["col-auto"]); + const active_AP_subcontainer = make_elem("div", ["row"]); + const active_AP_cost = make_elem("div", ["col-auto", "mx-0", "px-0"], {id: "active_AP_cost", textContent: "0"}); - let active_AP_slash = make_elem("div", ["col-auto", "mx-0", "px-0"], {textContent: "/"}); - let active_AP_cap = make_elem("div", ["col-auto", "mx-0", "px-0"], {id: "active_AP_cap"}); - let active_AP_end = make_elem("div", ["col-auto", "mx-0", "px-0"], {textContent: " AP"}); + const active_AP_slash = make_elem("div", ["col-auto", "mx-0", "px-0"], {textContent: "/"}); + const active_AP_cap = make_elem("div", ["col-auto", "mx-0", "px-0"], {id: "active_AP_cap"}); + const active_AP_end = make_elem("div", ["col-auto", "mx-0", "px-0"], {textContent: " AP"}); - active_AP_container.appendChild(active_AP_subcontainer); + active_AP_container.append(active_AP_subcontainer); active_AP_subcontainer.append(active_AP_cost, active_AP_slash, active_AP_cap, active_AP_end); active_row.append(active_word, active_AP_container); - list_elem.appendChild(active_row); + list_elem.append(active_row); - let atree_map = new Map(); - let atree_connectors_map = new Map() + const atree_map = new Map(); + const atree_connectors_map = new Map() let max_row = 0; for (const i of tree) { atree_map.set(i.ability.id, {ability: i.ability, connectors: new Map(), active: false}); @@ -960,15 +947,9 @@ function render_AT(UI_elem, list_elem, tree) { // Setup grid. for (let j = 0; j <= max_row; j++) { - let row = document.createElement('div'); - row.classList.add("row"); - row.id = "atree-row-" + j; - + const row = ('div', ['row'], { id: "atree-row-"+j }); for (let k = 0; k < 9; k++) { - col = document.createElement('div'); - col.classList.add('col', 'px-0'); - col.style = "position: relative; aspect-ratio: 1/1;" - row.appendChild(col); + row.appendChild(make_elem('div', ['col', 'px-0'], { style: "position: relative; aspect-ratio: 1/1;" })); } UI_elem.appendChild(row); } @@ -1026,8 +1007,9 @@ function render_AT(UI_elem, list_elem, tree) { // create hitbox // this is necessary since images exceed the size of their square, but should only be interactible within that square - let hitbox = document.createElement("div"); - hitbox.style = "position: absolute; cursor: pointer; left: 0; top: 0; width: 100%; height: 100%; z-index: 2;" + let hitbox = make_elem('div', [], { + style: 'position: absolute; cursor: pointer; left: 0; top: 0; width: 100%; height: 100%; z-index: 2;' + }); node_elem.appendChild(hitbox); node_wrap.elem = node_elem; @@ -1153,7 +1135,7 @@ function generateTooltip(container, node_elem, ability, atree_map) { description.innerHTML = ability.desc.replaceAll(numberRegex, (m) => { return "" + m + "" }); container.appendChild(description); - container.appendChild(document.createElement("br")); + container.appendChild(make_elem('br')); // archetype if ("archetype" in ability && ability.archetype !== "") { @@ -1190,7 +1172,7 @@ function generateTooltip(container, node_elem, ability, atree_map) { break; } container.appendChild(archetype); - container.appendChild(document.createElement("br")); + container.appendChild(make_elem('br')); } // calculate if requirements are satisfied @@ -1225,7 +1207,7 @@ function generateTooltip(container, node_elem, ability, atree_map) { } else { cost.innerHTML = reqYes; } - cost.innerHTML += " Ability Points: " + (maxAP - apUsed) + "/" + ability.cost; + cost.innerHTML += "Ability Points:" + (maxAP - apUsed) + "/" + ability.cost; container.appendChild(cost); // archetype req @@ -1236,7 +1218,7 @@ function generateTooltip(container, node_elem, ability, atree_map) { } else { archReq.innerHTML = reqNo; } - archReq.innerHTML += " Min " + ability.archetype + " Archetype: " + archChosen + "/" + ability.archetype_req; + archReq.innerHTML += "Min" + ability.archetype + " Archetype: " + archChosen + "/" + ability.archetype_req; container.appendChild(archReq); } @@ -1248,14 +1230,14 @@ function generateTooltip(container, node_elem, ability, atree_map) { } else { dependency.innerHTML = reqNo; } - dependency.innerHTML += " Required Ability: " + atree_map.get(ability.dependencies[i]).ability.display_name; + dependency.innerHTML += "Required Ability:" + atree_map.get(ability.dependencies[i]).ability.display_name; container.appendChild(dependency); } // blockers for (let i = 0; i < blockedBy.length; i++) { let blocker = make_elem("p", ["scaled-font", "my-0", "mx-1"], {}); - blocker.innerHTML = reqNo + " Blocked By: " + blockedBy[i]; + blocker.innerHTML = reqNo + "Blocked By:" + blockedBy[i]; container.appendChild(blocker); } } @@ -1356,7 +1338,7 @@ function atree_render_connection(atree_connectors_map) { drawAtlasImage(connector_elem, atreeConnectorAtlasImg, atreeConnectorAtlasPositions[connector_info.type]["0000"], atreeConnectorTileSize); let target_elem = document.getElementById("atree-row-" + i.split(",")[0]).children[i.split(",")[1]]; if (target_elem.children.length != 0) { - // janky special case... + // janky special case... sometimes the ability tree tries to draw a link on top of a node... connector_elem.style.display = 'none'; } target_elem.appendChild(connector_elem); From b27ac25d7ffdc29e916277f363c40050333be9d2 Mon Sep 17 00:00:00 2001 From: hppeng Date: Thu, 4 Aug 2022 23:41:00 -0700 Subject: [PATCH 2/4] Fix typos --- js/atree.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/js/atree.js b/js/atree.js index 2896468..be9738a 100644 --- a/js/atree.js +++ b/js/atree.js @@ -947,11 +947,11 @@ function render_AT(UI_elem, list_elem, tree) { // Setup grid. for (let j = 0; j <= max_row; j++) { - const row = ('div', ['row'], { id: "atree-row-"+j }); + const row = make_elem('div', ['row'], { id: "atree-row-"+j }); for (let k = 0; k < 9; k++) { - row.appendChild(make_elem('div', ['col', 'px-0'], { style: "position: relative; aspect-ratio: 1/1;" })); + row.append(make_elem('div', ['col', 'px-0'], { style: "position: relative; aspect-ratio: 1/1;" })); } - UI_elem.appendChild(row); + UI_elem.append(row); } for (const _node of tree) { From 384f98509468aa1ebfb616e9edefdd3be8aa26dd Mon Sep 17 00:00:00 2001 From: hppeng Date: Thu, 4 Aug 2022 23:41:41 -0700 Subject: [PATCH 3/4] Fix typos after looking at PR diff --- js/atree.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/atree.js b/js/atree.js index be9738a..514ba07 100644 --- a/js/atree.js +++ b/js/atree.js @@ -472,7 +472,7 @@ const atree_render_active = new (class extends ComputeNode { const errorbox = make_elem('div', ['rounded-bottom', 'dark-4', 'border', 'p-0', 'mx-2', 'my-4', 'dark-shadow']); this.list_elem.append(errorbox); - const error_title = document.createElement('b', ['warning', 'scaled-font'], { innerHTML: "ATree Error!" }); + const error_title = make_elem('b', ['warning', 'scaled-font'], { innerHTML: "ATree Error!" }); errorbox.append(error_title); for (let i = 0; i < 5 && i < errors.length; ++i) { From 5460b3531978ee2547c19ac6864f8f2f478bd490 Mon Sep 17 00:00:00 2001 From: hppeng Date: Sun, 7 Aug 2022 11:37:49 -0700 Subject: [PATCH 4/4] HOTFIX: Patch equip order display bug --- js/build.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/js/build.js b/js/build.js index df9d416..9973b74 100644 --- a/js/build.js +++ b/js/build.js @@ -41,12 +41,11 @@ class Build{ // calc skillpoints requires statmaps only let result = calculate_skillpoints(this.equipment.map((x) => x.statMap), this.weapon.statMap); - this.equip_order = result[0].slice(); - for (let i = 0; i < this.equip_order.length; i++) { - if (this.equip_order[i].get("category") === "tome" || this.equip_order[i].get("fixID") === true) { - this.equip_order.splice(i, 1); - i--; - } + const _equip_order = result[0].slice(); + this.equip_order = []; + for (const item of _equip_order) { + if (item.get('category') === 'tome' || item.has('NONE')) { continue; } + this.equip_order.push(item); } // How many skillpoints the player had to assign (5 number) this.base_skillpoints = result[1];