MAPG-203 implement game mode selection UI

views/maps.php

@@ -5,6 +5,32 @@ TODO: condition!
 
 @extends(templates/layout_normal)
 
+@section(pagemodal)
+<div id="playMode" class="modal">
+    <h2>Play map</h2>
+    <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>
+    <div class="right">
+        <button id="closePlayModeButton" class="gray marginTop" type="button">Close</button>
+    </div>
+</div>
+<div id="multi" class="modal">
+    <h2>Multiplayer (beta)</h2>
+    <form id="multiForm" class="marginTop" data-no-submit="true">
+        <a id="createNewRoomButton" class="button fullWidth green" href="" title="Create new room">Create new room</a>
+        <p class="bold center marginTop marginBottom">OR</p>
+        <div class="inputWithButton">
+            <input type="text" name="roomId" placeholder="Room to connect" required minlength="6" maxlength="6"><!--
+         --><button id="authenticateWithGoogleButton" type="submit">Connect</button>
+        </div>
+        <div class="right">
+            <button id="closeMultiButton" class="gray marginTop" type="button">Close</button>
+        </div>
+    </form>
+</div>
+@endsection
+
 @section(main)
     <div id="mapContainer">
         <?php foreach ($maps as $map): ?>
@@ -35,15 +61,15 @@ TODO: condition!
                         <p class="small center"><?= $map['description'] ?></p>
                     </div>
                 </div>
-                <?php if ($isAdmin): ?>
-                    <div class="buttonContainer">
-                        <a class="button fullWidth noRightRadius" href="/game/<?= $map['id']; ?>" title="Play map '<?= $map['name'] ?>'">Play this map</a>
+                <div class="buttonContainer">
+                    <?php if ($isAdmin): ?>
+                        <button class="button fullWidth noRightRadius playButton" data-map-id="<?= $map['id'] ?>" data-map-name="<?= htmlspecialchars($map['name']) ?>" title="Play map '<?= $map['name'] ?>'">Play this map</button>
                         <a class="button yellow fullWidth noLeftRadius noRightRadius" href="/admin/mapEditor/<?= $map['id']; ?>" title="Edit map '<?= $map['name'] ?>'">Edit</a>
                         <button class="button red fullWidth noLeftRadius deleteButton" data-map-id="<?= $map['id'] ?>" data-map-name="<?= htmlspecialchars($map['name']) ?>" title="Delete map '<?= $map['name'] ?>'">Delete</button>
-                    </div>
-                <?php else: ?>
-                    <a class="button fullWidth" href="/game/<?= $map['id']; ?>" title="Play map '<?= $map['name'] ?>'">Play this map</a>
-                <?php endif; ?>
+                    <?php else: ?>
+                        <button class="button fullWidth playButton" data-map-id="<?= $map['id'] ?>" data-map-name="<?= htmlspecialchars($map['name']) ?>" title="Play map '<?= $map['name'] ?>'">Play this map</button>
+                    <?php endif; ?>
+                </div>
             </div>
         <?php endforeach; ?>
         <?php if ($isAdmin): ?>