MAPG-204 show guesses from others

public/static/img/markers/marker-blue-empty.svg

@@ -0,0 +1,10 @@
+<!-- Original image: Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. -->
+<svg viewBox="0 0 12 16" xmlns="http://www.w3.org/2000/svg">
+    <path
+        fill="#3183ce"
+        fill-rule="evenodd"
+        stroke="#19456d"
+        stroke-width="0.3"
+        stroke-linecap="round"
+        d="m 5.9999998,15.849652 c 0,0 5.8511182,-5.579947 5.8511182,-9.8134832 a 5.8511179,5.8880898 0 0 0 -11.7022358,0 c 0,4.2335362 5.8511176,9.8134832 5.8511176,9.8134832" />
+</svg>

public/static/js/game.js

@@ -67,7 +67,7 @@
                             break;
 
                         case 'guess':
-                            //TODO
+                            Game.MultiConnector.guess(json.data);
                             break;
                     }
                 };
@@ -90,9 +90,17 @@
                 if (data.history) {
                     for (var i = 0; i < data.history.length; ++i) {
                         var round = data.history[i];
-                        Game.rounds.push({ position: round.position, guessPosition: round.result.guessPosition, realMarker: null, guessMarker: null, line: null });
+                        Game.rounds.push({ position: round.position, guessPosition: round.result.guessPosition, realMarker: null, guessMarkers: [] });
-                        Game.addRealGuessPair(round.position, round.result.guessPosition, true);
+                        Game.addPositionToResultMap(true);
+                        if (round.result.guessPosition) {
+                            Game.addGuessPositionToResultMap(round.result.guessPosition, null, true);
+                        }
                         Game.scoreSum += round.result.score;
+
+                        for (var j = 0; j < round.allResults.length; ++j) {
+                            var result = round.allResults[j];
+                            Game.addGuessPositionToResultMap(result.guessPosition, result, true);
+                        }
                     }
 
                     document.getElementById('currentRound').innerHTML = String(Game.rounds.length) + '/' + String(Game.NUMBER_OF_ROUNDS);
@@ -143,7 +151,7 @@
                 // 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.addRealGuessPair(data.result.position, null);
+                    Game.addPositionToResultMap();
                 }
 
                 Game.panoId = data.place.panoId;
@@ -152,6 +160,15 @@
                 document.getElementById('multi').style.visibility = 'hidden';
                 Game.resetRound();
                 Game.startNewRound();
+            },
+
+            guess: function (data) {
+                var resultBounds = Game.map.getBounds();
+
+                Game.addGuessPositionToResultMap(data.guessPosition, data);
+                resultBounds.extend(data.guessPosition);
+
+                Game.map.fitBounds(resultBounds);
             }
         },
 
@@ -230,8 +247,9 @@
                 if (this.response.history) {
                     for (var i = 0; i < this.response.history.length; ++i) {
                         var round = this.response.history[i];
-                        Game.rounds.push({ position: round.position, guessPosition: round.result.guessPosition, realMarker: null, guessMarker: null, line: null });
+                        Game.rounds.push({ position: round.position, guessPosition: round.result.guessPosition, realMarker: null, guessMarkers: [] });
-                        Game.addRealGuessPair(round.position, round.result.guessPosition, true);
+                        Game.addPositionToResultMap(true);
+                        Game.addGuessPositionToResultMap(round.result.guessPosition, null, true);
                         Game.scoreSum += round.result.score;
                     }
 
@@ -255,9 +273,13 @@
                 if (round.realMarker) {
                     round.realMarker.setMap(null);
                 }
-                if (round.guessMarker) {
+                for (var j = 0; j < round.guessMarkers.length; ++j) {
-                    round.guessMarker.setMap(null);
+                    var guessMarker = round.guessMarkers[j];
-                    round.line.setMap(null);
+                    guessMarker.marker.setMap(null);
+                    guessMarker.line.setMap(null);
+                    if (guessMarker.info) {
+                        guessMarker.info.close();
+                    }
                 }
             }
 
@@ -287,10 +309,15 @@
                 var lastRound = Game.rounds[Game.rounds.length - 1];
 
                 lastRound.realMarker.setVisible(false);
-                if (lastRound.guessMarker) {
+                for (var i = 0; i < lastRound.guessMarkers.length; ++i) {
-                    lastRound.guessMarker.setVisible(false);
+                    var guessMarker = lastRound.guessMarkers[i];
-                    lastRound.line.setVisible(false);
+                    guessMarker.marker.setVisible(false);
+                    guessMarker.line.setVisible(false);
+                    if (guessMarker.info) {
+                        guessMarker.info.close();
+                    }
                 }
+
             }
 
             document.getElementById('panoCover').style.visibility = 'hidden';
@@ -312,7 +339,7 @@
         },
 
         startNewRound: function () {
-            Game.rounds.push({ position: null, guessPosition: null, realMarker: null, guessMarker: null, line: null });
+            Game.rounds.push({ position: null, guessPosition: null, realMarker: null, guessMarkers: [] });
 
             document.getElementById('currentRound').innerHTML = String(Game.rounds.length) + '/' + String(Game.NUMBER_OF_ROUNDS);
 
@@ -388,13 +415,22 @@
                 Game.scoreSum += this.response.result.score;
                 document.getElementById('currentScoreSum').innerHTML = String(Game.scoreSum) + '/' + String(Game.rounds.length * Game.MAX_SCORE);
 
-                Game.rounds[Game.rounds.length - 1].position = this.response.position;
-                Game.addRealGuessPair(this.response.position, guessPosition);
-
                 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'
                 });
@@ -427,8 +463,9 @@
             }, data);
         },
 
-        addRealGuessPair: function (position, guessPosition, hidden) {
+        addPositionToResultMap: function (hidden) {
             var round = Game.rounds[Game.rounds.length - 1];
+            var position = round.position;
 
             round.realMarker = new google.maps.Marker({
                 map: Game.map,
@@ -449,20 +486,25 @@
             round.realMarker.addListener('click', function () {
                 window.open('https://www.google.com/maps/search/?api=1&query=' + this.getPosition().toUrlValue(), '_blank');
             });
+        },
 
-            if (!guessPosition) {
+        addGuessPositionToResultMap: function (guessPosition, result, hidden) {
-                return;
+            var round = Game.rounds[Game.rounds.length - 1];
-            }
+            var position = round.position;
 
-            round.guessMarker = new google.maps.Marker({
+            var guessMarker = { marker: null, line: null, info: null };
+            var markerSvg = result ? 'marker-gray-empty.svg' : 'marker-blue-empty.svg';
+            var markerLabel = result ? result.userName.charAt(0).toUpperCase() : '?';
+
+            guessMarker.marker = new google.maps.Marker({
                 map: Game.map,
                 visible: !hidden,
                 position: guessPosition,
                 zIndex: Game.rounds.length,
-                clickable: false,
+                clickable: !!result,
                 draggable: false,
                 icon: {
-                    url: STATIC_ROOT + '/img/markers/marker-gray-empty.svg?rev=' + REVISION,
+                    url: STATIC_ROOT + '/img/markers/' + markerSvg + '?rev=' + REVISION,
                     size: new google.maps.Size(24, 32),
                     scaledSize: new google.maps.Size(24, 32),
                     anchor: new google.maps.Point(12, 32),
@@ -473,11 +515,11 @@
                     fontFamily: 'Roboto',
                     fontSize: '16px',
                     fontWeight: '500',
-                    text: '?'
+                    text: markerLabel
                 }
             });
 
-            round.line = new google.maps.Polyline({
+            guessMarker.line = new google.maps.Polyline({
                 map: Game.map,
                 visible: !hidden,
                 path: [
@@ -500,6 +542,19 @@
                 draggable: false,
                 editable: false
             });
+
+            if (result) {
+                guessMarker.info = new google.maps.InfoWindow({
+                    content: '<p class="small bold">' + result.userName + '</p>' +
+                        '<p class="small">' + Util.printDistanceForHuman(result.distance) + ' | ' + result.score + ' points</p>',
+                });
+
+                guessMarker.marker.addListener('click', function () {
+                    guessMarker.info.open(Game.map, this);
+                });
+            }
+
+            round.guessMarkers.push(guessMarker);
         },
 
         calculateScoreBarProperties: function (score, maxScore) {
@@ -551,14 +606,14 @@
                 });
 
                 round.realMarker.setVisible(true);
-                if (round.guessMarker) {
-                    round.guessMarker.setVisible(true);
-                    round.line.setVisible(true);
-                }
-
                 resultBounds.extend(round.position);
-                if (round.guessMarker) {
+
-                    resultBounds.extend(round.guessPosition);
+                for (var j = 0; j < round.guessMarkers.length; ++j) {
+                    var guessMarker = round.guessMarkers[j];
+                    guessMarker.marker.setVisible(true);
+                    guessMarker.line.setVisible(true);
+
+                    resultBounds.extend(guessMarker.marker.getPosition());
                 }
             }
 
@@ -635,7 +690,7 @@
             clickable: false,
             draggable: true,
             icon: {
-                url: STATIC_ROOT + '/img/markers/marker-gray-empty.svg?rev=' + REVISION,
+                url: STATIC_ROOT + '/img/markers/marker-blue-empty.svg?rev=' + REVISION,
                 size: new google.maps.Size(24, 32),
                 scaledSize: new google.maps.Size(24, 32),
                 anchor: new google.maps.Point(12, 32),