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 +94 -122
1 changed files with 94 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 069c6b37c8 - Show all commits

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

@ -295,72 +295,110 @@ const GameType = Object.freeze({'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2});
return; return;
} }
Game.history = this.response.history; Game.loadHistory(this.response.history);
if (this.response.history !== undefined) {
for (var i = 0; i < this.response.history.length; ++i) {
var round = this.response.history[i];
if (round.result) {
Game.rounds.push({ position: round.position, guessPosition: round.result.guessPosition, realMarker: null, guessMarkers: [] });
Game.addPositionToResultMap(true);
if (round.result.guessPosition) {
Game.addGuessPositionToResultMap(round.result.guessPosition, null, true);
}
Game.scoreSum += round.result.score;
if (round.allResults !== undefined) {
for (var j = 0; j < round.allResults.length; ++j) {
var result = round.allResults[j];
if (result.guessPosition) {
Game.addGuessPositionToResultMap(result.guessPosition, result, true);
}
}
}
}
}
}
if (this.response.finished) { if (this.response.finished) {
// TODO: refactor - it is necessary for mobile Game.transitToResultMap();
if (window.getComputedStyle(document.getElementById('guess')).visibility === 'hidden') {
document.getElementById('showGuessButton').click();
}
if (Game.adaptGuess) {
document.getElementById('guess').classList.remove('adapt');
}
if (Game.guessMarker) {
Game.guessMarker.setMap(null);
Game.guessMarker = null;
}
document.getElementById('guess').classList.add('result');
Game.map.setOptions({
draggableCursor: 'grab'
});
Game.showSummary(); Game.showSummary();
document.getElementById('continueButton').style.display = 'none'; document.getElementById('continueButton').style.display = 'none';
return;
}
Game.panoId = this.response.place.panoId;
Game.pov = this.response.place.pov; } else {
Game.panoId = this.response.place.panoId;
Game.pov = this.response.place.pov;
Game.startNewRound();
}
document.getElementById('currentRound').innerHTML = String(Game.rounds.length) + '/' + String(Game.NUMBER_OF_ROUNDS); document.getElementById('currentRound').innerHTML = String(Game.rounds.length) + '/' + String(Game.NUMBER_OF_ROUNDS);
document.getElementById('currentScoreSum').innerHTML = String(Game.scoreSum) + '/' + String(Game.rounds.length * Game.MAX_SCORE); document.getElementById('currentScoreSum').innerHTML = String(Game.scoreSum) + '/' + String(Game.rounds.length * Game.MAX_SCORE);
Game.startNewRound();
}); });
}, },
transitToResultMap: function() {
// TODO: refactor - it is necessary for mobile
if (window.getComputedStyle(document.getElementById('guess')).visibility === 'hidden') {
document.getElementById('showGuessButton').click();
}
if (Game.adaptGuess) {
document.getElementById('guess').classList.remove('adapt');
}
if (Game.guessMarker) {
Game.guessMarker.setMap(null);
Game.guessMarker = null;
}
document.getElementById('guess').classList.add('result');
Game.map.setOptions({
draggableCursor: 'grab'
});
if (Game.rounds.length === Game.NUMBER_OF_ROUNDS) {
document.getElementById('continueButton').style.display = 'none';
document.getElementById('showSummaryButton').style.display = 'block';
} else if (Game.type == GameType.MULTI) {
if (Game.multi.owner) {
if (!Game.readyToContinue) {
document.getElementById('continueButton').disabled = true;
}
} else {
document.getElementById('continueButton').style.display = 'none';
}
}
},
loadHistory: function (history) {
if(!history)
return;
Game.history = history;
for (var i = 0; i < Game.rounds.length; ++i) {
var round = Game.rounds[i];
if (round.realMarker) {
round.realMarker.setMap(null);
}
for (var j = 0; j < round.guessMarkers.length; ++j) {
var guessMarker = round.guessMarkers[j];
guessMarker.marker.setMap(null);
guessMarker.line.setMap(null);
if (guessMarker.info) {
guessMarker.info.close();
}
}
}
Game.rounds = [];
for (var i = 0; i < Game.history.length; ++i) {
var round = Game.history[i];
if (round.result) {
Game.rounds.push({ position: round.position, guessPosition: round.result.guessPosition, realMarker: null, guessMarkers: [] });
Game.addPositionToResultMap(true);
if (round.result.guessPosition) {
Game.addGuessPositionToResultMap(round.result.guessPosition, null, true);
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.
}
Game.scoreSum += round.result.score;
if(round.allResults !== undefined) {
for (var j = 0; j < round.allResults.length; ++j) {
var result = round.allResults[j];
if (result.guessPosition) {
Game.addGuessPositionToResultMap(result.guessPosition, result, true);
}
}
}
}
}
},
reset: function () { reset: function () {
if (Game.guessMarker) { if (Game.guessMarker) {
Game.guessMarker.setMap(null); Game.guessMarker.setMap(null);
@ -542,25 +580,9 @@ const GameType = Object.freeze({'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2});
}, },
showResultMap: function (result, resultBounds) { showResultMap: function (result, resultBounds) {
// TODO: refactor - it is necessary for mobile
if (window.getComputedStyle(document.getElementById('guess')).visibility === 'hidden') { Game.transitToResultMap();
document.getElementById('showGuessButton').click();
}
if (Game.adaptGuess) {
document.getElementById('guess').classList.remove('adapt');
}
if (Game.guessMarker) {
Game.guessMarker.setMap(null);
Game.guessMarker = null;
}
document.getElementById('guess').classList.add('result');
Game.map.setOptions({
draggableCursor: 'grab'
});
Game.map.fitBounds(resultBounds); Game.map.fitBounds(resultBounds);
var distanceInfo = document.getElementById('distanceInfo'); var distanceInfo = document.getElementById('distanceInfo');
@ -579,19 +601,6 @@ const GameType = Object.freeze({'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2});
var scoreBar = document.getElementById('scoreBar'); var scoreBar = document.getElementById('scoreBar');
scoreBar.style.backgroundColor = scoreBarProperties.backgroundColor; scoreBar.style.backgroundColor = scoreBarProperties.backgroundColor;
scoreBar.style.width = scoreBarProperties.width; scoreBar.style.width = scoreBarProperties.width;
if (Game.rounds.length === Game.NUMBER_OF_ROUNDS) {
document.getElementById('continueButton').style.display = 'none';
document.getElementById('showSummaryButton').style.display = 'block';
} else if (roomId) {
if (Game.multi.owner) {
if (!Game.readyToContinue) {
document.getElementById('continueButton').disabled = true;
}
} else {
document.getElementById('continueButton').style.display = 'none';
}
}
}, },
guess: function () { guess: function () {
@ -783,43 +792,6 @@ const GameType = Object.freeze({'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2});
}, },
showSummary: function () { showSummary: function () {
for (var i = 0; i < Game.rounds.length; ++i) {
var round = Game.rounds[i];
if (round.realMarker) {
round.realMarker.setMap(null);
}
for (var j = 0; j < round.guessMarkers.length; ++j) {
var guessMarker = round.guessMarkers[j];
guessMarker.marker.setMap(null);
guessMarker.line.setMap(null);
if (guessMarker.info) {
guessMarker.info.close();
}
}
}
Game.rounds = [];
for (var i = 0; i < Game.history.length; ++i) {
var round = Game.history[i];
Game.rounds.push({ position: round.position, guessPosition: round.result.guessPosition, realMarker: null, guessMarkers: [] });
Game.addPositionToResultMap(true);
if (round.result.guessPosition) {
Game.addGuessPositionToResultMap(round.result.guessPosition, null, true);
}
Game.scoreSum += round.result.score;
if(round.allResults !== undefined) {
for (var j = 0; j < round.allResults.length; ++j) {
var result = round.allResults[j];
if (result.guessPosition) {
Game.addGuessPositionToResultMap(result.guessPosition, result, true);
}
}
}
}
var distanceInfo = document.getElementById('distanceInfo'); var distanceInfo = document.getElementById('distanceInfo');
distanceInfo.children[0].style.display = 'none'; distanceInfo.children[0].style.display = 'none';
distanceInfo.children[1].style.display = 'none'; distanceInfo.children[1].style.display = 'none';