From a5238234d23a448ca5e741aa37b662b757fa2e7d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bal=C3=A1zs=20Vigh?= Date: Sat, 22 May 2021 20:54:58 +0200 Subject: [PATCH] MAPG-235 information of the current restrictions displayed on the ribbon in the top --- public/static/css/game.css | 9 ++-- public/static/js/game.js | 69 ++++++++++++++++++++++++--- src/Controller/GameFlowController.php | 15 +++--- 3 files changed, 76 insertions(+), 17 deletions(-) diff --git a/public/static/css/game.css b/public/static/css/game.css index a5ca714..2970387 100644 --- a/public/static/css/game.css +++ b/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) { diff --git a/public/static/js/game.js b/public/static/js/game.js index 05e03db..2edc43b 100644 --- a/public/static/js/game.js +++ b/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! ' + highscores[1].userName + ' got only ' + highscores[1].score + ' points.'; + summaryInfo.innerHTML = 'You won! ' + highscores[1].userName + ' got only ' + highscores[1].score + ' points.'; } else { - summaryInfo.innerHTML = 'You lost! ' + highscores[0].userName + ' won with ' + highscores[0].score + ' points.'; + summaryInfo.innerHTML = 'You lost! ' + highscores[0].userName + ' won with ' + highscores[0].score + ' points.'; } } 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. Invite your friends by sending them the link.' } } - }, rewriteGoogleLink: function () { diff --git a/src/Controller/GameFlowController.php b/src/Controller/GameFlowController.php index 3b8f620..220c704 100644 --- a/src/Controller/GameFlowController.php +++ b/src/Controller/GameFlowController.php @@ -226,15 +226,16 @@ class GameFlowController implements ISecured } } } - - $response['restrictions'] = [ - 'timeLimit' => $challenge->getTimeLimit() * 1000, - 'noMove' => $challenge->getNoMove(), - 'noPan' => $challenge->getNoPan(), - 'noZoom' => $challenge->getNoZoom() - ]; } + $response['restrictions'] = [ + 'timeLimit' => $challenge->getTimeLimit() * 1000, + 'timeLimitType' => $challenge->getTimeLimitType(), + 'noMove' => $challenge->getNoMove(), + 'noPan' => $challenge->getNoPan(), + 'noZoom' => $challenge->getNoZoom() + ]; + return $response; }