weaponplanner: add weapon stats

web/templates/weaponstats.ejs

@@ -0,0 +1,35 @@
+<table>
+<tr>
+<td><%= attack %></td>
+<td>
+<% if (awaken) { %>
+  [<%= awaken_attack %> <%= awaken %>]
+<% } else if (element) { %>
+  (<%= element_attack %> <%= element %>
+  <% if (element_2) { %>
+    , <%= element_2_attack %> <%= element_2 %>
+  <% } %>)
+<% } %>
+</td>
+<td><%= Array(num_slots + 1).join("\u26aa") %></td>
+<td>
+<div class="sharpness-bar">
+<span style="width:<%= sharpness[0] %>px" class="red"></span>
+<span style="width:<%= sharpness[1] %>px" class="orange"></span>
+<span style="width:<%= sharpness[2] %>px" class="yellow"></span>
+<span style="width:<%= sharpness[3] %>px" class="green"></span>
+<span style="width:<%= sharpness[4] %>px" class="blue"></span>
+<span style="width:<%= sharpness[5] %>px" class="white"></span>
+<span style="width:<%= sharpness[6] %>px" class="purple"></span>
+</div>
+<div class="sharpness-bar">
+<span style="width:<%= sharpness_plus[0] %>px" class="red"></span>
+<span style="width:<%= sharpness_plus[1] %>px" class="orange"></span>
+<span style="width:<%= sharpness_plus[2] %>px" class="yellow"></span>
+<span style="width:<%= sharpness_plus[3] %>px" class="green"></span>
+<span style="width:<%= sharpness_plus[4] %>px" class="blue"></span>
+<span style="width:<%= sharpness_plus[5] %>px" class="white"></span>
+<span style="width:<%= sharpness_plus[6] %>px" class="purple"></span>
+</div>
+</td>
+</table>

web/weaponplanner.html

@@ -39,12 +39,56 @@
           flex-wrap: wrap;
       }
 
+      .sharpness-bar {
+            border: 1px #d3d3d3 solid;
+         min-width: 92px;
+                         height: 10px;
+            background-color: #d3d3d3;
+            float: left;
+            clear: both;
+        }
+
+        .sharpness-bar span {
+            display: inline-block;
+            height: 100%;
+            float: left;
+        }
+
+        .sharpness-bar .red {
+            background-color: #C00C38 !important;
+        }
+
+        .sharpness-bar .orange {
+            background-color: #E85018 !important;
+        }
+
+        .sharpness-bar .yellow {
+            background-color: #F0C830 !important;
+        }
+
+        .sharpness-bar .green {
+            background-color: #58D000 !important;
+        }
+
+        .sharpness-bar .blue {
+            background-color: #3068E8 !important;
+        }
+
+        .sharpness-bar .white {
+            background-color: #F0F0F0 !important;
+        }
+
+        .sharpness-bar .purple {
+            background-color: #c3c !important;
+        }
+
   </style>
 
   <script type="text/javascript">
     var DATA_PATH = get_base_path() + "/jsonapi/";
 
     var template_path = new EJS({ url: "templates/weaponpath.ejs" });
+    var template_stats = new EJS({ url: "templates/weaponstats.ejs" });
 
     $(document).ready(function(){
         setup_weapon_autocomplete("#weapon_type", "#weapon",
@@ -115,6 +159,13 @@
         console.log("show_trees(" + weapon_name + "): " + weapon_id);
         $("#weapon").val(weapon_name);
         $("#results").html("");
+        $("#weapon_stats").html("");
+        $.getJSON(DATA_PATH + "weapon/" + weapon_id + ".json",
+                  function(data) {
+                      var html = template_stats.render(data);
+                      $("#weapon_stats").html(html);
+                  });
+ 
         $.getJSON(DATA_PATH + "weapon/" + weapon_id + "_tree.json",
                   function(data) {
                       all_components = Object.keys(
@@ -181,6 +232,7 @@
   </tr>
   </table>
 </div>
+<div id="weapon_stats"></div>
 <div id="results" class="flexbox"></div>
 </body>
 </body>