more style

familyark/app/public/css/Chart.min.css

@@ -0,0 +1 @@
+@keyframes chartjs-render-animation{from{opacity:.99}to{opacity:1}}.chartjs-render-monitor{animation:chartjs-render-animation 1ms}.chartjs-size-monitor,.chartjs-size-monitor-expand,.chartjs-size-monitor-shrink{position:absolute;direction:ltr;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1}.chartjs-size-monitor-expand>div{position:absolute;width:1000000px;height:1000000px;left:0;top:0}.chartjs-size-monitor-shrink>div{position:absolute;width:200%;height:200%;left:0;top:0}

familyark/app/public/css/main.css

@@ -14,12 +14,16 @@ body{
 	font-family: ark;
 }
 
+body>div:first-child {
+	position: fixed !important;
+}
+
 #menu{
 	background: rgba(0, 153, 153, 0.6);
 	width: 150px;
 	float: left;
-	padding-top: 50px;
-	padding-bottom: 50px;
+	padding-top: 25px;
+	padding-bottom: 25px;
 	border: 2px solid rgb(0, 153, 153);
 	position: fixed;
 	margin: 15px;
@@ -57,7 +61,7 @@ h2{
 }
 
 #body{
-	background: rgba(0, 153, 153, 0.5);
+	background: rgba(0, 0, 0, 0.5);
 	width: calc(100vw - 210px);
 	min-height: 518px;
 	margin: 15px;;

familyark/app/public/index.html

@@ -3,13 +3,15 @@
 		<link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
 		<link href="/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css"/>
 		<link href="/css/Treant.css" rel="stylesheet" type="text/css"/>
-		<link href="https://fonts.googleapis.com/css?family=Palanquin+Dark&display=swap" rel="stylesheet">
-		<link href="/css/main.css" rel="stylesheet" type="text/css"/>		
+		<link href="/css/Chart.min.css" rel="stylesheet" type="text/css"/>
+		<link href="/css/main.css" rel="stylesheet" type="text/css"/>
 		<script src="/js/jquery.min.js"></script>
 		<script src="/js/jquery.dataTables.min.js"></script>
 		<script src="/js/raphael.js"></script>
 		<script src="/js/Treant.js"></script>
 		<script src="https://rewish.github.io/jquery-bgswitcher/jquery.bgswitcher.js"></script>
+		<script src="/js/Chart.min.js"></script>
+		<script src="/js/chart.js"></script>
 		<script src="/js/main.js"></script>
 		<script src="/js/buttons.js"></script>
 		<script src="/js/functions.js"></script>

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,

familyark/app/public/templates/animal-show.html

@@ -2,6 +2,10 @@
 <div class="row">
 	<div id="button" class="col-12"></div>
 	<div id="data" class="col-6"></div>
+	<div id="chart" class="col-6">
+		<div><b>Chars</b></div>
+		<canvas id="myAnimalChar" width="400" height="400"></canvas>
+	</div>
 	<div id="tree" class="col-6">
 		<div class="col-12">
 			<div class="row">
@@ -20,5 +24,4 @@
 			<div id="a-childrens" class="row"></div>
 		</div>
 	</div>
-	<div id="chart" class="col-12"><h5>Aqui vendran graficas de cada atributo con el inicial y el actual, para que se pueda ver el crecimiento.</h5></div>
 </div>