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

MAPG-47 refactor JS to be adapted to the new PositionController

Browse Source
This commit is contained in:
Bence Pőcze 2020-05-25 19:51:02 +02:00
parent 72a79d4267
commit 5e068e0aed
1 changed files with 79 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,7 +7,7 @@
rounds: [], rounds: [],
scoreSum: 0, scoreSum: 0,
realPosition: null, panoId: null,
panorama: null, panorama: null,
map: null, map: null,
guessMarker: null, guessMarker: null,
@ -15,32 +15,24 @@
googleLink: null, googleLink: null,
initialize: function () { initialize: function () {
if (sessionStorage.rounds) { document.getElementById('currentRound').innerHTML = '1/' + String(Core.NUMBER_OF_ROUNDS);
var roundsLoaded = JSON.parse(sessionStorage.rounds); document.getElementById('currentScoreSum').innerHTML = '0/0';
for (var i = 0; i < roundsLoaded.length; ++i) {
var round = roundsLoaded[i]; Core.getNewPosition(function (response) {
Core.rounds.push({ realPosition: round.realPosition, guessPosition: round.guessPosition, realMarker: null, guessMarker: null, line: null }); if (response.history) {
if (round.guessPosition) { for (var i = 0; i < response.history.length; ++i) {
Core.addRealGuessPair(round.realPosition, round.guessPosition, true); var round = 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;
} }
document.getElementById('currentRound').innerHTML = String(Core.rounds.length) + '/' + String(Core.NUMBER_OF_ROUNDS);
document.getElementById('currentScoreSum').innerHTML = String(Core.scoreSum) + '/' + String(Core.rounds.length * Core.MAX_SCORE);
} }
}
if (sessionStorage.scoreSum) {
Core.scoreSum = parseInt(sessionStorage.scoreSum);
}
if (Core.rounds.length > 0 && !Core.rounds[Core.rounds.length - 1].guessPosition) {
Core.realPosition = Core.rounds[Core.rounds.length - 1].realPosition;
Core.loadPositionInfo(Core.realPosition);
document.getElementById('currentRound').innerHTML = String(Core.rounds.length) + '/' + String(Core.NUMBER_OF_ROUNDS);
document.getElementById('currentScoreSum').innerHTML = String(Core.scoreSum) + '/' + String((Core.rounds.length - 1) * Core.MAX_SCORE);
} else {
Core.startNewRound(); Core.startNewRound();
});
document.getElementById('currentScoreSum').innerHTML = String(0);
}
}, },
startNewGame: function () { startNewGame: function () {
@ -64,9 +56,13 @@
document.getElementById('continueButton').style.display = null; document.getElementById('continueButton').style.display = null;
document.getElementById('startNewGameButton').style.display = null; document.getElementById('startNewGameButton').style.display = null;
document.getElementById('currentScoreSum').innerHTML = '0/0';
Core.prepareNewRound(); Core.prepareNewRound();
document.getElementById('currentScoreSum').innerHTML = String(0); Core.getNewPosition(function () {
Core.startNewRound();
});
}, },
prepareNewRound: function () { prepareNewRound: function () {
@ -87,113 +83,107 @@
Core.map.setOptions({ Core.map.setOptions({
draggableCursor: 'crosshair' draggableCursor: 'crosshair'
}); });
Core.map.fitBounds(guessMapBounds); Core.map.fitBounds(mapBounds);
Core.startNewRound();
}, },
startNewRound: function () { startNewRound: function () {
Core.rounds.push({ realPosition: null, guessPosition: null, realMarker: null, guessMarker: null, line: null }); Core.rounds.push({ position: null, guessPosition: null, realMarker: null, guessMarker: null, line: null });
Core.panorama.setVisible(false);
document.getElementById('loading').style.visibility = 'visible';
document.getElementById('currentRound').innerHTML = String(Core.rounds.length) + '/' + String(Core.NUMBER_OF_ROUNDS); document.getElementById('currentRound').innerHTML = String(Core.rounds.length) + '/' + String(Core.NUMBER_OF_ROUNDS);
Core.getNewPosition(); Core.loadPano(Core.panoId);
}, },
getNewPosition: function () { getNewPosition: function (callback) {
document.getElementById('loading').style.visibility = 'visible';
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
xhr.responseType = 'json'; xhr.responseType = 'json';
xhr.onreadystatechange = function () { xhr.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) { if (this.readyState == 4 && this.status == 200) {
Core.realPosition = this.response.position; document.getElementById('loading').style.visibility = 'hidden';
Core.rounds[Core.rounds.length - 1].realPosition = this.response.position;
Core.loadPositionInfo(this.response.position);
Core.saveToSession(); Core.panoId = this.response.panoId;
callback(this.response);
} }
}; };
xhr.open('GET', 'getNewPosition.json', true); xhr.open('GET', 'position.json', true);
xhr.send(); xhr.send();
}, },
loadPositionInfo: function (position) { loadPano: function (panoId) {
var sv = new google.maps.StreetViewService();
sv.getPanorama({ location: position, preference: google.maps.StreetViewPreference.NEAREST, source: google.maps.StreetViewSource.OUTDOOR }, Core.loadPano);
},
loadPano: function (data, status) {
if (status !== google.maps.StreetViewStatus.OK) {
Core.getNewPosition();
return;
}
document.getElementById('loading').style.visibility = 'hidden';
if (Core.adaptGuess) { if (Core.adaptGuess) {
document.getElementById('guess').classList.add('adapt'); document.getElementById('guess').classList.add('adapt');
} }
Core.panorama.setVisible(true);
Core.panorama.setPov({ heading: 0, pitch: 0 }); Core.panorama.setPov({ heading: 0, pitch: 0 });
Core.panorama.setZoom(0); Core.panorama.setZoom(0);
Core.panorama.setPano(data.location.pano); Core.panorama.setPano(panoId);
}, },
evaluateGuess: function () { evaluateGuess: function () {
var guessPosition = Core.guessMarker.getPosition().toJSON(); var guessPosition = Core.guessMarker.getPosition().toJSON();
Core.rounds[Core.rounds.length - 1].guessPosition = guessPosition; Core.rounds[Core.rounds.length - 1].guessPosition = guessPosition;
var distance = Util.calculateDistance(Core.realPosition, guessPosition);
var score = Core.calculateScore(distance);
Core.scoreSum += score;
document.getElementById('currentScoreSum').innerHTML = String(Core.scoreSum) + '/' + String(Core.rounds.length * Core.MAX_SCORE);
Core.saveToSession();
Core.guessMarker.setMap(null);
Core.guessMarker = null;
if (Core.adaptGuess) { if (Core.adaptGuess) {
document.getElementById('guess').classList.remove('adapt'); document.getElementById('guess').classList.remove('adapt');
} }
document.getElementById('guess').classList.add('result'); document.getElementById('loading').style.visibility = 'visible';
Core.addRealGuessPair(Core.realPosition, guessPosition); var xhr = new XMLHttpRequest();
xhr.responseType = 'json';
xhr.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
Core.guessMarker.setMap(null);
Core.guessMarker = null;
var resultBounds = new google.maps.LatLngBounds(); document.getElementById('loading').style.visibility = 'hidden';
resultBounds.extend(Core.realPosition); document.getElementById('guess').classList.add('result');
resultBounds.extend(guessPosition);
Core.map.setOptions({ Core.scoreSum += this.response.result.score;
draggableCursor: 'grab' document.getElementById('currentScoreSum').innerHTML = String(Core.scoreSum) + '/' + String(Core.rounds.length * Core.MAX_SCORE);
});
Core.map.fitBounds(resultBounds);
document.getElementById('distance').innerHTML = Util.printDistanceForHuman(distance); Core.rounds[Core.rounds.length - 1].position = this.response.result.position;
document.getElementById('score').innerHTML = score; Core.addRealGuessPair(this.response.result.position, guessPosition);
var scoreBarProperties = Core.calculateScoreBarProperties(score, Core.MAX_SCORE); var resultBounds = new google.maps.LatLngBounds();
var scoreBar = document.getElementById('scoreBar'); resultBounds.extend(this.response.result.position);
scoreBar.style.backgroundColor = scoreBarProperties.backgroundColor; resultBounds.extend(guessPosition);
scoreBar.style.width = scoreBarProperties.width;
if (Core.rounds.length == Core.NUMBER_OF_ROUNDS) { Core.map.setOptions({
document.getElementById('continueButton').style.display = 'none'; draggableCursor: 'grab'
document.getElementById('showSummaryButton').style.display = 'block'; });
} Core.map.fitBounds(resultBounds);
document.getElementById('distance').innerHTML = Util.printDistanceForHuman(this.response.result.distance);
document.getElementById('score').innerHTML = this.response.result.score;
var scoreBarProperties = Core.calculateScoreBarProperties(this.response.result.score, Core.MAX_SCORE);
var scoreBar = document.getElementById('scoreBar');
scoreBar.style.backgroundColor = scoreBarProperties.backgroundColor;
scoreBar.style.width = scoreBarProperties.width;
if (Core.rounds.length == Core.NUMBER_OF_ROUNDS) {
document.getElementById('continueButton').style.display = 'none';
document.getElementById('showSummaryButton').style.display = 'block';
}
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);
}, },
addRealGuessPair: function (realPosition, guessPosition, hidden) { addRealGuessPair: function (position, guessPosition, hidden) {
var round = Core.rounds[Core.rounds.length - 1]; var round = Core.rounds[Core.rounds.length - 1];
round.realMarker = new google.maps.Marker({ round.realMarker = new google.maps.Marker({
map: Core.map, map: Core.map,
visible: !hidden, visible: !hidden,
position: realPosition, position: position,
title: 'Open in Google Maps', title: 'Open in Google Maps',
zIndex: Core.rounds.length * 2, zIndex: Core.rounds.length * 2,
clickable: true, clickable: true,
@ -224,7 +214,7 @@
map: Core.map, map: Core.map,
visible: !hidden, visible: !hidden,
path: [ path: [
realPosition, position,
guessPosition guessPosition
], ],
geodesic: true, geodesic: true,
@ -245,12 +235,6 @@
}); });
}, },
calculateScore: function (distance) {
var goodness = 1.0 - distance / Math.sqrt(mapArea);
return Math.round(Math.pow(Core.MAX_SCORE, goodness));
},
calculateScoreBarProperties: function (score, maxScore) { calculateScoreBarProperties: function (score, maxScore) {
var percent = Math.floor((score / maxScore) * 100); var percent = Math.floor((score / maxScore) * 100);
@ -292,7 +276,7 @@
round.guessMarker.setVisible(true); round.guessMarker.setVisible(true);
round.line.setVisible(true); round.line.setVisible(true);
resultBounds.extend(round.realPosition); resultBounds.extend(round.position);
resultBounds.extend(round.guessPosition); resultBounds.extend(round.guessPosition);
} }
@ -324,51 +308,10 @@
Core.googleLink.href = 'https://maps.google.com/maps'; Core.googleLink.href = 'https://maps.google.com/maps';
} }
}, 1); }, 1);
},
saveToSession: function () {
if (Core.rounds.length == Core.NUMBER_OF_ROUNDS && Core.rounds[Core.rounds.length - 1].guessPosition) {
sessionStorage.removeItem('rounds');
sessionStorage.removeItem('scoreSum');
return;
}
var roundsToSave = [];
for (var i = 0; i < Core.rounds.length; ++i) {
var round = Core.rounds[i];
roundsToSave.push({ realPosition: round.realPosition, guessPosition: round.guessPosition });
}
sessionStorage.setItem('rounds', JSON.stringify(roundsToSave));
sessionStorage.setItem('scoreSum', String(Core.scoreSum));
} }
}; };
var Util = { var Util = {
EARTH_RADIUS_IN_METER: 6371000,
deg2rad: function (deg) {
return deg * (Math.PI / 180.0);
},
calculateDistance: function (position1, position2) {
var lat1 = Util.deg2rad(position1.lat);
var lng1 = Util.deg2rad(position1.lng);
var lat2 = Util.deg2rad(position2.lat);
var lng2 = Util.deg2rad(position2.lng);
var angleCos = Math.cos(lat1) * Math.cos(lat2) * Math.cos(lng2 - lng1) +
Math.sin(lat1) * Math.sin(lat2);
if (angleCos > 1.0) {
angleCos = 1.0;
}
var angle = Math.acos(angleCos);
return angle * Util.EARTH_RADIUS_IN_METER;
},
printDistanceForHuman: function (distance) { printDistanceForHuman: function (distance) {
if (distance < 1000) { if (distance < 1000) {
return Number.parseFloat(distance).toFixed(0) + ' m'; return Number.parseFloat(distance).toFixed(0) + ' m';
@ -393,7 +336,7 @@
draggingCursor: 'grabbing' draggingCursor: 'grabbing'
}); });
Core.map.fitBounds(guessMapBounds); Core.map.fitBounds(mapBounds);
Core.map.addListener('click', function (e) { Core.map.addListener('click', function (e) {
if (Core.rounds[Core.rounds.length - 1].guessPosition) { if (Core.rounds[Core.rounds.length - 1].guessPosition) {
@ -461,6 +404,7 @@
document.getElementById('continueButton').onclick = function () { document.getElementById('continueButton').onclick = function () {
Core.prepareNewRound(); Core.prepareNewRound();
Core.startNewRound();
} }
document.getElementById('showSummaryButton').onclick = function () { document.getElementById('showSummaryButton').onclick = function () {