MAPG-20 merge guessMap and resultMap into one map
This commit is contained in:
parent
67358d91ea
commit
96ee250f96
@ -97,25 +97,19 @@ div.buttonContainer.bottom {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#guess.result > #closeGuessButtonContainer, #guess.result > #guessButtonContainer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#guessMap {
|
||||
width: 100%;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
#result {
|
||||
position: absolute;
|
||||
opacity: 0.95;
|
||||
z-index: 2;
|
||||
visibility: hidden;
|
||||
background-color: #ffffff;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
#resultMap {
|
||||
#guess.result > #guessMap {
|
||||
height: 70%;
|
||||
width: 100%;
|
||||
border-top-left-radius: 3px;
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
#resultInfo {
|
||||
@ -124,6 +118,12 @@ div.buttonContainer.bottom {
|
||||
padding: 10px 20px;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
background-color: #ffffff;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#guess.result > #resultInfo {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#resultInfo > div {
|
||||
@ -186,13 +186,6 @@ div.buttonContainer.bottom {
|
||||
height: calc(100% - 90px);
|
||||
}
|
||||
|
||||
#result {
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
bottom: 30px;
|
||||
}
|
||||
|
||||
#scoreBarBase {
|
||||
width: 100%;
|
||||
}
|
||||
@ -200,7 +193,7 @@ div.buttonContainer.bottom {
|
||||
|
||||
@media screen and (min-width: 600px) {
|
||||
#showGuessButtonContainer {
|
||||
visibility: hidden;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#guess {
|
||||
@ -234,7 +227,9 @@ div.buttonContainer.bottom {
|
||||
height: calc(100% - 45px);
|
||||
}
|
||||
|
||||
#result {
|
||||
#guess.result {
|
||||
width: initial;
|
||||
height: initial;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
right: 50px;
|
||||
|
||||
@ -11,7 +11,6 @@
|
||||
panorama: null,
|
||||
guessMap: null,
|
||||
guessMarker: null,
|
||||
resultMap: null,
|
||||
adaptGuess: false,
|
||||
googleLink: null,
|
||||
|
||||
@ -22,7 +21,7 @@
|
||||
var round = roundsLoaded[i];
|
||||
Core.rounds.push({ realPosition: round.realPosition, guessPosition: round.guessPosition, realMarker: null, guessMarker: null, line: null });
|
||||
if (round.guessPosition) {
|
||||
Core.addRealGuessPair(round.realPosition, round.guessPosition);
|
||||
Core.addRealGuessPair(round.realPosition, round.guessPosition, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -66,14 +65,21 @@
|
||||
prepareNewRound: function () {
|
||||
document.getElementById('scoreBar').style.width = null;
|
||||
|
||||
if (Core.adaptGuess) {
|
||||
document.getElementById('guess').classList.remove('adapt');
|
||||
if (Core.rounds.length > 0) {
|
||||
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('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.startNewRound();
|
||||
@ -140,15 +146,21 @@
|
||||
Core.guessMarker.setMap(null);
|
||||
Core.guessMarker = null;
|
||||
|
||||
document.getElementById('guess').style.visibility = 'hidden';
|
||||
document.getElementById('result').style.visibility = 'visible';
|
||||
if (Core.adaptGuess) {
|
||||
document.getElementById('guess').classList.remove('adapt');
|
||||
}
|
||||
document.getElementById('guess').classList.add('result');
|
||||
|
||||
Core.addRealGuessPair(Core.realPosition, guessPosition);
|
||||
|
||||
var resultBounds = new google.maps.LatLngBounds();
|
||||
resultBounds.extend(Core.realPosition);
|
||||
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('score').innerHTML = score;
|
||||
@ -164,19 +176,12 @@
|
||||
}
|
||||
},
|
||||
|
||||
addRealGuessPair(realPosition, guessPosition) {
|
||||
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);
|
||||
}
|
||||
|
||||
addRealGuessPair(realPosition, guessPosition, hidden) {
|
||||
var round = Core.rounds[Core.rounds.length - 1];
|
||||
|
||||
round.realMarker = new google.maps.Marker({
|
||||
map: Core.resultMap,
|
||||
map: Core.guessMap,
|
||||
visible: !hidden,
|
||||
position: realPosition,
|
||||
clickable: true,
|
||||
draggable: false
|
||||
@ -187,7 +192,8 @@
|
||||
});
|
||||
|
||||
round.guessMarker = new google.maps.Marker({
|
||||
map: Core.resultMap,
|
||||
map: Core.guessMap,
|
||||
visible: !hidden,
|
||||
position: guessPosition,
|
||||
clickable: false,
|
||||
draggable: false,
|
||||
@ -201,7 +207,8 @@
|
||||
});
|
||||
|
||||
round.line = new google.maps.Polyline({
|
||||
map: Core.resultMap,
|
||||
map: Core.guessMap,
|
||||
visible: !hidden,
|
||||
path: [
|
||||
realPosition,
|
||||
guessPosition
|
||||
@ -268,7 +275,7 @@
|
||||
resultBounds.extend(round.guessPosition);
|
||||
}
|
||||
|
||||
Core.resultMap.fitBounds(resultBounds);
|
||||
Core.guessMap.fitBounds(resultBounds);
|
||||
|
||||
document.getElementById('scoreSum').innerHTML = Core.scoreSum;
|
||||
|
||||
@ -359,12 +366,17 @@
|
||||
Core.guessMap = new google.maps.Map(document.getElementById('guessMap'), {
|
||||
disableDefaultUI: true,
|
||||
clickableIcons: false,
|
||||
draggableCursor: 'crosshair'
|
||||
draggableCursor: 'crosshair',
|
||||
draggingCursor: 'grabbing'
|
||||
});
|
||||
|
||||
Core.guessMap.fitBounds(guessMapBounds);
|
||||
|
||||
Core.guessMap.addListener('click', function (e) {
|
||||
if (Core.rounds[Core.rounds.length - 1].guessPosition) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (Core.guessMarker) {
|
||||
Core.guessMarker.setPosition(e.latLng);
|
||||
return;
|
||||
@ -402,11 +414,6 @@
|
||||
Core.rewriteGoogleLink();
|
||||
});
|
||||
|
||||
Core.resultMap = new google.maps.Map(document.getElementById('resultMap'), {
|
||||
disableDefaultUI: true,
|
||||
clickableIcons: false,
|
||||
});
|
||||
|
||||
Core.initialize();
|
||||
|
||||
document.getElementById('showGuessButton').onclick = function () {
|
||||
|
||||
@ -20,12 +20,9 @@
|
||||
<button id="closeGuessButton" class="block gray">Close</button>
|
||||
</div>
|
||||
<div id="guessMap"></div>
|
||||
<div class="buttonContainer bottom">
|
||||
<div id="guessButtonContainer" class="buttonContainer bottom">
|
||||
<button id="guessButton" class="block" disabled>Guess</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="result">
|
||||
<div id="resultMap"></div>
|
||||
<div id="resultInfo">
|
||||
<div id="distanceInfo">
|
||||
<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>
|
||||
</div>
|
||||
<div>
|
||||
<div id="scoreBarBase"><div id="scoreBar"></div></div>
|
||||
<div id="scoreBarBase">
|
||||
<div id="scoreBar"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button id="continueButton">Continue</button>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user