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

feature/MAPG-235-basic-challenge-mode #48

Merged
balazs merged 43 commits from feature/MAPG-235-basic-challenge-mode into develop 2021-05-28 20:41:09 +02:00
Conversation 0 Commits 43 Files Changed 28 +76 -17
3 changed files with 76 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit a5238234d2 - Show all commits

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);
},
balazs marked this conversation as resolved Outdated
balazs commented 2021-05-23 12:28:47 +02:00
Outdated
Review
Copy Link

I had to create span from javascript, because I didn't know, how else to control the display css attribute from both css (depending on screen size) and javascript (depending on the game type). Javascript overrides the css attribute even for narrow screens. Is there a more elegant solution?

I had to create span from javascript, because I didn't know, how else to control the display css attribute from both css (depending on screen size) and javascript (depending on the game type). Javascript overrides the css attribute even for narrow screens. Is there a more elegant solution?
bence commented 2021-05-27 23:39:14 +02:00
Outdated
Review
Copy Link

It could be solved with a hidden element, for example with class hidden which can be removed by JavaScript when it should be shown (it still can have class hideOnNarrowScreen). But I think it is also a good solution.

It could be solved with a hidden element, for example with class `hidden` which can be removed by JavaScript when it should be shown (it still can have class `hideOnNarrowScreen`). But I think it is also a good solution.
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;
}