esoko/mapguesser
esoko/mapguesser
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 18 Wiki Activity

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

Browse Source
This commit is contained in:
Balázs Vigh 2021-05-22 20:54:58 +02:00
parent c965713c9c
commit a5238234d2
3 changed files with 76 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
public/static/css/game.css
View File

@ -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) {

69
public/static/js/game.js
View File

@ -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 () {

15
src/Controller/GameFlowController.php
View File

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