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

MAPG-20 merge guessMap and resultMap into one map

Browse Source
This commit is contained in:
Bence Pőcze 2020-05-22 23:22:11 +02:00
parent 67358d91ea
commit 96ee250f96
3 changed files with 56 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -97,25 +97,19 @@ div.buttonContainer.bottom {
z-index: 2; z-index: 2;
} }
#guess.result > #closeGuessButtonContainer, #guess.result > #guessButtonContainer {
display: none;
}
#guessMap { #guessMap {
width: 100%; width: 100%;
border-radius: 3px; border-radius: 3px;
} }
#result { #guess.result > #guessMap {
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 {
@ -186,13 +186,6 @@ div.buttonContainer.bottom {
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 {
@ -234,7 +227,9 @@ div.buttonContainer.bottom {
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;

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

@ -11,7 +11,6 @@
panorama: null, panorama: null,
guessMap: null, guessMap: 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,14 +65,21 @@
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.setOptions({
draggableCursor: 'crosshair'
});
Core.guessMap.fitBounds(guessMapBounds); Core.guessMap.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.guessMap.setOptions({
draggableCursor: 'grab'
});
Core.guessMap.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.guessMap,
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.guessMap,
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.guessMap,
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.guessMap.fitBounds(resultBounds);
document.getElementById('scoreSum').innerHTML = Core.scoreSum; document.getElementById('scoreSum').innerHTML = Core.scoreSum;
@ -359,12 +366,17 @@
Core.guessMap = new google.maps.Map(document.getElementById('guessMap'), { Core.guessMap = new google.maps.Map(document.getElementById('guessMap'), {
disableDefaultUI: true, disableDefaultUI: true,
clickableIcons: false, clickableIcons: false,
draggableCursor: 'crosshair' draggableCursor: 'crosshair',
draggingCursor: 'grabbing'
}); });
Core.guessMap.fitBounds(guessMapBounds); Core.guessMap.fitBounds(guessMapBounds);
Core.guessMap.addListener('click', function (e) { Core.guessMap.addListener('click', function (e) {
if (Core.rounds[Core.rounds.length - 1].guessPosition) {
return;
}
if (Core.guessMarker) { if (Core.guessMarker) {
Core.guessMarker.setPosition(e.latLng); Core.guessMarker.setPosition(e.latLng);
return; return;
@ -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 () {

9
views/game.php
View File

@ -20,12 +20,9 @@
<button id="closeGuessButton" class="block gray">Close</button> <button id="closeGuessButton" class="block gray">Close</button>
</div> </div>
<div id="guessMap"></div> <div id="guessMap"></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>