Merge pull request 'feature/MAPG-231-make-it-possible-to-create-unlisted-maps' (!52) from feature/MAPG-231-make-it-possible-to-create-unlisted-maps into develop

Reviewed-on: https://gitea.e5tv.hu/esoko/mapguesser/pulls/52

.env.example

@@ -20,3 +20,4 @@ MULTI_INTERNAL_HOST=multi
 MULTI_INTERNAL_PORT=5000
 MULTI_WS_URL=mapguesser-dev.ch:8090
 MULTI_WS_PORT=8090
+ENABLE_GAME_FOR_GUESTS=0

Jenkinsfile

@@ -0,0 +1,59 @@
+pipeline {
+    agent {
+        node {
+            label 'mapguesser'
+            customWorkspace 'workspace/mapguesser'
+        }
+    }
+
+    stages {
+        stage('Install composer') {
+            agent {
+                dockerfile {
+                    filename 'docker/Dockerfile-test'
+                    dir '.'
+                    reuseNode true
+                }
+            }
+            steps {
+                sh 'composer install'
+            }
+        }
+
+        stage('Unit Testing') {
+            agent {
+                dockerfile {
+                    filename 'docker/Dockerfile-test'
+                    dir '.'
+                    reuseNode true
+                }
+            }
+            steps {
+                sh 'vendor/bin/phpunit --log-junit unit_test_results.xml --testdox tests'
+            }
+            post {
+                success {
+                    archiveArtifacts 'unit_test_results.xml'
+                }
+            }
+        }
+
+        stage('Static Code Analysis') {
+            agent {
+                dockerfile {
+                    filename 'docker/Dockerfile-test'
+                    dir '.'
+                    reuseNode true
+                }
+            }
+            steps {
+                sh 'php -d memory_limit=1G vendor/bin/phpstan analyse -c phpstan.neon --error-format=prettyJson > static_code_analysis_results.json'
+            }
+            post {
+                success {
+                    archiveArtifacts 'static_code_analysis_results.json'
+                }
+            }
+        }
+    }
+}

README.md

@@ -1,5 +1,7 @@
 # MapGuesser
 
+[![Build Status](https://jenkins.e5tv.hu/job/mapguesser/job/develop/badge/icon)](https://jenkins.e5tv.hu/job/mapguesser/job/develop/)
+
 This is the MapGuesser Application project. This is a game about guessing where you are based on a street view panorama - inspired by existing applications.
 
 ## Installation

database/migrations/structure/20220526_1315_unlisted_maps.sql

@@ -0,0 +1,2 @@
+ALTER TABLE `maps`
+  ADD `unlisted` TINYINT(1) NOT NULL DEFAULT 0;

docker/Dockerfile-test

@@ -0,0 +1,4 @@
+FROM php:7.4.7-cli-buster
+
+RUN apt-get update && apt-get install -y unzip
+RUN curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer

public/static/css/game.css

@@ -199,6 +199,12 @@
     font-weight: 500;
 }
 
+@media screen and (max-width: 899px) {
+    .hideOnNarrowScreen {
+        display: none;
+    }
+}
+
 @media screen and (max-width: 599px) {
     #mapName {
         display: none;
@@ -226,9 +232,6 @@
         bottom: 25px;
         left: 10px;
     }
-    .hideOnMobile {
-        display: none;
-    }
 }
 
 @media screen and (min-width: 600px) {

public/static/css/mapguesser.css

@@ -31,11 +31,11 @@ main {
     color: #ffffff;
 }
 
-p, h1, h2, input, textarea, select, button, a, table {
+p, h1, h2, h3, input, textarea, select, button, a, table, label {
     font-family: 'Roboto', sans-serif;
 }
 
-h1, h2 {
+h1, h2, h3 {
     font-weight: 500;
 }
 
@@ -55,7 +55,11 @@ h2, header.small h1 {
     font-size: 24px;
 }
 
-p, h2 {
+h3 {
+    font-size: 18px;
+}
+
+p, h2, h3 {
     line-height: 150%;
 }
 
@@ -237,7 +241,7 @@ button.green:enabled:hover, button.green:enabled:focus, a.button.green:hover, a.
     background-color: #1b7d31;
 }
 
-input, select, textarea {
+input[type=text], select, textarea {
     background-color: #f9fafb;
     border: solid #c8d2e1 1px;
     border-radius: 2px;
@@ -246,22 +250,26 @@ input, select, textarea {
     font-weight: 300;
 }
 
-input, select {
+input[type=text], select {
     height: 30px;
     line-height: 30px;
     padding: 0 5px;
 }
 
+input[type=checkbox], input[type=radio] {
+    margin-right: 0.5em;
+}
+
 textarea {
     padding: 5px;
     resize: none;
 }
 
-input.big, select.big, textarea.big, div.inputWithButton>input {
+input[type=text].big, select.big, textarea.big, div.inputWithButton>input[type=text] {
     font-size: 18px;
 }
 
-input.big, select.big, div.inputWithButton>input {
+input[type=text].big, select.big, div.inputWithButton>input[type=text] {
     height: 35px;
     line-height: 35px;
     padding: 0 6px;
@@ -276,19 +284,19 @@ input.fullWidth, select.fullWidth, textarea.fullWidth {
     width: 100%;
 }
 
-input:disabled, select:disabled, textarea:disabled {
+input[type=text]:disabled, select:disabled, textarea:disabled {
     background-color: #dfdfdf;
     border: solid #dfdfdf 1px;
     color: #000000;
 }
 
-input:focus, select:focus, textarea:focus {
+input[type=text]:focus, select:focus, textarea:focus {
     background-color: #ffffff;
     border: solid #29457f 2px;
     outline: none;
 }
 
-input:focus, select:focus {
+input[type=text]:focus, select:focus {
     padding: 0 4px;
 }
 
@@ -296,16 +304,16 @@ textarea:focus {
     padding: 4px;
 }
 
-input.big:focus, select.big:focus {
+input[type=text].big:focus, select.big:focus {
     padding: 0 5px;
 }
 
-div.inputWithButton>input {
+div.inputWithButton>input[type=text] {
     width: 100%;
     padding: 0 83px 0 6px;
 }
 
-div.inputWithButton>input:focus {
+div.inputWithButton>input[type=text]:focus {
     padding: 0 82px 0 5px;
 }
 

public/static/css/maps.css

@@ -13,6 +13,10 @@ div.mapItem.new {
     align-items: center;
 }
 
+div.mapItem.unlisted {
+    opacity: 0.6;
+}
+
 div.mapItem>div.title {
     background-color: #28a745;
     color: white;
@@ -75,29 +79,8 @@ div.mapItem>div.buttonContainer {
     grid-auto-flow: column;
 }
 
-#restrictions {
-    margin-top: 1em;
-    margin-bottom: 1em;
-    font-family: 'Roboto', sans-serif;
-}
-
-#restrictions h3 {
-    font-weight: 500;
-}
-
-#restrictions input {
-    height: auto;
-    margin: 0.5em;
-}
-
-#restrictions input[type=range] {
-    height: 1.5em;
-    margin-left: 2em;
-    width: 70%;
-}
-
 #timeLimitType {
-    margin-left: 2em;
+    margin-left: 1.5em;
 }
 
 @media screen and (min-width: 1504px) {

public/static/js/game.js

@@ -21,7 +21,6 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
         googleLink: null,
         history: [],
         restrictions: null,
-        finishers: null,
 
         readyToContinue: true,
         timeoutEnd: null,
@@ -299,6 +298,9 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
 
                 Game.loadHistory(this.response);
 
+                Game.restrictions = this.response.restrictions;
+                Game.displayRestrictions();
+
                 if (this.response.finished) {
 
                     Game.transitToResultMap();
@@ -306,8 +308,6 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
 
                 } else {
 
-                    Game.restrictions = this.response.restrictions;
-
                     Game.panoId = this.response.place.panoId;
                     Game.pov = this.response.place.pov;
 
@@ -339,6 +339,49 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
                     Game.guess();
                 });
             }
+
+        },
+
+        displayRestrictions: function () {
+            if (!Game.restrictions) {
+                return;
+            }
+
+            var restrictionsForDisplay = [];
+            if (Game.restrictions.timeLimit) {
+                restrictionsForDisplay.push('time limit per ' + Game.restrictions.timeLimitType);
+            }
+            if (Game.restrictions.noPan) {
+                restrictionsForDisplay.push('no camera change');
+            }
+            else {
+                if (Game.restrictions.noMove) {
+                    restrictionsForDisplay.push('no move');
+                }
+                if (Game.restrictions.noZoom) {
+                    restrictionsForDisplay.push('no zoom');
+                }
+            }
+
+            if (restrictionsForDisplay.length == 0) {
+                return;
+            }
+
+            // create restrictions span for header
+            var restrictions = document.createElement('span');
+            restrictions.setAttribute('id', 'restrictions');
+            restrictions.setAttribute('class', 'hideOnNarrowScreen');
+            var restrictionsTitle = document.createElement('span');
+            restrictionsTitle.setAttribute('class', 'bold');
+            restrictionsTitle.innerText = 'Restrictions: ';
+            var restrictionsList = document.createElement('span');
+            restrictionsList.innerText = restrictionsForDisplay.join(', ');
+            restrictions.appendChild(restrictionsTitle);
+            restrictions.appendChild(restrictionsList);
+
+            var roundContainer = document.getElementById('roundContainer');
+            var header = roundContainer.parentNode;
+            header.insertBefore(restrictions, roundContainer);
         },
 
         disableRestrictions: function () {
@@ -355,6 +398,14 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
             Game.timeoutEnd = null;
         },
 
+        hideRestrictions: function () {
+            var restrictions = document.getElementById('restrictions');
+            if (restrictions) {
+                var header = restrictions.parentNode;
+                header.removeChild(restrictions);
+            }
+        },
+
         transitToResultMap: function () {
             // TODO: refactor - it is necessary for mobile
             if (window.getComputedStyle(document.getElementById('guess')).visibility === 'hidden') {
@@ -436,10 +487,6 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
                     }
                 }
             }
-
-            if (response.finishers) {
-                Game.finishers = new Set(response.finishers);
-            }
         },
 
         reset: function () {
@@ -487,11 +534,11 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
             document.getElementById("navigation").style.visibility = 'visible';
 
             Game.disableRestrictions();
+            Game.hideRestrictions();
 
             document.getElementById('panningBlockerCover').style.display = null;
 
             Game.history = [];
-            Game.finishers = null;
 
             Game.initialize();
         },
@@ -820,16 +867,21 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
             var highscores = new Map();
             highscores.set('me', Game.scoreSum);
 
-            for (var i = 0; i < Game.history.length; ++i) {
+            // collect the results of users who are through the last round
+            const round = Game.history[Game.history.length - 1];
+            if (round.allResults) {
+                for (const result of round.allResults) {
+                    highscores.set(result.userName, result.score);
+                }
+            }
+
+            // add up scores only for the finishers
+            for (var i = Game.history.length - 2; i >= 0; --i) {
                 const round = Game.history[i];
                 if (round.allResults) {
                     for (const result of round.allResults) {
-                        if (Game.finishers.has(result.userName)) {
                         if (highscores.has(result.userName)) {
                             highscores.set(result.userName, highscores.get(result.userName) + result.score);
-                            } else {
-                                highscores.set(result.userName, result.score);
-                            }
                         }
                     }
                 }
@@ -900,6 +952,12 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
             scoreBar.style.backgroundColor = scoreBarProperties.backgroundColor;
             scoreBar.style.width = scoreBarProperties.width;
 
+            Game.showHighscores();
+
+        },
+
+        showHighscores: function () {
+
             if (Game.type == GameType.CHALLENGE) {
                 var highscores = this.calculateHighScores();
                 var summaryInfo = document.getElementById('summaryInfo');
@@ -925,18 +983,16 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
                 } else if (highscores.length == 2) {
 
                     if (highscores[0].userName === 'me') {
-                        summaryInfo.innerHTML = 'You won! <span class="hideOnMobile">' + highscores[1].userName + ' got only ' + highscores[1].score + ' points.</span>';
+                        summaryInfo.innerHTML = 'You won! <span class="hideOnNarrowScreen">' + highscores[1].userName + ' got only ' + highscores[1].score + ' points.</span>';
                     } else {
-                        summaryInfo.innerHTML = 'You lost! <span class="hideOnMobile">' + highscores[0].userName + ' won with ' + highscores[0].score + ' points.</span>';
+                        summaryInfo.innerHTML = 'You lost! <span class="hideOnNarrowScreen">' + highscores[0].userName + ' won with ' + highscores[0].score + ' points.</span>';
                     }
 
                 } else if (highscores.length == 1) {
-                    // summaryInfo.innerHTML = 'You are the first to finish. Challenge other by sending them the link and come back for the results.'
+                    summaryInfo.innerHTML = 'You are the first to finish. <span class="hideOnNarrowScreen">Invite your friends by sending them the link.</span>'
-                    summaryInfo.innerHTML = 'You are the first to finish.'
                 }
 
             }
-
         },
 
         rewriteGoogleLink: function () {

public/static/js/map_editor.js

@@ -18,6 +18,7 @@
 
             MapEditor.metadata.name = form.elements.name.value;
             MapEditor.metadata.description = form.elements.description.value;
+            MapEditor.metadata.unlisted = form.elements.unlisted.checked;
 
             document.getElementById('mapName').innerHTML = form.elements.name.value ? form.elements.name.value : '[unnamed map]';
 
@@ -254,6 +255,9 @@
             if (MapEditor.metadata.description !== null) {
                 data.append('description', MapEditor.metadata.description);
             }
+            if (MapEditor.metadata.unlisted !== null) {
+                data.append('unlisted', MapEditor.metadata.unlisted);
+            }
 
             for (var placeId in MapEditor.added) {
                 if (!MapEditor.added.hasOwnProperty(placeId)) {

src/Controller/GameController.php

@@ -2,6 +2,7 @@
 
 use DateTime;
 use Faker\Factory;
+use MapGuesser\Interfaces\Authorization\ISecured;
 use MapGuesser\Interfaces\Request\IRequest;
 use MapGuesser\Response\HtmlContent;
 use MapGuesser\Response\JsonContent;
@@ -20,7 +21,7 @@ use MapGuesser\Repository\PlaceRepository;
 use MapGuesser\Repository\UserInChallengeRepository;
 use MapGuesser\Response\Redirect;
 
-class GameController
+class GameController implements ISecured
 {
     const NUMBER_OF_ROUNDS = 5;
 
@@ -52,6 +53,11 @@ class GameController
         $this->userInChallengeRepository = new UserInChallengeRepository();
     }
 
+    public function authorize(): bool
+    {
+        return !empty($_ENV['ENABLE_GAME_FOR_GUESTS']) || $this->request->user() !== null;
+    }
+
     public function getGame(): IContent
     {
         $mapId = (int) $this->request->query('mapId');
@@ -106,11 +112,10 @@ class GameController
     public function createNewChallenge(): IContent
     {
         // create Challenge
-        $challengeToken = rand();
+        do {
-        while ($this->challengeRepository->getByToken($challengeToken)) {
+            // initiliaze or if a challenge with the same token already exists
-            // if a challenge with the same token already exists
+            $challengeToken = mt_rand();
-            $challengeToken = rand();
+        } while ($this->challengeRepository->getByToken($challengeToken));
-        }
 
         $challenge = new Challenge();
         $challenge->setToken($challengeToken);

src/Controller/GameFlowController.php

@@ -1,6 +1,7 @@
 <?php namespace MapGuesser\Controller;
 
 use DateTime;
+use MapGuesser\Interfaces\Authorization\ISecured;
 use MapGuesser\Interfaces\Request\IRequest;
 use MapGuesser\Util\Geo\Position;
 use MapGuesser\Response\JsonContent;
@@ -24,7 +25,7 @@ use MapGuesser\Repository\UserInChallengeRepository;
 use MapGuesser\Repository\UserPlayedPlaceRepository;
 use MapGuesser\Repository\UserRepository;
 
-class GameFlowController
+class GameFlowController implements ISecured
 {
     const NUMBER_OF_ROUNDS = 5;
     const MAX_SCORE = 1000;
@@ -69,6 +70,11 @@ class GameFlowController
         $this->guessRepository = new GuessRepository();
     }
 
+    public function authorize(): bool
+    {
+        return !empty($_ENV['ENABLE_GAME_FOR_GUESTS']) || $this->request->user() !== null;
+    }
+
     public function initialData(): IContent
     {
         $mapId = (int) $this->request->query('mapId');
@@ -193,14 +199,6 @@ class GameFlowController
 
         if (!isset($currentPlace)) { // game finished
             $response['finished'] = true;
-
-            // list all players who finished the challenge
-            $response['finishers'] = [];
-            foreach ($this->userInChallengeRepository->getAllByChallengeWithUsers($challenge) as $userInChallenge) {
-                if ($userInChallenge->getCurrentRound() == $currentRound && $userInChallenge->getUser()->getId() != $userId) {
-                    $response['finishers'][] = $userInChallenge->getUser()->getDisplayName();
-                }
-            }
         } else { // continue game
             $response['place'] = [
                 'panoId' => $currentPlace->getPanoIdCached(),
@@ -220,14 +218,15 @@ class GameFlowController
                     }
                 }
             }
+        }
 
         $response['restrictions'] = [
             'timeLimit' => $challenge->getTimeLimit() * 1000,
+            'timeLimitType' => $challenge->getTimeLimitType(),
             'noMove' => $challenge->getNoMove(),
             'noPan' => $challenge->getNoPan(),
             'noZoom' => $challenge->getNoZoom()
         ];
-        }
 
         return $response;
     }

src/Controller/MapAdminController.php

@@ -8,6 +8,7 @@ use MapGuesser\Interfaces\Response\IContent;
 use MapGuesser\PersistentData\Model\Challenge;
 use MapGuesser\PersistentData\Model\Map;
 use MapGuesser\PersistentData\Model\Place;
+use MapGuesser\PersistentData\Model\PlaceInChallenge;
 use MapGuesser\PersistentData\PersistentDataManager;
 use MapGuesser\Repository\ChallengeRepository;
 use MapGuesser\Repository\GuessRepository;
@@ -80,6 +81,7 @@ class MapAdminController implements ISecured
             'mapId' => $mapId,
             'mapName' => $map->getName(),
             'mapDescription' => str_replace('<br>', "\n", $map->getDescription()),
+            'mapUnlisted' => $map->getUnlisted(),
             'bounds' => $map->getBounds()->toArray(),
             'places' => &$places
         ]);
@@ -174,6 +176,9 @@ class MapAdminController implements ISecured
         if (isset($_POST['description'])) {
             $map->setDescription(str_replace(["\n", "\r\n"], '<br>', $_POST['description']));
         }
+        if (isset($_POST['unlisted'])) {
+            $map->setUnlisted((bool)$_POST['unlisted']);
+        }
 
         $this->pdm->saveToDb($map);
 

src/Controller/MapsController.php

@@ -30,12 +30,19 @@ class MapsController
             ['maps', 'bound_north_lat'],
             ['maps', 'bound_east_lng'],
             ['maps', 'area'],
+            ['maps', 'unlisted'],
             new RawExpression('COUNT(places.id) AS num_places')
         ]);
         $select->leftJoin('places', ['places', 'map_id'], '=', ['maps', 'id']);
         $select->groupBy(['maps', 'id']);
         $select->orderBy('name');
 
+        $user = $this->request->user();
+        $isAdmin = $user !== null && $user->hasPermission(IUser::PERMISSION_ADMIN);
+        if (!$isAdmin) {
+            $select->where(['maps', 'unlisted'], '=', false);
+        }
+
         $result = $select->execute();
 
         $maps = [];
@@ -45,11 +52,10 @@ class MapsController
             $maps[] = $map;
         }
 
-        $user = $this->request->user();
         return new HtmlContent('maps', [
             'maps' => $maps,
             'isLoggedIn' => $user !== null,
-            'isAdmin' => $user !== null && $user->hasPermission(IUser::PERMISSION_ADMIN)
+            'isAdmin' => $isAdmin
         ]);
     }
 

src/PersistentData/Model/Map.php

@@ -6,7 +6,7 @@ class Map extends Model
 {
     protected static string $table = 'maps';
 
-    protected static array $fields = ['name', 'description', 'bound_south_lat', 'bound_west_lng', 'bound_north_lat', 'bound_east_lng', 'area'];
+    protected static array $fields = ['name', 'description', 'bound_south_lat', 'bound_west_lng', 'bound_north_lat', 'bound_east_lng', 'area', 'unlisted'];
 
     private string $name = '';
 
@@ -16,6 +16,8 @@ class Map extends Model
 
     private float $area = 0.0;
 
+    private bool $unlisted = false;
+
     public function __construct()
     {
         $this->bounds = Bounds::createDirectly(-90.0, -180.0, 90.0, 180.0);
@@ -61,6 +63,11 @@ class Map extends Model
         $this->area = $area;
     }
 
+    public function setUnlisted(bool $unlisted): void
+    {
+        $this->unlisted = $unlisted;
+    }
+
     public function getName(): string
     {
         return $this->name;
@@ -100,4 +107,9 @@ class Map extends Model
     {
         return $this->area;
     }
+
+    public function getUnlisted(): bool
+    {
+        return $this->unlisted;
+    }
 }

src/Repository/UserInChallengeRepository.php

@@ -57,11 +57,9 @@ class UserInChallengeRepository
         }
 
         // validate token string
-        foreach (str_split($token_str) as $char) {
+        if (!ctype_xdigit($token_str)) {
-            if (!(('0' <= $char && $char <= '9') || ('a' <= $char && $char <= 'f'))) {
             return null;
         }
-        }
         // convert token to int
         $token = hexdec($token_str);
 
@@ -78,6 +76,6 @@ class UserInChallengeRepository
         $select->where('user_id', '=', $userId);
         $select->where('challenge_id', '=', $challenge->getId());
 
-        return $select->count();
+        return $select->count() != 0;
     }
 }

views/admin/map_editor.php

@@ -54,6 +54,9 @@
     <form id="metadataForm" class="marginTop" data-no-submit="true">
         <input class="fullWidth" type="text" name="name" value="<?= $mapName ?>" placeholder="Name of the map">
         <textarea  class="fullWidth marginTop" name="description" rows="4" placeholder="Description of the map"><?= $mapDescription ?></textarea>
+        <div class="marginTop">
+            <input type="checkbox" id="unlisted" name="unlisted" <?= $mapUnlisted ? 'checked' : '' ?>><label for="unlisted">Unlisted</label>
+        </div>
         <div class="right">
             <button class="marginTop marginRight" type="submit">Apply</button><!--
          --><button id="closeMetadataButton" class="gray marginTop" type="button">Close</button>

views/game.php

@@ -30,7 +30,7 @@
 
 @section(subheader)
     <span id="mapName" class="bold">Loading map...</span><!--
- --><span>Round <span id="currentRound" class="bold"></span></span><!--
+ --><span id="roundContainer">Round <span id="currentRound" class="bold"></span></span><!--
  --><span>Score <span id="currentScoreSum" class="bold"></span></span>
 @endsection
 

views/maps.php

@@ -43,35 +43,24 @@ TODO: condition!
         <p class="bold center marginTop marginBottom">OR</p>
         -->
 
-        <div id="restrictions">
+        <div id="restrictions" class="marginTop marginBottom">
             <h3>Optional restrictions</h3>
-            <div>
+            <div class="marginTop">
-                <div>
+                <input type="checkbox" id="timerEnabled" name="timerEnabled" value="timerEnabled" /><label id="timeLimitLabel" for="timerEnabled">Time limit measured in seconds</label>
-                    <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="1800" step="10" value="300" />
             </div>
             <div id="timeLimitType">
-                    Time limit
+                <input class="fullWidth" type="range" id="timeLimit" name="timeLimit" min="10" max="1800" step="10" value="300" />
-                    <input type="radio" id="timeLimitTypeGame" name="timeLimitType" value="game" checked />
+                <input type="radio" id="timeLimitTypeGame" name="timeLimitType" value="game" checked /><label for="timeLimitTypeGame">for the whole game</label>
-                    <label for="timeLimitTypeGame">for the whole game</label>
+                <input class="marginLeft" type="radio" id="timeLimitTypeRound" name="timeLimitType" value="round" /><label for="timeLimitTypeRound">per round</label>
-                    <input type="radio" id="timeLimitTypeRound" name="timeLimitType" value="round" />
-                    <label for="timeLimitTypeRound">per round</label>
             </div>
+            <div class="marginTop">
+                <input type="checkbox" id="noMove" name="noMove" value="noMove" /><label for="noMove">No movement allowed</label>
             </div>
-            <div>
+            <div class="marginTop">
-                <input type="checkbox" id="noMove" name="noMove" value="noMove" />
+                <input type="checkbox" id="noZoom" name="noZoom" value="noZoom" /><label for="noZoom">No zoom allowed</label>
-                <label for="noMove">No movement allowed</label>
             </div>
-            <div>
+            <div class="marginTop">
-                <input type="checkbox" id="noZoom" name="noZoom" value="noZoom" />
+                <input type="checkbox" id="noPan" name="noPan" value="noPan" /><label for="noPan">No camera change allowed</label>
-                <label for="noMove">No zoom allowed</label>
-            </div>
-            <div>
-                <input type="checkbox" id="noPan" name="noPan" value="noPan" />
-                <label for="noPan">No camera change allowed</label>
             </div>
             <input type="hidden" name="mapId" id="challengeMapId" />
         </div>
@@ -86,7 +75,7 @@ TODO: condition!
 @section(main)
     <div id="mapContainer">
         <?php foreach ($maps as $map): ?>
-            <div class="mapItem">
+            <div class="mapItem <?= $map['unlisted'] ? 'unlisted' : '' ?>">
                 <div class="title">
                     <p class="title"><?= $map['name'] ?></p>
                 </div>
@@ -114,6 +103,7 @@ TODO: condition!
                     </div>
                 </div>
                 <div class="buttonContainer">
+                    <?php if (!empty($_ENV['ENABLE_GAME_FOR_GUESTS']) || Container::$request->user()): ?>
                         <?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>
@@ -121,6 +111,9 @@ TODO: condition!
                         <?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; ?>
+                    <?php else: ?>
+                        <a href="/login" class="button fullWidth" title="Play map '<?= $map['name'] ?>'">Play this map</a>
+                    <?php endif; ?>
                 </div>
             </div>
         <?php endforeach; ?>