public/static/js/game.js

@@ -174,11 +174,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;
 
@@ -194,7 +198,6 @@
                     }
 
                     document.getElementById('loading').style.visibility = 'visible';
-
                     Game.MultiConnector.connect();
                 }
             }, data);
@@ -216,13 +219,12 @@
             }
 
             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;
                 }
 
@@ -322,19 +324,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':
+                    MapGuesser.showModalWithContent('Error', 'Your session is invalid!', [{
+                        type: 'button',
+                        classNames: [],
+                        text: 'Restart game',
+                        onclick: function () {
+                            window.location.reload();
+                        }
+                    }]);
+                    break;
 
-            if (roomId) {
-                //TODO: better error message
-                alert('Your session is invalid, please start multiplayer again!')
-                return;
+                case 'game_already_started':
+                    MapGuesser.showModalWithContent('Error', 'This game is already started, you cannot join.');
+                    break;
+
+                default:
+                    MapGuesser.showModalWithContent('Error', 'Error code: \'' + error + '\'');
+                    break
             }
-
-            MapGuesser.httpRequest('GET', '/game/' + mapId + '/prepare.json', function () {
-                Game.mapBounds = this.response.bounds;
-
-                Game.reset();
-            });
         },
 
         loadPano: function (panoId, pov) {
@@ -359,15 +368,17 @@
             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;
@@ -376,7 +387,6 @@
                 Game.guessMarker.setMap(null);
                 Game.guessMarker = null;
 
-                document.getElementById('loading').style.visibility = 'hidden';
                 document.getElementById('guess').classList.add('result');
 
                 Game.scoreSum += this.response.result.score;
@@ -687,9 +697,13 @@
             }
 
             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 +721,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();
@@ -722,10 +740,15 @@
         }
 
         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;
+            }
         });
     }
 })();

views/game.php

@@ -15,7 +15,7 @@
 @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