Merge pull request 'feature/MAPG-235-basic-challenge-mode' (#48) from feature/MAPG-235-basic-challenge-mode into develop

Reviewed-on: https://gitea.e5tv.hu/esoko/mapguesser/pulls/48
Reviewed-by: Pőcze Bence <bence@pocze.ch>

.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

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%;
 }
 

public/static/css/maps.css

@@ -75,16 +75,6 @@ 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;

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.'
+                    summaryInfo.innerHTML = 'You are the first to finish. <span class="hideOnNarrowScreen">Invite your friends by sending them the link.</span>'
                 }
 
             }
-
         },
 
         rewriteGoogleLink: function () {

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();
-        while ($this->challengeRepository->getByToken($challengeToken)) {
-            // if a challenge with the same token already exists
-            $challengeToken = rand();
-        }
+        do {
+            // initiliaze or if a challenge with the same token already exists
+            $challengeToken = mt_rand();
+        } while ($this->challengeRepository->getByToken($challengeToken));
 
         $challenge = new Challenge();
         $challenge->setToken($challengeToken);
@@ -202,7 +207,7 @@ class GameController
 
         $room = $this->multiRoomRepository->getByRoomId($roomId);
 
-        if(!isset($room)) {
+        if (!isset($room)) {
             return new JsonContent(['error' => 'game_not_found']);
         }
 
@@ -259,7 +264,7 @@ class GameController
             return new JsonContent(['error' => 'game_not_found']);
         }
 
-        if(!$this->userInChallengeRepository->isUserParticipatingInChallenge($userId, $challenge)) {
+        if (!$this->userInChallengeRepository->isUserParticipatingInChallenge($userId, $challenge)) {
             // new player is joining
             $userInChallenge = new UserInChallenge();
             $userInChallenge->setUserId($userId);

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;
     }
@@ -302,9 +301,9 @@ class GameFlowController
         $session = $this->request->session();
         $userId = $session->get('userId');
 
-        if(isset($userId)) {
+        if (isset($userId)) {
             $userPlayedPlace = $this->userPlayedPlaceRepository->getByUserIdAndPlaceId($userId, $placeId);
-            if(!$userPlayedPlace) {
+            if (!$userPlayedPlace) {
                 $userPlayedPlace = new UserPlayedPlace();
                 $userPlayedPlace->setUserId($userId);
                 $userPlayedPlace->setPlaceId($placeId);
@@ -408,7 +407,7 @@ class GameFlowController
             $response['restrictions']['timeLimit'] = $timeLimit * 1000;
         }
 
-        if(isset($response['history'][$currentRound]['allResults'])) {
+        if (isset($response['history'][$currentRound]['allResults'])) {
             $response['allResults'] = $response['history'][$currentRound]['allResults'];
         }
 

src/Database/Query/Select.php

@@ -261,7 +261,7 @@ class Select
             $queryString .= ' LIMIT ' . $this->limit[1] . ', ' . $this->limit[0];
         }
 
-        if($this->isDerivedTable()) {
+        if ($this->isDerivedTable()) {
             $queryString = '(' . $queryString . ') AS ' . $this->tableAliases[Select::DERIVED_TABLE_KEY];
         }
 
@@ -276,7 +276,7 @@ class Select
             return [(string) $table, $params];
         }
 
-        if($table instanceof Select)
+        if ($table instanceof Select)
         {
             return $table->generateQuery();
         }
@@ -332,7 +332,7 @@ class Select
         $joinQueries = [];
         $params = [];
 
-        foreach($this->joins as $join) {
+        foreach ($this->joins as $join) {
             list($joinQueryFragment, $paramsFragment) = $this->generateTable($join[1], true);
             $joinQueries[] = $join[0] . ' JOIN ' . $joinQueryFragment . ' ON ' . $this->generateColumn($join[2]) . ' ' . $join[3] . ' ' . $this->generateColumn($join[4]);
             $params = array_merge($params, $paramsFragment);

src/PersistentData/Model/Challenge.php

@@ -33,7 +33,7 @@ class Challenge extends Model
 
     public function setTimeLimit(?int $timeLimit): void
     {
-        if(isset($timeLimit)) {
+        if (isset($timeLimit)) {
             $this->timeLimit = $timeLimit;
         }
     }

src/PersistentData/Model/UserInChallenge.php

@@ -49,7 +49,7 @@ class UserInChallenge extends Model
 
     public function setTimeLeft(?int $timeLeft): void
     {
-        if(isset($timeLeft)) {
+        if (isset($timeLeft)) {
             $this->timeLeft = max(0, $timeLeft);
         }
     }

src/Repository/UserInChallengeRepository.php

@@ -57,11 +57,9 @@ class UserInChallengeRepository
         }
 
         // validate token string
-        foreach (str_split($token_str) as $char) {
-            if (!(('0' <= $char && $char <= '9') || ('a' <= $char && $char <= 'f'))) {
+        if (!ctype_xdigit($token_str)) {
             return null;
         }
-        }
         // convert token to int
         $token = hexdec($token_str);
 

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,7 +43,7 @@ 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>
@@ -54,7 +54,7 @@ TODO: condition!
                     <input type="range" id="timeLimit" name="timeLimit" min="10" max="1800" step="10" value="300" />
                 </div>
                 <div id="timeLimitType">
-                    Time limit
+                    <label>Time limit</label>
                     <input type="radio" id="timeLimitTypeGame" name="timeLimitType" value="game" checked />
                     <label for="timeLimitTypeGame">for the whole game</label>
                     <input type="radio" id="timeLimitTypeRound" name="timeLimitType" value="round" />
@@ -67,7 +67,7 @@ TODO: condition!
             </div>
             <div>
                 <input type="checkbox" id="noZoom" name="noZoom" value="noZoom" />
-                <label for="noMove">No zoom allowed</label>
+                <label for="noZoom">No zoom allowed</label>
             </div>
             <div>
                 <input type="checkbox" id="noPan" name="noPan" value="noPan" />
@@ -114,6 +114,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 +122,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; ?>