feature/MAPG-235-basic-challenge-mode #48
@ -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) {
|
||||
|
@ -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 () {
|
||||
|
@ -226,14 +226,15 @@ class GameFlowController implements ISecured
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$response['restrictions'] = [
|
||||
'timeLimit' => $challenge->getTimeLimit() * 1000,
|
||||
'timeLimitType' => $challenge->getTimeLimitType(),
|
||||
'noMove' => $challenge->getNoMove(),
|
||||
'noPan' => $challenge->getNoPan(),
|
||||
'noZoom' => $challenge->getNoZoom()
|
||||
];
|
||||
}
|
||||
|
||||
return $response;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user