MAPG-235 highscores added to the end of challenge

public/static/css/game.css

@@ -168,6 +168,37 @@
     display: none;
 }
 
+#highscoresTable {
+    margin: 1em;
+    border-collapse: collapse;
+    width: 90%;
+}
+
+#highscoresTable td, #highscoresTable th {
+    border: 1px solid #ddd;
+    padding: 8px;
+}
+
+#highscoresTable tr:nth-child(even) {
+    background-color: #f2f2f2;
+}
+
+#highscoresTable tr:hover {
+    background-color: #ddd;
+}
+
+#highscoresTable th {
+    padding-top: 12px;
+    padding-bottom: 12px;
+    text-align: left;
+    background-color: #e8a349;
+    color: white;
+}
+
+#highscoresTable tr.ownPlayer {
+    font-weight: 500;
+}
+
 @media screen and (max-width: 599px) {
     #mapName {
         display: none;
@@ -195,6 +226,9 @@
         bottom: 25px;
         left: 10px;
     }
+    .hideOnMobile {
+        display: none;
+    }
 }
 
 @media screen and (min-width: 600px) {

public/static/css/mapguesser.css

@@ -31,7 +31,7 @@ main {
     color: #ffffff;
 }
 
-p, h1, h2, input, textarea, select, button, a {
+p, h1, h2, input, textarea, select, button, a, table {
     font-family: 'Roboto', sans-serif;
 }
 

public/static/css/maps.css

@@ -93,6 +93,7 @@ div.mapItem>div.buttonContainer {
 #restrictions input[type=range] {
     height: 1.5em;
     margin-left: 2em;
+    width: 70%;
 }
 
 #timeLimitType {

public/static/js/game.js

@@ -21,6 +21,7 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
         googleLink: null,
         history: [],
         restrictions: null,
+        finishers: null,
 
         readyToContinue: true,
         timeoutEnd: null,
@@ -296,7 +297,7 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
                     return;
                 }
 
-                Game.loadHistory(this.response.history);
+                Game.loadHistory(this.response);
 
                 if (this.response.finished) {
 
@@ -334,13 +335,14 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
             }
 
             if (Game.restrictions.timeLimit) {
-                Game.startCountdown(Game.restrictions.timeLimit, function() {
+                Game.startCountdown(Game.restrictions.timeLimit, function () {
                     Game.guess();
                 });
             }
         },
 
         disableRestrictions: function () {
+
             Game.panorama.setOptions({
                 clickToGo: true,
                 linksControl: true,
@@ -350,6 +352,7 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
             document.getElementById('panningBlockerCover').style.display = null;
 
             Game.startCountdown(0);
+            Game.timeoutEnd = null;
         },
 
         transitToResultMap: function () {
@@ -387,11 +390,11 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
             }
         },
 
-        loadHistory: function (history) {
+        loadHistory: function (response) {
-            if (!history)
+            if (!response.history)
                 return;
 
-            Game.history = history;
+            Game.history = response.history;
 
             for (var i = 0; i < Game.rounds.length; ++i) {
                 var round = Game.rounds[i];
@@ -410,6 +413,7 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
             }
             Game.rounds = [];
 
+            Game.scoreSum = 0;
             for (var i = 0; i < Game.history.length; ++i) {
                 var round = Game.history[i];
 
@@ -417,7 +421,7 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
                     Game.rounds.push({ position: round.position, guessPosition: round.result.guessPosition, realMarker: null, guessMarkers: [] });
                     Game.addPositionToResultMap(true);
                     if (round.result.guessPosition) {
-                        Game.addGuessPositionToResultMap(round.result.guessPosition, null, true);
+                        Game.addGuessPositionToResultMap(round.result.guessPosition, round.result, true);
                     }
                     Game.scoreSum += round.result.score;
 
@@ -432,6 +436,10 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
                     }
                 }
             }
+
+            if (response.finishers) {
+                Game.finishers = new Set(response.finishers);
+            }
         },
 
         reset: function () {
@@ -463,6 +471,7 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
             distanceInfo.children[0].style.display = null;
             distanceInfo.children[1].style.display = null;
             distanceInfo.children[2].style.display = null;
+            document.getElementById('summaryInfo').innerHTML = "Game finished."
             var scoreInfo = document.getElementById('scoreInfo');
             scoreInfo.children[0].style.display = null;
             scoreInfo.children[1].style.display = null;
@@ -481,6 +490,9 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
 
             document.getElementById('panningBlockerCover').style.display = null;
 
+            Game.history = [];
+            Game.finishers = null;
+
             Game.initialize();
         },
 
@@ -589,7 +601,7 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
             resultBounds.extend(position);
 
             if (guessPosition) {
-                Game.addGuessPositionToResultMap(guessPosition);
+                Game.addGuessPositionToResultMap(guessPosition, result);
                 resultBounds.extend(guessPosition);
             }
 
@@ -649,11 +661,16 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
         },
 
         guess: function () {
-            
-            Game.disableRestrictions();
 
             var data = new FormData();
 
+            if (Game.timeoutEnd) {
+                var timeLeft = Math.ceil((Game.timeoutEnd - new Date()) / 1000);
+                data.append('timeLeft', timeLeft);
+            }
+
+            Game.disableRestrictions();
+
             if (Game.guessMarker) {
                 var guessPosition = Game.guessMarker.getPosition().toJSON();
                 Game.rounds[Game.rounds.length - 1].guessPosition = guessPosition;
@@ -675,7 +692,7 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
                     return;
                 }
 
-                Game.history = this.response.history;
+                Game.loadHistory(this.response);
                 Game.restrictions = this.response.restrictions;
 
                 Game.receiveResult(this.response.position, guessPosition, this.response.result, this.response.allResults);
@@ -718,8 +735,8 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
             var position = round.position;
 
             var guessMarker = { marker: null, line: null, info: null };
-            var markerSvg = result ? 'marker-gray-empty.svg' : 'marker-blue-empty.svg';
+            var markerSvg = result && result.userName ? 'marker-gray-empty.svg' : 'marker-blue-empty.svg';
-            var markerLabel = result ? result.userName.charAt(0).toUpperCase() : '?';
+            var markerLabel = result && result.userName ? result.userName.charAt(0).toUpperCase() : '?';
 
             guessMarker.marker = new google.maps.Marker({
                 map: Game.map,
@@ -769,8 +786,9 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
             });
 
             if (result) {
+                const userName = result.userName ? result.userName : 'me';
                 guessMarker.info = new google.maps.InfoWindow({
-                    content: '<p class="small bold">' + result.userName + '</p>' +
+                    content: '<p class="small bold">' + userName + '</p>' +
                         '<p class="small">' + Util.printDistanceForHuman(result.distance) + ' | ' + result.score + ' points</p>',
                 });
 
@@ -797,6 +815,31 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
             return { width: percent + '%', backgroundColor: color };
         },
 
+        calculateHighScores: function () {
+
+            var highscores = new Map();
+            highscores.set('me', Game.scoreSum);
+
+            for (var i = 0; i < Game.history.length; ++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);
+                            }
+                        }
+                    }
+                }
+            }
+
+            var sortedHighscores = Array.from(highscores, ([userName, score]) => ({ 'userName': userName, 'score': score }))
+                .sort(function (resultA, resultB) { return resultB.score - resultA.score });
+            return sortedHighscores;
+        },
+
         showSummary: function () {
             var distanceInfo = document.getElementById('distanceInfo');
             distanceInfo.children[0].style.display = 'none';
@@ -856,6 +899,44 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
             var scoreBar = document.getElementById('scoreBar');
             scoreBar.style.backgroundColor = scoreBarProperties.backgroundColor;
             scoreBar.style.width = scoreBarProperties.width;
+
+            if (Game.type == GameType.CHALLENGE) {
+                var highscores = this.calculateHighScores();
+                var summaryInfo = document.getElementById('summaryInfo');
+
+                if (highscores.length > 2) {
+                    var table = document.getElementById('highscoresTable');
+                    for (const result of highscores) {
+                        var userName = document.createElement('td');
+                        userName.innerHTML = result.userName;
+                        var score = document.createElement('td');
+                        score.innerHTML = result.score;
+                        var line = document.createElement('tr');
+                        line.appendChild(userName);
+                        line.appendChild(score);
+                        table.appendChild(line);
+
+                        if (result.userName === 'me') {
+                            line.setAttribute('class', 'ownPlayer');
+                        }
+                    }
+
+                    MapGuesser.showModal('highscores');
+                } 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>';
+                    } else {
+                        summaryInfo.innerHTML = 'You lost! <span class="hideOnMobile">' + 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.'
+                }
+
+            }
+
         },
 
         rewriteGoogleLink: function () {
@@ -1103,4 +1184,8 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
     document.getElementById('compassContainer').onclick = function () {
         Game.panorama.setPov({ heading: 0, pitch: Game.panorama.getPov().pitch });
     }
+
+    document.getElementById('closeHighscoresButton').onclick = function () {
+        MapGuesser.hideModal();
+    };
 })();

public/static/js/maps.js

@@ -65,6 +65,32 @@
         }
     };
 
+    var Util = {
+        printTimeForHuman: function (time) {
+            const minutes = Math.floor(time / 60);
+            const seconds = time % 60;
+            var time_str = ''; 
+
+            if (minutes == 1) {
+                time_str += '1 minute';
+            } else if (minutes > 1) {
+                time_str += minutes + ' minutes';
+            }
+
+            if (minutes > 0 && seconds > 0) {
+                time_str += ' and ';
+            }
+
+            if (seconds == 1) {
+                time_str += '1 second';
+            } else if (seconds > 1) {
+                time_str += seconds + ' seconds';
+            }
+
+            return time_str;
+        }
+    };
+
     Maps.addStaticMaps();
 
     Maps.initializeDescriptionDivs();
@@ -119,7 +145,7 @@
             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('timeLimitLabel').innerText = 'Time limit of ' + Util.printTimeForHuman(timeLimit);
         };
     }
 
@@ -149,7 +175,7 @@
 
     document.getElementById('timeLimit').oninput = function () {
         var timeLimit = document.getElementById('timeLimit').value;
-        document.getElementById('timeLimitLabel').innerText = 'Time limit of ' + timeLimit + ' seconds per round';
+        document.getElementById('timeLimitLabel').innerText = 'Time limit of ' + Util.printTimeForHuman(timeLimit);
         document.getElementById('timerEnabled').checked = true;
     }
 })();

src/Controller/GameFlowController.php

@@ -149,6 +149,7 @@ class GameFlowController
     {
         $currentPlace = $this->placeRepository->getByRoundInChallenge($challenge, $currentRound);
         
+        // if the last round was played ($currentPlace == null) or history is explicitly requested (for initializing)
         if (!isset($currentPlace) || $withHistory) {
 
             $withRelations = [User::class, PlaceInChallenge::class, Place::class];
@@ -192,6 +193,14 @@ 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(),
@@ -239,6 +248,11 @@ class GameFlowController
 
         $response = $this->prepareChallengeResponse($userId, $challenge, $currentRound, true);
 
+        if ($challenge->getTimeLimitType() === 'game' && $challenge->getTimeLimit() !== null && $userInChallenge->getCurrentRound() > 0) {
+            $timeLimit = max(10, $userInChallenge->getTimeLeft());
+            $response['restrictions']['timeLimit'] = $timeLimit * 1000;
+        } 
+
         return new JsonContent($response);
     }
 
@@ -381,9 +395,19 @@ class GameFlowController
             $response['result'] = ['distance' => null, 'score' => 0];
         }
 
+        // save user relevant state of challenge
         $userInChallenge->setCurrentRound($nextRound);
+        $timeLeft = $this->request->post('timeLeft');
+        if (isset($timeLeft)) {
+            $userInChallenge->setTimeLeft(intval($timeLeft));
+        }
         $this->pdm->saveToDb($userInChallenge);
 
+        if ($challenge->getTimeLimitType() === 'game' && isset($timeLeft)) {
+            $timeLimit = max(10, intval($timeLeft));
+            $response['restrictions']['timeLimit'] = $timeLimit * 1000;
+        }
+
         if(isset($response['history'][$currentRound]['allResults'])) {
             $response['allResults'] = $response['history'][$currentRound]['allResults'];
         }

src/PersistentData/Model/UserInChallenge.php

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

src/Repository/UserInChallengeRepository.php

@@ -32,6 +32,14 @@ class UserInChallengeRepository
         yield from $this->pdm->selectMultipleFromDb($select, UserInChallenge::class);
     }
 
+    public function getAllByChallengeWithUsers(Challenge $challenge) : Generator
+    {
+        $select = new Select(\Container::$dbConnection);
+        $select->where('challenge_id', '=', $challenge->getId());
+
+        yield from $this->pdm->selectMultipleFromDb($select, UserInChallenge::class, true, [User::class]);
+    }
+
     public function getByUserIdAndChallenge(int $userId, Challenge $challenge): ?UserInChallenge
     {
         $select = new Select(\Container::$dbConnection);

views/game.php

@@ -12,6 +12,20 @@
     <div id="players" class="marginTop"></div>
     <button id="startMultiGameButton" class="button fullWidth marginTop green">Start game</button>
 </div>
+<div id="highscores" class="modal">
+    <h2>Highscores</h2>
+    <div>
+        <table id="highscoresTable">
+            <tr>
+                <th>Player</th>
+                <th>Score</th>
+            </tr>
+        </table>
+    </div>
+    <div class="right">
+        <button id="closeHighscoresButton" class="gray marginTop" type="button">Close</button>
+    </div>
+</div>
 @endsection
 
 @section(subheader)
@@ -42,7 +56,7 @@
             <div id="distanceInfo">
                 <p>You were <span id="distance" class="bold"></span> close.</p>
                 <p>You didn't guess in this round.</p>
-                <p class="bold">Game finished.</p>
+                <p id="summaryInfo" class="bold">Game finished.</p>
             </div>
             <div id="scoreInfo">
                 <p>You earned <span id="score" class="bold"></span> points.</p>

views/maps.php

@@ -51,7 +51,7 @@ TODO: condition!
                     <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" />
+                    <input type="range" id="timeLimit" name="timeLimit" min="10" max="1800" step="10" value="300" />
                 </div>
                 <div id="timeLimitType">
                     Time limit