MAPG-235 new challenge can be created and is prepared

views/game.php

@@ -84,5 +84,6 @@
     var multiUrl = '<?= $_ENV['MULTI_WS_URL'] ?>';
     var roomId = <?= isset($roomId) ? '\'' . $roomId . '\'' : 'null' ?>;
     var mapId = <?= isset($mapId) ? '\'' . $mapId . '\'' : 'null' ?>;
+    var challengeToken = <?= isset($challengeToken) ? '\'' . $challengeToken . '\'' : 'null' ?>;
 </script>
 @endsection

views/maps.php

@@ -11,6 +11,8 @@ TODO: condition!
     <a id="singleButton" class="button fullWidth marginTop" href="" title="Single player">Single player</a>
     <p class="bold center marginTop marginBottom">OR</p>
     <button id="multiButton" class="fullWidth green" data-map-id="">Multiplayer (beta)</button>
+    <p class="bold center marginTop marginBottom">OR</p>
+    <button id="challengeButton" class="fullWidth yellow" data-map-id="" data-timer="">Challenge (gamma)</button>
     <div class="right">
         <button id="closePlayModeButton" class="gray marginTop" type="button">Close</button>
     </div>
@@ -29,6 +31,47 @@ TODO: condition!
         </div>
     </form>
 </div>
+<div id="challenge" class="modal">
+    <h2>Challenge (gamma)</h2>
+    <form id="challengeForm" class="marginTop" method="get">
+        <!--
+        <div class="inputWithButton">
+            <input type="text" name="challengeToken" placeholder="Challenge to enter" required minlength="6" maxlength="6">
+        </div>
+        <p class="bold center marginTop marginBottom">OR</p>
+        -->
+        
+        <div id="restrictions">
+            <h3>Optional restrictions</h3>
+            <div>
+                <div>
+                    <input type="checkbox" id="timerEnabled" name="timerEnabled" value="timerEnabled" />
+                    <label id="timeLimitLabel" for="timerEnabled">Time limit measured in seconds</label>
+                </div>
+                <div>
+                    <input type="range" id="timeLimit" name="timeLimit" min="10" max="600" value="120" />
+                </div>
+            </div>
+            <div>
+                <input type="checkbox" id="noMove" name="noMove" value="noMove" />
+                <label for="noMove">No movement allowed</label>
+            </div>
+            <div>
+                <input type="checkbox" id="noPan" name="noPan" value="noPan" />
+                <label for="noPan">No camera rotation allowed</label>
+            </div>
+            <div>
+                <input type="checkbox" id="noZoom" name="noZoom" value="noZoom" />
+                <label for="noMove">No zoom allowed</label>
+            </div>
+            <input type="hidden" name="mapId" id="challengeMapId" />
+        </div>
+        <button id="createNewChallengeButton" type="submit" class="button fullWidth green" href="" title="Create new challenge">Create new challenge</button>
+        <div class="right">
+            <button id="closeChallengeButton" class="gray marginTop" type="button">Close</button>
+        </div>
+    </form>
+</div>
 @endsection
 
 @section(main)