'use strict'; (function () { var Game = { NUMBER_OF_ROUNDS: 5, MAX_SCORE: 1000, mapBounds: null, multi: { token: null, owner: false }, rounds: [], scoreSum: 0, panoId: null, pov: null, panorama: null, map: null, guessMarker: null, adaptGuess: false, googleLink: null, MultiConnector: { connection: null, reconnectCounter: 0, connect: function () { if (Game.MultiConnector.connection && Game.MultiConnector.connection.readyState !== WebSocket.CLOSED) { return; } Game.MultiConnector.connection = new WebSocket((MapGuesser.isSecure ? 'wss' : 'ws') + '://' + multiUrl); Game.MultiConnector.connection.onopen = function () { document.getElementById('loading').style.visibility = 'hidden'; Game.MultiConnector.reconnectCounter = 0; Game.MultiConnector.connection.send(JSON.stringify({ func: 'connect_to_room', args: { roomId: roomId, token: Game.multi.token } })); }; Game.MultiConnector.connection.onclose = Game.MultiConnector.noConnection; Game.MultiConnector.connection.onerror = function (event) { console.error('WebSocket error in Game.MultiConnector:', event); }; Game.MultiConnector.connection.onmessage = function (message) { var json; try { json = JSON.parse(message.data); } catch (e) { console.error('Cannot parse message!'); console.error(message.data); return; } switch (json.type) { case 'initialize': Game.MultiConnector.initialize(json.data); break; case 'member_joined': Game.MultiConnector.memberJoined(json.data); break; case 'new_round': Game.MultiConnector.newRound(json.data); break; case 'results': //TODO break; case 'guess': //TODO break; } }; }, noConnection: function () { if (Game.MultiConnector.reconnectCounter === 2) { console.error('Could not reconnect WebSocket for Game.MultiConnector...') } setTimeout(function () { Game.MultiConnector.reconnectCounter++; console.log('Reconnecting WebSocket for Game.MultiConnector... ' + Game.MultiConnector.reconnectCounter); Game.MultiConnector.connect(); }, 1000 + Math.min(Game.MultiConnector.reconnectCounter * 500, 9000)); }, initialize: function (data) { if (data.history) { for (var i = 0; i < data.history.length; ++i) { var round = data.history[i]; Game.rounds.push({ position: round.position, guessPosition: round.guessPosition, realMarker: null, guessMarker: null, line: null }); Game.addRealGuessPair(round.position, round.guessPosition, true); Game.scoreSum += round.score; } 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); } if (data.place) { Game.panoId = data.place.panoId; Game.pov = data.place.pov; document.getElementById('panoCover').style.visibility = 'hidden'; MapGuesser.hideModal(); Game.startNewRound(); } document.getElementById('loading').style.visibility = 'hidden'; var div = document.getElementById('players'); for (var i = 0; i < data.members.length; ++i) { var member = data.members[i]; var p = document.createElement('p'); p.innerHTML = member.userName + (member.me ? ' (me)' : ''); div.appendChild(p); } }, memberJoined: function (data) { var div = document.getElementById('players'); var p = document.createElement('p'); p.innerHTML = data.userName; div.appendChild(p); }, newRound: function (data) { //TODO: workaround until results are not sent if (Game.adaptGuess) { document.getElementById('guess').classList.remove('adapt'); } if (Game.rounds.length === Game.NUMBER_OF_ROUNDS) { Game.reset(); } // if player didn't guess - TODO: show everything on a map if (data.result && Game.rounds.length > 0 && !Game.rounds[Game.rounds.length - 1].position) { Game.rounds[Game.rounds.length - 1].position = data.result.position; Game.addRealGuessPair(data.result.position, null); } Game.panoId = data.place.panoId; Game.pov = data.place.pov; MapGuesser.hideModal(); Game.resetRound(); Game.startNewRound(); } }, prepare: function () { var data = new FormData(); var userNames; if (roomId) { var userNames = localStorage.userNames ? JSON.parse(localStorage.userNames) : {}; if (!userNames.hasOwnProperty(roomId)) { userNames[roomId] = prompt('Your name: '); localStorage.userNames = JSON.stringify(userNames); } data.append('userName', userNames[roomId]); } document.getElementById('loading').style.visibility = 'visible'; var url = roomId ? '/multiGame/' + roomId + '/prepare.json' : '/game/' + mapId + '/prepare.json'; MapGuesser.httpRequest('POST', url, function () { document.getElementById('loading').style.visibility = 'hidden'; document.getElementById('mapName').innerHTML = this.response.mapName; Game.mapBounds = this.response.bounds; Game.initialize(); if (roomId) { Game.multi.token = this.response.token; Game.multi.owner = this.response.owner; MapGuesser.showModal('multi'); if (Game.multi.owner) { document.getElementById('startMultiGameButton').style.display = 'block'; } document.getElementById('loading').style.visibility = 'visible'; Game.MultiConnector.connect(); } }, data); }, initialize: function () { document.getElementById('panoCover').style.visibility = 'visible'; document.getElementById('currentRound').innerHTML = '1/' + String(Game.NUMBER_OF_ROUNDS); document.getElementById('currentScoreSum').innerHTML = '0/0'; Game.map.setOptions({ draggableCursor: 'crosshair' }); Game.map.fitBounds(Game.mapBounds); if (roomId) { // if it is multiplayer mode, data is sent via WS return; } document.getElementById('loading').style.visibility = 'visible'; MapGuesser.httpRequest('POST', '/game/' + mapId + '/initialData.json', function () { document.getElementById('loading').style.visibility = 'hidden'; document.getElementById('panoCover').style.visibility = 'hidden'; if (this.response.error) { //TODO: handle this error return; } Game.panoId = this.response.place.panoId; Game.pov = this.response.place.pov; if (this.response.history) { for (var i = 0; i < this.response.history.length; ++i) { var round = this.response.history[i]; Game.rounds.push({ position: round.position, guessPosition: round.guessPosition, realMarker: null, guessMarker: null, line: null }); Game.addRealGuessPair(round.position, round.guessPosition, true); Game.scoreSum += round.score; } 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); } Game.startNewRound(); }); }, reset: function () { if (Game.guessMarker) { Game.guessMarker.setMap(null); Game.guessMarker = null; } for (var i = 0; i < Game.rounds.length; ++i) { var round = Game.rounds[i]; if (round.realMarker) { round.realMarker.setMap(null); } if (round.guessMarker) { round.guessMarker.setMap(null); round.line.setMap(null); } } Game.rounds = []; Game.scoreSum = 0; var distanceInfo = document.getElementById('distanceInfo'); distanceInfo.children[0].style.display = null; distanceInfo.children[1].style.display = null; var scoreInfo = document.getElementById('scoreInfo'); scoreInfo.children[0].style.display = null; scoreInfo.children[1].style.display = null; document.getElementById('continueButton').style.display = null; document.getElementById('startNewGameButton').style.display = null; document.getElementById('showGuessButton').style.visibility = null; document.getElementById('guess').style.visibility = null; document.getElementById('guess').classList.remove('result'); Game.initialize(); }, resetRound: function () { document.getElementById('scoreBar').style.width = null; if (Game.rounds.length > 0) { var lastRound = Game.rounds[Game.rounds.length - 1]; lastRound.realMarker.setVisible(false); if (lastRound.guessMarker) { lastRound.guessMarker.setVisible(false); lastRound.line.setVisible(false); } } document.getElementById('panoCover').style.visibility = 'hidden'; document.getElementById('showGuessButton').style.visibility = null; document.getElementById('guess').style.visibility = null; document.getElementById('guess').classList.remove('result') Game.map.setOptions({ draggableCursor: 'crosshair' }); Game.map.fitBounds(Game.mapBounds); if (roomId) { // if it is multiplayer mode, data is sent via WS return; } Game.startNewRound(); }, startNewRound: function () { Game.rounds.push({ position: null, guessPosition: null, realMarker: null, guessMarker: null, line: null }); document.getElementById('currentRound').innerHTML = String(Game.rounds.length) + '/' + String(Game.NUMBER_OF_ROUNDS); Game.loadPano(Game.panoId, Game.pov); }, handleErrorResponse: function (error) { // for the time being we only handle the "no_session_found" error and reset the game if (roomId) { //TODO: better error message alert('Your session is invalid, please start multiplayer again!') return; } MapGuesser.httpRequest('GET', '/game/' + mapId + '/prepare.json', function () { Game.mapBounds = this.response.bounds; Game.reset(); }); }, loadPano: function (panoId, pov) { if (Game.adaptGuess) { document.getElementById('guess').classList.add('adapt'); } Game.panorama.setPov({ heading: pov.heading, pitch: pov.pitch }); Game.panorama.setZoom(pov.zoom); Game.panorama.setPano(panoId); }, evaluateGuess: function () { if (!Game.guessMarker) { return; } 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('loading').style.visibility = 'visible'; document.getElementById('panoCover').style.visibility = 'visible'; var data = new FormData(); data.append('lat', String(guessPosition.lat)); data.append('lng', String(guessPosition.lng)); var url = roomId ? '/multiGame/' + roomId + '/guess.json' : '/game/' + mapId + '/guess.json'; MapGuesser.httpRequest('POST', url, function () { if (this.response.error) { Game.handleErrorResponse(this.response.error); return; } Game.guessMarker.setMap(null); Game.guessMarker = null; document.getElementById('loading').style.visibility = 'hidden'; document.getElementById('guess').classList.add('result'); Game.scoreSum += this.response.result.score; document.getElementById('currentScoreSum').innerHTML = String(Game.scoreSum) + '/' + String(Game.rounds.length * Game.MAX_SCORE); Game.rounds[Game.rounds.length - 1].position = this.response.result.position; Game.addRealGuessPair(this.response.result.position, guessPosition); var resultBounds = new google.maps.LatLngBounds(); resultBounds.extend(this.response.result.position); resultBounds.extend(guessPosition); Game.map.setOptions({ draggableCursor: 'grab' }); Game.map.fitBounds(resultBounds); document.getElementById('distance').innerHTML = Util.printDistanceForHuman(this.response.result.distance); document.getElementById('score').innerHTML = this.response.result.score; var scoreBarProperties = Game.calculateScoreBarProperties(this.response.result.score, Game.MAX_SCORE); var scoreBar = document.getElementById('scoreBar'); scoreBar.style.backgroundColor = scoreBarProperties.backgroundColor; 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'; } if (this.response.place) { Game.panoId = this.response.place.panoId; Game.pov = this.response.place.pov; } else { if (!Game.multi.owner) { //TODO: "waiting for" disabled button document.getElementById('continueButton').style.display = 'none'; } Game.panoId = null; Game.pov = null; } }, data); }, addRealGuessPair: function (position, guessPosition, hidden) { var round = Game.rounds[Game.rounds.length - 1]; round.realMarker = new google.maps.Marker({ map: Game.map, visible: !hidden, position: position, title: 'Open in Google Maps', zIndex: Game.rounds.length * 2, clickable: true, draggable: false, icon: { url: STATIC_ROOT + '/img/markers/marker-green.svg?rev=' + REVISION, size: new google.maps.Size(24, 32), scaledSize: new google.maps.Size(24, 32), anchor: new google.maps.Point(12, 32) }, }); round.realMarker.addListener('click', function () { window.open('https://www.google.com/maps/search/?api=1&query=' + this.getPosition().toUrlValue(), '_blank'); }); if (!guessPosition) { return; } round.guessMarker = new google.maps.Marker({ map: Game.map, visible: !hidden, position: guessPosition, zIndex: Game.rounds.length, clickable: false, draggable: false, icon: { url: STATIC_ROOT + '/img/markers/marker-gray-empty.svg?rev=' + REVISION, size: new google.maps.Size(24, 32), scaledSize: new google.maps.Size(24, 32), anchor: new google.maps.Point(12, 32), labelOrigin: new google.maps.Point(12, 14) }, label: { color: '#ffffff', fontFamily: 'Roboto', fontSize: '16px', fontWeight: '500', text: '?' } }); round.line = new google.maps.Polyline({ map: Game.map, visible: !hidden, path: [ position, guessPosition ], geodesic: true, strokeOpacity: 0, icons: [{ icon: { path: 'M 0,-1 0,1', strokeOpacity: 1, strokeWeight: 2, scale: 2 }, offset: '0', repeat: '10px' }], clickable: false, draggable: false, editable: false }); }, calculateScoreBarProperties: function (score, maxScore) { var percent = Math.floor((score / maxScore) * 100); var color; if (percent >= 90) { color = '#11ca00'; } else if (percent >= 10) { color = '#ea9000'; } else { color = '#ca1100'; } return { width: percent + '%', backgroundColor: color }; }, showSummary: function () { var distanceInfo = document.getElementById('distanceInfo'); distanceInfo.children[0].style.display = 'none'; distanceInfo.children[1].style.display = 'block'; var scoreInfo = document.getElementById('scoreInfo'); scoreInfo.children[0].style.display = 'none'; scoreInfo.children[1].style.display = 'block'; document.getElementById('showSummaryButton').style.display = null; if (!room || Game.multi.owner) { document.getElementById('startNewGameButton').style.display = 'block'; } var resultBounds = new google.maps.LatLngBounds(); for (var i = 0; i < Game.rounds.length; ++i) { var round = Game.rounds[i]; round.realMarker.setIcon({ url: STATIC_ROOT + '/img/markers/marker-green-empty.svg?rev=' + REVISION, size: new google.maps.Size(24, 32), scaledSize: new google.maps.Size(24, 32), anchor: new google.maps.Point(12, 32), labelOrigin: new google.maps.Point(12, 14) }); round.realMarker.setLabel({ color: '#285624', fontFamily: 'Roboto', fontSize: '16px', fontWeight: '500', text: String(i + 1) }); round.realMarker.setVisible(true); if (round.guessMarker) { round.guessMarker.setVisible(true); round.line.setVisible(true); } resultBounds.extend(round.position); if (round.guessMarker) { resultBounds.extend(round.guessPosition); } } Game.map.fitBounds(resultBounds); document.getElementById('scoreSum').innerHTML = String(Game.scoreSum); var scoreBarProperties = Game.calculateScoreBarProperties(Game.scoreSum, Game.NUMBER_OF_ROUNDS * Game.MAX_SCORE); var scoreBar = document.getElementById('scoreBar'); scoreBar.style.backgroundColor = scoreBarProperties.backgroundColor; scoreBar.style.width = scoreBarProperties.width; }, rewriteGoogleLink: function () { if (!Game.googleLink) { var anchors = document.getElementById('panorama').getElementsByTagName('a'); for (var i = 0; i < anchors.length; i++) { var a = anchors[i]; if (a.href.indexOf('maps.google.com/maps') !== -1) { Game.googleLink = a; break; } } } setTimeout(function () { if (Game.googleLink) { Game.googleLink.title = 'Google Maps'; Game.googleLink.href = 'https://maps.google.com/maps'; } }, 1); } }; var Util = { printDistanceForHuman: function (distance) { if (distance < 1000) { return Number.parseFloat(distance).toFixed(0) + ' m'; } else if (distance < 10000) { return Number.parseFloat(distance / 1000).toFixed(2) + ' km'; } else if (distance < 100000) { return Number.parseFloat(distance / 1000).toFixed(1) + ' km'; } else { return Number.parseFloat(distance / 1000).toFixed(0) + ' km'; } } }; MapGuesser.sessionAvailableHooks.reinitializeGame = Game.prepare; if (!('ontouchstart' in document.documentElement)) { Game.adaptGuess = true; } Game.map = new google.maps.Map(document.getElementById('map'), { disableDefaultUI: true, clickableIcons: false, draggingCursor: 'grabbing' }); Game.map.addListener('click', function (e) { if (Game.rounds[Game.rounds.length - 1].guessPosition) { return; } if (Game.guessMarker) { Game.guessMarker.setPosition(e.latLng); return; } Game.guessMarker = new google.maps.Marker({ map: Game.map, position: e.latLng, clickable: false, draggable: true, icon: { url: STATIC_ROOT + '/img/markers/marker-gray-empty.svg?rev=' + REVISION, size: new google.maps.Size(24, 32), scaledSize: new google.maps.Size(24, 32), anchor: new google.maps.Point(12, 32), labelOrigin: new google.maps.Point(12, 14) }, label: { color: '#ffffff', fontFamily: 'Roboto', fontSize: '16px', fontWeight: '500', text: '?' } }); document.getElementById('guessButton').disabled = false; }); Game.panorama = new google.maps.StreetViewPanorama(document.getElementById('panorama'), { disableDefaultUI: true, linksControl: true, showRoadLabels: false, motionTracking: false }); Game.panorama.addListener('position_changed', function () { Game.rewriteGoogleLink(); }); Game.panorama.addListener('pov_changed', function () { Game.rewriteGoogleLink(); }); if (COOKIES_CONSENT) { Game.prepare(); } document.getElementById('showGuessButton').onclick = function () { this.style.visibility = 'hidden'; document.getElementById('guess').style.visibility = 'visible'; } document.getElementById('closeGuessButton').onclick = function () { document.getElementById('showGuessButton').style.visibility = null; document.getElementById('guess').style.visibility = null; } document.getElementById('guessButton').onclick = function () { Game.evaluateGuess(); } document.getElementById('continueButton').onclick = function () { if (roomId) { if (!Game.multi.owner) { return; } document.getElementById('loading').style.visibility = 'visible'; MapGuesser.httpRequest('POST', '/multiGame/' + roomId + '/nextRound.json', function () { document.getElementById('loading').style.visibility = 'hidden'; }); } else { Game.resetRound(); } } document.getElementById('showSummaryButton').onclick = function () { Game.showSummary(); } document.getElementById('startNewGameButton').onclick = function () { if (roomId) { if (!Game.multi.owner) { return; } document.getElementById('loading').style.visibility = 'visible'; MapGuesser.httpRequest('POST', '/multiGame/' + roomId + '/initialData.json', function () { document.getElementById('loading').style.visibility = 'hidden'; }); } else { Game.reset(); } } document.getElementById('startMultiGameButton').onclick = function () { if (!roomId || !Game.multi.owner) { return; } MapGuesser.hideModal(); document.getElementById('loading').style.visibility = 'visible'; MapGuesser.httpRequest('POST', '/multiGame/' + roomId + '/initialData.json', function () { document.getElementById('loading').style.visibility = 'hidden'; }); } })();