MAPG-235 information of the current restrictions displayed on the ribbon in the top

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

.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/js/game.js

@@ -299,6 +299,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 +309,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 +340,47 @@ 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');
+                }
+            }
+
+            // 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 +397,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') {
@@ -487,6 +537,7 @@ 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;
 
@@ -900,6 +951,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 +982,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');

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');
@@ -220,14 +226,15 @@ class GameFlowController
                     }
                 }
             }
+        }
 
         $response['restrictions'] = [
             'timeLimit' => $challenge->getTimeLimit() * 1000,
+            'timeLimitType' => $challenge->getTimeLimitType(),
             'noMove' => $challenge->getNoMove(),
             'noPan' => $challenge->getNoPan(),
             'noZoom' => $challenge->getNoZoom()
         ];
-        }
 
         return $response;
     }

views/maps.php

@@ -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; ?>