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

Merged in feature/MAPG-20-make-it-work-with-1-map-instance (pull request #29)

Browse Source 
Feature/MAPG-20 make it work with 1 map instance
This commit is contained in:
Bence Pőcze 2020-05-22 21:27:50 +00:00
commit 4a1bb0fef6
3 changed files with 66 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
public/static/css/mapguesser.css
View File

@ -97,25 +97,19 @@ div.buttonContainer.bottom {
z-index: 2; z-index: 2;
} }
#guessMap { #guess.result > #closeGuessButtonContainer, #guess.result > #guessButtonContainer {
display: none;
}
#map {
width: 100%; width: 100%;
border-radius: 3px; border-radius: 3px;
} }
#result { #guess.result > #map {
position: absolute;
opacity: 0.95;
z-index: 2;
visibility: hidden;
background-color: #ffffff;
border-radius: 3px;
}
#resultMap {
height: 70%; height: 70%;
width: 100%; border-bottom-left-radius: 0;
border-top-left-radius: 3px; border-bottom-right-radius: 0;
border-top-right-radius: 3px;
} }
#resultInfo { #resultInfo {
@ -124,6 +118,12 @@ div.buttonContainer.bottom {
padding: 10px 20px; padding: 10px 20px;
text-align: center; text-align: center;
box-sizing: border-box; box-sizing: border-box;
background-color: #ffffff;
display: none;
}
#guess.result > #resultInfo {
display: block;
} }
#resultInfo > div { #resultInfo > div {
@ -182,17 +182,10 @@ div.buttonContainer.bottom {
visibility: hidden; visibility: hidden;
} }
#guessMap { #map {
height: calc(100% - 90px); height: calc(100% - 90px);
} }
#result {
top: 20px;
left: 20px;
right: 20px;
bottom: 30px;
}
#scoreBarBase { #scoreBarBase {
width: 100%; width: 100%;
} }
@ -200,7 +193,7 @@ div.buttonContainer.bottom {
@media screen and (min-width: 600px) { @media screen and (min-width: 600px) {
#showGuessButtonContainer { #showGuessButtonContainer {
visibility: hidden; display: none;
} }
#guess { #guess {
@ -230,11 +223,13 @@ div.buttonContainer.bottom {
display: none; display: none;
} }
#guessMap { #map {
height: calc(100% - 45px); height: calc(100% - 45px);
} }
#result { #guess.result {
width: initial;
height: initial;
top: 50px; top: 50px;
left: 50px; left: 50px;
right: 50px; right: 50px;
@ -245,7 +240,7 @@ div.buttonContainer.bottom {
width: 60%; width: 60%;
} }
@media screen and (max-height: 424px) { @media screen and (max-height: 424px) {
#guess { #guess {
top: 20px; top: 20px;
height: initial; height: initial;

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

@ -9,9 +9,8 @@
scoreSum: 0, scoreSum: 0,
realPosition: null, realPosition: null,
panorama: null, panorama: null,
guessMap: null, map: null,
guessMarker: null, guessMarker: null,
resultMap: null,
adaptGuess: false, adaptGuess: false,
googleLink: null, googleLink: null,
@ -22,7 +21,7 @@
var round = roundsLoaded[i]; var round = roundsLoaded[i];
Core.rounds.push({ realPosition: round.realPosition, guessPosition: round.guessPosition, realMarker: null, guessMarker: null, line: null }); Core.rounds.push({ realPosition: round.realPosition, guessPosition: round.guessPosition, realMarker: null, guessMarker: null, line: null });
if (round.guessPosition) { if (round.guessPosition) {
Core.addRealGuessPair(round.realPosition, round.guessPosition); Core.addRealGuessPair(round.realPosition, round.guessPosition, true);
} }
} }
} }
@ -66,15 +65,22 @@
prepareNewRound: function () { prepareNewRound: function () {
document.getElementById('scoreBar').style.width = null; document.getElementById('scoreBar').style.width = null;
if (Core.adaptGuess) { if (Core.rounds.length > 0) {
document.getElementById('guess').classList.remove('adapt'); var lastRound = Core.rounds[Core.rounds.length - 1];
lastRound.realMarker.setVisible(false);
lastRound.guessMarker.setVisible(false);
lastRound.line.setVisible(false);
} }
document.getElementById('showGuessButton').style.visibility = null; document.getElementById('showGuessButton').style.visibility = null;
document.getElementById('guess').style.visibility = null; document.getElementById('guess').style.visibility = null;
document.getElementById('result').style.visibility = null; document.getElementById('guess').classList.remove('result')
Core.guessMap.fitBounds(guessMapBounds); Core.map.setOptions({
draggableCursor: 'crosshair'
});
Core.map.fitBounds(guessMapBounds);
Core.startNewRound(); Core.startNewRound();
}, },
@ -140,15 +146,21 @@
Core.guessMarker.setMap(null); Core.guessMarker.setMap(null);
Core.guessMarker = null; Core.guessMarker = null;
document.getElementById('guess').style.visibility = 'hidden'; if (Core.adaptGuess) {
document.getElementById('result').style.visibility = 'visible'; document.getElementById('guess').classList.remove('adapt');
}
document.getElementById('guess').classList.add('result');
Core.addRealGuessPair(Core.realPosition, guessPosition); Core.addRealGuessPair(Core.realPosition, guessPosition);
var resultBounds = new google.maps.LatLngBounds(); var resultBounds = new google.maps.LatLngBounds();
resultBounds.extend(Core.realPosition); resultBounds.extend(Core.realPosition);
resultBounds.extend(guessPosition); resultBounds.extend(guessPosition);
Core.resultMap.fitBounds(resultBounds);
Core.map.setOptions({
draggableCursor: 'grab'
});
Core.map.fitBounds(resultBounds);
document.getElementById('distance').innerHTML = Util.printDistanceForHuman(distance); document.getElementById('distance').innerHTML = Util.printDistanceForHuman(distance);
document.getElementById('score').innerHTML = score; document.getElementById('score').innerHTML = score;
@ -164,19 +176,12 @@
} }
}, },
addRealGuessPair(realPosition, guessPosition) { addRealGuessPair(realPosition, guessPosition, hidden) {
if (Core.rounds.length > 1) {
var lastRound = Core.rounds[Core.rounds.length - 2];
lastRound.realMarker.setVisible(false);
lastRound.guessMarker.setVisible(false);
lastRound.line.setVisible(false);
}
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.resultMap, map: Core.map,
visible: !hidden,
position: realPosition, position: realPosition,
clickable: true, clickable: true,
draggable: false draggable: false
@ -187,7 +192,8 @@
}); });
round.guessMarker = new google.maps.Marker({ round.guessMarker = new google.maps.Marker({
map: Core.resultMap, map: Core.map,
visible: !hidden,
position: guessPosition, position: guessPosition,
clickable: false, clickable: false,
draggable: false, draggable: false,
@ -201,7 +207,8 @@
}); });
round.line = new google.maps.Polyline({ round.line = new google.maps.Polyline({
map: Core.resultMap, map: Core.map,
visible: !hidden,
path: [ path: [
realPosition, realPosition,
guessPosition guessPosition
@ -268,7 +275,7 @@
resultBounds.extend(round.guessPosition); resultBounds.extend(round.guessPosition);
} }
Core.resultMap.fitBounds(resultBounds); Core.map.fitBounds(resultBounds);
document.getElementById('scoreSum').innerHTML = Core.scoreSum; document.getElementById('scoreSum').innerHTML = Core.scoreSum;
@ -356,22 +363,27 @@
Core.adaptGuess = true; Core.adaptGuess = true;
} }
Core.guessMap = new google.maps.Map(document.getElementById('guessMap'), { Core.map = new google.maps.Map(document.getElementById('map'), {
disableDefaultUI: true, disableDefaultUI: true,
clickableIcons: false, clickableIcons: false,
draggableCursor: 'crosshair' draggableCursor: 'crosshair',
draggingCursor: 'grabbing'
}); });
Core.guessMap.fitBounds(guessMapBounds); Core.map.fitBounds(guessMapBounds);
Core.map.addListener('click', function (e) {
if (Core.rounds[Core.rounds.length - 1].guessPosition) {
return;
}
Core.guessMap.addListener('click', function (e) {
if (Core.guessMarker) { if (Core.guessMarker) {
Core.guessMarker.setPosition(e.latLng); Core.guessMarker.setPosition(e.latLng);
return; return;
} }
Core.guessMarker = new google.maps.Marker({ Core.guessMarker = new google.maps.Marker({
map: Core.guessMap, map: Core.map,
position: e.latLng, position: e.latLng,
clickable: false, clickable: false,
draggable: true, draggable: true,
@ -402,11 +414,6 @@
Core.rewriteGoogleLink(); Core.rewriteGoogleLink();
}); });
Core.resultMap = new google.maps.Map(document.getElementById('resultMap'), {
disableDefaultUI: true,
clickableIcons: false,
});
Core.initialize(); Core.initialize();
document.getElementById('showGuessButton').onclick = function () { document.getElementById('showGuessButton').onclick = function () {

11
views/game.php
View File

@ -19,13 +19,10 @@
<div id="closeGuessButtonContainer" class="buttonContainer top"> <div id="closeGuessButtonContainer" class="buttonContainer top">
<button id="closeGuessButton" class="block gray">Close</button> <button id="closeGuessButton" class="block gray">Close</button>
</div> </div>
<div id="guessMap"></div> <div id="map"></div>
<div class="buttonContainer bottom"> <div id="guessButtonContainer" class="buttonContainer bottom">
<button id="guessButton" class="block" disabled>Guess</button> <button id="guessButton" class="block" disabled>Guess</button>
</div> </div>
</div>
<div id="result">
<div id="resultMap"></div>
<div id="resultInfo"> <div id="resultInfo">
<div id="distanceInfo"> <div id="distanceInfo">
<p>You were <span id="distance" class="bold"></span> close.</p> <p>You were <span id="distance" class="bold"></span> close.</p>
@ -36,7 +33,9 @@
<p>You got <span id="scoreSum" class="bold"></span> points in total.</p> <p>You got <span id="scoreSum" class="bold"></span> points in total.</p>
</div> </div>
<div> <div>
<div id="scoreBarBase"><div id="scoreBar"></div></div> <div id="scoreBarBase">
<div id="scoreBar"></div>
</div>
</div> </div>
<div> <div>
<button id="continueButton">Continue</button> <button id="continueButton">Continue</button>