Added nice warnings to summary, fixed fixIDs displaying reversed ids in the wrong color, made agi skp box not do the weird thing (on my machine)

display.js

@@ -229,6 +229,9 @@ function displayBuildStats(build, parent_id){
                     }
                 }
                 let id_val = stats.get(id);
+                if(reversedIDs.filter(e => e !== "atkTier").includes(id)){
+                    style === "positive" ? style = "negative" : style = "positive"; 
+                }
                 displayFixedID(active_elem, id, id_val, elemental_format, style);
                 if (id === "poison" && id_val > 0) {
                     let style = "positive";
@@ -454,7 +457,6 @@ function displayExpandedItem(item, parent_id){
     //Show powder specials ;-;
     let powder_special = document.createElement("p");
     powder_special.classList.add("left");
-    powder_special.classList.add("itemp");
     let powders = item.get("powders");
     let element = "";
     let power = 0;
@@ -488,17 +490,6 @@ function displayExpandedItem(item, parent_id){
         if (item.get("category") === "weapon") {//weapon
             effects = powderSpecial["weaponSpecialEffects"];
             specialTitle.textContent = powderSpecial["weaponSpecialName"];
-            /*for (const [key,value] of effects) {
-                let effect = document.createElement("p");
-                effect.classList.add("itemp");
-                effect.textContent += key + ": " + value[power] + specialSuffixes.get(key);
-                if(key === "Damage"){
-                    effect.textContent += elementIcons[skp_elements.indexOf(element)];
-                }
-                specialEffects.appendChild(effect);
-            }
-            specialTitle.append(specialEffects); 
-            powder_special.appendChild(specialTitle);*/
         }else if (item.get("category") === "armor") {//armor
             effects = powderSpecial["armorSpecialEffects"];
             specialTitle.textContent += powderSpecial["armorSpecialName"] + ": ";
@@ -527,9 +518,8 @@ function displayExpandedItem(item, parent_id){
     }
 
     //Show item tier
-    if (item.get("tier") & item.get("tier") !== " ") {
+    if (item.get("tier") && item.get("tier") !== " ") {
         let item_desc_elem = document.createElement('p');
-        item_desc_elem.classList.add('itemp');
         item_desc_elem.classList.add('left');
         item_desc_elem.classList.add(item.get("tier"));
         item_desc_elem.textContent = item.get("tier")+" "+item.get("type");
@@ -539,9 +529,9 @@ function displayExpandedItem(item, parent_id){
 
 function displayFixedID(active, id, value, elemental_format, style) {
     if (style) {
-        if(reversedIDs.filter(e => e !== "atkTier").includes(id)){
+        /*if(reversedIDs.filter(e => e !== "atkTier").includes(id)){
             style === "positive" ? style = "negative" : style = "positive"; 
-        }
+        }*/
         let row = document.createElement('tr');
         let desc_elem = document.createElement('td');
         desc_elem.classList.add('left');

index.html

@@ -207,7 +207,7 @@
         <div class="skillpoints">
             <div class="center" style="grid-column:1;grid-row:1">
                 <div>
-                    <label for="str-skp" class="skpLabel">Strength:</label>
+                    <label for="str-skp" class="skpLabel" id="str-skp-label">Strength:</label>
                     <input class="skp-input" type="number" id="str-skp" name="str-skp" value="0" class="skpInput"/>
                 </div>
                 <div id="str-skp-assign">
@@ -221,7 +221,7 @@
             </div>
             <div class="center" style="grid-column:2;grid-row:1">
                 <div>
-                    <label for="dex-skp" class="skpLabel">Dexterity:</label>
+                    <label for="dex-skp" class="skpLabel" id="dex-skp-label">Dexterity:</label>
                     <input class="skp-input" type="number" id="dex-skp" name="dex-skp" value="0" class="skpInput"/>
                 </div>
                 <div id="dex-skp-assign">
@@ -235,7 +235,7 @@
             </div>
             <div class="center" style="grid-column:3;grid-row:1">
                 <div>
-                    <label for="int-skp" class="skpLabel">Intelligence:</label>
+                    <label for="int-skp" class="skpLabel" id="int-skp-label">Intelligence:</label>
                     <input class="skp-input" type="number" id="int-skp" name="int-skp" value="0" class="skpInput"/>
                 </div>
                 <div id="int-skp-assign">
@@ -249,7 +249,7 @@
             </div>
             <div class="center" style="grid-column:4;grid-row:1">
                 <div>
-                    <label for="def-skp" class="skpLabel">Defense:</label>
+                    <label for="def-skp" class="skpLabel" id="def-skp-label">Defense:</label>
                     <input class="skp-input" type="number" id="def-skp" name="def-skp" value="0" class="skpInput"/>
                 </div>
                 <div id="def-skp-assign">
@@ -263,7 +263,7 @@
             </div>
             <div class="center" style="grid-column:5;grid-row:1">
                 <div>
-                    <label for="agi-skp" class="skpLabel">Agility:</label>
+                    <label for="agi-skp" class="skpLabel" id="agi-skp-label">Agility:</label>
                     <input class="skp-input" type="number" id="agi-skp" name="agi-skp" value="0" class="skpInput"/>
                 </div>
                 <div id="agi-skp-assign">

styles.css

@@ -233,6 +233,6 @@ input {
 .Set{
     color:#5f5;
 }
-.restrict {
+.restrict, .warning {
     color: #ff8180;
 }

test.js

@@ -423,13 +423,7 @@ function calculateBuild(save_skp, skp){
 
     const assigned = player_build.base_skillpoints;
     const skillpoints = player_build.total_skillpoints;
-    for (let i in skp_order){ //big bren
+    
-        if(assigned[i] <= 100){
-            setText(skp_order[i] + "-skp-base", "Original Value: " + skillpoints[i]);
-        }else{
-            setHTML(skp_order[i] + "-skp-base", "Original Value: " + skillpoints[i] + "<br>WARNING: cannot assign " + assigned[i] + " skillpoints naturally.");
-        }
-    }
     if (save_skp) {
         // TODO: reduce duplicated code, @updateStats
         let skillpoints = player_build.total_skillpoints;
@@ -449,6 +443,7 @@ function calculateBuild(save_skp, skp){
 }
 
 function updateStats() {
+    //WILL BREAK WEBSITE IF NO BUILD HAS BEEN INITIALIZED! @HPP
     let skillpoints = player_build.total_skillpoints;
     let delta_total = 0;
     for (let i in skp_order) {
@@ -470,16 +465,23 @@ function calculateBuildStats() {
     for (let i in skp_order){ //big bren
         setText(skp_order[i] + "-skp-assign", "Manually Assigned: " + assigned[i]);
         setValue(skp_order[i] + "-skp", skillpoints[i]);
+        let linebreak = document.createElement("br");
+        linebreak.classList.add("itemp");
+        document.getElementById(skp_order[i] + "-skp-label").append(document.createElement("br"));
         setText(skp_order[i] + "-skp-pct", (skillPointsToPercentage(skillpoints[i])*100).toFixed(1).concat(skp_effects[i]));
+        if (assigned[i] > 100) {
+            let skp_warning = document.createElement("p");
+            skp_warning.classList.add("warning");
+            skp_warning.textContent += "WARNING: Cannot assign " + assigned[i] + " skillpoints in " + ["Strength","Dexterity","Intelligence","Defense","Agility"][i] + " manually.";
+            document.getElementById(skp_order[i]+"-skp-pct").appendChild(skp_warning);
+        }
     }
 
     let summarybox = document.getElementById("summary-box");
     summarybox.textContent = "";
     let skpRow = document.createElement("tr");
-    //let skpSummary = document.createElement("p");
-    //skpSummary.textContent = "Summary: Assigned "+player_build.assigned_skillpoints+" skillpoints. Total: ( " + player_build.total_skillpoints.join(" | ") + " )";
     let skpSummary = document.createElement("td");
-    skpSummary.textContent = "Summary: Assigned "+player_build.assigned_skillpoints+" skillpoints. Total: (";
+    skpSummary.textContent = "Summary: Assigned " + player_build.assigned_skillpoints + " skillpoints. Total: (";
     skpSummary.classList.add("itemp");
     skpRow.appendChild(skpSummary);
     for (let i = 0; i < skp_order.length; i++){
@@ -499,31 +501,59 @@ function calculateBuildStats() {
             skpRow.appendChild(separator);
         }
     }
-    //summarybox.append(skpSummary);
    
     let skpEnd = document.createElement("td");
     skpEnd.textContent = ")";
     skpEnd.classList.add("itemp");
     skpRow.append(skpEnd);
 
+    let remainingRow = document.createElement("tr");
+    remainingRow.classList.add("itemp");
+    let remainingSkp = document.createElement("td");
+    remainingSkp.classList.add("left");
+    let remainingSkpTitle = document.createElement("b");
+    remainingSkpTitle.textContent = "Remaining skillpoints: ";
+    let remainingSkpContent = document.createElement("b");
+    remainingSkpContent.textContent = "" + (levelToSkillPoints(player_build.level) - player_build.assigned_skillpoints < 0 ? "< 0" : levelToSkillPoints(player_build.level) - player_build.assigned_skillpoints);
+    remainingSkpContent.classList.add(levelToSkillPoints(player_build.level) - player_build.assigned_skillpoints < 0 ? "negative" : "positive");
+
+    remainingSkp.appendChild(remainingSkpTitle);
+    remainingSkp.appendChild(remainingSkpContent);
+
+    remainingRow.appendChild(remainingSkp);
+
     summarybox.append(skpRow);
+    summarybox.append(remainingRow);
     if(player_build.assigned_skillpoints > levelToSkillPoints(player_build.level)){
         let skpWarning = document.createElement("p");
+        //skpWarning.classList.add("itemp");
+        skpWarning.classList.add("warning");
         skpWarning.classList.add("itemp");
         skpWarning.textContent = "WARNING: Too many skillpoints need to be assigned!";
         let skpCount = document.createElement("p");
         skpCount.classList.add("itemp");
-        skpCount.textContent = "For level " + player_build.level + ", there are only " + levelToSkillPoints(player_build.level) + " skill points available.";
+        skpCount.textContent = "For level " + (player_build.level>101 ? "101+" : player_build.level)  + ", there are only " + levelToSkillPoints(player_build.level) + " skill points available.";
         summarybox.append(skpWarning);
         summarybox.append(skpCount);
     }
-    for(const item of player_build.items){
+    let lvlWarning;
-        if(player_build.level < item.get("lvl")){
+    for (const item of player_build.items) {
-            let lvlWarning = document.createElement("p");
+        if (player_build.level < item.get("lvl")) {
+            if (!lvlWarning) {
+                lvlWarning = document.createElement("p");
                 lvlWarning.classList.add("itemp");
-            lvlWarning.textContent = "WARNING: The build is level " + player_build.level + " but " + item.get("name") + " requires level " + item.get("lvl") + " to use.";
+                lvlWarning.classList.add("warning");
-            summarybox.append(lvlWarning);
+                lvlWarning.textContent = "WARNING: A level 50 player cannot use some piece(s) of this build."
             }
+            let baditem = document.createElement("p"); 
+                baditem.classList.add("nocolor");
+                baditem.classList.add("itemp"); 
+                baditem.textContent = item.get("name") + " requires level " + item.get("lvl") + " to use.";
+                lvlWarning.appendChild(baditem);
+        }
+    }
+    if(lvlWarning){
+        summarybox.append(lvlWarning);
     }
 
     for (let i in player_build.items) {
@@ -539,11 +569,6 @@ function calculateBuildStats() {
     let defenseStats = player_build.getDefenseStats();
     displayDefenseStats(document.getElementById("build-defense-stats"),defenseStats);
 
-    
-    //let defenseStats = "";
-
-    //setHTML("build-defense-stats", "".concat(defenseStats));
-
     displayPoisonDamage(document.getElementById("build-poison-stats"),player_build);
 
     let spells = spell_table[player_build.weapon.get("type")];