Radiance (#219)

* Janky radiance implementation

.....

* Special case scale tome multipliers

* Update doc.html

* Remove poison display, no more poison special treatment

* Fix fatal typo with defmult processing, only affect positive IDs

* Properly handle negative spellcost and negative IDs

* Fix some fatal typos

Co-authored-by: hppeng <hppeng>

builder/doc.html

@@ -36,7 +36,7 @@
         <hr/>
         <a href = "https://discord.gg/CGavnAnerv" target = "_blank"><img src = "../media/icons/discord.png" alt = "WB Discord" title = "WB Discord"><b>WB Discord</b></a>
     </div>
-    <div id="mobile-navbar" class="navbar dark-5 dark-shadow fixed-top d-lg-none pb-0" style="display: none">
+    <div id="mobile-navbar" class="navbar dark-5 dark-shadow fixed-top d-lg-none pb-0">
         <div class="container-fluid scaled-font justify-content-center" style="height: 5vh;">
             <div class="navbar-brand mx-auto scaled-font" style="height: 100%;">
                 <img src="../media/icons/new/builder.png" alt="" style="height: 100%;">
@@ -97,7 +97,7 @@
                 <div class="row row-cols-1 mb-3 gy-4" id="equipment-inputs">
                     <div class="col">
                         <div class="row row-cols-1 row-cols-xl-2 dark-shadow dark-6 justify-content-center equipment-input rounded gy-3 gy-lg-0 mt-auto">
-                            <div class="col-auto rounded order-xl-0 order-0 my-0">
+                            <div class="col rounded order-xl-0 order-0 my-0">
                                 <div class="row h-100 px-1" id="helmet-dropdown">
                                     <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="helmet-img-loc">
                                         <div id="helmet-img" class="img-fluid rounded item-display-new-toggleable" style="background-image: url('../media/items/new.png'); background-position: 45.45454545454546% 0;"></div>
@@ -124,7 +124,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-auto order-xl-0 order-1 my-0">
+                            <div class="col order-xl-0 order-1 my-0">
                                 <div class="row h-100 px-1" id="ring1-dropdown">
                                     <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="ring1-img-loc">
                                         <div id="ring1-img" class="img-fluid rounded item-display-new-toggleable" style="background-image: url('../media/items/new.png'); background-position: 81.81818181818181% 0;"></div>
@@ -150,7 +150,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-auto order-xl-0 order-0">
+                            <div class="col order-xl-0 order-0">
                                 <div class="row h-100 px-1" id="chestplate-dropdown">
                                     <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="chestplate-img-loc">
                                         <div id="chestplate-img" class="img-fluid rounded item-display-new-toggleable" style="background-image: url('../media/items/new.png'); background-position: 54.54545454545454% 0;"></div>
@@ -177,7 +177,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-auto order-xl-0 order-1">
+                            <div class="col order-xl-0 order-1">
                                 <div class="row h-100 px-1" id="ring2-dropdown">
                                     <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="ring2-img-loc">
                                         <div id="ring2-img" class="img-fluid rounded item-display-new-toggleable" style="background-image: url('../media/items/new.png'); background-position: 81.81818181818181% 0;"></div>
@@ -203,7 +203,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-auto order-xl-0 order-0">
+                            <div class="col order-xl-0 order-0">
                                 <div class="row h-100 px-1" id="leggings-dropdown">
                                     <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="leggings-img-loc">
                                         <div id="leggings-img" class="img-fluid rounded item-display-new-toggleable" style="background-image: url('../media/items/new.png'); background-position: 63.63636363636363% 0;"></div>
@@ -230,7 +230,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-auto order-xl-0 order-1">
+                            <div class="col order-xl-0 order-1">
                                 <div class="row h-100 px-1" id="bracelet-dropdown">
                                     <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="bracelet-img-loc">
                                         <div id="bracelet-img" class="img-fluid rounded item-display-new-toggleable" style="background-image: url('../media/items/new.png'); background-position: 90.90909090909092% 0;"></div>
@@ -257,7 +257,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-auto order-xl-0 order-0">
+                            <div class="col order-xl-0 order-0">
                                 <div class="row h-100 px-1" id="boots-dropdown">
                                     <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="boots-img-loc">
                                         <div id="boots-img" class="img-fluid rounded item-display-new-toggleable" style="background-image: url('../media/items/new.png'); background-position: 72.72727272727272% 0;"></div>
@@ -284,7 +284,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-auto order-xl-0 order-1">
+                            <div class="col order-xl-0 order-1">
                                 <div class="row h-100 px-1" id="necklace-dropdown">
                                     <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="necklace-img-loc">
                                         <div id="necklace-img" class="img-fluid rounded item-display-new-toggleable" style="background-image: url('../media/items/new.png'); background-position: 100% 0;"></div>
@@ -310,7 +310,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-auto order-xl-0 order-1">
+                            <div class="col order-xl-0 order-1">
                                 <div class="row h-auto px-1" id='weapon-dropdown'>
                                     <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="weapon-img-loc">
                                         <div id="weapon-img" class="img-fluid rounded item-display-new-toggleable" style = "background-image: url('../media/items/new.png');"></div>
@@ -337,7 +337,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-auto order-xl-0 order-1 level-input">
+                            <div class="col order-xl-0 order-1 level-input">
                                 <div class="row h-100 px-1">
                                     <div class="col">
                                         <div class="row align-items-center justify-content-left">
@@ -457,17 +457,17 @@
                                 Active boosts
                             </div>
                             <div class="col">
+                                <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="radiance-boost" onclick="update_radiance()">
+                                    Radiance
+                                </button>
                                 <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="warscream-boost" onclick="update_boosts('warscream-boost')">
                                     War Scream
                                 </button>
                                 <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="ragnarokkr-boost" onclick="update_boosts('ragnarokkr-boost')">
                                     Ragnarokkr (+30%)
                                 </button>
-                                <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="yourtotem-boost" onclick="update_boosts('yourtotem-boost')">
+                                <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="totem-boost" onclick="update_boosts('totem-boost')">
-                                    Your Totem (+35%)
+                                    Vengeful Spirit (+20%)
-                                </button>
-                                <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="allytotem-boost" onclick="update_boosts('allytotem-boost')">
-                                    Ally Totem (+15%)
                                 </button>
                                 <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="fortitude-boost" onclick="update_boosts('fortitude-boost')">
                                     Fortitude (+60%)
@@ -835,10 +835,12 @@
 
                                             </div>
                                             <div class="col mx-auto" style="height: 90vh; overflow-y: auto;" id="atree-rhs">
-                                            <div class="col mx-auto" style="height: 2em; overflow-y: auto;" id="atree-header">
+                                                <div class="col mx-auto" style="height: 2em; overflow-y: auto;" id="atree-header">
-                                            </div>
+                                                </div>
-                                            <div class="col mx-auto" style="overflow-y: auto;" id="atree-active">
+                                                <div class="col mx-auto" style="" id="atree-warning">
-                                            </div>
+                                                </div>
+                                                <div class="col mx-auto" style="overflow-y: auto;" id="atree-active">
+                                                </div>
                                             </div>
                                         </div>
                                     </div>
@@ -1300,7 +1302,7 @@
     <script type="text/javascript" src="../js/utils.js"></script>
     <script type="text/javascript" src="../js/build_utils.js"></script>
     <script type="text/javascript" src="../js/computation_graph.js"></script>
-    <script type="text/javascript">COMPUTE_GRAPH_DEBUG=true;</script>
+    <script type="text/javascript">COMPUTE_GRAPH_DEBUG=true</script>
     <script type="text/javascript" src="../js/icons.js"></script>
     <script type="text/javascript" src="../js/powders.js"></script>
     <script type="text/javascript" src="../js/skillpoints.js"></script>
@@ -1319,7 +1321,6 @@
     <script type="text/javascript" src="../js/builder/atree.js"></script>
     <script type="text/javascript" src="../js/builder/builder.js"></script>
     <script type="text/javascript" src="../js/builder/builder_graph.js"></script>
-    <!--script type="text/javascript" src="../js/builder/optimize.js"></script-->
 
     <div id="graph_body" style="max-width: 100%; height: 100vh">
         <button id="saveButton">JANKY Export SVG</button>

builder/index_full.html

@@ -457,6 +457,9 @@
                                 Active boosts
                             </div>
                             <div class="col">
+                                <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="radiance-boost" onclick="update_radiance()">
+                                    Radiance
+                                </button>
                                 <button class="button-boost m-1 border-0 text-white dark-8u dark-shadow-sm" id="warscream-boost" onclick="update_boosts('warscream-boost')">
                                     War Scream
                                 </button>

js/builder/atree.js

@@ -148,7 +148,6 @@ const default_abils = {
     }, elem_mastery_abil ],
 };
 
-
 /**
  * Update ability tree internal representation. (topologically sorted node list)
  *

js/builder/build.js

@@ -129,9 +129,9 @@ class Build{
                 }
             }
         }
-        statMap.set("poisonPct", 100);
+        statMap.set("poisonPct", 0);
-        statMap.set("critDamPct", 100);
+        statMap.set("critDamPct", 0);
-        statMap.set("healPct", 100);
+        statMap.set("healPct", 0);
 
         // The stuff relevant for damage calculation!!! @ferricles
         statMap.set("atkSpd", this.weapon.statMap.get("atkSpd"));

js/builder/builder_graph.js

@@ -17,7 +17,7 @@ let armor_powder_node = new (class extends ComputeNode {
     }
 })();
 
-const damageMultipliers = new Map([ ["totem", .2], ["warscream", 0.0], ["ragnarokkr", 0.30], ["fortitude", 0.60] ]);
+const damageMultipliers = new Map([ ["totem", 0.2], ["warscream", 0.0], ["ragnarokkr", 0.30], ["fortitude", 0.60], ["radiance", 0.0] ]);
 
 let boosts_node = new (class extends ComputeNode {
     constructor() { super('builder-boost-input'); }
@@ -614,7 +614,7 @@ class SpellDamageCalcNode extends ComputeNode {
                 }
             } else if ('power' in part) {
                 // TODO: wynn2 formula
-                let _heal_amount = (part.power * getDefenseStats(stats)[0] * (stats.get('healPct')/100));
+                let _heal_amount = (part.power * getDefenseStats(stats)[0] * (1+stats.get('healPct')/100));
                 if (stats.has('healPct:'+part_id)) {
                     _heal_amount *= 1+(stats.get('healPct:'+part_id)/100);
                 }
@@ -847,6 +847,72 @@ class AggregateStatsNode extends ComputeNode {
     }
 }
 
+let radiance_affected = [ /*"hp"*/, "fDef", "wDef", "aDef", "tDef", "eDef", "hprPct", "mr", "sdPct", "mdPct", "ls", "ms", "xpb", "lb", "ref",
+/*"str", "dex", "int", "agi", "def",*/
+"thorns", "expd", "spd", "atkTier", "poison", "hpBonus", "spRegen", "eSteal", "hprRaw", "sdRaw", "mdRaw", "fDamPct", "wDamPct", "aDamPct", "tDamPct", "eDamPct", "fDefPct", "wDefPct", "aDefPct", "tDefPct", "eDefPct", "fixID", "category", "spPct1", "spRaw1", "spPct2", "spRaw2", "spPct3", "spRaw3", "spPct4", "spRaw4", "rSdRaw", "sprint", "sprintReg", "jh", "lq", "gXp", "gSpd",
+
+// wynn2 damages.
+"eMdPct","eMdRaw","eSdPct","eSdRaw",/*"eDamPct,"*/"eDamRaw",//"eDamAddMin","eDamAddMax",
+"tMdPct","tMdRaw","tSdPct","tSdRaw",/*"tDamPct,"*/"tDamRaw",//"tDamAddMin","tDamAddMax",
+"wMdPct","wMdRaw","wSdPct","wSdRaw",/*"wDamPct,"*/"wDamRaw",//"wDamAddMin","wDamAddMax",
+"fMdPct","fMdRaw","fSdPct","fSdRaw",/*"fDamPct,"*/"fDamRaw",//"fDamAddMin","fDamAddMax",
+"aMdPct","aMdRaw","aSdPct","aSdRaw",/*"aDamPct,"*/"aDamRaw",//"aDamAddMin","aDamAddMax",
+"nMdPct","nMdRaw","nSdPct","nSdRaw","nDamPct","nDamRaw",//"nDamAddMin","nDamAddMax",      // neutral which is now an element
+/*"mdPct","mdRaw","sdPct","sdRaw",*/"damPct","damRaw",//"damAddMin","damAddMax",          // These are the old ids. Become proportional.
+"rMdPct","rMdRaw","rSdPct",/*"rSdRaw",*/"rDamPct","rDamRaw",//"rDamAddMin","rDamAddMax",  // rainbow (the "element" of all minus neutral). rSdRaw is rainraw
+"critDamPct",
+//"spPct1Final", "spPct2Final", "spPct3Final", "spPct4Final"
+];
+/**
+ * Scale stats if radiance is enabled.
+ */
+const radiance_node = new (class extends ComputeNode {
+    constructor() { super('radiance-node->:('); }
+
+    compute_func(input_map) {
+        const [statmap] = input_map.values();  // Extract values, pattern match it into size one list and bind to first element
+        let elem = document.getElementById('radiance-boost');
+        if (elem.classList.contains("toggleOn")) {
+            const ret = new Map(statmap);
+            for (const val of radiance_affected) {
+                if (reversedIDs.includes(val)) {
+                    if ((ret.get(val) || 0) < 0) {
+                        ret.set(val, Math.floor((ret.get(val) || 0) * 1.2));
+                    }
+                }
+                else {
+                    if ((ret.get(val) || 0) > 0) {
+                        ret.set(val, Math.floor((ret.get(val) || 0) * 1.2));
+                    }
+                }
+            }
+            const dam_mults = new Map(ret.get('damMult'));
+            dam_mults.set('tome', dam_mults.get('tome') * 1.2)
+            ret.set('damMult', dam_mults)
+            const def_mults = new Map(ret.get('defMult'));
+            def_mults.set('tome', def_mults.get('tome') * 1.2)
+            ret.set('defMult', def_mults)
+            return ret;
+        }
+        else {
+            return statmap;
+        }
+    }
+})();
+
+/* Updates all spell boosts
+*/
+function update_radiance() {
+    let elem = document.getElementById('radiance-boost');
+    if (elem.classList.contains("toggleOn")) {
+        elem.classList.remove("toggleOn");
+    } else {
+        elem.classList.add("toggleOn");
+    }
+    radiance_node.mark_dirty().update();
+}
+
+
 /**
  * Aggregate editable ID stats with build and weapon type.
  *
@@ -1086,8 +1152,9 @@ function builder_graph_init() {
     atree_node.link_to(class_node, 'player-class');
     atree_merge.link_to(class_node, 'player-class');
     pre_scale_agg_node.link_to(atree_raw_stats, 'atree-raw-stats');
-    atree_scaling.link_to(pre_scale_agg_node, 'scale-stats');
+    radiance_node.link_to(pre_scale_agg_node, 'stats');
-    stat_agg_node.link_to(pre_scale_agg_node, 'pre-scaling');
+    atree_scaling.link_to(radiance_node, 'scale-stats');
+    stat_agg_node.link_to(radiance_node, 'pre-scaling');
     stat_agg_node.link_to(atree_scaling_stats, 'atree-scaling');
 
     build_encode_node.link_to(atree_node, 'atree').link_to(atree_state_node, 'atree-state');

js/damage_calc.js

@@ -199,7 +199,7 @@ function calculateSpellDamage(stats, weapon, _conversions, use_spell_damage, ign
         damage_mult *= (1 + v/100);
     }
 
-    const crit_mult = stats.get("critDamPct")/100;
+    const crit_mult = 1+(stats.get("critDamPct")/100);
 
     for (const damage of damages) {
         const res = [

js/display.js

@@ -110,24 +110,8 @@ function displayBuildStats(parent_id,build,command_group,stats){
                 if (reversedIDs.includes(id)) {
                     style === "positive" ? style = "negative" : style = "positive"; 
                 }
-                if (id === "poison" && id_val > 0) {
-                    id_val = Math.ceil(id_val*stats.get("poisonPct")/100);
-                }
                 displayFixedID(parent_div, id, id_val, elemental_format, style);
-                /*if (id === "poison" && id_val > 0) {
+                if (id === "ls" && id_val != 0) {
-                    let row = make_elem('div', ['row']);
-                    let value_elem = make_elem('div', ['col', 'text-end']);
-
-                    let prefix_elem = make_elem('b', [], {textContent: "\u279C With Strength: "});
-                    let number_elem = make_elem('b', [style], {
-                        textContent: (id_val * (1+skillPointsToPercentage(stats.get('str'))) ).toFixed(0) + idSuffixes[id]
-                    });
-                    value_elem.append(prefix_elem);
-                    value_elem.append(number_elem);
-                    row.appendChild(value_elem);
-                    parent_div.appendChild(row);
-                }
-                else */if (id === "ls" && id_val != 0) {
                     let row = make_elem('div', ['row']);
                     let value_elem = make_elem('div', ['col', 'text-end']);