MAPG-25 implement multi round game

refator of JS code

public/static/css/mapguesser.css

@@ -138,6 +138,10 @@ div.buttonContainer.bottom {
     font-size: 24px;
 }
 
+#distanceInfo > p:nth-child(2), #scoreInfo > p:nth-child(2) {
+    display: none;
+}
+
 #scoreBarBase {
     height: 24px;
     margin: 0 auto;
@@ -153,6 +157,10 @@ div.buttonContainer.bottom {
     transition-duration: 2.0s;
 }
 
+#showSummaryButton, #startNewGameButton {
+    display: none;
+}
+
 @media screen and (max-width: 599px) {
     button {
         padding: 0;

public/static/js/mapguesser.js

@@ -1,27 +1,76 @@
+'use strict';
+
 (function () {
     var Core = {
+        NUMBER_OF_ROUNDS: 5,
         MAX_SCORE: 1000,
 
+        rounds: [],
+        scoreSum: 0,
         realPosition: null,
         panorama: null,
-        adaptGuess: false,
         guessMap: null,
         guessMarker: null,
         resultMap: null,
-        resultMarkers: { guess: null, real: null },
+        adaptGuess: false,
-        resultLine: null,
         googleLink: null,
 
-        getNewPosition: function () {
+        startNewGame: function () {
-            Core.panorama.setVisible(false);
+            for (var i = 0; i < Core.rounds.length; ++i) {
+                var round = Core.rounds[i];
 
+                round.realMarker.setMap(null);
+                round.guessMarker.setMap(null);
+                round.line.setMap(null);
+            }
+
+            Core.rounds = [];
+            Core.scoreSum = 0;
+
+            var distanceInfo = document.getElementById('distanceInfo');
+            distanceInfo.children[0].style.display = null;
+            distanceInfo.children[1].style.display = null;
+            var scoreInfo = document.getElementById('scoreInfo');
+            scoreInfo.children[0].style.display = null;
+            scoreInfo.children[1].style.display = null;
+            document.getElementById('continueButton').style.display = null;
+            document.getElementById('startNewGameButton').style.display = null;
+
+            Core.prepareNewRound();
+        },
+
+        prepareNewRound: function () {
+            document.getElementById('scoreBar').style.width = null;
+
+            if (Core.adaptGuess) {
+                document.getElementById('guess').classList.remove('adapt');
+            }
+
+            document.getElementById('showGuessButton').style.visibility = null;
+            document.getElementById('guess').style.visibility = null;
+            document.getElementById('result').style.visibility = null;
+
+            Core.guessMap.fitBounds(guessMapBounds);
+
+            Core.startNewRound();
+        },
+
+        startNewRound: function () {
+            Core.rounds.push({ realPosition: null, guessPosition: null, realMarker: null, guessMarker: null, line: null });
+
+            Core.panorama.setVisible(false);
             document.getElementById('loading').style.visibility = 'visible';
 
+            Core.getNewPosition();
+        },
+
+        getNewPosition: function () {
             var xhr = new XMLHttpRequest();
             xhr.responseType = 'json';
             xhr.onreadystatechange = function () {
                 if (this.readyState == 4 && this.status == 200) {
                     Core.realPosition = this.response.position;
+                    Core.rounds[Core.rounds.length - 1].realPosition = this.response.position;
 
                     var sv = new google.maps.StreetViewService();
                     sv.getPanorama({ location: this.response.position, preference: google.maps.StreetViewPreference.NEAREST }, Core.loadPano);
@@ -49,14 +98,110 @@
             Core.panorama.setPano(data.location.pano);
         },
 
+        evaluateGuess: function () {
+            var guessPosition = Core.guessMarker.getPosition().toJSON();
+            Core.rounds[Core.rounds.length - 1].guessPosition = guessPosition;
+
+            Core.guessMarker.setMap(null);
+            Core.guessMarker = null;
+
+            var distance = Util.calculateDistance(Core.realPosition, guessPosition);
+
+            document.getElementById('guess').style.visibility = 'hidden';
+            document.getElementById('result').style.visibility = 'visible';
+
+            Core.addRealguessPair(Core.realPosition, guessPosition);
+
+            var resultBounds = new google.maps.LatLngBounds();
+            resultBounds.extend(Core.realPosition);
+            resultBounds.extend(guessPosition);
+            Core.resultMap.fitBounds(resultBounds);
+
+            document.getElementById('distance').innerHTML = Util.printDistanceForHuman(distance);
+
+            var score = Core.calculateScore(distance);
+            Core.scoreSum += score;
+            document.getElementById('score').innerHTML = score;
+
+            var scoreBarProperties = Core.calculateScoreBarProperties(score, Core.MAX_SCORE);
+            var scoreBar = document.getElementById('scoreBar');
+            scoreBar.style.backgroundColor = scoreBarProperties.backgroundColor;
+            scoreBar.style.width = scoreBarProperties.width;
+
+            if (Core.rounds.length == Core.NUMBER_OF_ROUNDS) {
+                document.getElementById('continueButton').style.display = 'none';
+                document.getElementById('showSummaryButton').style.display = 'block';
+            }
+        },
+
+        addRealguessPair(realPosition, guessPosition) {
+            if (Core.rounds.length > 1) {
+                var lastRound = Core.rounds[Core.rounds.length - 2];
+
+                lastRound.realMarker.setVisible(false);
+                lastRound.guessMarker.setVisible(false);
+                lastRound.line.setVisible(false);
+            }
+
+            var round = Core.rounds[Core.rounds.length - 1];
+
+            round.realMarker = new google.maps.Marker({
+                map: Core.resultMap,
+                position: realPosition,
+                clickable: true,
+                draggable: false
+            });
+
+            round.realMarker.addListener('click', function () {
+                window.open('https://www.google.com/maps/search/?api=1&query=' + this.getPosition().toUrlValue(), '_blank');
+            });
+
+            round.guessMarker = new google.maps.Marker({
+                map: Core.resultMap,
+                position: guessPosition,
+                clickable: false,
+                draggable: false,
+                label: {
+                    color: '#ffffff',
+                    fontFamily: 'Roboto',
+                    fontSize: '18px',
+                    fontWeight: '500',
+                    text: '?'
+                }
+            });
+
+            round.line = new google.maps.Polyline({
+                map: Core.resultMap,
+                path: [
+                    realPosition,
+                    guessPosition
+                ],
+                geodesic: true,
+                strokeOpacity: 0,
+                icons: [{
+                    icon: {
+                        path: 'M 0,-1 0,1',
+                        strokeOpacity: 1,
+                        strokeWeight: 2,
+                        scale: 2
+                    },
+                    offset: '0',
+                    repeat: '10px'
+                }],
+                clickable: false,
+                draggable: false,
+                editable: false
+            });
+        },
+
         calculateScore: function (distance) {
             var goodness = 1.0 - distance / Math.sqrt(mapArea);
 
             return Math.round(Math.pow(Core.MAX_SCORE, goodness));
         },
 
-        calculateScoreBarProperties: function (score) {
+        calculateScoreBarProperties: function (score, maxScore) {
-            var percent = Math.floor((score / Core.MAX_SCORE) * 100);
+            var percent = Math.floor((score / maxScore) * 100);
 
             var color;
             if (percent >= 90) {
@@ -70,6 +215,39 @@
             return { width: percent + '%', backgroundColor: color };
         },
 
+        showSummary: function () {
+            var distanceInfo = document.getElementById('distanceInfo');
+            distanceInfo.children[0].style.display = 'none';
+            distanceInfo.children[1].style.display = 'block';
+            var scoreInfo = document.getElementById('scoreInfo');
+            scoreInfo.children[0].style.display = 'none';
+            scoreInfo.children[1].style.display = 'block';
+            document.getElementById('showSummaryButton').style.display = null;
+            document.getElementById('startNewGameButton').style.display = 'block';
+
+            var resultBounds = new google.maps.LatLngBounds();
+
+            for (var i = 0; i < Core.rounds.length; ++i) {
+                var round = Core.rounds[i];
+
+                round.realMarker.setVisible(true);
+                round.guessMarker.setVisible(true);
+                round.line.setVisible(true);
+
+                resultBounds.extend(round.realPosition);
+                resultBounds.extend(round.guessPosition);
+            }
+
+            Core.resultMap.fitBounds(resultBounds);
+
+            document.getElementById('scoreSum').innerHTML = Core.scoreSum;
+
+            var scoreBarProperties = Core.calculateScoreBarProperties(Core.scoreSum, Core.NUMBER_OF_ROUNDS * Core.MAX_SCORE);
+            var scoreBar = document.getElementById('scoreBar');
+            scoreBar.style.backgroundColor = scoreBarProperties.backgroundColor;
+            scoreBar.style.width = scoreBarProperties.width;
+        },
+
         rewriteGoogleLink: function () {
             if (!Core.googleLink) {
                 var anchors = document.getElementById('panorama').getElementsByTagName('a');
@@ -182,49 +360,7 @@
         clickableIcons: false,
     });
 
-    Core.resultMarkers.real = new google.maps.Marker({
+    Core.startNewRound();
-        map: Core.resultMap,
-        clickable: true,
-        draggable: false
-    });
-
-    Core.resultMarkers.real.addListener('click', function () {
-        window.open('https://www.google.com/maps/search/?api=1&query=' + this.getPosition().lat() + ',' + this.getPosition().lng(), '_blank');
-    });
-
-    Core.resultMarkers.guess = new google.maps.Marker({
-        map: Core.resultMap,
-        clickable: false,
-        draggable: false,
-        label: {
-            color: '#ffffff',
-            fontFamily: 'Roboto',
-            fontSize: '18px',
-            fontWeight: '500',
-            text: '?'
-        }
-    });
-
-    Core.resultLine = new google.maps.Polyline({
-        map: Core.resultMap,
-        geodesic: true,
-        strokeOpacity: 0,
-        icons: [{
-            icon: {
-                path: 'M 0,-1 0,1',
-                strokeOpacity: 1,
-                strokeWeight: 2,
-                scale: 2
-              },
-            offset: '0',
-            repeat: '10px'
-          }],
-        clickable: false,
-        draggable: false,
-        editable: false
-    });
-
-    Core.getNewPosition();
 
     document.getElementById('showGuessButton').onclick = function () {
         this.style.visibility = 'hidden';
@@ -241,56 +377,20 @@
             return;
         }
 
-        var guessedPosition = Core.guessMarker.getPosition();
-
         this.disabled = true;
-        Core.guessMarker.setMap(null);
-        Core.guessMarker = null;
 
-        var distance = Util.calculateDistance(Core.realPosition, { lat: guessedPosition.lat(), lng: guessedPosition.lng() });
+        Core.evaluateGuess();
-
-        document.getElementById('guess').style.visibility = 'hidden';
-        document.getElementById('result').style.visibility = 'visible';
-
-        var resultBounds = new google.maps.LatLngBounds();
-        resultBounds.extend(Core.realPosition);
-        resultBounds.extend(guessedPosition);
-
-        Core.resultMap.fitBounds(resultBounds);
-
-        Core.resultMarkers.real.setPosition(Core.realPosition);
-        Core.resultMarkers.guess.setPosition(guessedPosition);
-
-        Core.resultLine.setPath([
-            Core.realPosition,
-            guessedPosition
-        ]);
-
-        document.getElementById('distance').innerHTML = Util.printDistanceForHuman(distance);
-
-        var score = Core.calculateScore(distance);
-        var scoreBarProperties = Core.calculateScoreBarProperties(score);
-
-        document.getElementById('score').innerHTML = score;
-
-        var scoreBar = document.getElementById('scoreBar');
-        scoreBar.style.backgroundColor = scoreBarProperties.backgroundColor;
-        scoreBar.style.width = scoreBarProperties.width;
     }
 
     document.getElementById('continueButton').onclick = function () {
-        document.getElementById('scoreBar').style.width = null;
+        Core.prepareNewRound();
-
-        if (Core.adaptGuess) {
-            document.getElementById('guess').classList.remove('adapt');
     }
 
-        document.getElementById('showGuessButton').style.visibility = null;
+    document.getElementById('showSummaryButton').onclick = function () {
-        document.getElementById('guess').style.visibility = null;
+        Core.showSummary();
-        document.getElementById('result').style.visibility = null;
+    }
 
-        Core.guessMap.fitBounds(guessMapBounds);
+    document.getElementById('startNewGameButton').onclick = function () {
-
+        Core.startNewGame();
-        Core.getNewPosition();
     }
 })();

views/game.php

@@ -27,17 +27,21 @@
     <div id="result">
         <div id="resultMap"></div>
         <div id="resultInfo">
-            <div>
+            <div id="distanceInfo">
                 <p>You were <span id="distance" class="bold"></span> close.</p>
+                <p class="bold">Game finished.</p>
             </div>
-            <div>
+            <div id="scoreInfo">
                 <p>You earned <span id="score" class="bold"></span> points.</p>
+                <p>You got <span id="scoreSum" class="bold"></span> points in total.</p>
             </div>
             <div>
                 <div id="scoreBarBase"><div id="scoreBar"></div></div>
             </div>
             <div>
                 <button id="continueButton">Continue</button>
+                <button id="showSummaryButton">Show summary</button>
+                <button id="startNewGameButton">Start new game</button>
             </div>
         </div>
     </div>