From 3630637ec120ce5372dd96586e6a4e85a9a09eda Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?P=C5=91cze=20Bence?= Date: Sun, 4 Apr 2021 01:07:34 +0200 Subject: [PATCH] MAPG-205 handle round timeout on frontend --- public/static/css/game.css | 2 +- public/static/js/game.js | 145 ++++++++++++++++++++++--------------- views/game.php | 1 + 3 files changed, 88 insertions(+), 60 deletions(-) diff --git a/public/static/css/game.css b/public/static/css/game.css index 439676a..fd08d15 100644 --- a/public/static/css/game.css +++ b/public/static/css/game.css @@ -79,7 +79,7 @@ line-height: 1; } -#distanceInfo>p:nth-child(2), #scoreInfo>p:nth-child(2) { +#distanceInfo>p:nth-child(2), #distanceInfo>p:nth-child(3), #scoreInfo>p:nth-child(2) { display: none; } diff --git a/public/static/js/game.js b/public/static/js/game.js index ce0175b..8cd7ec1 100644 --- a/public/static/js/game.js +++ b/public/static/js/game.js @@ -67,6 +67,10 @@ case 'guess': Game.MultiConnector.guess(json.data); break; + + case 'end_round': + Game.MultiConnector.endRound(json.data); + break; } }; }, @@ -137,21 +141,10 @@ }, newRound: function (data) { - //TODO: workaround until results are not sent - if (Game.adaptGuess) { - document.getElementById('guess').classList.remove('adapt'); - } - if (Game.rounds.length === Game.NUMBER_OF_ROUNDS) { Game.reset(); } - // if player didn't guess - TODO: show everything on a map - if (data.result && Game.rounds.length > 0 && !Game.rounds[Game.rounds.length - 1].position) { - Game.rounds[Game.rounds.length - 1].position = data.result.position; - Game.addPositionToResultMap(); - } - Game.panoId = data.place.panoId; Game.pov = data.place.pov; @@ -167,6 +160,22 @@ resultBounds.extend(data.guessPosition); Game.map.fitBounds(resultBounds); + }, + + endRound: function (data) { + // TODO: refactor - it is necessary for mobile + if (window.getComputedStyle(document.getElementById('guess')).visibility === 'hidden') { + document.getElementById('showGuessButton').click(); + } + + document.getElementById('guessButton').disabled = true; + document.getElementById('panoCover').style.visibility = 'visible'; + + Game.showResults(data.position, null, { distance: NaN, score: 0 }, data.allResults); + + if (!Game.multi.owner) { + document.getElementById('continueButton').style.display = 'none'; + } } }, @@ -287,6 +296,7 @@ var distanceInfo = document.getElementById('distanceInfo'); distanceInfo.children[0].style.display = null; distanceInfo.children[1].style.display = null; + distanceInfo.children[2].style.display = null; var scoreInfo = document.getElementById('scoreInfo'); scoreInfo.children[0].style.display = null; scoreInfo.children[1].style.display = null; @@ -377,6 +387,68 @@ Game.panorama.setPano(panoId); }, + showResults: function (position, guessPosition, result, allResults) { + if (Game.adaptGuess) { + document.getElementById('guess').classList.remove('adapt'); + } + + if (Game.guessMarker) { + Game.guessMarker.setMap(null); + Game.guessMarker = null; + } + + document.getElementById('guess').classList.add('result'); + + Game.scoreSum += result.score; + document.getElementById('currentScoreSum').innerHTML = String(Game.scoreSum) + '/' + String(Game.rounds.length * Game.MAX_SCORE); + + var resultBounds = new google.maps.LatLngBounds(); + + Game.rounds[Game.rounds.length - 1].position = position; + Game.addPositionToResultMap(); + resultBounds.extend(position); + + if (guessPosition) { + Game.addGuessPositionToResultMap(guessPosition); + resultBounds.extend(guessPosition); + } + + if (allResults) { + for (var i = 0; i < allResults.length; ++i) { + var currentResult = allResults[i]; + Game.addGuessPositionToResultMap(currentResult.guessPosition, currentResult); + resultBounds.extend(currentResult.guessPosition); + } + } + + Game.map.setOptions({ + draggableCursor: 'grab' + }); + Game.map.fitBounds(resultBounds); + + var distanceInfo = document.getElementById('distanceInfo'); + if (Number.isNaN(result.distance)) { + distanceInfo.children[0].style.display = 'none'; + distanceInfo.children[1].style.display = 'block'; + } else { + distanceInfo.children[0].style.display = 'block'; + distanceInfo.children[1].style.display = 'none'; + document.getElementById('distance').innerHTML = Util.printDistanceForHuman(result.distance); + } + + document.getElementById('score').innerHTML = result.score; + + var scoreBarProperties = Game.calculateScoreBarProperties(result.score, Game.MAX_SCORE); + var scoreBar = document.getElementById('scoreBar'); + scoreBar.style.backgroundColor = scoreBarProperties.backgroundColor; + scoreBar.style.width = scoreBarProperties.width; + + if (Game.rounds.length === Game.NUMBER_OF_ROUNDS) { + document.getElementById('continueButton').style.display = 'none'; + document.getElementById('showSummaryButton').style.display = 'block'; + } + }, + guess: function () { if (!Game.guessMarker) { return; @@ -386,9 +458,6 @@ Game.rounds[Game.rounds.length - 1].guessPosition = guessPosition; document.getElementById('guessButton').disabled = true; - if (Game.adaptGuess) { - document.getElementById('guess').classList.remove('adapt'); - } document.getElementById('panoCover').style.visibility = 'visible'; var data = new FormData(); @@ -405,58 +474,15 @@ return; } - Game.guessMarker.setMap(null); - Game.guessMarker = null; - - document.getElementById('guess').classList.add('result'); - - Game.scoreSum += this.response.result.score; - document.getElementById('currentScoreSum').innerHTML = String(Game.scoreSum) + '/' + String(Game.rounds.length * Game.MAX_SCORE); - - var resultBounds = new google.maps.LatLngBounds(); - - Game.rounds[Game.rounds.length - 1].position = this.response.position; - Game.addPositionToResultMap(); - resultBounds.extend(this.response.position); - Game.addGuessPositionToResultMap(guessPosition); - resultBounds.extend(guessPosition); - - if (roomId) { - for (var i = 0; i < this.response.allResults.length; ++i) { - var result = this.response.allResults[i]; - Game.addGuessPositionToResultMap(result.guessPosition, result); - resultBounds.extend(result.guessPosition); - } - } - - Game.map.setOptions({ - draggableCursor: 'grab' - }); - Game.map.fitBounds(resultBounds); - - document.getElementById('distance').innerHTML = Util.printDistanceForHuman(this.response.result.distance); - document.getElementById('score').innerHTML = this.response.result.score; - - var scoreBarProperties = Game.calculateScoreBarProperties(this.response.result.score, Game.MAX_SCORE); - var scoreBar = document.getElementById('scoreBar'); - scoreBar.style.backgroundColor = scoreBarProperties.backgroundColor; - scoreBar.style.width = scoreBarProperties.width; - - if (Game.rounds.length === Game.NUMBER_OF_ROUNDS) { - document.getElementById('continueButton').style.display = 'none'; - document.getElementById('showSummaryButton').style.display = 'block'; - } + Game.showResults(this.response.position, guessPosition, this.response.result, this.response.allResults); if (this.response.place) { Game.panoId = this.response.place.panoId; Game.pov = this.response.place.pov; } else { if (!Game.multi.owner) { - //TODO: "waiting for" disabled button document.getElementById('continueButton').style.display = 'none'; } - Game.panoId = null; - Game.pov = null; } }, data); }, @@ -573,7 +599,8 @@ showSummary: function () { var distanceInfo = document.getElementById('distanceInfo'); distanceInfo.children[0].style.display = 'none'; - distanceInfo.children[1].style.display = 'block'; + distanceInfo.children[1].style.display = 'none'; + distanceInfo.children[2].style.display = 'block'; var scoreInfo = document.getElementById('scoreInfo'); scoreInfo.children[0].style.display = 'none'; scoreInfo.children[1].style.display = 'block'; diff --git a/views/game.php b/views/game.php index f443c7b..3e93b42 100644 --- a/views/game.php +++ b/views/game.php @@ -37,6 +37,7 @@

You were close.

+

You didn't guess in this round.

Game finished.