weaponplanner: add weapon stats
This commit is contained in:
35
web/templates/weaponstats.ejs
Normal file
35
web/templates/weaponstats.ejs
Normal file
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user