More style

familyark/app/public/js/chart.js

@@ -2,7 +2,7 @@ window.randomScalingFactor = function() {
     return Math.round(33);
 };
 
-function set_chart(data){
+function set_chart(id, data){
     var color = Chart.helpers.color;
     var horizontalBarChartData = {
         labels: ['Health', 'Stamina', 'Food', 'Damage', 'Speed'],
@@ -36,10 +36,24 @@ function set_chart(data){
 
     };
 
-    var ctx = document.getElementById('myAnimalChar').getContext('2d');
+    var ctx = document.getElementById(id).getContext('2d');
     var myChart = new Chart(ctx, {
         type: 'horizontalBar',
         data: horizontalBarChartData,
+        onAnimationComplete: function () {
+
+            var ctx = this.chart.ctx;
+            ctx.font = this.scale.font;
+            ctx.fillStyle = this.scale.textColor
+            ctx.textAlign = "center";
+            ctx.textBaseline = "bottom";
+    
+            this.datasets.forEach(function (dataset) {
+                dataset.bars.forEach(function (bar) {
+                    ctx.fillText(bar.value, bar.x, bar.y - 5);
+                });
+            })
+        },
         options: {
             tooltips: {
                 mode: 'index',

familyark/app/public/js/functions.js

@@ -62,23 +62,21 @@ function showAnimal(id){
 			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) 
+				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>";
-				// if(j % 3 == 0) text += "</tr><tr>"
 				j++;
 			});
 			text += "</table>";
 			
 			$("#button").html('<button class="btn btn-info btn-sm float-right" onclick="editAnimal(\''+ animal._id +'\')">Edit</button>')
-			$(".a-name").html( animal.name );
+			$(".a-name").html( " Level: " + animal.level + " - <span>" + species[animal.specie].name + "</span>" + "<br>" + animal.name );
 			$("#data").append( text );
 			
 			get_parrents(animal);
 			get_childrens(animal);
-			set_chart(animal);
+			set_chart('myAnimalChar', animal);
 			$("#load").fadeOut("fast");
 		});
 		
@@ -114,7 +112,7 @@ function paint_male_female(specie, id){
 function get_parrents(animal){
 	$.get( "/animal/parrents/" + animal._id, function( data ) {
 		data.data.map(function(item){
-			$(item.sex == "Male" ? "#a-father" : "#a-mother").html("<button onclick=\"showAnimal('"+ item._id +"')\">" + item.name+" - "+ item.level + "</button>");
+			$(item.sex == "Male" ? "#a-father" : "#a-mother").html(paint_animal(item));
 		});
 	});
 }
@@ -122,7 +120,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\"><button class=\"" + item.sex + "\" onclick=\"showAnimal('"+ item._id +"')\">" + item.name + " - " + item.level + "</button></div>");
+			$("#a-childrens").append("<div class=\"col-6\">" + paint_animal(item) + "</div>");
 		})
 	});
 }
@@ -148,4 +146,24 @@ function get_info(){
 		$( "#info" ).html( text );
 		$("#load").fadeOut("slow");
     });
+}
+
+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>'
+}
+
+function safe(s){
+	return s ? s.$numberDecimal ? s.$numberDecimal : s : ""
 }