Correção de erros e ajustes na geolocalização

Correção de erro que ocorria na tela de resultados ao mudar a caminhada no histórico de um dia para o outro e de problemas relacionados à apresentação dos dados na tela como datas, porcentagens e outros cálculos.

Implementação da função watchPosition para atualização da geolocalização além de uma variável timer para fazer com que a verificação seja efetuada com intervalos mais longos, evitando sobrecarga de processador e memória.

As correções permitem a utilização do jogo utilizando o navegador Chrome, mas ainda está com problemas em outros navegadores, como o Firefox.

js/jogo.js

@@ -3,6 +3,7 @@ var longitude  = 0;
 var latitude   = 0;
 var local;
 var msg;
+var timer = 300;
 
 var Jogo = new Phaser.Class({
 
@@ -10,7 +11,7 @@ var Jogo = new Phaser.Class({
 
 	initialize:
 
-	function Jogo ()
+	function Jogo()
 	{
 		// note: the pack:{files[]} acts like a pre-preloader
 		// this eliminates the need for an extra "boot" scene just to preload the loadingbar images
@@ -36,7 +37,7 @@ var Jogo = new Phaser.Class({
     {
 	    this.fundo = this.add.image(487, 775, 'fundo');
 	    this.paisagem = this.add.image(490, 650, 'paisagem');
-	    const btoEncerrar = this.add.image(500, 400, 'btEncerrar', { fill: '#0f0' })
+	    this.btoEncerrar = this.add.image(500, 400, 'btEncerrar', { fill: '#0f0' })
     	  .setInteractive()
 	      .on('pointerdown', () => this.doVoltar() );
 
@@ -44,15 +45,19 @@ var Jogo = new Phaser.Class({
 		msg   = this.add.text(200,950,local,estilo);
 		msg.setText('Inicie sua caminhada!\n\nNão esqueça de apertar o botão\n\nEncerrar quando terminar.');
 		
-		this.limpaDados();
+		this.verificaPermissao();
+        //this.limpaDados();
 		this.registraInicio();
-		this.insereTeste();
+		//this.insereTeste();
 
     },
 
     update: function ()
     {
-		//setTimeout(this.getLocation(),5000);
+    	if (timer >= 250) {
+    		timer = 0;
+			mudouPosicao = navigator.geolocation.watchPosition(this.mostraLocalizacao, this.simulaLocalizacao);
+    	} else timer++;
     },
     
     handleOrientation: function (e) {
@@ -62,11 +67,14 @@ var Jogo = new Phaser.Class({
 		var z = e.alpha; // range [0,360], up-down
 	},
 	
-    getLocation: function () {
-    	this.simulaLocalizacao();
-        //if (navigator.geolocation) {
-	    //    navigator.geolocation.getCurrentPosition(this.mostraLocalizacao, this.simulaLocalizacao, { timeout:5000 });
-        //} else{this.add.text="O seu navegador não suporta Geolocalização.";}
+    verificaPermissao: function() {
+        if (navigator.permissions) {
+            navigator.permissions.query({name:'geolocation'}).then(result => {
+               if (result.state != 'granted') {
+                  navigator.geolocation.getCurrentPosition();
+               } 
+         });
+       } else alert('O seu navegador não oferece geolocalização');
     },
     
     mostraLocalizacao: function (position) {
@@ -74,7 +82,6 @@ var Jogo = new Phaser.Class({
     	longitude = position.coords.longitude;
     	local.setText('la: ' + latitude + '\nlo: ' + longitude + ', ');
 
-    	
     	var data = localStorage.getItem('Data');
 		if (data == null) data = '';
 		var hoje = new Date();       	
@@ -86,13 +93,7 @@ var Jogo = new Phaser.Class({
     },
 
     simulaLocalizacao: function (error) {
-    	 
-    	/*if (latitude == 0) latitude  = -23.5809644;
-    	if (longitude == 0) longitude = -46.7738114;
-    	latitude = latitude - 0.00000002;
-    	longitude = longitude - 0.00000002;
-    	local.setText('la: ' + latitude + '\nlo: ' + longitude + ', ');*/
-
+    	local.setText(error.message + '\nsimulando localização');
     	
     	var data = localStorage.getItem('Data');
 		if (data == null) data = '';
@@ -127,7 +128,7 @@ var Jogo = new Phaser.Class({
 	
 	insereTeste: function () {
 		// --- insere dados de teste ---
-    	localStorage.setItem('Data', '100|Thu May 16 2019 13:05:39 GMT-0300 (Horário Padrão de Brasília), Thu May 16 2019 13:07:41 GMT-0300 (Horário Padrão de Brasília), Thu May 16 2019 13:08:00 GMT-0300 (Horário Padrão de Brasília)');
+    	localStorage.setItem('Data', '200|Thu May 16 2019 13:05:39 GMT-0300 (Horário Padrão de Brasília), Thu May 16 2019 13:07:41 GMT-0300 (Horário Padrão de Brasília), Thu May 16 2019 13:08:00 GMT-0300 (Horário Padrão de Brasília)');
     	localStorage.setItem('Local', '|la: -23.580767 lo: -46.774423, la: -23.581152 lo: -46.773000, la: -23.580916 lo: -46.772764');
     	//-------------------------------
     	//alert(localStorage.getItem('Data'));

js/resultados.js

@@ -44,14 +44,9 @@ var Resultados = new Phaser.Class({
 
     create: function ()
     {
-
 		// --- componentes da tela ---
-
 	    this.fundo = this.add.image(487, 775, 'fundo');
-	    const btoVoltar = this.add.image(500, 1300, 'btVoltar', { fill: '#0f0' })
-    	  .setInteractive()
-	      .on('pointerdown', () => this.doVoltar() );
-	      
+	    const btoVoltar = this.add.image(500, 1300, 'btVoltar', { fill: '#0f0' }).setInteractive().on('pointerdown', () => this.doVoltar() );
 	    this.grpCaminhadas = this.add.group();       
 	    this.grpEducativo  = this.add.group();
 	    //this.cursores = this.input.keyboard.createCursorKeys();
@@ -63,7 +58,9 @@ var Resultados = new Phaser.Class({
 		var arrDBData     = dbData.split('|'); // registros separados por dia
 		var arrDBCoor     = dbCoor.split('|');
 
-		var x1           = 1;
+		var x1        = 1;
+	    ponteiro      = 1;
+	    qtdCaminhadas = 0;
 		do {
 			//--- analisa o percurso e calcula tempo, distância e velocidade média ---
     		var datafim      = '';
@@ -178,10 +175,20 @@ var Resultados = new Phaser.Class({
     
     mostraResultados: function ()
     {
+		// --- variáveis para posicionamento na tela ---
+		//var pagina       = 975;
+		posImg       = 285;
+		posTxt       = 450;
+		posPorc      = 420;
+		posCoracao   = 285;
+		posPulmao    = 485;
+		posBalanca   = 685;
+		
     	// --- mostra os resultados na tela separados por data, finalizando com as projeções ---
 		for (y = 0; y < arrResultados.length; y++ ) {
+			var mesAjustado = arrResultados[y][0].getMonth()+1;
 			eval('var Destaque' + y + ' = this.add.image(' + posImg + ', 650, "iHealth");');
-			eval('var Texto' + y + ' = this.add.text(' + posTxt + ', 450, "Data: ' + arrResultados[y][0].getDate() + '/' + arrResultados[y][0].getMonth() + '/' + arrResultados[y][0].getFullYear() + ' \\n\\nDistância: ' + parseFloat(arrResultados[y][1]).toFixed(2) + ' m\\n\\nTempo: ' + arrResultados[y][2] + ' h ' + arrResultados[y][3] +' m\\n\\nVelocidade: ' + arrResultados[y][4] + ' k/h\\n\\nGasto calórico: ' + arrResultados[y][5] + '", infos);');
+			eval('var Texto' + y + ' = this.add.text(' + posTxt + ', 450, "Data: ' + arrResultados[y][0].getDate() + '/' + mesAjustado + '/' + arrResultados[y][0].getFullYear() + ' \\n\\nDistância: ' + parseFloat(arrResultados[y][1]).toFixed(2) + ' m\\n\\nTempo: ' + arrResultados[y][2] + ' h ' + arrResultados[y][3] +' m\\n\\nVelocidade: ' + arrResultados[y][4] + ' k/h\\n\\nGasto calórico: ' + arrResultados[y][5] + '", infos);');
 			eval('var Coracao' + y + ' = this.add.image(' + posCoracao + ', 950, "coracao");');
 			eval('var Pulmao' + y + ' = this.add.image(' + posPulmao + ', 950, "pulmao");');
 			eval('var Balanca' + y + ' = this.add.image(' + posBalanca + ', 950, "balanca");');
@@ -230,16 +237,8 @@ var Resultados = new Phaser.Class({
 	
 		eval('var Destaque' + y + ' = this.add.image(1260, 650, "iHealth");');
 		eval('var Texto' + y + ' = this.add.text(1425, 450, "Data: daqui 3 meses \\n\\nDistância: ' + parseFloat(medDistancia).toFixed(2) + ' m\\n\\nTempo: ' + medHoras + ' h ' + medMinutos +' m\\n\\nVelocidade: ' + parseFloat(medVelocidade).toFixed(2) + ' k/h\\n\\nGasto calórico: ' + medCalorias + '", infos);');
-		//eval('alert(Texto' + qtdCaminhadas + '.text);');
-		//eval('var Coracao' + y + ' = this.add.image(' + posCoracao + ', 950, "coracao");');
-		//eval('var Pulmao' + y + ' = this.add.image(' + posPulmao + ', 950, "pulmao");');
-		//eval('var Balanca' + y + ' = this.add.image(' + posBalanca + ', 950, "balanca");');
-		
     	eval('this.grpCaminhadas.add(Destaque' + y + ');');
     	eval('this.grpCaminhadas.add(Texto' + y + ');');
-    	//eval('this.grpCaminhadas.add(Coracao' + y + ');');
-    	//eval('this.grpCaminhadas.add(Pulmao' + y + ');');
-    	//eval('this.grpCaminhadas.add(Balanca' + y + ');');
 
 		this.mostraBarra(meta, -1, 1395);
     },
@@ -282,22 +281,6 @@ var Resultados = new Phaser.Class({
     
     },
     
-    converteMes: function (mes)
-    {
-    	if (mes == 'Jan') return '01';
-    	if (mes == 'Feb') return '02';
-    	if (mes == 'Mar') return '03';
-    	if (mes == 'Apr') return '04';
-    	if (mes == 'May') return '05';
-    	if (mes == 'Jun') return '06';
-    	if (mes == 'Jul') return '07';
-    	if (mes == 'Aug') return '08';
-    	if (mes == 'Sep') return '09';
-    	if (mes == 'Oct') return '10';
-    	if (mes == 'Nov') return '11';
-    	if (mes == 'Dec') return '12';
-    },
-
 	getDistanceFromLatLonInKm: function (position1, position2) {
     	"use strict";
     	var deg2rad = function (deg) { return deg * (Math.PI / 180); },
@@ -347,8 +330,9 @@ var Resultados = new Phaser.Class({
 		//--- barra de progressão da caminhada ---
 		if (distancia > 0) {
 			eval('var progressBox' + qtdCaminhadas + ' = this.add.graphics();');
-			var porcentagem = (distancia*100)/meta;		
+			var porcentagem = (distancia*100)/meta;
 			var compBarra   = (parseInt(porcentagem*330)/100) + 200;
+			if (compBarra > 530) compBarra = 530;
 	
 			eval('progressBox' + qtdCaminhadas + '.fillStyle(0xffffff, 0.8);');
 			eval('progressBox' + qtdCaminhadas + '.fillRect(210, 320, compBarra, 50);');