multi/index.js

@@ -2,6 +2,12 @@
 
 process.title = 'mapguesser-multi';
 
+class State {
+    static OPEN = 1;
+    static PLACE_RECEIVED = 2;
+    static GUESS_SENT = 3;
+}
+
 class MultiGame {
     constructor() {
         this.rooms = new Map();
@@ -26,7 +32,7 @@ class MultiGame {
         var member = room.members.get(token);
         member.connection = connection;
 
-        this._sendInitialData(room, member, token);
+        this._sendInitialData(room, member);
     }
 
     createRoom(roomId) {
@@ -52,7 +58,7 @@ class MultiGame {
             self._sendToMember(member, 'member_joined', data);
         });
 
-        room.members.set(token, { userName: userName, connection: null });
+        room.members.set(token, { userName: userName, state: State.OPEN, connection: null });
     }
 
     startGame(roomId, places) {
@@ -86,14 +92,14 @@ class MultiGame {
         room.updated = new Date();
 
         var round = room.rounds[room.currentRound];
-        var member = room.members.get(token);
-        var allResults = this._collectResultsInRound(room, round);
+        var member = this.rooms.get(roomId).members.get(token);
+
+        this._sendResultsUntilNow(room, member);
+
+        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 });
-
-        return allResults;
     }
 
     nextRound(roomId, currentRound) {
@@ -120,10 +126,12 @@ class MultiGame {
         var self = this;
         room.members.forEach(function (member) {
             self._sendToMember(member, 'new_round', data);
+
+            member.state = State.PLACE_RECEIVED;
         });
     }
 
-    _sendInitialData(room, member, token) {
+    _sendInitialData(room, member) {
         var data = {};
 
         if (room.currentRound >= 0) {
@@ -133,23 +141,18 @@ class MultiGame {
         data.history = [];
         for (var i = 0; i < room.currentRound; ++i) {
             var round = room.rounds[i];
-
-            var result = { guessPosition: null, distance: null, score: 0 };
-            var allResults = [];
-
-            round.results.forEach(function (currentResult, currentToken) {
-                if (token === currentToken) {
-                    result = currentResult;
-                    return;
+            var result;
+            if (round.results.has(member.userName)) {
+                result = round.results.get(member.userName);
+            } else {
+                result = { guessPosition: null, distance: null, score: 0 };
             }
 
-                allResults.push({ userName: room.members.get(currentToken).userName, guessPosition: currentResult.guessPosition, distance: currentResult.distance, score: currentResult.score });
-            });
-
             data.history.push({
                 position: round.place.position,
-                result: result,
-                allResults: allResults
+                guessPosition: result.guessPosition,
+                distance: result.distance,
+                score: result.score
             });
         }
 
@@ -161,30 +164,30 @@ class MultiGame {
         this._sendToMember(member, 'initialize', data);
     }
 
-    _collectResultsInRound(room, round) {
+    _sendResultsUntilNow(room, member) {
+        if (member.state !== State.GUESS_SENT) {
+            return;
+        }
+
+        var round = room.rounds[room.currentRound];
+
         var results = [];
-        round.results.forEach(function (result, token) {
-            results.push({
-                userName: room.members.get(token).userName,
-                guessPosition: result.guessPosition,
-                distance: result.distance,
-                score: result.score
-            });
+        round.results.forEach(function (result, userName) {
+            results.push({ userName: userName, guessPosition: result.guessPosition, distance: result.distance, score: result.score });
         });
 
-        return results;
+        this._sendToMember(member, 'results', results);
     }
 
     _broadcastGuess(room, userName, guessPosition, distance, score) {
         var data = { userName: userName, guessPosition: guessPosition, distance: distance, score: score };
-        var round = room.rounds[room.currentRound];
-        var self = this;
-        room.members.forEach(function (member, token) {
-            if (!round.results.has(token)) {
+
+        room.members.forEach(function (member) {
+            if (!member.state !== State.GUESS_SENT) {
                 return;
             }
 
-            self._sendToMember(member, 'guess', data);
+            this._sendToMember(member, 'guess', data);
         });
     }
 
@@ -221,35 +224,34 @@ var tcpServer = net.createServer(function (socket) {
             return;
         }
 
-        var response = { data: null };
         switch (data.func) {
             case 'create_room':
-                response.data = multiGame.createRoom(data.args.roomId);
+                multiGame.createRoom(data.args.roomId);
 
                 break;
 
             case 'join_room':
-                response.data = multiGame.joinRoom(data.args.roomId, data.args.token, data.args.userName);
+                multiGame.joinRoom(data.args.roomId, data.args.token, data.args.userName);
 
                 break;
 
             case 'start_game':
-                response.data = multiGame.startGame(data.args.roomId, data.args.places);
+                multiGame.startGame(data.args.roomId, data.args.places);
 
                 break
 
             case 'guess':
-                response.data = multiGame.guess(data.args.roomId, data.args.token, data.args.guessPosition, data.args.distance, data.args.score);
+                multiGame.guess(data.args.roomId, data.args.token, data.args.guessPosition, data.args.distance, data.args.score);
 
                 break;
 
             case 'next_round':
-                response.data = multiGame.nextRound(data.args.roomId, data.args.currentRound);
+                multiGame.nextRound(data.args.roomId, data.args.currentRound);
 
                 break;
         }
 
-        socket.write(JSON.stringify(response));
+        socket.write('OK');
         socket.end();
     });
 });

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

@@ -1,10 +0,0 @@
-<!-- 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

@@ -66,8 +66,12 @@
                             Game.MultiConnector.newRound(json.data);
                             break;
 
+                        case 'results':
+                            //TODO
+                            break;
+
                         case 'guess':
-                            Game.MultiConnector.guess(json.data);
+                            //TODO
                             break;
                     }
                 };
@@ -90,17 +94,9 @@
                 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, 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];
-                            Game.addGuessPositionToResultMap(result.guessPosition, result, true);
-                        }
+                        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);
@@ -151,7 +147,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.addPositionToResultMap();
+                    Game.addRealGuessPair(data.result.position, null);
                 }
 
                 Game.panoId = data.place.panoId;
@@ -160,15 +156,6 @@
                 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);
             }
         },
 
@@ -247,10 +234,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, guessMarkers: [] });
-                        Game.addPositionToResultMap(true);
-                        Game.addGuessPositionToResultMap(round.result.guessPosition, null, true);
-                        Game.scoreSum += round.result.score;
+                        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);
@@ -273,13 +259,9 @@
                 if (round.realMarker) {
                     round.realMarker.setMap(null);
                 }
-                for (var j = 0; j < round.guessMarkers.length; ++j) {
-                    var guessMarker = round.guessMarkers[j];
-                    guessMarker.marker.setMap(null);
-                    guessMarker.line.setMap(null);
-                    if (guessMarker.info) {
-                        guessMarker.info.close();
-                    }
+                if (round.guessMarker) {
+                    round.guessMarker.setMap(null);
+                    round.line.setMap(null);
                 }
             }
 
@@ -309,17 +291,12 @@
                 var lastRound = Game.rounds[Game.rounds.length - 1];
 
                 lastRound.realMarker.setVisible(false);
-                for (var i = 0; i < lastRound.guessMarkers.length; ++i) {
-                    var guessMarker = lastRound.guessMarkers[i];
-                    guessMarker.marker.setVisible(false);
-                    guessMarker.line.setVisible(false);
-                    if (guessMarker.info) {
-                        guessMarker.info.close();
+                if (lastRound.guessMarker) {
+                    lastRound.guessMarker.setVisible(false);
+                    lastRound.line.setVisible(false);
                 }
             }
 
-            }
-
             document.getElementById('panoCover').style.visibility = 'hidden';
             document.getElementById('showGuessButton').style.visibility = null;
             document.getElementById('guess').style.visibility = null;
@@ -339,7 +316,7 @@
         },
 
         startNewRound: function () {
-            Game.rounds.push({ position: null, guessPosition: null, realMarker: null, guessMarkers: [] });
+            Game.rounds.push({ position: null, guessPosition: null, realMarker: null, guessMarker: null, line: null });
 
             document.getElementById('currentRound').innerHTML = String(Game.rounds.length) + '/' + String(Game.NUMBER_OF_ROUNDS);
 
@@ -379,7 +356,7 @@
             Game.panorama.setPano(panoId);
         },
 
-        guess: function () {
+        evaluateGuess: function () {
             if (!Game.guessMarker) {
                 return;
             }
@@ -415,22 +392,13 @@
                 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();
-
-                Game.rounds[Game.rounds.length - 1].position = this.response.position;
-                Game.addPositionToResultMap();
-                resultBounds.extend(this.response.position);
-                Game.addGuessPositionToResultMap(guessPosition);
+                resultBounds.extend(this.response.result.position);
                 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'
                 });
@@ -463,9 +431,8 @@
             }, data);
         },
 
-        addPositionToResultMap: function (hidden) {
+        addRealGuessPair: function (position, guessPosition, hidden) {
             var round = Game.rounds[Game.rounds.length - 1];
-            var position = round.position;
 
             round.realMarker = new google.maps.Marker({
                 map: Game.map,
@@ -486,25 +453,20 @@
             round.realMarker.addListener('click', function () {
                 window.open('https://www.google.com/maps/search/?api=1&query=' + this.getPosition().toUrlValue(), '_blank');
             });
-        },
 
-        addGuessPositionToResultMap: function (guessPosition, result, hidden) {
-            var round = Game.rounds[Game.rounds.length - 1];
-            var position = round.position;
+            if (!guessPosition) {
+                return;
+            }
 
-            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({
+            round.guessMarker = new google.maps.Marker({
                 map: Game.map,
                 visible: !hidden,
                 position: guessPosition,
                 zIndex: Game.rounds.length,
-                clickable: !!result,
+                clickable: false,
                 draggable: false,
                 icon: {
-                    url: STATIC_ROOT + '/img/markers/' + markerSvg + '?rev=' + REVISION,
+                    url: STATIC_ROOT + '/img/markers/marker-gray-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),
@@ -515,11 +477,11 @@
                     fontFamily: 'Roboto',
                     fontSize: '16px',
                     fontWeight: '500',
-                    text: markerLabel
+                    text: '?'
                 }
             });
 
-            guessMarker.line = new google.maps.Polyline({
+            round.line = new google.maps.Polyline({
                 map: Game.map,
                 visible: !hidden,
                 path: [
@@ -542,19 +504,6 @@
                 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) {
@@ -606,14 +555,14 @@
                 });
 
                 round.realMarker.setVisible(true);
+                if (round.guessMarker) {
+                    round.guessMarker.setVisible(true);
+                    round.line.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());
+                if (round.guessMarker) {
+                    resultBounds.extend(round.guessPosition);
                 }
             }
 
@@ -690,7 +639,7 @@
             clickable: false,
             draggable: true,
             icon: {
-                url: STATIC_ROOT + '/img/markers/marker-blue-empty.svg?rev=' + REVISION,
+                url: STATIC_ROOT + '/img/markers/marker-gray-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),
@@ -738,7 +687,7 @@
     }
 
     document.getElementById('guessButton').onclick = function () {
-        Game.guess();
+        Game.evaluateGuess();
     }
 
     document.getElementById('continueButton').onclick = function () {

src/Controller/GameFlowController.php

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

src/Multi/MultiConnector.php

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