more style

familyark/app/public/js/chart.js

@@ -0,0 +1,76 @@
+window.randomScalingFactor = function() {
+    return Math.round(33);
+};
+
+function set_chart(data){
+    var color = Chart.helpers.color;
+    var horizontalBarChartData = {
+        labels: ['Health', 'Stamina', 'Food', 'Damage', 'Speed'],
+        datasets: [{
+            label: 'Initial',
+            stack: 'Stack 0',
+            borderWidth: 2,
+            borderColor: "rgb(0, 153, 153, 0.5)",
+            backgroundColor: 'rgba(0, 153, 153, 0.9)',
+            data: [
+                data.initial_health ? data.initial_health.$numberDecimal : "",
+                data.initial_energy ? data.initial_energy.$numberDecimal : "",
+                data.initial_food ? data.initial_food.$numberDecimal : "",
+                data.initial_damage ? data.initial_damage.$numberDecimal : "",
+                data.initial_velocity ? data.initial_velocity.$numberDecimal : "",
+            ]
+        },{
+            label: 'Now',
+            stack: 'Stack 0',
+            borderWidth: 2,
+            borderColor: "rgb(0, 153, 153, 1)",
+            backgroundColor: 'rgba(0, 153, 153, 0.5)',
+            data: [
+                data.health ? data.health.$numberDecimal : "",
+                data.energy ? data.energy.$numberDecimal : "",
+                data.food ? data.food.$numberDecimal : "",
+                data.damage ? data.damage.$numberDecimal : "",
+                data.velocity ? data.velocity.$numberDecimal : "",
+            ]
+        }]
+
+    };
+
+    var ctx = document.getElementById('myAnimalChar').getContext('2d');
+    var myChart = new Chart(ctx, {
+        type: 'horizontalBar',
+        data: horizontalBarChartData,
+        options: {
+            tooltips: {
+                mode: 'index',
+                intersect: false,
+            },
+            legend:{
+                display: false,
+                labels: {
+                    // This more specific font property overrides the global property
+                    fontColor: 'black'
+                }
+            },
+            responsive: true,
+            scales: {
+                xAxes: [{
+                    stacked: true,
+                    ticks: {
+                        fontSize: 15,
+                        fontFamily: "ark",
+                        fontColor: "#fff"
+                    }
+                }],
+                yAxes: [{
+                    stacked: true,
+                    ticks: {
+                        fontSize: 15,
+                        fontFamily: "ark",
+                        fontColor: "#fff"
+                    }
+                }]
+            }
+        }
+    });
+}

familyark/app/public/js/functions.js

@@ -57,7 +57,7 @@ function editAnimal(id){
 function showAnimal(id){
 	$("#load").fadeIn(0);
 	$( "#body" ).load( "/templates/animal-show.html", function(){
-		var text = "<table class=\"dataTable\">";
+		var text = "<div><b>Stats</b></div><table class=\"dataTable\">";
 		$.get( "/animal/"+ id, function( data ) {
 			var animal = data.data,
 				j = 1;
@@ -78,6 +78,7 @@ function showAnimal(id){
 			
 			get_parrents(animal);
 			get_childrens(animal);
+			set_chart(animal);
 			$("#load").fadeOut("fast");
 		});
 		
@@ -135,4 +136,16 @@ function set_animal_include(id){
 	$("#a-specie").change(function(e){
 		paint_male_female($( this ).val(), id);
 	});
+}
+
+function get_info(){
+    $.get("/info", function( data ) {
+        var text = "<table class=\"info\">"
+        $.each(data, function(i, obj) {
+            text += "<tr><td>"+i+"</td><td> "+obj+"</td></tr>";
+        });
+        text += "</table>"
+		$( "#info" ).html( text );
+		$("#load").fadeOut("slow");
+    });
 }

familyark/app/public/js/main.js

@@ -6,16 +6,10 @@ $('document').ready(function(){
         });
 
         $( "#body" ).load( "/templates/home.html", function(){$("#load").fadeOut("slow");
-            $.get("/info", function( data ) {
-                var text = "<table class=\"info\">"
-                $.each(data, function(i, obj) {
-                    text += "<tr><td>"+i+"</td><td> "+obj+"</td></tr>";
-                });
-                text += "</table>"
-                $( "#info" ).html( text );
-                $("#load").fadeOut("slow");
-            });
+            get_info();
+            setInterval(() => { get_info()}, 300000);            
         });
+
         $("body").bgswitcher({
             images: ["/images/bg0.jpg", "/images/bg1.jpg", "/images/bg2.jpg", "/images/bg3.jpg", "/images/bg4.jpg"],
             loop: true,