MAPG-235 new challenge can be created and is prepared

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;
+    }
 })();