MAPG-235 new challenge can be created and is prepared

public/static/js/game.js

@@ -1,10 +1,13 @@
 'use strict';
 
+const GameType = Object.freeze({'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2});
+
 (function () {
     var Game = {
         NUMBER_OF_ROUNDS: 5,
         MAX_SCORE: 1000,
 
+        type: GameType.SINGLE,
         mapBounds: null,
         multi: { token: null, owner: false },
         rounds: [],
@@ -211,6 +214,19 @@
             }
         },
 
+        getGameIdentifier: function() {
+            switch(Game.type) {
+                case GameType.SINGLE:
+                    return '/game/' + mapId;
+                case GameType.MULTI:
+                    return '/multiGame/' + roomId;
+                case GameType.CHALLENGE:
+                    return '/challenge/' + challengeToken;
+                default:
+                    return '/game/' + mapId;
+            }
+        },
+
         prepare: function () {
             var data = new FormData();
             var userNames;
@@ -226,7 +242,7 @@
             }
 
             document.getElementById('loading').style.visibility = 'visible';
-            var url = roomId ? '/multiGame/' + roomId + '/prepare.json' : '/game/' + mapId + '/prepare.json';
+            var url = Game.getGameIdentifier() + '/prepare.json';
             MapGuesser.httpRequest('POST', url, function () {
                 document.getElementById('loading').style.visibility = 'hidden';
 
@@ -269,7 +285,7 @@
             }
 
             document.getElementById('loading').style.visibility = 'visible';
-            MapGuesser.httpRequest('POST', '/game/' + mapId + '/initialData.json', function () {
+            MapGuesser.httpRequest('POST', Game.getGameIdentifier() + '/initialData.json', function () {
                 document.getElementById('loading').style.visibility = 'hidden';
                 document.getElementById('panoCover').style.visibility = 'hidden';
 
@@ -876,6 +892,12 @@
         document.getElementById("compass").style.transform = "translateY(-50%) rotate(" + heading + "deg)";
     });
 
+    if(roomId !== null) {
+        Game.type = GameType.MULTI;
+    } else if(challengeToken !== null) {
+        Game.type = GameType.CHALLENGE;
+    }
+
     if (COOKIES_CONSENT) {
         Game.prepare();
     }

public/static/js/maps.js

@@ -85,10 +85,40 @@
         window.location.href = '/multiGame/' + this.elements.roomId.value;
     };
 
+    document.getElementById('challengeForm').onsubmit = function (e) {
+        e.preventDefault();
+
+        var url = '/challenge/create.json';
+        var formData = new FormData(this);
+
+        document.getElementById('loading').style.visibility = 'visible';
+        MapGuesser.httpRequest('POST', url, function() {
+            document.getElementById('loading').style.visibility = 'hidden';
+
+            if (this.response.error) {
+                Game.handleErrorResponse(this.response.error);
+                return;
+            }
+
+            window.location.href = '/challenge/' + this.response.challengeToken;
+
+        }, formData);
+    };
+
     document.getElementById('multiButton').onclick = function () {
         MapGuesser.showModal('multi');
         document.getElementById('createNewRoomButton').href = '/multiGame/new/' + this.dataset.mapId;
         document.getElementById('multiForm').elements.roomId.select();
+        document.getElementById('playMode').style.visibility = 'hidden';
+    }
+
+    document.getElementById('challengeButton').onclick = function () {
+        MapGuesser.showModal('challenge');
+        document.getElementById('createNewChallengeButton').href = '/challenge/new/' + this.dataset.mapId;
+        document.getElementById('playMode').style.visibility = 'hidden';
+        
+        var timeLimit = document.getElementById('timeLimit').value;
+        document.getElementById('timeLimitLabel').innerText = 'Time limit of ' + timeLimit + ' seconds per round';
     }
 
     document.getElementById('closePlayModeButton').onclick = function () {
@@ -99,6 +129,10 @@
         MapGuesser.hideModal();
     };
 
+    document.getElementById('closeChallengeButton').onclick = function () {
+        MapGuesser.hideModal();
+    }
+
     var buttons = document.getElementById('mapContainer').getElementsByClassName('playButton');
     for (var i = 0; i < buttons.length; i++) {
         var button = buttons[i];
@@ -107,6 +141,13 @@
             MapGuesser.showModal('playMode');
             document.getElementById('singleButton').href = '/game/' + this.dataset.mapId;
             document.getElementById('multiButton').dataset.mapId = this.dataset.mapId;
+            document.getElementById('challengeMapId').value = this.dataset.mapId;
         };
     }
+
+    document.getElementById('timeLimit').oninput = function () {
+        var timeLimit = document.getElementById('timeLimit').value;
+        document.getElementById('timeLimitLabel').innerText = 'Time limit of ' + timeLimit + ' seconds per round';
+        document.getElementById('timerEnabled').checked = true;
+    }
 })();