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