MAPG-235 new challenge can be created and is prepared

database/migrations/structure/20210510_2000_challenge.sql

@@ -16,7 +16,7 @@ CREATE TABLE `user_in_challenge` (
   `round` smallint(5) signed NOT NULL DEFAULT -1,
   `score` int(10) unsigned NOT NULL DEFAULT 0,
   `time_left` int(10) unsigned,
-  `owner` tinyint(1) NOT NULL DEFAULT 0,
+  `is_owner` tinyint(1) NOT NULL DEFAULT 0,
   PRIMARY KEY (`id`),
   KEY `user_id` (`user_id`),
   KEY `challenge_id` (`challenge_id`),

public/static/css/maps.css

@@ -75,6 +75,25 @@ div.mapItem>div.buttonContainer {
     grid-auto-flow: column;
 }
 
+#restrictions {
+    margin-top: 1em;
+    font-family: 'Roboto', sans-serif;
+}
+
+#restrictions h3 {
+    font-weight: 500;
+}
+
+#restrictions input[type=checkbox] {
+    height: auto;
+    margin: 0.5em;
+}
+
+#restrictions input[type=range] {
+    height: 1.5em;
+    margin-left: 2em;
+}
+
 @media screen and (min-width: 1504px) {
     #mapContainer {
         grid-template-columns: auto auto auto auto;

public/static/js/game.js

@@ -1,10 +1,13 @@
 'use strict';
 
+const GameType = Object.freeze({'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2});
+
 (function () {
     var Game = {
         NUMBER_OF_ROUNDS: 5,
         MAX_SCORE: 1000,
 
+        type: GameType.SINGLE,
         mapBounds: null,
         multi: { token: null, owner: false },
         rounds: [],
@@ -211,6 +214,19 @@
             }
         },
 
+        getGameIdentifier: function() {
+            switch(Game.type) {
+                case GameType.SINGLE:
+                    return '/game/' + mapId;
+                case GameType.MULTI:
+                    return '/multiGame/' + roomId;
+                case GameType.CHALLENGE:
+                    return '/challenge/' + challengeToken;
+                default:
+                    return '/game/' + mapId;
+            }
+        },
+
         prepare: function () {
             var data = new FormData();
             var userNames;
@@ -226,7 +242,7 @@
             }
 
             document.getElementById('loading').style.visibility = 'visible';
-            var url = roomId ? '/multiGame/' + roomId + '/prepare.json' : '/game/' + mapId + '/prepare.json';
+            var url = Game.getGameIdentifier() + '/prepare.json';
             MapGuesser.httpRequest('POST', url, function () {
                 document.getElementById('loading').style.visibility = 'hidden';
 
@@ -269,7 +285,7 @@
             }
 
             document.getElementById('loading').style.visibility = 'visible';
-            MapGuesser.httpRequest('POST', '/game/' + mapId + '/initialData.json', function () {
+            MapGuesser.httpRequest('POST', Game.getGameIdentifier() + '/initialData.json', function () {
                 document.getElementById('loading').style.visibility = 'hidden';
                 document.getElementById('panoCover').style.visibility = 'hidden';
 
@@ -876,6 +892,12 @@
         document.getElementById("compass").style.transform = "translateY(-50%) rotate(" + heading + "deg)";
     });
 
+    if(roomId !== null) {
+        Game.type = GameType.MULTI;
+    } else if(challengeToken !== null) {
+        Game.type = GameType.CHALLENGE;
+    }
+
     if (COOKIES_CONSENT) {
         Game.prepare();
     }

public/static/js/maps.js

@@ -85,10 +85,40 @@
         window.location.href = '/multiGame/' + this.elements.roomId.value;
     };
 
+    document.getElementById('challengeForm').onsubmit = function (e) {
+        e.preventDefault();
+
+        var url = '/challenge/create.json';
+        var formData = new FormData(this);
+
+        document.getElementById('loading').style.visibility = 'visible';
+        MapGuesser.httpRequest('POST', url, function() {
+            document.getElementById('loading').style.visibility = 'hidden';
+
+            if (this.response.error) {
+                Game.handleErrorResponse(this.response.error);
+                return;
+            }
+
+            window.location.href = '/challenge/' + this.response.challengeToken;
+
+        }, formData);
+    };
+
     document.getElementById('multiButton').onclick = function () {
         MapGuesser.showModal('multi');
         document.getElementById('createNewRoomButton').href = '/multiGame/new/' + this.dataset.mapId;
         document.getElementById('multiForm').elements.roomId.select();
+        document.getElementById('playMode').style.visibility = 'hidden';
+    }
+
+    document.getElementById('challengeButton').onclick = function () {
+        MapGuesser.showModal('challenge');
+        document.getElementById('createNewChallengeButton').href = '/challenge/new/' + this.dataset.mapId;
+        document.getElementById('playMode').style.visibility = 'hidden';
+        
+        var timeLimit = document.getElementById('timeLimit').value;
+        document.getElementById('timeLimitLabel').innerText = 'Time limit of ' + timeLimit + ' seconds per round';
     }
 
     document.getElementById('closePlayModeButton').onclick = function () {
@@ -99,6 +129,10 @@
         MapGuesser.hideModal();
     };
 
+    document.getElementById('closeChallengeButton').onclick = function () {
+        MapGuesser.hideModal();
+    }
+
     var buttons = document.getElementById('mapContainer').getElementsByClassName('playButton');
     for (var i = 0; i < buttons.length; i++) {
         var button = buttons[i];
@@ -107,6 +141,13 @@
             MapGuesser.showModal('playMode');
             document.getElementById('singleButton').href = '/game/' + this.dataset.mapId;
             document.getElementById('multiButton').dataset.mapId = this.dataset.mapId;
+            document.getElementById('challengeMapId').value = this.dataset.mapId;
         };
     }
+
+    document.getElementById('timeLimit').oninput = function () {
+        var timeLimit = document.getElementById('timeLimit').value;
+        document.getElementById('timeLimitLabel').innerText = 'Time limit of ' + timeLimit + ' seconds per round';
+        document.getElementById('timerEnabled').checked = true;
+    }
 })();

src/Controller/GameController.php

@@ -8,14 +8,22 @@ use MapGuesser\Response\JsonContent;
 use MapGuesser\Interfaces\Response\IContent;
 use MapGuesser\Interfaces\Response\IRedirect;
 use MapGuesser\Multi\MultiConnector;
+use MapGuesser\PersistentData\Model\Challenge;
 use MapGuesser\PersistentData\Model\MultiRoom;
+use MapGuesser\PersistentData\Model\PlaceInChallenge;
+use MapGuesser\PersistentData\Model\UserInChallenge;
 use MapGuesser\PersistentData\PersistentDataManager;
+use MapGuesser\Repository\ChallengeRepository;
 use MapGuesser\Repository\MapRepository;
 use MapGuesser\Repository\MultiRoomRepository;
+use MapGuesser\Repository\PlaceRepository;
+use MapGuesser\Repository\UserInChallengeRepository;
 use MapGuesser\Response\Redirect;
 
 class GameController
 {
+    const NUMBER_OF_ROUNDS = 5;
+
     private IRequest $request;
 
     private PersistentDataManager $pdm;
@@ -26,6 +34,12 @@ class GameController
 
     private MapRepository $mapRepository;
 
+    private PlaceRepository $placeRepository;
+
+    private ChallengeRepository $challengeRepository;
+
+    private UserInChallengeRepository $userInChallengeRepository;
+
     public function __construct(IRequest $request)
     {
         $this->request = $request;
@@ -33,6 +47,9 @@ class GameController
         $this->multiConnector = new MultiConnector();
         $this->multiRoomRepository = new MultiRoomRepository();
         $this->mapRepository = new MapRepository();
+        $this->placeRepository = new PlaceRepository();
+        $this->challengeRepository = new ChallengeRepository();
+        $this->userInChallengeRepository = new UserInChallengeRepository();
     }
 
     public function getGame(): IContent
@@ -79,6 +96,69 @@ class GameController
         return new HtmlContent('game', ['roomId' => $roomId]);
     }
 
+    public function getChallenge(): IContent
+    {
+        $challengeToken = $this->request->query('challengeToken');
+
+        return new HtmlContent('game', ['challengeToken' => $challengeToken]);
+    }
+
+    public function createNewChallenge(): IContent
+    {
+        // create Challenge
+        $challengeToken = rand();
+
+        $challenge = new Challenge();
+        $challenge->setToken($challengeToken);
+        $challenge->setCreatedDate(new DateTime());
+        
+        if($this->request->post('timerEnabled') !== null && $this->request->post('timeLimit') !== null) {
+            $challenge->setTimerSec($this->request->post('timeLimit'));
+        }
+        if($this->request->post('noMove') !== null) {
+            $challenge->setNoMove(true);
+        }
+        if($this->request->post('noPan') !== null) {
+            $challenge->setNoPan(true);
+        }
+        if($this->request->post('noZoom') !== null) {
+            $challenge->setNoZoom(true);
+        }
+
+        $this->pdm->saveToDb($challenge);
+
+        // save owner/creator
+
+        $session = $this->request->session();
+        $userId = $session->get('userId');
+
+        $userInChallenge = new UserInChallenge();
+        $userInChallenge->setUserId($userId);
+        $userInChallenge->setChallenge($challenge);
+        $userInChallenge->setTimeLeft($challenge->getTimerSec());
+        $userInChallenge->setIsOwner(true);
+
+        $this->pdm->saveToDb($userInChallenge);
+
+        // select places
+
+        $mapId = (int) $this->request->post('mapId');
+        $map = $this->mapRepository->getById($mapId);
+
+        $places = $this->placeRepository->getRandomNPlaces($mapId, static::NUMBER_OF_ROUNDS, $userId);
+
+        $order = 1;
+        foreach ($places as $place) {
+            $placeInChallenge = new PlaceInChallenge();
+            $placeInChallenge->setPlace($place);
+            $placeInChallenge->setChallenge($challenge);
+            $placeInChallenge->setOrder($order++);
+            $this->pdm->saveToDb($placeInChallenge);
+        }
+
+        return new JsonContent(['challengeToken' => dechex($challengeToken)]);
+    }
+
     public function prepareGame(): IContent
     {
         $mapId = (int) $this->request->query('mapId');
@@ -154,6 +234,28 @@ class GameController
         ]);
     }
 
+    public function prepareChallenge(): IContent
+    {
+        $challengeToken_str = $this->request->query('challengeToken');
+        $session = $this->request->session();
+        $userId = $session->get('userId');
+        $challenge = $this->challengeRepository->getByTokenStr($challengeToken_str);
+
+        if(!$this->userInChallengeRepository->isUserParticipatingInChallenge($userId, $challenge)) {
+            $userInChallenge = new UserInChallenge();
+            $userInChallenge->setUserId($userId);
+            $userInChallenge->setTimeLeft($challenge->getTimerSec());
+        }
+
+        $map = $this->mapRepository->getByChallenge($challenge);
+
+        return new JsonContent([
+            'mapId' => $map->getId(),
+            'mapName' => $map->getName(),
+            'bounds' => $map->getBounds()->toArray()
+        ]);
+    }
+
     private function getMultiToken(string $roomId): string
     {
         $session = $this->request->session();

src/Database/Query/Select.php

@@ -323,6 +323,10 @@ class Select
             $value = $this->generateColumn($value);
         });
 
+        if(count($columns) > 0 && $columns[0] == Utils::backtick('id')) {
+            $columns[0] = Utils::backtick($this->table) . '.' . Utils::backtick('id');
+        }
+
         return implode(',', $columns);
     }
 

src/PersistentData/Model/Challenge.php

@@ -4,7 +4,7 @@ use DateTime;
 
 class Challenge extends Model
 {
-    protected static string $table = 'challenge';
+    protected static string $table = 'challenges';
 
     protected static array $fields = ['token', 'timer_sec', 'no_move', 'no_pan', 'no_zoom', 'created'];
 
@@ -12,13 +12,13 @@ class Challenge extends Model
 
     private int $token;
 
-    private int $timerSec;
+    private ?int $timerSec = null;
 
-    private bool $noMove;
+    private bool $noMove = false;
 
-    private bool $noPan;
+    private bool $noPan = false;
 
-    private bool $noZoom;
+    private bool $noZoom = false;
 
     private DateTime $created;
 
@@ -27,10 +27,12 @@ class Challenge extends Model
         $this->token = $token;
     }
 
-    public function setTimerSec(int $timerSec): void
+    public function setTimerSec(?int $timerSec): void
     {
+        if(isset($timerSec)) {
             $this->timerSec = $timerSec;
         }
+    }
 
     public function setNoMove(bool $noMove): void
     {
@@ -62,7 +64,7 @@ class Challenge extends Model
         return $this->token;
     }
 
-    public function getTimerSec(): int
+    public function getTimerSec(): ?int
     {
         return $this->timerSec;
     }

src/PersistentData/Model/UserInChallenge.php

@@ -16,13 +16,13 @@ class UserInChallenge extends Model
 
     private ?int $challengeId = null;
 
-    private int $round;
+    private int $round = -1;
 
-    private int $score;
+    private int $score = 0;
 
-    private int $timeLeft;
+    private ?int $timeLeft = null;
 
-    private bool $isOwner;
+    private bool $isOwner = false;
 
     public function setUser(User $user): void
     {
@@ -54,10 +54,12 @@ class UserInChallenge extends Model
         $this->score = $score;
     }
 
-    public function setTimeLeft(int $timeLeft): void
+    public function setTimeLeft(?int $timeLeft): void
     {
+        if(isset($timeLeft)) {
             $this->timeLeft = $timeLeft;
         }
+    }
 
     public function setIsOwner(bool $isOwner): void
     {

src/Repository/ChallengeRepository.php

@@ -28,6 +28,13 @@ class ChallengeRepository
         return $this->pdm->selectFromDb($select, Challenge::class);
     }
 
+    public function getByTokenStr(string $token_str): ?Challenge
+    {
+        $token = hexdec($token_str);
+
+        return $this->getByToken($token);
+    }
+
     public function getAllByParticipant(User $user): Generator
     {
         $select = new Select(\Container::$dbConnection);

src/Repository/MapRepository.php

@@ -1,5 +1,7 @@
 <?php namespace MapGuesser\Repository;
 
+use MapGuesser\Database\Query\Select;
+use MapGuesser\PersistentData\Model\Challenge;
 use MapGuesser\PersistentData\Model\Map;
 use MapGuesser\PersistentData\PersistentDataManager;
 
@@ -16,4 +18,15 @@ class MapRepository
     {
         return $this->pdm->selectFromDbById($mapId, Map::class);
     }
+
+    public function getByChallenge(Challenge $challenge): ?Map
+    {
+        $select = new Select(\Container::$dbConnection);
+        $select->innerJoin('places', ['maps', 'id'], '=', ['places', 'map_id']);
+        $select->innerJoin('place_in_challenge', ['places', 'id'], '=', ['place_in_challenge', 'place_id']);
+        $select->where('challenge_id', '=', $challenge->getId());
+        $select->limit(1);
+
+        return $this->pdm->selectFromDb($select, Map::class);
+    }
 }

src/Repository/UserInChallengeRepository.php

@@ -31,4 +31,13 @@ class UserInChallengeRepository
 
         yield from $this->pdm->selectMultipleFromDb($select, UserInChallenge::class);
     }
+
+    public function isUserParticipatingInChallenge(int $userId, Challenge $challenge): bool
+    {
+        $select = new Select(\Container::$dbConnection, 'user_in_challenge');
+        $select->where('user_id', '=', $userId);
+        $select->where('challenge_id', '=', $challenge->getId());
+
+        return $select->count();
+    }
 }

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)

web.php

@@ -62,6 +62,13 @@ Container::$routeCollection->group('multiGame', function (MapGuesser\Routing\Rou
     $routeCollection->post('multiGame.nextRound-json', '{roomId}/nextRound.json', [MapGuesser\Controller\GameFlowController::class, 'multiNextRound']);
     $routeCollection->post('multiGame.guess-json', '{roomId}/guess.json', [MapGuesser\Controller\GameFlowController::class, 'multiGuess']);
 });
+Container::$routeCollection->group('challenge', function (MapGuesser\Routing\RouteCollection $routeCollection) {
+    $routeCollection->post('challenge.create', 'create.json', [\MapGuesser\Controller\GameController::class, 'createNewChallenge']);
+    $routeCollection->get('challenge', '{challengeToken}', [MapGuesser\Controller\GameController::class, 'getChallenge']);
+    $routeCollection->post('challenge.prepare-json', '{challengeToken}/prepare.json', [MapGuesser\Controller\GameController::class, 'prepareChallenge']);
+    $routeCollection->post('challenge.initialData-json', '{challengeToken}/initialData.json', [MapGuesser\Controller\GameFlowController::class, 'challengeInitialData']);
+    $routeCollection->post('challenge.guess-json', '{challengeToken}/guess.json', [MapGuesser\Controller\GameFlowController::class, 'challengeGuess']);
+});
 Container::$routeCollection->group('admin', function (MapGuesser\Routing\RouteCollection $routeCollection) {
     $routeCollection->get('admin.mapEditor', 'mapEditor/{mapId?}', [MapGuesser\Controller\MapAdminController::class, 'getMapEditor']);
     $routeCollection->get('admin.place', 'place.json/{placeId}', [MapGuesser\Controller\MapAdminController::class, 'getPlace']);