diff --git a/public/static/css/mapguesser.css b/public/static/css/mapguesser.css index 3153f8a..160436f 100644 --- a/public/static/css/mapguesser.css +++ b/public/static/css/mapguesser.css @@ -97,25 +97,19 @@ div.buttonContainer.bottom { z-index: 2; } -#guessMap { +#guess.result > #closeGuessButtonContainer, #guess.result > #guessButtonContainer { + display: none; +} + +#map { 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 > #map { 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 { @@ -182,17 +182,10 @@ div.buttonContainer.bottom { visibility: hidden; } - #guessMap { + #map { 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 { @@ -230,11 +223,13 @@ div.buttonContainer.bottom { display: none; } - #guessMap { + #map { height: calc(100% - 45px); } - #result { + #guess.result { + width: initial; + height: initial; top: 50px; left: 50px; right: 50px; @@ -245,7 +240,7 @@ div.buttonContainer.bottom { width: 60%; } - @media screen and (max-height: 424px) { + @media screen and (max-height: 424px) { #guess { top: 20px; height: initial; diff --git a/public/static/js/mapguesser.js b/public/static/js/mapguesser.js index c7bac59..23d0550 100644 --- a/public/static/js/mapguesser.js +++ b/public/static/js/mapguesser.js @@ -9,9 +9,8 @@ scoreSum: 0, realPosition: null, panorama: null, - guessMap: null, + map: 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,15 +65,22 @@ 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.fitBounds(guessMapBounds); + Core.map.setOptions({ + draggableCursor: 'crosshair' + }); + Core.map.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.map.setOptions({ + draggableCursor: 'grab' + }); + Core.map.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.map, + visible: !hidden, position: realPosition, clickable: true, draggable: false @@ -187,7 +192,8 @@ }); round.guessMarker = new google.maps.Marker({ - map: Core.resultMap, + map: Core.map, + visible: !hidden, position: guessPosition, clickable: false, draggable: false, @@ -201,7 +207,8 @@ }); round.line = new google.maps.Polyline({ - map: Core.resultMap, + map: Core.map, + visible: !hidden, path: [ realPosition, guessPosition @@ -268,7 +275,7 @@ resultBounds.extend(round.guessPosition); } - Core.resultMap.fitBounds(resultBounds); + Core.map.fitBounds(resultBounds); document.getElementById('scoreSum').innerHTML = Core.scoreSum; @@ -356,22 +363,27 @@ Core.adaptGuess = true; } - Core.guessMap = new google.maps.Map(document.getElementById('guessMap'), { + Core.map = new google.maps.Map(document.getElementById('map'), { disableDefaultUI: true, 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) { Core.guessMarker.setPosition(e.latLng); return; } Core.guessMarker = new google.maps.Marker({ - map: Core.guessMap, + map: Core.map, position: e.latLng, clickable: false, draggable: true, @@ -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 () { diff --git a/views/game.php b/views/game.php index 0c1138a..325814f 100644 --- a/views/game.php +++ b/views/game.php @@ -19,13 +19,10 @@
-
-
+
+
-
-
-

You were close.

@@ -36,7 +33,9 @@

You got points in total.

-
+
+
+