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

MAPG-103 rename "Core" to "Game" in game.js

Browse Source
This commit is contained in:
Bence Pőcze 2020-06-05 00:23:07 +02:00
parent 85773d47a0
commit 1179914f42
1 changed files with 87 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,7 @@
'use strict'; 'use strict';
(function () { (function () {
var Core = { var Game = {
NUMBER_OF_ROUNDS: 5, NUMBER_OF_ROUNDS: 5,
MAX_SCORE: 1000, MAX_SCORE: 1000,
@ -17,13 +17,13 @@
initialize: function () { initialize: function () {
document.getElementById('loading').style.visibility = 'visible'; document.getElementById('loading').style.visibility = 'visible';
document.getElementById('cover').style.visibility = 'visible'; document.getElementById('cover').style.visibility = 'visible';
document.getElementById('currentRound').innerHTML = '1/' + String(Core.NUMBER_OF_ROUNDS); document.getElementById('currentRound').innerHTML = '1/' + String(Game.NUMBER_OF_ROUNDS);
document.getElementById('currentScoreSum').innerHTML = '0/0'; document.getElementById('currentScoreSum').innerHTML = '0/0';
Core.map.setOptions({ Game.map.setOptions({
draggableCursor: 'crosshair' draggableCursor: 'crosshair'
}); });
Core.map.fitBounds(mapBounds); Game.map.fitBounds(mapBounds);
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
xhr.responseType = 'json'; xhr.responseType = 'json';
@ -36,35 +36,35 @@
document.getElementById('loading').style.visibility = 'hidden'; document.getElementById('loading').style.visibility = 'hidden';
document.getElementById('cover').style.visibility = 'hidden'; document.getElementById('cover').style.visibility = 'hidden';
Core.panoId = this.response.panoId; Game.panoId = this.response.panoId;
if (this.response.history) { if (this.response.history) {
for (var i = 0; i < this.response.history.length; ++i) { for (var i = 0; i < this.response.history.length; ++i) {
var round = this.response.history[i]; var round = this.response.history[i];
Core.rounds.push({ position: round.position, guessPosition: round.guessPosition, realMarker: null, guessMarker: null, line: null }); Game.rounds.push({ position: round.position, guessPosition: round.guessPosition, realMarker: null, guessMarker: null, line: null });
Core.addRealGuessPair(round.position, round.guessPosition, true); Game.addRealGuessPair(round.position, round.guessPosition, true);
Core.scoreSum += round.score; Game.scoreSum += round.score;
} }
document.getElementById('currentRound').innerHTML = String(Core.rounds.length) + '/' + String(Core.NUMBER_OF_ROUNDS); document.getElementById('currentRound').innerHTML = String(Game.rounds.length) + '/' + String(Game.NUMBER_OF_ROUNDS);
document.getElementById('currentScoreSum').innerHTML = String(Core.scoreSum) + '/' + String(Core.rounds.length * Core.MAX_SCORE); document.getElementById('currentScoreSum').innerHTML = String(Game.scoreSum) + '/' + String(Game.rounds.length * Game.MAX_SCORE);
} }
Core.startNewRound(); Game.startNewRound();
}; };
xhr.open('GET', '/game/' + mapId + '/position.json', true); xhr.open('GET', '/game/' + mapId + '/position.json', true);
xhr.send(); xhr.send();
}, },
resetGame: function () { reset: function () {
if (Core.guessMarker) { if (Game.guessMarker) {
Core.guessMarker.setMap(null); Game.guessMarker.setMap(null);
Core.guessMarker = null; Game.guessMarker = null;
} }
for (var i = 0; i < Core.rounds.length; ++i) { for (var i = 0; i < Game.rounds.length; ++i) {
var round = Core.rounds[i]; var round = Game.rounds[i];
if (round.realMarker && round.guessMarker && round.line) { if (round.realMarker && round.guessMarker && round.line) {
round.realMarker.setMap(null); round.realMarker.setMap(null);
@ -73,8 +73,8 @@
} }
} }
Core.rounds = []; Game.rounds = [];
Core.scoreSum = 0; Game.scoreSum = 0;
var distanceInfo = document.getElementById('distanceInfo'); var distanceInfo = document.getElementById('distanceInfo');
distanceInfo.children[0].style.display = null; distanceInfo.children[0].style.display = null;
@ -89,14 +89,14 @@
document.getElementById('guess').style.visibility = null; document.getElementById('guess').style.visibility = null;
document.getElementById('guess').classList.remove('result'); document.getElementById('guess').classList.remove('result');
Core.initialize(); Game.initialize();
}, },
resetRound: function () { resetRound: function () {
document.getElementById('scoreBar').style.width = null; document.getElementById('scoreBar').style.width = null;
if (Core.rounds.length > 0) { if (Game.rounds.length > 0) {
var lastRound = Core.rounds[Core.rounds.length - 1]; var lastRound = Game.rounds[Game.rounds.length - 1];
lastRound.realMarker.setVisible(false); lastRound.realMarker.setVisible(false);
lastRound.guessMarker.setVisible(false); lastRound.guessMarker.setVisible(false);
@ -108,20 +108,20 @@
document.getElementById('guess').style.visibility = null; document.getElementById('guess').style.visibility = null;
document.getElementById('guess').classList.remove('result') document.getElementById('guess').classList.remove('result')
Core.map.setOptions({ Game.map.setOptions({
draggableCursor: 'crosshair' draggableCursor: 'crosshair'
}); });
Core.map.fitBounds(mapBounds); Game.map.fitBounds(mapBounds);
Core.startNewRound(); Game.startNewRound();
}, },
startNewRound: function () { startNewRound: function () {
Core.rounds.push({ position: null, guessPosition: null, realMarker: null, guessMarker: null, line: null }); Game.rounds.push({ position: null, guessPosition: null, realMarker: null, guessMarker: null, line: null });
document.getElementById('currentRound').innerHTML = String(Core.rounds.length) + '/' + String(Core.NUMBER_OF_ROUNDS); document.getElementById('currentRound').innerHTML = String(Game.rounds.length) + '/' + String(Game.NUMBER_OF_ROUNDS);
Core.loadPano(Core.panoId); Game.loadPano(Game.panoId);
}, },
handleErrorResponse: function (error) { handleErrorResponse: function (error) {
@ -132,7 +132,7 @@
xhr.onload = function () { xhr.onload = function () {
mapBounds = this.response.bounds; mapBounds = this.response.bounds;
Core.resetGame(); Game.reset();
}; };
xhr.open('GET', '/game/' + mapId + '/json', true); xhr.open('GET', '/game/' + mapId + '/json', true);
@ -140,20 +140,25 @@
}, },
loadPano: function (panoId) { loadPano: function (panoId) {
if (Core.adaptGuess) { if (Game.adaptGuess) {
document.getElementById('guess').classList.add('adapt'); document.getElementById('guess').classList.add('adapt');
} }
Core.panorama.setPov({ heading: 0, pitch: 0 }); Game.panorama.setPov({ heading: 0, pitch: 0 });
Core.panorama.setZoom(0); Game.panorama.setZoom(0);
Core.panorama.setPano(panoId); Game.panorama.setPano(panoId);
}, },
evaluateGuess: function () { evaluateGuess: function () {
var guessPosition = Core.guessMarker.getPosition().toJSON(); if (!Game.guessMarker) {
Core.rounds[Core.rounds.length - 1].guessPosition = guessPosition; return;
}
if (Core.adaptGuess) { var guessPosition = Game.guessMarker.getPosition().toJSON();
Game.rounds[Game.rounds.length - 1].guessPosition = guessPosition;
document.getElementById('guessButton').disabled = true;
if (Game.adaptGuess) {
document.getElementById('guess').classList.remove('adapt'); document.getElementById('guess').classList.remove('adapt');
} }
document.getElementById('loading').style.visibility = 'visible'; document.getElementById('loading').style.visibility = 'visible';
@ -167,45 +172,45 @@
xhr.responseType = 'json'; xhr.responseType = 'json';
xhr.onload = function () { xhr.onload = function () {
if (this.response.error) { if (this.response.error) {
Core.handleErrorResponse(this.response.error); Game.handleErrorResponse(this.response.error);
return; return;
} }
Core.guessMarker.setMap(null); Game.guessMarker.setMap(null);
Core.guessMarker = null; Game.guessMarker = null;
document.getElementById('loading').style.visibility = 'hidden'; document.getElementById('loading').style.visibility = 'hidden';
document.getElementById('guess').classList.add('result'); document.getElementById('guess').classList.add('result');
Core.scoreSum += this.response.result.score; Game.scoreSum += this.response.result.score;
document.getElementById('currentScoreSum').innerHTML = String(Core.scoreSum) + '/' + String(Core.rounds.length * Core.MAX_SCORE); document.getElementById('currentScoreSum').innerHTML = String(Game.scoreSum) + '/' + String(Game.rounds.length * Game.MAX_SCORE);
Core.rounds[Core.rounds.length - 1].position = this.response.result.position; Game.rounds[Game.rounds.length - 1].position = this.response.result.position;
Core.addRealGuessPair(this.response.result.position, guessPosition); Game.addRealGuessPair(this.response.result.position, guessPosition);
var resultBounds = new google.maps.LatLngBounds(); var resultBounds = new google.maps.LatLngBounds();
resultBounds.extend(this.response.result.position); resultBounds.extend(this.response.result.position);
resultBounds.extend(guessPosition); resultBounds.extend(guessPosition);
Core.map.setOptions({ Game.map.setOptions({
draggableCursor: 'grab' draggableCursor: 'grab'
}); });
Core.map.fitBounds(resultBounds); Game.map.fitBounds(resultBounds);
document.getElementById('distance').innerHTML = Util.printDistanceForHuman(this.response.result.distance); document.getElementById('distance').innerHTML = Util.printDistanceForHuman(this.response.result.distance);
document.getElementById('score').innerHTML = this.response.result.score; document.getElementById('score').innerHTML = this.response.result.score;
var scoreBarProperties = Core.calculateScoreBarProperties(this.response.result.score, Core.MAX_SCORE); var scoreBarProperties = Game.calculateScoreBarProperties(this.response.result.score, Game.MAX_SCORE);
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 (Core.rounds.length === Core.NUMBER_OF_ROUNDS) { if (Game.rounds.length === Game.NUMBER_OF_ROUNDS) {
document.getElementById('continueButton').style.display = 'none'; document.getElementById('continueButton').style.display = 'none';
document.getElementById('showSummaryButton').style.display = 'block'; document.getElementById('showSummaryButton').style.display = 'block';
} }
Core.panoId = this.response.panoId; Game.panoId = this.response.panoId;
}; };
xhr.open('POST', '/game/' + mapId + '/guess.json', true); xhr.open('POST', '/game/' + mapId + '/guess.json', true);
@ -213,14 +218,14 @@
}, },
addRealGuessPair: function (position, guessPosition, hidden) { addRealGuessPair: function (position, guessPosition, hidden) {
var round = Core.rounds[Core.rounds.length - 1]; var round = Game.rounds[Game.rounds.length - 1];
round.realMarker = new google.maps.Marker({ round.realMarker = new google.maps.Marker({
map: Core.map, map: Game.map,
visible: !hidden, visible: !hidden,
position: position, position: position,
title: 'Open in Google Maps', title: 'Open in Google Maps',
zIndex: Core.rounds.length * 2, zIndex: Game.rounds.length * 2,
clickable: true, clickable: true,
draggable: false, draggable: false,
icon: { icon: {
@ -236,10 +241,10 @@
}); });
round.guessMarker = new google.maps.Marker({ round.guessMarker = new google.maps.Marker({
map: Core.map, map: Game.map,
visible: !hidden, visible: !hidden,
position: guessPosition, position: guessPosition,
zIndex: Core.rounds.length, zIndex: Game.rounds.length,
clickable: false, clickable: false,
draggable: false, draggable: false,
icon: { icon: {
@ -259,7 +264,7 @@
}); });
round.line = new google.maps.Polyline({ round.line = new google.maps.Polyline({
map: Core.map, map: Game.map,
visible: !hidden, visible: !hidden,
path: [ path: [
position, position,
@ -310,8 +315,8 @@
var resultBounds = new google.maps.LatLngBounds(); var resultBounds = new google.maps.LatLngBounds();
for (var i = 0; i < Core.rounds.length; ++i) { for (var i = 0; i < Game.rounds.length; ++i) {
var round = Core.rounds[i]; var round = Game.rounds[i];
round.realMarker.setIcon({ round.realMarker.setIcon({
url: '/static/img/markers/marker-green-empty.svg', url: '/static/img/markers/marker-green-empty.svg',
@ -335,32 +340,32 @@
resultBounds.extend(round.guessPosition); resultBounds.extend(round.guessPosition);
} }
Core.map.fitBounds(resultBounds); Game.map.fitBounds(resultBounds);
document.getElementById('scoreSum').innerHTML = String(Core.scoreSum); document.getElementById('scoreSum').innerHTML = String(Game.scoreSum);
var scoreBarProperties = Core.calculateScoreBarProperties(Core.scoreSum, Core.NUMBER_OF_ROUNDS * Core.MAX_SCORE); var scoreBarProperties = Game.calculateScoreBarProperties(Game.scoreSum, Game.NUMBER_OF_ROUNDS * Game.MAX_SCORE);
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;
}, },
rewriteGoogleLink: function () { rewriteGoogleLink: function () {
if (!Core.googleLink) { if (!Game.googleLink) {
var anchors = document.getElementById('panorama').getElementsByTagName('a'); var anchors = document.getElementById('panorama').getElementsByTagName('a');
for (var i = 0; i < anchors.length; i++) { for (var i = 0; i < anchors.length; i++) {
var a = anchors[i]; var a = anchors[i];
if (a.href.indexOf('maps.google.com/maps') !== -1) { if (a.href.indexOf('maps.google.com/maps') !== -1) {
Core.googleLink = a; Game.googleLink = a;
break; break;
} }
} }
} }
setTimeout(function () { setTimeout(function () {
if (Core.googleLink) { if (Game.googleLink) {
Core.googleLink.title = 'Google Maps'; Game.googleLink.title = 'Google Maps';
Core.googleLink.href = 'https://maps.google.com/maps'; Game.googleLink.href = 'https://maps.google.com/maps';
} }
}, 1); }, 1);
} }
@ -381,27 +386,27 @@
}; };
if (!('ontouchstart' in document.documentElement)) { if (!('ontouchstart' in document.documentElement)) {
Core.adaptGuess = true; Game.adaptGuess = true;
} }
Core.map = new google.maps.Map(document.getElementById('map'), { Game.map = new google.maps.Map(document.getElementById('map'), {
disableDefaultUI: true, disableDefaultUI: true,
clickableIcons: false, clickableIcons: false,
draggingCursor: 'grabbing' draggingCursor: 'grabbing'
}); });
Core.map.addListener('click', function (e) { Game.map.addListener('click', function (e) {
if (Core.rounds[Core.rounds.length - 1].guessPosition) { if (Game.rounds[Game.rounds.length - 1].guessPosition) {
return; return;
} }
if (Core.guessMarker) { if (Game.guessMarker) {
Core.guessMarker.setPosition(e.latLng); Game.guessMarker.setPosition(e.latLng);
return; return;
} }
Core.guessMarker = new google.maps.Marker({ Game.guessMarker = new google.maps.Marker({
map: Core.map, map: Game.map,
position: e.latLng, position: e.latLng,
clickable: false, clickable: false,
draggable: true, draggable: true,
@ -424,22 +429,22 @@
document.getElementById('guessButton').disabled = false; document.getElementById('guessButton').disabled = false;
}); });
Core.panorama = new google.maps.StreetViewPanorama(document.getElementById('panorama'), { Game.panorama = new google.maps.StreetViewPanorama(document.getElementById('panorama'), {
disableDefaultUI: true, disableDefaultUI: true,
linksControl: true, linksControl: true,
showRoadLabels: false, showRoadLabels: false,
motionTracking: false motionTracking: false
}); });
Core.panorama.addListener('position_changed', function () { Game.panorama.addListener('position_changed', function () {
Core.rewriteGoogleLink(); Game.rewriteGoogleLink();
}); });
Core.panorama.addListener('pov_changed', function () { Game.panorama.addListener('pov_changed', function () {
Core.rewriteGoogleLink(); Game.rewriteGoogleLink();
}); });
Core.initialize(); Game.initialize();
document.getElementById('showGuessButton').onclick = function () { document.getElementById('showGuessButton').onclick = function () {
this.style.visibility = 'hidden'; this.style.visibility = 'hidden';
@ -452,24 +457,18 @@
} }
document.getElementById('guessButton').onclick = function () { document.getElementById('guessButton').onclick = function () {
if (!Core.guessMarker) { Game.evaluateGuess();
return;
}
this.disabled = true;
Core.evaluateGuess();
} }
document.getElementById('continueButton').onclick = function () { document.getElementById('continueButton').onclick = function () {
Core.resetRound(); Game.resetRound();
} }
document.getElementById('showSummaryButton').onclick = function () { document.getElementById('showSummaryButton').onclick = function () {
Core.showSummary(); Game.showSummary();
} }
document.getElementById('startNewGameButton').onclick = function () { document.getElementById('startNewGameButton').onclick = function () {
Core.resetGame(); Game.reset();
} }
})(); })();