<div class="container">
<div class="row">
<div class="col-md-12">
<a href="https://axieinfinity.com/encyclopedia" target="_blank" >Check Axie Infinity Encyclopedia</a>
</div>
<hr>
<div class="col-md-4">
<div class="form-group">
<input type="text" class="form-control" id="axie_id" placeholder="axie_id # here">
</div>
</div>
<div class="col-md-4">
<a href="#" id="submit_btn" class="btn btn-primary">Calculate</a>
</div>
</div>
<div class="row">
<div class="col-md-4">
<table class="table">
<tr>
<th scope="row">ID</th>
<td >#<span id="ax_id">-</span></td>
</tr>
<tr>
<th scope="row">HP</th>
<td id="hp">-</td>
</tr>
<tr>
<th scope="row">Speed</th>
<td id="speed">-</td>
</tr>
<tr>
<th scope="row">Skill</th>
<td id="skill">-</td>
</tr>
<tr>
<th scope="row">Morale</th>
<td id="morale">-</td>
</tr>
</table>
</div>
<div class="col-md-4" id="image_container">
</div>
</div>
</div>
.container{
margin-top:20px;
}
img{
width:80%;
}
//[hp , speed, skill, morale]
//base stats
var base_stats = {
"beast" : [31,35,31,43],
"aquatic" : [39,39,35,27],
"plant" : [43,31,31,35],
"bird" : [27,43,35,35],
"bug" : [35,31,35,39],
"reptile" : [39,35,31,35]
};
//var bonus stats
var bonus_stats_by_part = {
"beast" : [0,1,0,3],
"aquatic" : [1,3,0,0],
"plant" : [3,0,0,1],
"bird" : [0,3,0,1],
"bug" : [1,0,0,3],
"reptile" : [3,1,0,0]
};
$("#submit_btn").click(function(e){
var axie_id = $("#axie_id").val();
if(!axie_id){
alert("please enter id!");
}
axie_id = axie_id.replace("#", "");
$("#ax_id").html("-");
$("#hp").html("loading...");
$("#speed").html("loading...");
$("#skill").html("loading...");
$("#morale").html("loading..");
$("#image_container").html("");
$.getJSON("https://axieinfinity.com/api/axies/"+axie_id)
.done(function( json ) {
var class_name = json.class;
var total_stats = base_stats[class_name];
json.parts.forEach(function(part,index){
total_stats = total_stats.map(function (num, idx) {
return num + bonus_stats_by_part[part.class][idx];
});
});
$("#ax_id").html(axie_id);
$("#hp").html(total_stats[0]);
$("#speed").html(total_stats[1]);
$("#skill").html(total_stats[2]);
$("#morale").html(total_stats[3]);
$("#image_container").html("<img src='"+json.figure.images[axie_id+".png"]+"' />");
})
.fail(function( jqxhr, textStatus, error ) {
alert("failed please use correct ID! =) ");
});
});