Show dino

familyark/app/public/js/functions.js

@@ -61,14 +61,14 @@ function showAnimal(id){
 		$.get( "/animal/"+ id, function( data ) {
 			var animal = data.data,
 				j = 1;
-			$.each(animal, function(i, val) {
-				if(i == "specie")
-					text += "<tr><td>"+i+"</td><td>" + species[val].name + "</td></tr>";
-				else if(i != "_id" && i != "__v" && i != "father" && i != "mother" && i != "name" && i.indexOf("initial") < 0 && i != "specie" && i != "level")
-					text += "<tr><td>"+i+"</td><td>"+(val ? val.$numberDecimal ? val.$numberDecimal :  val : "")+"</td></tr>";
-				j++;
-			});
-			text += "</table>";
+			// $.each(animal, function(i, val) {
+			// 	if(i == "specie")
+			// 		text += "<tr><td>"+i+"</td><td>" + species[val].name + "</td></tr>";
+			// 	else if(i != "_id" && i != "__v" && i != "father" && i != "mother" && i != "name" && i.indexOf("initial") < 0 && i != "specie" && i != "level")
+			// 		text += "<tr><td>"+i+"</td><td>"+(val ? val.$numberDecimal ? val.$numberDecimal :  val : "")+"</td></tr>";
+			// 	j++;
+			// });
+			// text += "</table>";
 			
 			$("#button").html('<button class="btn btn-info btn-sm float-right" onclick="editAnimal(\''+ animal._id +'\')">Edit</button>')
 			$(".a-name").html( "<span>" + animal.name + "</span><br>" + " Level: " + animal.level + " - " + species[animal.specie].name );
@@ -76,7 +76,8 @@ function showAnimal(id){
 			
 			get_parrents(animal);
 			get_childrens(animal);
-			set_chart('myAnimalChar', animal);
+			$("#chart").append(get_animal(animal));
+			
 			$("#load").fadeOut("fast");
 		});
 		
@@ -120,7 +121,7 @@ function get_parrents(animal){
 function get_childrens(animal){
 	$.get( "/animal/childrens/" + animal._id, function( data ) {
 		data.data.map(function(item){
-			$("#a-childrens").append("<div class=\"col-6\">" + paint_animal(item) + "</div>");
+			$("#a-childrens").append("<div class=\"col-4\">" + paint_animal(item) + "</div>");
 		})
 	});
 }
@@ -149,21 +150,74 @@ function get_info(){
 }
 
 function paint_animal(a){
-	console.log(a);
-	return "<button onclick=\"showAnimal('"+ a._id +"')\">" + a.name+" - "+ a.level + "</button>"
-		+ '<table class="dataTable">'
-		+ '<tr><td>Uuid</td><td>' + safe(a.uuid) + '</td></tr>'
-		+ '<tr><td>Breeder</td><td>' + safe(a.breeder) + '</td></tr>'
-		+ '<tr><td>Health</td><td>' + safe(a.health) + '</td></tr>'
-		+ '<tr><td>Stamina</td><td>' + safe(a.energy) + '</td></tr>'
-		+ '<tr><td>Food</td><td>' + safe(a.food) + '</td></tr>'
-		+ '<tr><td>Damage</td><td>' + safe(a.damage) + '</td></tr>'
-		+ '<tr><td>Speed</td><td>' + safe(a.velocity) + '</td></tr>'
-		+ '</tr>'
-		+ '<table>'
-		+ '</table>'
+	return "<a class=\"black family-link\" onclick=\"showAnimal('"+ a._id +"')\">" + a.name+" - "+ a.level + "</a>" + get_animal(a)
 }
 
 function safe(s){
 	return s ? s.$numberDecimal ? s.$numberDecimal : s : ""
-}
+}
+
+
+function get_prct(a, b){
+	return(safe(a) * 100) / safe(b)
+}
+
+function get_animal(a){
+	return '<div class="bar-container" >'
+		+ '		<div class="bar" style="width:100%;"></div>'
+		+ '		 <span>Uuid: ' + safe(a.uuid) + '</span>'
+		+ '</div>'
+		+ '<div class="bar-container" >'
+		+ '		<div class="bar" style="width:100%;"></div>'
+		+ '		 <span>Breeder: ' + safe(a.breeder) + '</span>'
+		+ '</div>'
+
+		+ '<div class="bar-container" >'
+		+ '		<div class="bar" style="width:100%;"></div>'
+		+ '		 <span>Location: ' + safe(a.server) + ' / ' + safe(a.base) + '</span>'
+		+ '</div>'
+
+		+ '<div class="bar-container" >'
+		+ '		<div class="bar" style="width:100%;"></div>'
+		+ '		 <span>Sex: ' + safe(a.sex) + '</span>'
+		+ '</div>'
+
+		+ '<div class="bar-container" >'
+		+ '		<div class="bar" style="width:'+get_prct(safe(a.initial_level), safe(a.level))+'%"></div>'
+		+ '		<span>Level: ' + safe(a.initial_level) + ' / ' + safe(a.level) + '</span>'
+		+ '</div>'
+
+		+ '<div class="bar-container" >'
+		+ '		<div class="bar" style="width:'+get_prct(safe(a.initial_health), safe(a.health))+'%"></div>'
+		+ '		<span>Health: ' + safe(a.initial_health) + ' / ' + safe(a.health) + '</span>'
+		+ '</div>'
+
+		+ '<div class="bar-container" >'
+		+ '		<div class="bar" style="width:'+get_prct(safe(a.initial_energy), safe(a.energy))+'%;"></div>'
+		+ '		<span>Stamina: ' + safe(a.initial_energy) + ' / ' + safe(a.energy) + '</span>'
+		+ '</div>'
+		
+		+ '<div class="bar-container" >'
+		+ '		<div class="bar" style="width:'+get_prct(safe(a.initial_food), safe(a.food))+'%;"></div>'
+		+ '		<span>Food: ' + safe(a.initial_food) + ' / ' + safe(a.food) + '</span>'
+		+ '</div>'
+
+		+ '<div class="bar-container" >'
+		+ '		<div class="bar" style="width:'+get_prct(safe(a.initial_damage), safe(a.damage))+'%;"></div>'
+		+ '		<span>Damage: ' + safe(a.initial_damage) + ' / ' + safe(a.damage) + '</span>'
+		+ '</div>'
+
+		+ '<div class="bar-container" >'
+		+ '		<div class="bar" style="width:'+get_prct(safe(a.initial_velocity), safe(a.velocity))+'%;"></div>'
+		+ '		<span>Speed: ' + safe(a.initial_velocity) + ' / ' + safe(a.velocity) + '</span>'
+		+ '</div>'
+		
+		+ '<div class="bar-container" >'
+		+ '		<div class="bar" style="width: 100%;"></div>'
+		+ '		<span>Inconsistency: ' + safe(a.inconsistency) + '</span>'
+		+ '</div>'
+		
+		+ '<div class="bar-container" >'
+		+ '		<div class="bar" style="width: 100%;"></div>'
+		+ '		<span>Imprint: ' + safe(a.imprint) + '</span>'
+		+ '</div>';}