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

MAPG-67 make it possible to reset the game on error in JS

Browse Source 
refactor JS to make round and game resetting unified
This commit is contained in:
Bence Pőcze 2020-05-26 23:23:49 +02:00
parent 6f8f2cf9cf
commit a3665c5a6a
1 changed files with 94 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
public/static/js/mapguesser.js
View File

@ -15,13 +15,30 @@
googleLink: null,
initialize: function () {
document.getElementById('loading').style.visibility = 'visible';
document.getElementById('currentRound').innerHTML = '1/' + String(Core.NUMBER_OF_ROUNDS);
document.getElementById('currentScoreSum').innerHTML = '0/0';
Core.getNewPosition(function (response) {
if (response.history) {
for (var i = 0; i < response.history.length; ++i) {
var round = response.history[i];
Core.map.setOptions({
draggableCursor: 'crosshair'
});
Core.map.fitBounds(mapBounds);
var xhr = new XMLHttpRequest();
xhr.responseType = 'json';
xhr.onload = function () {
if (this.response.error) {
//TODO: handle this error
return;
}
document.getElementById('loading').style.visibility = 'hidden';
Core.panoId = this.response.panoId;
if (this.response.history) {
for (var i = 0; i < this.response.history.length; ++i) {
var round = this.response.history[i];
Core.rounds.push({ position: round.position, guessPosition: round.guessPosition, realMarker: null, guessMarker: null, line: null });
Core.addRealGuessPair(round.position, round.guessPosition, true);
Core.scoreSum += round.score;
@ -32,17 +49,22 @@
}
Core.startNewRound();
});
};
xhr.open('GET', 'position.json', true);
xhr.send();
},
startNewGame: function () {
resetGame: function () {
for (var i = 0; i < Core.rounds.length; ++i) {
var round = Core.rounds[i];
if (round.realMarker && round.guessMarker && round.line) {
round.realMarker.setMap(null);
round.guessMarker.setMap(null);
round.line.setMap(null);
}
}
Core.rounds = [];
Core.scoreSum = 0;
@ -56,16 +78,14 @@
document.getElementById('continueButton').style.display = null;
document.getElementById('startNewGameButton').style.display = null;
document.getElementById('currentScoreSum').innerHTML = '0/0';
document.getElementById('showGuessButton').style.visibility = null;
document.getElementById('guess').style.visibility = null;
document.getElementById('guess').classList.remove('result');
Core.prepareNewRound();
Core.getNewPosition(function () {
Core.startNewRound();
});
Core.initialize();
},
prepareNewRound: function () {
resetRound: function () {
document.getElementById('scoreBar').style.width = null;
if (Core.rounds.length > 0) {
@ -84,6 +104,8 @@
draggableCursor: 'crosshair'
});
Core.map.fitBounds(mapBounds);
Core.startNewRound();
},
startNewRound: function () {
@ -94,21 +116,18 @@
Core.loadPano(Core.panoId);
},
getNewPosition: function (callback) {
document.getElementById('loading').style.visibility = 'visible';
handleErrorResponse: function (error) {
// for the time being we only handle the "no_session_found" error and reset the game
var xhr = new XMLHttpRequest();
xhr.responseType = 'json';
xhr.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
document.getElementById('loading').style.visibility = 'hidden';
xhr.onload = function () {
mapBounds = this.response.bounds;
Core.panoId = this.response.panoId;
callback(this.response);
}
Core.resetGame();
};
xhr.open('GET', 'position.json', true);
xhr.open('GET', 'game.json', true);
xhr.send();
},
@ -131,10 +150,19 @@
}
document.getElementById('loading').style.visibility = 'visible';
var data = new FormData();
data.append('guess', '1');
data.append('lat', String(guessPosition.lat));
data.append('lng', String(guessPosition.lng));
var xhr = new XMLHttpRequest();
xhr.responseType = 'json';
xhr.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
xhr.onload = function () {
if (this.response.error) {
Core.handleErrorResponse(this.response.error);
return;
}
Core.guessMarker.setMap(null);
Core.guessMarker = null;
@ -170,11 +198,10 @@
}
Core.panoId = this.response.panoId;
}
};
xhr.open('POST', 'position.json', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('guess&lat=' + guessPosition.lat + '&lng=' + guessPosition.lng);
xhr.send(data);
},
addRealGuessPair: function (position, guessPosition, hidden) {
@ -332,12 +359,9 @@
Core.map = new google.maps.Map(document.getElementById('map'), {
disableDefaultUI: true,
clickableIcons: false,
draggableCursor: 'crosshair',
draggingCursor: 'grabbing'
});
Core.map.fitBounds(mapBounds);
Core.map.addListener('click', function (e) {
if (Core.rounds[Core.rounds.length - 1].guessPosition) {
return;
@ -403,8 +427,7 @@
}
document.getElementById('continueButton').onclick = function () {
Core.prepareNewRound();
Core.startNewRound();
Core.resetRound();
}
document.getElementById('showSummaryButton').onclick = function () {
@ -412,7 +435,7 @@
}
document.getElementById('startNewGameButton').onclick = function () {
Core.startNewGame();
Core.resetGame();
}
window.onbeforeunload = function (e) {