Merge pull request 'MAPG-213 move visibility workaround to Game.showResultMap' (#20) from bugfix/MAPG-213-result-map-not-show-on-mobile-after-reload into develop

Reviewed-on: https://gitea.e5tv.hu/esoko/mapguesser/pulls/20

multi/index.js

@@ -2,13 +2,12 @@
 
 process.title = 'mapguesser-multi';
 
-class State {
-    static OPEN = 1;
-    static PLACE_RECEIVED = 2;
-    static GUESS_SENT = 3;
-}
-
 class MultiGame {
+    static ROUND_TIMEOUT_DEFAULT = 120000;
+    static ROUND_TIMEOUT_MINIMUM = 15000;
+    static ROUND_TIMEOUT_DIVIDER = 2;
+    static ROUND_TIMEOUT_OFFSET = 500;
+
     constructor() {
         this.rooms = new Map();
     }
@@ -32,24 +31,25 @@ class MultiGame {
         var member = room.members.get(token);
         member.connection = connection;
 
-        this._sendInitialData(room, member);
+        this._sendInitialData(room, member, token);
     }
 
     createRoom(roomId) {
         this.rooms.set(roomId, { members: new Map(), rounds: [], currentRound: -1, updated: new Date() });
+
+        return { ok: true };
     }
 
     joinRoom(roomId, token, userName) {
         if (!this.rooms.has(roomId)) {
-            console.error('Room does not exist!')
+            return { error: 'room_not_found' };
-            return;
         }
 
         var room = this.rooms.get(roomId);
         room.updated = new Date();
 
         if (room.members.has(token)) {
-            return;
+            return { error: 'member_already_joined' };
         }
 
         var data = { userName: userName };
@@ -58,14 +58,14 @@ class MultiGame {
             self._sendToMember(member, 'member_joined', data);
         });
 
-        room.members.set(token, { userName: userName, state: State.OPEN, connection: null });
+        room.members.set(token, { userName: userName, connection: null });
+
+        return { ok: true };
     }
 
     startGame(roomId, places) {
         if (!this.rooms.has(roomId)) {
-            //TODO: send something back
+            return { error: 'room_not_found' };
-            console.log('Room does not exist!')
-            return;
         }
 
         var room = this.rooms.get(roomId);
@@ -73,40 +73,50 @@ class MultiGame {
 
         var rounds = [];
         places.forEach(function (place) {
-            rounds.push({ place: place, results: new Map() })
+            rounds.push({
+                place: place,
+                results: new Map(),
+                timeout: MultiGame.ROUND_TIMEOUT_DEFAULT,
+                timeoutStarted: null,
+                timeoutHandler: null
+            })
         });
 
         room.rounds = rounds;
 
         this.nextRound(roomId, 0);
+
+        return { ok: true };
     }
 
     guess(roomId, token, guessPosition, distance, score) {
         if (!this.rooms.has(roomId)) {
-            //TODO: send something back
+            return { error: 'room_not_found' };
-            console.log('Room does not exist!')
-            return;
         }
 
         var room = this.rooms.get(roomId);
         room.updated = new Date();
 
         var round = room.rounds[room.currentRound];
-        var member = this.rooms.get(roomId).members.get(token);
+        if (round.results.has(token)) {
+            return { error: 'already_guessed' };
+        }
 
-        this._sendResultsUntilNow(room, member);
+        var member = room.members.get(token);
-
+        var allResults = this._collectResultsInRound(room, round);
-        round.results.set(member.userName, { guessPosition: guessPosition, distance: distance, score: score });
-        member.state = State.GUESS_SENT;
 
         this._broadcastGuess(room, member.userName, guessPosition, distance, score);
+
+        round.results.set(token, { guessPosition: guessPosition, distance: distance, score: score });
+
+        this._setNewTimeout(room, round);
+
+        return { allResults: allResults };
     }
 
     nextRound(roomId, currentRound) {
         if (!this.rooms.has(roomId)) {
-            //TODO: send something back
+            return { error: 'room_not_found' };
-            console.log('Room does not exist!')
-            return;
         }
 
         var room = this.rooms.get(roomId);
@@ -116,43 +126,100 @@ class MultiGame {
 
         var round = room.rounds[room.currentRound];
 
+        round.timeoutStarted = new Date();
+        var self = this;
+        round.timeoutHandler = setTimeout(function () {
+            self._endRound(room, round);
+        }, round.timeout + MultiGame.ROUND_TIMEOUT_OFFSET);
+
         var data = {};
         data.place = { panoId: round.place.panoId, pov: round.place.pov };
-
+        data.timeout = round.timeout;
-        if (room.currentRound > 0) {
-            data.result = { position: room.rounds[room.currentRound - 1].place.position };
-        }
 
         var self = this;
         room.members.forEach(function (member) {
             self._sendToMember(member, 'new_round', data);
+        });
 
-            member.state = State.PLACE_RECEIVED;
+        return { ok: true };
+    }
+
+    _setNewTimeout(room, round) {
+        clearTimeout(round.timeoutHandler);
+
+        if (room.members.size === round.results.size) {
+            round.timeout = 0;
+            round.timeoutStarted = new Date();
+
+            this._endRound(room, round);
+        } else {
+            round.timeout = round.timeout - (new Date() - round.timeoutStarted);
+            if (round.timeout > MultiGame.ROUND_TIMEOUT_DIVIDER * MultiGame.ROUND_TIMEOUT_MINIMUM) {
+                round.timeout = round.timeout / MultiGame.ROUND_TIMEOUT_DIVIDER;
+            } else if (round.timeout > MultiGame.ROUND_TIMEOUT_MINIMUM) {
+                round.timeout = MultiGame.ROUND_TIMEOUT_MINIMUM;
+            }
+            round.timeoutStarted = new Date();
+            var self = this;
+            round.timeoutHandler = setTimeout(function () {
+                self._endRound(room, round);
+            }, round.timeout + MultiGame.ROUND_TIMEOUT_OFFSET);
+
+            this._broadcastTimeout(room, round);
+        }
+    }
+
+    _endRound(room, round) {
+        var allResults = this._collectResultsInRound(room, round);
+        var self = this;
+        room.members.forEach(function (member, token) {
+            var result = { guessPosition: null, distance: null, score: 0 };
+
+            if (round.results.has(token)) {
+                result = round.results.get(token);
+            } else {
+                round.results.set(token, result);
+            }
+
+            var data = { position: round.place.position, result: result, allResults: allResults };
+            self._sendToMember(member, 'end_round', data);
         });
     }
 
-    _sendInitialData(room, member) {
+    _sendInitialData(room, member, token) {
         var data = {};
 
         if (room.currentRound >= 0) {
-            data.place = room.rounds[room.currentRound].place;
+            var round = room.rounds[room.currentRound];
+
+            data.place = round.place;
+            data.timeout = round.timeout - (new Date() - round.timeoutStarted);
         }
 
         data.history = [];
-        for (var i = 0; i < room.currentRound; ++i) {
+        for (var i = 0; i <= room.currentRound; ++i) {
             var round = room.rounds[i];
-            var result;
+
-            if (round.results.has(member.userName)) {
+            if (i === room.currentRound && !round.results.has(token)) {
-                result = round.results.get(member.userName);
+                continue;
-            } else {
-                result = { guessPosition: null, distance: null, score: 0 };
             }
 
+            var result = { guessPosition: null, distance: null, score: 0 };
+            var allResults = [];
+
+            round.results.forEach(function (currentResult, currentToken) {
+                if (token === currentToken) {
+                    result = currentResult;
+                    return;
+                }
+
+                allResults.push({ userName: room.members.get(currentToken).userName, guessPosition: currentResult.guessPosition, distance: currentResult.distance, score: currentResult.score });
+            });
+
             data.history.push({
                 position: round.place.position,
-                guessPosition: result.guessPosition,
+                result: result,
-                distance: result.distance,
+                allResults: allResults
-                score: result.score
             });
         }
 
@@ -161,33 +228,42 @@ class MultiGame {
             data.members.push({ userName: currentMember.userName, me: member === currentMember });
         });
 
+        data.readyToContinue = room.currentRound >= 0 && room.members.size === room.rounds[room.currentRound].results.size
+
         this._sendToMember(member, 'initialize', data);
     }
 
-    _sendResultsUntilNow(room, member) {
+    _collectResultsInRound(room, round) {
-        if (member.state !== State.GUESS_SENT) {
-            return;
-        }
-
-        var round = room.rounds[room.currentRound];
-
         var results = [];
-        round.results.forEach(function (result, userName) {
+        round.results.forEach(function (result, token) {
-            results.push({ userName: userName, guessPosition: result.guessPosition, distance: result.distance, score: result.score });
+            results.push({
+                userName: room.members.get(token).userName,
+                guessPosition: result.guessPosition,
+                distance: result.distance,
+                score: result.score
+            });
         });
 
-        this._sendToMember(member, 'results', results);
+        return results;
+    }
+
+    _broadcastTimeout(room, round) {
+        var self = this;
+        room.members.forEach(function (member) {
+            self._sendToMember(member, 'timeout_changed', { timeout: round.timeout });
+        });
     }
 
     _broadcastGuess(room, userName, guessPosition, distance, score) {
         var data = { userName: userName, guessPosition: guessPosition, distance: distance, score: score };
-
+        var round = room.rounds[room.currentRound];
-        room.members.forEach(function (member) {
+        var self = this;
-            if (!member.state !== State.GUESS_SENT) {
+        room.members.forEach(function (member, token) {
+            if (!round.results.has(token)) {
                 return;
             }
 
-            this._sendToMember(member, 'guess', data);
+            self._sendToMember(member, 'guess', data);
         });
     }
 
@@ -224,34 +300,35 @@ var tcpServer = net.createServer(function (socket) {
             return;
         }
 
+        var response;
         switch (data.func) {
             case 'create_room':
-                multiGame.createRoom(data.args.roomId);
+                response = multiGame.createRoom(data.args.roomId);
 
                 break;
 
             case 'join_room':
-                multiGame.joinRoom(data.args.roomId, data.args.token, data.args.userName);
+                response = multiGame.joinRoom(data.args.roomId, data.args.token, data.args.userName);
 
                 break;
 
             case 'start_game':
-                multiGame.startGame(data.args.roomId, data.args.places);
+                response = multiGame.startGame(data.args.roomId, data.args.places);
 
                 break
 
             case 'guess':
-                multiGame.guess(data.args.roomId, data.args.token, data.args.guessPosition, data.args.distance, data.args.score);
+                response = multiGame.guess(data.args.roomId, data.args.token, data.args.guessPosition, data.args.distance, data.args.score);
 
                 break;
 
             case 'next_round':
-                multiGame.nextRound(data.args.roomId, data.args.currentRound);
+                response = multiGame.nextRound(data.args.roomId, data.args.currentRound);
 
                 break;
         }
 
-        socket.write('OK');
+        socket.write(JSON.stringify(response));
         socket.end();
     });
 });

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;
 }
 
@@ -111,6 +111,44 @@
     font-weight: bold;
 }
 
+#countdown {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    height: 28px;
+    line-height: 28px;
+    padding: 0 8px;
+    background-color: #eeeeee;
+    border: solid 1px #555555;
+    border-radius: 3px;
+    opacity: 0.95;
+    z-index: 5;
+    visibility: hidden;
+}
+
+#countdown.yellow {
+    background-color: #f7c789;
+    border: solid 1px #e8a349;
+}
+
+#countdown.red {
+    background-color: #f7a5a5;
+    border: solid 1px #aa5e5e;
+}
+
+#countdown p {
+    font-size: 16px;
+    line-height: inherit;
+}
+
+#countdown.yellow p {
+    color: #9c4308;
+}
+
+#countdown.red p {
+    color: #701919;
+}
+
 @media screen and (max-width: 599px) {
     #mapName {
         display: none;

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

@@ -17,6 +17,10 @@
         adaptGuess: false,
         googleLink: null,
 
+        readyToContinue: false,
+        timeoutEnd: null,
+        countdownHandler: null,
+
         MultiConnector: {
             connection: null,
             reconnectCounter: 0,
@@ -30,9 +34,7 @@
 
                 Game.MultiConnector.connection.onopen = function () {
                     document.getElementById('loading').style.visibility = 'hidden';
-
                     Game.MultiConnector.reconnectCounter = 0;
-
                     Game.MultiConnector.connection.send(JSON.stringify({ func: 'connect_to_room', args: { roomId: roomId, token: Game.multi.token } }));
                 };
 
@@ -66,12 +68,16 @@
                             Game.MultiConnector.newRound(json.data);
                             break;
 
-                        case 'results':
+                        case 'guess':
-                            //TODO
+                            Game.MultiConnector.guess(json.data);
                             break;
 
-                        case 'guess':
+                        case 'timeout_changed':
-                            //TODO
+                            Game.MultiConnector.timeoutChanged(json.data);
+                            break;
+
+                        case 'end_round':
+                            Game.MultiConnector.endRound(json.data);
                             break;
                     }
                 };
@@ -91,30 +97,7 @@
             },
 
             initialize: function (data) {
-                if (data.history) {
+                if (data.history.length === 0 && !data.place) {
-                    for (var i = 0; i < data.history.length; ++i) {
-                        var round = data.history[i];
-                        Game.rounds.push({ position: round.position, guessPosition: round.guessPosition, realMarker: null, guessMarker: null, line: null });
-                        Game.addRealGuessPair(round.position, round.guessPosition, true);
-                        Game.scoreSum += round.score;
-                    }
-
-                    document.getElementById('currentRound').innerHTML = String(Game.rounds.length) + '/' + String(Game.NUMBER_OF_ROUNDS);
-                    document.getElementById('currentScoreSum').innerHTML = String(Game.scoreSum) + '/' + String(Game.rounds.length * Game.MAX_SCORE);
-                }
-
-                if (data.place) {
-                    Game.panoId = data.place.panoId;
-                    Game.pov = data.place.pov;
-
-                    document.getElementById('panoCover').style.visibility = 'hidden';
-                    MapGuesser.hideModal();
-
-                    Game.startNewRound();
-                }
-
-                document.getElementById('loading').style.visibility = 'hidden';
-
                     var div = document.getElementById('players');
 
                     for (var i = 0; i < data.members.length; ++i) {
@@ -124,6 +107,49 @@
                         p.innerHTML = member.userName + (member.me ? ' (me)' : '');
                         div.appendChild(p);
                     }
+                }
+
+                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, guessMarkers: [] });
+                    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];
+                        if (result.guessPosition) {
+                            Game.addGuessPositionToResultMap(result.guessPosition, result, true);
+                        }
+                    }
+                }
+
+                document.getElementById('currentRound').innerHTML = String(Game.rounds.length) + '/' + String(Game.NUMBER_OF_ROUNDS);
+                document.getElementById('currentScoreSum').innerHTML = String(Game.scoreSum) + '/' + String(Game.rounds.length * Game.MAX_SCORE);
+
+                if (data.timeout) {
+                    Game.startCountdown(data.timeout);
+                }
+
+                if (data.place) {
+                    Game.readyToContinue = data.readyToContinue;
+                    Game.panoId = data.place.panoId;
+                    Game.pov = data.place.pov;
+
+                    document.getElementById('multi').style.visibility = 'hidden';
+
+                    if (Game.rounds.length === 0 || !Game.rounds[Game.rounds.length - 1].position) {
+                        document.getElementById('panoCover').style.visibility = 'hidden';
+                        Game.startNewRound();
+                    } else {
+                        Game.loadPano(Game.panoId, Game.pov);
+                        Game.showResultFromHistory(data.history[data.history.length - 1].result);
+                    }
+                }
+
+                document.getElementById('loading').style.visibility = 'hidden';
             },
 
             memberJoined: function (data) {
@@ -135,27 +161,51 @@
             },
 
             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
+                Game.readyToContinue = false;
-                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.panoId = data.place.panoId;
                 Game.pov = data.place.pov;
 
-                MapGuesser.hideModal();
+                document.getElementById('multi').style.visibility = 'hidden';
                 Game.resetRound();
                 Game.startNewRound();
+
+                Game.startCountdown(data.timeout);
+            },
+
+            guess: function (data) {
+                var resultBounds = Game.map.getBounds();
+
+                Game.addGuessPositionToResultMap(data.guessPosition, data);
+                resultBounds.extend(data.guessPosition);
+
+                Game.map.fitBounds(resultBounds);
+            },
+
+            timeoutChanged: function (data) {
+                Game.startCountdown(data.timeout);
+            },
+
+            endRound: function (data) {
+                Game.readyToContinue = true;
+                Game.startCountdown(0);
+
+                if (Game.rounds[Game.rounds.length - 1].guessPosition || Game.rounds[Game.rounds.length - 1].position) {
+                    if (Game.multi.owner) {
+                        document.getElementById('continueButton').disabled = false;
+                        document.getElementById('startNewGameButton').disabled = false;
+                    }
+
+                    return;
+                }
+
+                document.getElementById('guessButton').disabled = true;
+                document.getElementById('panoCover').style.visibility = 'visible';
+
+                Game.receiveResult(data.position, data.result.guessPosition, { distance: data.result.distance, score: data.result.score }, data.allResults);
             }
         },
 
@@ -174,11 +224,15 @@
             }
 
             document.getElementById('loading').style.visibility = 'visible';
-
             var url = roomId ? '/multiGame/' + roomId + '/prepare.json' : '/game/' + mapId + '/prepare.json';
             MapGuesser.httpRequest('POST', url, function () {
                 document.getElementById('loading').style.visibility = 'hidden';
 
+                if (this.response.error) {
+                    Game.handleErrorResponse(this.response.error);
+                    return;
+                }
+
                 document.getElementById('mapName').innerHTML = this.response.mapName;
                 Game.mapBounds = this.response.bounds;
 
@@ -188,13 +242,12 @@
                     Game.multi.token = this.response.token;
                     Game.multi.owner = this.response.owner;
 
-                    MapGuesser.showModal('multi');
+                    document.getElementById('multi').style.visibility = 'visible';
                     if (Game.multi.owner) {
                         document.getElementById('startMultiGameButton').style.display = 'block';
                     }
 
                     document.getElementById('loading').style.visibility = 'visible';
-
                     Game.MultiConnector.connect();
                 }
             }, data);
@@ -202,8 +255,6 @@
 
         initialize: function () {
             document.getElementById('panoCover').style.visibility = 'visible';
-            document.getElementById('currentRound').innerHTML = '1/' + String(Game.NUMBER_OF_ROUNDS);
-            document.getElementById('currentScoreSum').innerHTML = '0/0';
 
             Game.map.setOptions({
                 draggableCursor: 'crosshair'
@@ -216,30 +267,28 @@
             }
 
             document.getElementById('loading').style.visibility = 'visible';
-
             MapGuesser.httpRequest('POST', '/game/' + mapId + '/initialData.json', function () {
                 document.getElementById('loading').style.visibility = 'hidden';
                 document.getElementById('panoCover').style.visibility = 'hidden';
 
                 if (this.response.error) {
-                    //TODO: handle this error
+                    Game.handleErrorResponse(this.response.error);
                     return;
                 }
 
                 Game.panoId = this.response.place.panoId;
                 Game.pov = this.response.place.pov;
 
-                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.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.guessPosition, true);
+                    Game.addPositionToResultMap(true);
-                        Game.scoreSum += round.score;
+                    Game.addGuessPositionToResultMap(round.result.guessPosition, null, true);
+                    Game.scoreSum += round.result.score;
                 }
 
                 document.getElementById('currentRound').innerHTML = String(Game.rounds.length) + '/' + String(Game.NUMBER_OF_ROUNDS);
                 document.getElementById('currentScoreSum').innerHTML = String(Game.scoreSum) + '/' + String(Game.rounds.length * Game.MAX_SCORE);
-                }
 
                 Game.startNewRound();
             });
@@ -257,9 +306,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();
+                    }
                 }
             }
 
@@ -269,10 +322,12 @@
             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;
             document.getElementById('continueButton').style.display = null;
+            document.getElementById('showSummaryButton').style.display = null;
             document.getElementById('startNewGameButton').style.display = null;
 
             document.getElementById('showGuessButton').style.visibility = null;
@@ -289,12 +344,17 @@
                 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';
             document.getElementById('showGuessButton').style.visibility = null;
             document.getElementById('guess').style.visibility = null;
@@ -314,7 +374,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);
 
@@ -322,19 +382,26 @@
         },
 
         handleErrorResponse: function (error) {
-            // for the time being we only handle the "no_session_found" error and reset the game
+            switch (error) {
-
+                case 'no_session_found':
-            if (roomId) {
+                    MapGuesser.showModalWithContent('Error', 'Your session is invalid!', [{
-                //TODO: better error message
+                        type: 'button',
-                alert('Your session is invalid, please start multiplayer again!')
+                        classNames: [],
-                return;
+                        text: 'Restart game',
+                        onclick: function () {
+                            window.location.reload();
                         }
+                    }]);
+                    break;
 
-            MapGuesser.httpRequest('GET', '/game/' + mapId + '/prepare.json', function () {
+                case 'game_already_started':
-                Game.mapBounds = this.response.bounds;
+                    MapGuesser.showModalWithContent('Error', 'This game is already started, you cannot join.');
+                    break;
 
-                Game.reset();
+                default:
-            });
+                    MapGuesser.showModalWithContent('Error', 'Error code: \'' + error + '\'');
+                    break
+            }
         },
 
         loadPano: function (panoId, pov) {
@@ -347,7 +414,106 @@
             Game.panorama.setPano(panoId);
         },
 
-        evaluateGuess: function () {
+        receiveResult: function (position, guessPosition, result, allResults) {
+            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];
+                    if (currentResult.guessPosition) {
+                        Game.addGuessPositionToResultMap(currentResult.guessPosition, currentResult);
+                        resultBounds.extend(currentResult.guessPosition);
+                    }
+                }
+            }
+
+            Game.showResultMap(result, resultBounds);
+        },
+
+        showResultFromHistory: function (result) {
+            var round = Game.rounds[Game.rounds.length - 1];
+            var resultBounds = new google.maps.LatLngBounds();
+
+            round.realMarker.setVisible(true);
+            resultBounds.extend(round.position);
+
+            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());
+            }
+
+            Game.showResultMap(result, resultBounds);
+        },
+
+        showResultMap: function (result, resultBounds) {
+            // TODO: refactor - it is necessary for mobile
+            if (window.getComputedStyle(document.getElementById('guess')).visibility === 'hidden') {
+                document.getElementById('showGuessButton').click();
+            }
+
+            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.map.setOptions({
+                draggableCursor: 'grab'
+            });
+            Game.map.fitBounds(resultBounds);
+
+            var distanceInfo = document.getElementById('distanceInfo');
+            if (result.distance === null) {
+                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';
+            } else if (roomId) {
+                if (Game.multi.owner) {
+                    if (!Game.readyToContinue) {
+                        document.getElementById('continueButton').disabled = true;
+                    }
+                } else {
+                    document.getElementById('continueButton').style.display = 'none';
+                }
+            }
+        },
+
+        guess: function () {
             if (!Game.guessMarker) {
                 return;
             }
@@ -356,73 +522,34 @@
             Game.rounds[Game.rounds.length - 1].guessPosition = guessPosition;
 
             document.getElementById('guessButton').disabled = true;
-            if (Game.adaptGuess) {
-                document.getElementById('guess').classList.remove('adapt');
-            }
-            document.getElementById('loading').style.visibility = 'visible';
             document.getElementById('panoCover').style.visibility = 'visible';
 
             var data = new FormData();
             data.append('lat', String(guessPosition.lat));
             data.append('lng', String(guessPosition.lng));
 
+            document.getElementById('loading').style.visibility = 'visible';
             var url = roomId ? '/multiGame/' + roomId + '/guess.json' : '/game/' + mapId + '/guess.json';
             MapGuesser.httpRequest('POST', url, function () {
+                document.getElementById('loading').style.visibility = 'hidden';
+
                 if (this.response.error) {
                     Game.handleErrorResponse(this.response.error);
                     return;
                 }
 
-                Game.guessMarker.setMap(null);
+                Game.receiveResult(this.response.position, guessPosition, this.response.result, this.response.allResults);
-                Game.guessMarker = null;
-
-                document.getElementById('loading').style.visibility = 'hidden';
-                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);
-
-                Game.rounds[Game.rounds.length - 1].position = this.response.result.position;
-                Game.addRealGuessPair(this.response.result.position, guessPosition);
-
-                var resultBounds = new google.maps.LatLngBounds();
-                resultBounds.extend(this.response.result.position);
-                resultBounds.extend(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);
         },
 
-        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,
@@ -443,20 +570,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),
@@ -467,11 +599,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: [
@@ -494,6 +626,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) {
@@ -514,7 +659,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';
@@ -522,6 +668,9 @@
 
             if (!roomId || Game.multi.owner) {
                 document.getElementById('startNewGameButton').style.display = 'block';
+                if (!Game.readyToContinue) {
+                    document.getElementById('startNewGameButton').disabled = true;
+                }
             }
 
             var resultBounds = new google.maps.LatLngBounds();
@@ -545,14 +694,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());
                 }
             }
 
@@ -584,6 +733,52 @@
                     Game.googleLink.href = 'https://maps.google.com/maps';
                 }
             }, 1);
+        },
+
+        startCountdown: function (timeout) {
+            if (Game.countdownHandler) {
+                clearInterval(Game.countdownHandler);
+            }
+
+            Game.countdownElement = document.getElementById('countdown');
+            Game.countdownTimeElement = document.getElementById('countdownTime');
+
+            Game.setCountdownTime(Math.round(timeout / 1000));
+
+            if (timeout <= 0) {
+                return;
+            }
+
+            Game.timeoutEnd = new Date(new Date().getTime() + timeout);
+
+            Game.countdownHandler = setInterval(function () {
+                var timeLeft = Math.round((Game.timeoutEnd - new Date()) / 1000);
+
+                Game.setCountdownTime(timeLeft);
+
+                if (timeLeft <= 0) {
+                    document.getElementById('panoCover').style.visibility = 'visible';
+                    clearInterval(Game.countdownHandler);
+                }
+            }, 1000);
+        },
+
+        setCountdownTime: function (time) {
+            if (time <= 0) {
+                Game.countdownElement.style.visibility = 'hidden';
+                return;
+            }
+
+            if (time <= 15) {
+                Game.countdownElement.className = 'red';
+            } else if (time <= 30) {
+                Game.countdownElement.className = 'yellow';
+            } else {
+                Game.countdownElement.className = '';
+            }
+
+            Game.countdownElement.style.visibility = 'visible';
+            Game.countdownTimeElement.innerHTML = time;
         }
     };
 
@@ -614,7 +809,7 @@
     });
 
     Game.map.addListener('click', function (e) {
-        if (Game.rounds[Game.rounds.length - 1].guessPosition) {
+        if (Game.rounds[Game.rounds.length - 1].guessPosition || Game.rounds[Game.rounds.length - 1].position) {
             return;
         }
 
@@ -629,7 +824,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),
@@ -677,19 +872,23 @@
     }
 
     document.getElementById('guessButton').onclick = function () {
-        Game.evaluateGuess();
+        Game.guess();
     }
 
     document.getElementById('continueButton').onclick = function () {
         if (roomId) {
-            if (!Game.multi.owner) {
+            if (!Game.multi.owner || !Game.readyToContinue) {
                 return;
             }
 
             document.getElementById('loading').style.visibility = 'visible';
-
             MapGuesser.httpRequest('POST', '/multiGame/' + roomId + '/nextRound.json', function () {
                 document.getElementById('loading').style.visibility = 'hidden';
+
+                if (this.response.error) {
+                    Game.handleErrorResponse(this.response.error);
+                    return;
+                }
             });
         } else {
             Game.resetRound();
@@ -707,9 +906,13 @@
             }
 
             document.getElementById('loading').style.visibility = 'visible';
-
             MapGuesser.httpRequest('POST', '/multiGame/' + roomId + '/initialData.json', function () {
                 document.getElementById('loading').style.visibility = 'hidden';
+
+                if (this.response.error) {
+                    Game.handleErrorResponse(this.response.error);
+                    return;
+                }
             });
         } else {
             Game.reset();
@@ -721,11 +924,16 @@
             return;
         }
 
-        MapGuesser.hideModal();
+        document.getElementById('multi').style.visibility = 'hidden';
-        document.getElementById('loading').style.visibility = 'visible';
 
+        document.getElementById('loading').style.visibility = 'visible';
         MapGuesser.httpRequest('POST', '/multiGame/' + roomId + '/initialData.json', function () {
             document.getElementById('loading').style.visibility = 'hidden';
+
+            if (this.response.error) {
+                Game.handleErrorResponse(this.response.error);
+                return;
+            }
         });
     }
 })();

src/Controller/GameFlowController.php

@@ -61,9 +61,11 @@ class GameFlowController
             $round = $state['rounds'][$i];
             $response['history'][] = [
                 'position' => $round['position']->toArray(),
+                'result' => [
                     'guessPosition' => $round['guessPosition']->toArray(),
                     'distance' => $round['distance'],
                     'score' => $round['score']
+                ]
             ];
         }
 
@@ -126,11 +128,8 @@ class GameFlowController
         $last['score'] = $result['score'];
 
         $response = [
-            'result' => [
             'position' => $last['position']->toArray(),
-                'distance' => $result['distance'],
+            'result' => $result
-                'score' => $result['score']
-            ]
         ];
 
         $state['rounds'][$state['currentRound']] = $last;
@@ -165,20 +164,22 @@ class GameFlowController
         $guessPosition = new Position((float) $this->request->post('lat'), (float) $this->request->post('lng'));
         $result = $this->evalueteGuess($last['position'], $guessPosition, $state['area']);
 
-        $this->multiConnector->sendMessage('guess', [
+        $responseFromMulti = $this->multiConnector->sendMessage('guess', [
             'roomId' => $roomId,
             'token' => $multiState['token'],
-            'guess' => $guessPosition->toArray(),
+            'guessPosition' => $guessPosition->toArray(),
             'distance' => $result['distance'],
             'score' => $result['score']
         ]);
 
+        if (isset($responseFromMulti['error'])) {
+            return new JsonContent(['error' => $responseFromMulti['error']]);
+        }
+
         $response = [
-            'result' => [
             'position' => $last['position']->toArray(),
-                'distance' => $result['distance'],
+            'result' => $result,
-                'score' => $result['score']
+            'allResults' => $responseFromMulti['allResults']
-            ]
         ];
 
         return new JsonContent($response);

src/Multi/MultiConnector.php

@@ -2,7 +2,7 @@
 
 class MultiConnector
 {
-    public function sendMessage(string $func, array $args = []): void
+    public function sendMessage(string $func, array $args = [])
     {
         $message = json_encode([
             'func' => $func,
@@ -17,8 +17,6 @@ class MultiConnector
         }
         fclose($connection);
 
-        if ($response !== 'OK') {
+        return json_decode($response, true);
-            throw new \Exception('Sending message failed with response: ' . $response);
-        }
     }
 }

views/game.php

@@ -15,12 +15,15 @@
 @endsection
 
 @section(subheader)
-    <span id="mapName" class="bold"></span><!--
+    <span id="mapName" class="bold">Loading map...</span><!--
  --><span>Round <span id="currentRound" class="bold"></span></span><!--
  --><span>Score <span id="currentScoreSum" class="bold"></span></span>
 @endsection
 
 @section(main)
+    <div id="countdown">
+        <p id="countdownTime" class="mono bold"></p>
+    </div>
     <div id="panoCover"></div>
     <div id="panorama"></div>
     <div id="showGuessButtonContainer">
@@ -37,6 +40,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">