Merged in feature/MAPG-20-make-it-work-with-1-map-instance (pull request #29)

Feature/MAPG-20 make it work with 1 map instance

public/static/css/mapguesser.css

@@ -97,25 +97,19 @@ div.buttonContainer.bottom {
     z-index: 2;
 }
 
-#guessMap {
+#guess.result > #closeGuessButtonContainer, #guess.result > #guessButtonContainer {
+    display: none;
+}
+
+#map {
     width: 100%;
     border-radius: 3px;
 }
 
-#result {
-    position: absolute;
-    opacity: 0.95;
-    z-index: 2;
-    visibility: hidden;
-    background-color: #ffffff;
-    border-radius: 3px;
-}
-
-#resultMap {
+#guess.result > #map {
     height: 70%;
-    width: 100%;
-    border-top-left-radius: 3px;
-    border-top-right-radius: 3px;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
 }
 
 #resultInfo {
@@ -124,6 +118,12 @@ div.buttonContainer.bottom {
     padding: 10px 20px;
     text-align: center;
     box-sizing: border-box;
+    background-color: #ffffff;
+    display: none;
+}
+
+#guess.result > #resultInfo {
+    display: block;
 }
 
 #resultInfo > div {
@@ -182,17 +182,10 @@ div.buttonContainer.bottom {
         visibility: hidden;
     }
 
-    #guessMap {
+    #map {
         height: calc(100% - 90px);
     }
 
-    #result {
-        top: 20px;
-        left: 20px;
-        right: 20px;
-        bottom: 30px;
-    }
-
     #scoreBarBase {
         width: 100%;
     }
@@ -200,7 +193,7 @@ div.buttonContainer.bottom {
 
 @media screen and (min-width: 600px) {
     #showGuessButtonContainer {
-        visibility: hidden;
+        display: none;
     }
 
     #guess {
@@ -230,11 +223,13 @@ div.buttonContainer.bottom {
         display: none;
     }
 
-    #guessMap {
+    #map {
         height: calc(100% - 45px);
     }
 
-    #result {
+    #guess.result {
+        width: initial;
+        height: initial;
         top: 50px;
         left: 50px;
         right: 50px;
@@ -245,7 +240,7 @@ div.buttonContainer.bottom {
         width: 60%;
     }
 
-     @media screen and (max-height: 424px) {
+    @media screen and (max-height: 424px) {
         #guess {
             top: 20px;
             height: initial;

public/static/js/mapguesser.js

@@ -9,9 +9,8 @@
         scoreSum: 0,
         realPosition: null,
         panorama: null,
-        guessMap: null,
+        map: null,
         guessMarker: null,
-        resultMap: null,
         adaptGuess: false,
         googleLink: null,
 
@@ -22,7 +21,7 @@
                     var round = roundsLoaded[i];
                     Core.rounds.push({ realPosition: round.realPosition, guessPosition: round.guessPosition, realMarker: null, guessMarker: null, line: null });
                     if (round.guessPosition) {
-                        Core.addRealGuessPair(round.realPosition, round.guessPosition);
+                        Core.addRealGuessPair(round.realPosition, round.guessPosition, true);
                     }
                 }
             }
@@ -66,15 +65,22 @@
         prepareNewRound: function () {
             document.getElementById('scoreBar').style.width = null;
 
-            if (Core.adaptGuess) {
-                document.getElementById('guess').classList.remove('adapt');
+            if (Core.rounds.length > 0) {
+                var lastRound = Core.rounds[Core.rounds.length - 1];
+
+                lastRound.realMarker.setVisible(false);
+                lastRound.guessMarker.setVisible(false);
+                lastRound.line.setVisible(false);
             }
 
             document.getElementById('showGuessButton').style.visibility = null;
             document.getElementById('guess').style.visibility = null;
-            document.getElementById('result').style.visibility = null;
+            document.getElementById('guess').classList.remove('result')
 
-            Core.guessMap.fitBounds(guessMapBounds);
+            Core.map.setOptions({
+                draggableCursor: 'crosshair'
+            });
+            Core.map.fitBounds(guessMapBounds);
 
             Core.startNewRound();
         },
@@ -140,15 +146,21 @@
             Core.guessMarker.setMap(null);
             Core.guessMarker = null;
 
-            document.getElementById('guess').style.visibility = 'hidden';
-            document.getElementById('result').style.visibility = 'visible';
+            if (Core.adaptGuess) {
+                document.getElementById('guess').classList.remove('adapt');
+            }
+            document.getElementById('guess').classList.add('result');
 
             Core.addRealGuessPair(Core.realPosition, guessPosition);
 
             var resultBounds = new google.maps.LatLngBounds();
             resultBounds.extend(Core.realPosition);
             resultBounds.extend(guessPosition);
-            Core.resultMap.fitBounds(resultBounds);
+
+            Core.map.setOptions({
+                draggableCursor: 'grab'
+            });
+            Core.map.fitBounds(resultBounds);
 
             document.getElementById('distance').innerHTML = Util.printDistanceForHuman(distance);
             document.getElementById('score').innerHTML = score;
@@ -164,19 +176,12 @@
             }
         },
 
-        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);
-            }
-
+        addRealGuessPair(realPosition, guessPosition, hidden) {
             var round = Core.rounds[Core.rounds.length - 1];
 
             round.realMarker = new google.maps.Marker({
-                map: Core.resultMap,
+                map: Core.map,
+                visible: !hidden,
                 position: realPosition,
                 clickable: true,
                 draggable: false
@@ -187,7 +192,8 @@
             });
 
             round.guessMarker = new google.maps.Marker({
-                map: Core.resultMap,
+                map: Core.map,
+                visible: !hidden,
                 position: guessPosition,
                 clickable: false,
                 draggable: false,
@@ -201,7 +207,8 @@
             });
 
             round.line = new google.maps.Polyline({
-                map: Core.resultMap,
+                map: Core.map,
+                visible: !hidden,
                 path: [
                     realPosition,
                     guessPosition
@@ -268,7 +275,7 @@
                 resultBounds.extend(round.guessPosition);
             }
 
-            Core.resultMap.fitBounds(resultBounds);
+            Core.map.fitBounds(resultBounds);
 
             document.getElementById('scoreSum').innerHTML = Core.scoreSum;
 
@@ -356,22 +363,27 @@
         Core.adaptGuess = true;
     }
 
-    Core.guessMap = new google.maps.Map(document.getElementById('guessMap'), {
+    Core.map = new google.maps.Map(document.getElementById('map'), {
         disableDefaultUI: true,
         clickableIcons: false,
-        draggableCursor: 'crosshair'
+        draggableCursor: 'crosshair',
+        draggingCursor: 'grabbing'
     });
 
-    Core.guessMap.fitBounds(guessMapBounds);
+    Core.map.fitBounds(guessMapBounds);
+
+    Core.map.addListener('click', function (e) {
+        if (Core.rounds[Core.rounds.length - 1].guessPosition) {
+            return;
+        }
 
-    Core.guessMap.addListener('click', function (e) {
         if (Core.guessMarker) {
             Core.guessMarker.setPosition(e.latLng);
             return;
         }
 
         Core.guessMarker = new google.maps.Marker({
-            map: Core.guessMap,
+            map: Core.map,
             position: e.latLng,
             clickable: false,
             draggable: true,
@@ -402,11 +414,6 @@
         Core.rewriteGoogleLink();
     });
 
-    Core.resultMap = new google.maps.Map(document.getElementById('resultMap'), {
-        disableDefaultUI: true,
-        clickableIcons: false,
-    });
-
     Core.initialize();
 
     document.getElementById('showGuessButton').onclick = function () {

views/game.php

@@ -19,13 +19,10 @@
         <div id="closeGuessButtonContainer" class="buttonContainer top">
             <button id="closeGuessButton" class="block gray">Close</button>
         </div>
-        <div id="guessMap"></div>
-        <div class="buttonContainer bottom">
+        <div id="map"></div>
+        <div id="guessButtonContainer" class="buttonContainer bottom">
             <button id="guessButton" class="block" disabled>Guess</button>
         </div>
-    </div>
-    <div id="result">
-        <div id="resultMap"></div>
         <div id="resultInfo">
             <div id="distanceInfo">
                 <p>You were <span id="distance" class="bold"></span> close.</p>
@@ -36,7 +33,9 @@
                 <p>You got <span id="scoreSum" class="bold"></span> points in total.</p>
             </div>
             <div>
-                <div id="scoreBarBase"><div id="scoreBar"></div></div>
+                <div id="scoreBarBase">
+                    <div id="scoreBar"></div>
+                </div>
             </div>
             <div>
                 <button id="continueButton">Continue</button>