MAPG-67 make it possible to reset the game on error in JS

refactor JS to make round and game resetting unified

public/static/js/mapguesser.js

@@ -15,13 +15,30 @@
         googleLink: null,
 
         initialize: function () {
+            document.getElementById('loading').style.visibility = 'visible';
             document.getElementById('currentRound').innerHTML = '1/' + String(Core.NUMBER_OF_ROUNDS);
             document.getElementById('currentScoreSum').innerHTML = '0/0';
 
-            Core.getNewPosition(function (response) {
+            Core.map.setOptions({
-                if (response.history) {
+                draggableCursor: 'crosshair'
-                    for (var i = 0; i < response.history.length; ++i) {
+            });
-                        var round = response.history[i];
+            Core.map.fitBounds(mapBounds);
+
+            var xhr = new XMLHttpRequest();
+            xhr.responseType = 'json';
+            xhr.onload = function () {
+                if (this.response.error) {
+                    //TODO: handle this error
+                    return;
+                }
+
+                document.getElementById('loading').style.visibility = 'hidden';
+
+                Core.panoId = this.response.panoId;
+
+                if (this.response.history) {
+                    for (var i = 0; i < this.response.history.length; ++i) {
+                        var round = this.response.history[i];
                         Core.rounds.push({ position: round.position, guessPosition: round.guessPosition, realMarker: null, guessMarker: null, line: null });
                         Core.addRealGuessPair(round.position, round.guessPosition, true);
                         Core.scoreSum += round.score;
@@ -32,17 +49,22 @@
                 }
 
                 Core.startNewRound();
-            });
+            };
+
+            xhr.open('GET', 'position.json', true);
+            xhr.send();
         },
 
-        startNewGame: function () {
+        resetGame: function () {
             for (var i = 0; i < Core.rounds.length; ++i) {
                 var round = Core.rounds[i];
 
+                if (round.realMarker && round.guessMarker && round.line) {
                     round.realMarker.setMap(null);
                     round.guessMarker.setMap(null);
                     round.line.setMap(null);
                 }
+            }
 
             Core.rounds = [];
             Core.scoreSum = 0;
@@ -56,16 +78,14 @@
             document.getElementById('continueButton').style.display = null;
             document.getElementById('startNewGameButton').style.display = null;
 
-            document.getElementById('currentScoreSum').innerHTML = '0/0';
+            document.getElementById('showGuessButton').style.visibility = null;
+            document.getElementById('guess').style.visibility = null;
+            document.getElementById('guess').classList.remove('result');
 
-            Core.prepareNewRound();
+            Core.initialize();
-
-            Core.getNewPosition(function () {
-                Core.startNewRound();
-            });
         },
 
-        prepareNewRound: function () {
+        resetRound: function () {
             document.getElementById('scoreBar').style.width = null;
 
             if (Core.rounds.length > 0) {
@@ -84,6 +104,8 @@
                 draggableCursor: 'crosshair'
             });
             Core.map.fitBounds(mapBounds);
+
+            Core.startNewRound();
         },
 
         startNewRound: function () {
@@ -94,21 +116,18 @@
             Core.loadPano(Core.panoId);
         },
 
-        getNewPosition: function (callback) {
+        handleErrorResponse: function (error) {
-            document.getElementById('loading').style.visibility = 'visible';
+            // for the time being we only handle the "no_session_found" error and reset the game
 
             var xhr = new XMLHttpRequest();
             xhr.responseType = 'json';
-            xhr.onreadystatechange = function () {
+            xhr.onload = function () {
-                if (this.readyState == 4 && this.status == 200) {
+                mapBounds = this.response.bounds;
-                    document.getElementById('loading').style.visibility = 'hidden';
 
-                    Core.panoId = this.response.panoId;
+                Core.resetGame();
-
-                    callback(this.response);
-                }
             };
-            xhr.open('GET', 'position.json', true);
+
+            xhr.open('GET', 'game.json', true);
             xhr.send();
         },
 
@@ -131,10 +150,19 @@
             }
             document.getElementById('loading').style.visibility = 'visible';
 
+            var data = new FormData();
+            data.append('guess', '1');
+            data.append('lat', String(guessPosition.lat));
+            data.append('lng', String(guessPosition.lng));
+
             var xhr = new XMLHttpRequest();
             xhr.responseType = 'json';
-            xhr.onreadystatechange = function () {
+            xhr.onload = function () {
-                if (this.readyState == 4 && this.status == 200) {
+                if (this.response.error) {
+                    Core.handleErrorResponse(this.response.error);
+                    return;
+                }
+
                 Core.guessMarker.setMap(null);
                 Core.guessMarker = null;
 
@@ -170,11 +198,10 @@
                 }
 
                 Core.panoId = this.response.panoId;
-                }
             };
+
             xhr.open('POST', 'position.json', true);
-            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+            xhr.send(data);
-            xhr.send('guess&lat=' + guessPosition.lat + '&lng=' + guessPosition.lng);
         },
 
         addRealGuessPair: function (position, guessPosition, hidden) {
@@ -332,12 +359,9 @@
     Core.map = new google.maps.Map(document.getElementById('map'), {
         disableDefaultUI: true,
         clickableIcons: false,
-        draggableCursor: 'crosshair',
         draggingCursor: 'grabbing'
     });
 
-    Core.map.fitBounds(mapBounds);
-
     Core.map.addListener('click', function (e) {
         if (Core.rounds[Core.rounds.length - 1].guessPosition) {
             return;
@@ -403,8 +427,7 @@
     }
 
     document.getElementById('continueButton').onclick = function () {
-        Core.prepareNewRound();
+        Core.resetRound();
-        Core.startNewRound();
     }
 
     document.getElementById('showSummaryButton').onclick = function () {
@@ -412,7 +435,7 @@
     }
 
     document.getElementById('startNewGameButton').onclick = function () {
-        Core.startNewGame();
+        Core.resetGame();
     }
 
     window.onbeforeunload = function (e) {