ability trees for different classes + selection based on weapon

builder/index.html

@@ -272,7 +272,7 @@
                             <div class="col-auto order-xl-0 order-1">
                                 <div class="row h-100 dark-shadow dark-6 rounded" 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">
-                                        <img id="weapon-img" class="img-fluid rounded" src="../media/items/new/generic-wand.png">
+                                        <img id="weapon-img" class="img-fluid rounded" src="../media/items/new/generic-dagger.png">
                                     </div>
                                     <div class="col-3">
                                         <div class="row row-cols-1 h-100 align-items-center">
@@ -612,12 +612,12 @@
                                             </div>
                                         </div>
                                     </div>
-                                    <div class = "col dark-6 rounded-bottom my-3 my-xl-1" id = "atree-dropdown"">
+                                    <div class = "col dark-6 rounded-bottom my-3 my-xl-1" id = "atree-dropdown">
                                         <div class="row row-cols-1 row-cols-xl-2">
-                                            <div class="col border rounded dark-9 hide-scroll" id="atree-ui" style="height: 500px; overflow-y: auto;">
+                                            <div class="col border border-semi-light rounded dark-9 hide-scroll" id="atree-ui" style="height: 500px; overflow-y: auto;">
 
                                             </div>
-                                            <div class="col" id="atree-active">
+                                            <div class="col item-title" id="atree-active">
                                                 Active:
                                             </div>
                                         </div>

js/atree_constants.js

@@ -1,3 +1,111 @@
+const atrees = 
+{
+    "Assassin": [
+        {
+            "title": "Spin Attack",
+            "desc": "desc",
+            "image": "../media/atree/node.png",
+            "connector": false,
+            "row": 0,
+            "col": 4
+        },
+        {
+            "image": "../media/atree/connect_line.png",
+            "connector": true,
+            "rotate": 0,
+            "row": 1,
+            "col": 4
+        },
+        {
+            "title": "Dagger Proficiency I",
+            "desc": "desc",
+            "image": "../media/atree/node.png",
+            "connector": false,
+            "row": 2,
+            "col": 4
+        },
+        {
+            "image": "../media/atree/connect_line.png",
+            "connector": true,
+            "rotate": 90,
+            "row": 2,
+            "col": 3
+        },
+        {
+            "title": "Text",
+            "desc": "desc",
+            "image": "../media/atree/node.png",
+            "connector": false,
+            "row": 2,
+            "col": 2
+        },
+        {
+            "image": "../media/atree/connect_line.png",
+            "connector": true,
+            "rotate": 0,
+            "row": 3,
+            "col": 4
+        },
+        {
+            "title": "Double Spin",
+            "desc": "desc",
+            "image": "../media/atree/node.png",
+            "connector": false,
+            "row": 4,
+            "col": 4
+        },
+        {
+            "image": "../media/atree/connect_line.png",
+            "connector": true,
+            "rotate": 0,
+            "row": 5,
+            "col": 4
+        },
+        {
+            "title": "Dash",
+            "desc": "desc",
+            "image": "../media/atree/node.png",
+            "connector": false,
+            "row": 6,
+            "col": 4
+        },
+        {
+            "image": "../media/atree/connect_line.png",
+            "connector": true,
+            "rotate": 90,
+            "row": 6,
+            "col": 3
+        },
+        {
+            "title": "Text",
+            "desc": "desc",
+            "image": "../media/atree/node.png",
+            "connector": false,
+            "row": 6,
+            "col": 2
+        },
+        {
+            "image": "../media/atree/connect_line.png",
+            "connector": true,
+            "rotate": 90,
+            "row": 5,
+            "col": 5
+        },
+        {
+            "title": "Text",
+            "desc": "desc",
+            "image": "../media/atree/node.png",
+            "connector": false,
+            "row": 6,
+            "col": 6
+        },
+    ],
+    "Warrior": [],
+    "Mage": [],
+    "Archer": [],
+    "Shaman": []
+}
+
 const atree_example = [
     {
         "title": "skill",
@@ -10,7 +118,7 @@ const atree_example = [
     {
         "image": "../media/atree/connect_angle.png",
         "connector": true,
-        "rotate": "270",
+        "rotate": 270,
         "row": 4,
         "col": 3,
     },

js/build_utils.js

@@ -56,6 +56,7 @@ const attackSpeeds = ["SUPER_SLOW", "VERY_SLOW", "SLOW", "NORMAL", "FAST", "VERY
 const baseDamageMultiplier = [ 0.51, 0.83, 1.5, 2.05, 2.5, 3.1, 4.3 ];
 //0.51, 0.82, 1.50, 2.05, 2.50, 3.11, 4.27
 const classes = ["Warrior", "Assassin", "Mage", "Archer", "Shaman"];
+const wep_to_class = new Map([["dagger", "Assassin"], ["spear", "Warrior"], ["wand", "Mage"], ["bow", "Archer"], ["relik", "Shaman"]])
 const tiers = ["Normal", "Unique", "Rare", "Legendary", "Fabled", "Mythic", "Set", "Crafted"] //I'm not sure why you would make a custom crafted but if you do you should be able to use it w/ the correct powder formula
 const types = armorTypes.concat(accessoryTypes).concat(weaponTypes).concat(consumableTypes).concat(tomeTypes).map(x => x.substring(0,1).toUpperCase() + x.substring(1));
 //weaponTypes.push("sword");

js/sq2bs.js

@@ -73,7 +73,7 @@ document.addEventListener('DOMContentLoaded', function() {
         };
     });
 
-    construct_AT(document.getElementById("atree-ui"), atree_example);
+    construct_AT(document.getElementById("atree-ui"), atrees["Assassin"]); //dagger is default atree
     document.getElementById("atree-dropdown").style.display = "none";
 });
 
@@ -232,9 +232,13 @@ function update_field(field) {
         };
     }
 
-    // set weapon img
+    // set weapon img and set ability tree
     if (category == 'weapon') {
         document.querySelector("#weapon-img").setAttribute('src', '../media/items/new/generic-'+type+'.png');
+        construct_AT(document.getElementById("atree-ui"), atrees[wep_to_class[type.toLowerCase()]]); //dagger is default atree
+        document.getElementById("atree-dropdown").style.display = "none";
+
+        //TODO: reset chosen abilities (once ability implementation is here)
     }
 }
 /* tabulars | man i hate this code but too lazy to fix /shrug */