Merge branch 'UI_test' into compute_graph

atlas/index.html

@@ -50,7 +50,7 @@
         </div>
         <div class = "col navbar navbar-fixed-bottom vh-75 min-vh-50 text-break ml-5" id = "bodydiv" style = "min-height: 75vh; display: flex; flex-direction: column;" >
         </div>
-        
+        <audio id="bruh_sound_effect" src="../media/audio/bruh_sound_effect.mp3" preload="auto"></audio>
     </div>
     <!-- sidebar -->
     

builder/index.html

@@ -1242,7 +1242,7 @@
             <div class="col-xl-3 mb-3 px-0">
                 <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 spell-expand 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">

js/atlas.js

@@ -119,6 +119,10 @@ function runAtlas() {
                 let center = [(at1[0]+at2[0])/2, (at1[1]+at2[1])/2 ];
 
                 if (Math.sqrt(((at2[1]+atlas2.vy) - (at1[1]+atlas1.vy))**2 + ((at2[0]+atlas2.vx) - (at1[0]+atlas1.vx))**2) < 2*r) {
+                    //Play bruh sound effect
+                    document.getElementById('bruh_sound_effect').play();
+                    document.getElementById('bruh_sound_effect').currentTime = 0;
+                   
                     if(Math.sqrt( (at2[1]-at1[1])**2 + (at2[0]-at1[0])**2 ) < 2*r ) {//check for collision
                         //Move both away slightly - correct alg this time :)
                         atlas1.style.left = parseFloat(atlas1.style.left.replace("px","")) + (at1[0]-center[0]) * 2 * r / Math.sqrt(dx**2 + dy**2) + "px";

js/build.js

@@ -130,7 +130,6 @@ class Build{
 
         // calc skillpoints requires statmaps only
         let result = calculate_skillpoints(this.equipment.concat(this.tomes).map((x) => x.statMap), this.weapon.statMap);
-        console.log(result);
         this.equip_order = result[0];
         // How many skillpoints the player had to assign (5 number)
         this.base_skillpoints = result[1];

js/build_constants.js

@@ -103,5 +103,5 @@ let powderable_keys = ['helmet', 'chestplate', 'leggings', 'boots', 'weapon'];
 let equipment_keys = ['helmet', 'chestplate', 'leggings', 'boots', 'ring1', 'ring2', 'bracelet', 'necklace', 'weapon'];
 let tome_keys = ['weaponTome1', 'weaponTome2', 'armorTome1', 'armorTome2', 'armorTome3', 'armorTome4', 'guildTome1'];
 
-let spell_disp = ['spell0-info', 'spell1-info', 'spell2-info', 'spell3-info'];
+let spell_disp = ['build-melee-stats', 'spell0-info', 'spell1-info', 'spell2-info', 'spell3-info'];
 let other_disp = ['build-order', 'set-info', 'int-info'];

js/builder.js

@@ -260,7 +260,7 @@ function init_autocomplete() {
                         if (event.detail.selection.value) {
                             event.target.value = event.detail.selection.value;
                         }
-                        event.target.dispatchEvent(new Event('input'));
+                        event.target.dispatchEvent(new Event('change'));
                     },
                 },
             }
@@ -324,7 +324,7 @@ function init_autocomplete() {
                         if (event.detail.selection.value) {
                             event.target.value = event.detail.selection.value;
                         }
-                        event.target.dispatchEvent(new Event('input'));
+                        event.target.dispatchEvent(new Event('change'));
                     },
                 },
             }

js/computation_graph.js

@@ -139,7 +139,8 @@ class InputNode extends ComputeNode {
     constructor(name, input_field) {
         super(name);
         this.input_field = input_field;
-        this.input_field.addEventListener("input", () => calcSchedule(this));
+        //this.input_field.addEventListener("input", () => calcSchedule(this));
+        this.input_field.addEventListener("change", () => calcSchedule(this));
         //calcSchedule(this);  Manually fire first update for better control
     }
 

js/display.js

@@ -1246,6 +1246,7 @@ function displayMeleeDamage(parent_elem, overallparent_elem, meleeStats) {
     critStats.append(critChance);
 
     parent_elem.append(critStats);
+    addClickableArrow(overallparent_elem);
 }
 
 function displayDefenseStats(parent_elem, statMap, insertSummary){
@@ -1764,12 +1765,7 @@ function displaySpellDamage(parent_elem, overallparent_elem, stats, spell, spell
         }
     }
 
-    //up and down arrow - done ugly
-    let arrow = document.createElement("img");
-    arrow.id = "arrow_" + overallparent_elem.id;
-    arrow.style.maxWidth = document.body.clientWidth > 900 ? "3rem" : "10rem";
-    arrow.src = "../media/icons/" + (newIcons ? "new" : "old") + "/toggle_down.png";
-    overallparent_elem.appendChild(arrow);
+    addClickableArrow(overallparent_elem);
 }
 
 /** Displays the ID costs of an item
@@ -2181,3 +2177,12 @@ function stringCDF(id,val,base,amp) {
     document.getElementById(id + "-cdf").appendChild(b2);
     document.getElementById(id + "-cdf").appendChild(b3);
 }
+
+function addClickableArrow(elem) {
+    //up and down arrow - done ugly
+    let arrow = document.createElement("img");
+    arrow.id = "arrow_" + elem.id;
+    arrow.style.maxWidth = document.body.clientWidth > 900 ? "3rem" : "10rem";
+    arrow.src = "../media/icons/" + (newIcons ? "new" : "old") + "/toggle_down.png";
+    elem.appendChild(arrow);
+}

js/load_tome.js

@@ -25,7 +25,6 @@ async function load_tome_local() {
             console.log("Successfully read local tome db.");
         }
         get_tx.oncomplete = function(event) {
-            console.log(request.readyState);
             tomes = request.result;
             init_tome_maps();
             tload_complete = true;