MAPG-205 handle round timeout on frontend

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;
 }
 

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.showResults(this.response.position, guessPosition, this.response.result, this.response.allResults);
-                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';
-                }
 
                 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';

views/game.php

@@ -37,6 +37,7 @@
         <div id="resultInfo">
             <div id="distanceInfo">
                 <p>You were <span id="distance" class="bold"></span> close.</p>
+                <p>You didn't guess in this round.</p>
                 <p class="bold">Game finished.</p>
             </div>
             <div id="scoreInfo">