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

Merged in develop (pull request #36)

Browse Source 
develop
This commit is contained in:
Bence Pőcze 2020-05-23 00:18:07 +00:00
commit 28aaaf1172
3 changed files with 154 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -21,6 +21,10 @@ p {
font-size: 12px; font-size: 12px;
} }
.mono {
font-family: 'Roboto Mono', monospace;
}
.bold { .bold {
font-weight: 500; font-weight: 500;
} }
@ -43,12 +47,12 @@ button:enabled:hover, button:enabled:focus {
} }
button:disabled { button:disabled {
cursor: no-drop; cursor: not-allowed;
color: #dddddd; color: #dddddd;
opacity: 0.7; opacity: 0.7;
} }
button.block { button.fullWidth {
padding: 0; padding: 0;
width: 100%; width: 100%;
} }
@ -65,6 +69,10 @@ div.buttonContainer {
height: 35px; height: 35px;
} }
div.buttonContainer > button {
margin: 0 auto;
}
div.buttonContainer.top { div.buttonContainer.top {
margin-bottom: 10px; margin-bottom: 10px;
} }
@ -84,6 +92,24 @@ div.buttonContainer.bottom {
z-index: 3; z-index: 3;
} }
#roundInfo {
position: absolute;
top: 5px;
left: 5px;
height: 28px;
line-height: 28px;
padding: 0 8px;
background-color: #eeeeee;
border: solid 1px #555555;
border-radius: 3px;
opacity: 0.95;
z-index: 2;
}
#roundInfo p {
font-size: 16px;
}
#panorama { #panorama {
height: 100%; height: 100%;
width: 100%; width: 100%;
@ -97,37 +123,46 @@ div.buttonContainer.bottom {
z-index: 2; z-index: 2;
} }
#guessMap { #guess > #continueButtonContainer {
display: none;
}
#guess.result > #closeGuessButtonContainer,
#guess.result > #guessButtonContainer {
display: none;
}
#guess.result > #continueButtonContainer {
display: block;
}
#map {
width: 100%; width: 100%;
border-radius: 3px; border-radius: 3px;
} }
#result { #guess.result > #map {
position: absolute; height: calc(100% - 170px);
opacity: 0.95;
z-index: 2;
visibility: hidden;
background-color: #ffffff;
border-radius: 3px;
}
#resultMap {
height: 70%;
width: 100%;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
} }
#resultInfo { #resultInfo {
height: 30%; margin-top: 5px;
height: 120px;
width: 100%; width: 100%;
padding: 10px 20px; padding: 5px 20px;
text-align: center; text-align: center;
box-sizing: border-box; box-sizing: border-box;
background-color: #ffffff;
border-radius: 3px;
display: none;
}
#guess.result > #resultInfo {
display: block;
} }
#resultInfo > div { #resultInfo > div {
height: 25%; height: 33.33%;
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -177,22 +212,15 @@ div.buttonContainer.bottom {
#guess { #guess {
left: 20px; left: 20px;
top: 20px; top: 40px;
opacity: 0.95; opacity: 0.95;
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%;
} }
@ -230,12 +258,14 @@ div.buttonContainer.bottom {
display: none; display: none;
} }
#guessMap { #map {
height: calc(100% - 45px); height: calc(100% - 45px);
} }
#result { #guess.result {
top: 50px; width: initial;
height: initial;
top: 40px;
left: 50px; left: 50px;
right: 50px; right: 50px;
bottom: 50px; bottom: 50px;
@ -247,13 +277,19 @@ div.buttonContainer.bottom {
@media screen and (max-height: 424px) { @media screen and (max-height: 424px) {
#guess { #guess {
top: 20px; top: 40px;
height: initial; height: initial;
} }
#guess.adapt:hover { #guess.adapt:hover {
top: 20px; top: 40px;
height: initial; height: initial;
} }
#guess.result {
left: 20px;
right: 20px;
bottom: 30px;
}
} }
} }

102
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);
} }
} }
} }
@ -34,8 +33,13 @@
if (Core.rounds.length > 0 && !Core.rounds[Core.rounds.length - 1].guessPosition) { if (Core.rounds.length > 0 && !Core.rounds[Core.rounds.length - 1].guessPosition) {
Core.realPosition = Core.rounds[Core.rounds.length - 1].realPosition; Core.realPosition = Core.rounds[Core.rounds.length - 1].realPosition;
Core.loadPositionInfo(Core.realPosition); Core.loadPositionInfo(Core.realPosition);
document.getElementById('currentRound').innerHTML = String(Core.rounds.length) + '/' + String(Core.NUMBER_OF_ROUNDS);
document.getElementById('currentScoreSum').innerHTML = String(Core.scoreSum) + '/' + String((Core.rounds.length-1) * Core.MAX_SCORE);
} else { } else {
Core.startNewRound(); Core.startNewRound();
document.getElementById('currentScoreSum').innerHTML = String(0);
} }
}, },
@ -61,20 +65,29 @@
document.getElementById('startNewGameButton').style.display = null; document.getElementById('startNewGameButton').style.display = null;
Core.prepareNewRound(); Core.prepareNewRound();
document.getElementById('currentScoreSum').innerHTML = String(0);
}, },
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();
}, },
@ -85,6 +98,8 @@
Core.panorama.setVisible(false); Core.panorama.setVisible(false);
document.getElementById('loading').style.visibility = 'visible'; document.getElementById('loading').style.visibility = 'visible';
document.getElementById('currentRound').innerHTML = String(Core.rounds.length) + '/' + String(Core.NUMBER_OF_ROUNDS);
Core.getNewPosition(); Core.getNewPosition();
}, },
@ -135,20 +150,28 @@
var score = Core.calculateScore(distance); var score = Core.calculateScore(distance);
Core.scoreSum += score; Core.scoreSum += score;
document.getElementById('currentScoreSum').innerHTML = String(Core.scoreSum) + '/' + String(Core.rounds.length * Core.MAX_SCORE);
Core.saveToSession(); Core.saveToSession();
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,20 +187,15 @@
} }
}, },
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,
title: 'Open in Google Maps',
zIndex: 2,
clickable: true, clickable: true,
draggable: false draggable: false
}); });
@ -187,8 +205,10 @@
}); });
round.guessMarker = new google.maps.Marker({ round.guessMarker = new google.maps.Marker({
map: Core.resultMap, map: Core.map,
visible: !hidden,
position: guessPosition, position: guessPosition,
zIndex: 1,
clickable: false, clickable: false,
draggable: false, draggable: false,
label: { label: {
@ -201,7 +221,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
@ -260,6 +281,13 @@
for (var i = 0; i < Core.rounds.length; ++i) { for (var i = 0; i < Core.rounds.length; ++i) {
var round = Core.rounds[i]; var round = Core.rounds[i];
round.realMarker.setLabel({
color: '#812519',
fontFamily: 'Roboto',
fontSize: '16px',
fontWeight: '500',
text: String(i+1)
});
round.realMarker.setVisible(true); round.realMarker.setVisible(true);
round.guessMarker.setVisible(true); round.guessMarker.setVisible(true);
round.line.setVisible(true); round.line.setVisible(true);
@ -268,9 +296,9 @@
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 = String(Core.scoreSum);
var scoreBarProperties = Core.calculateScoreBarProperties(Core.scoreSum, Core.NUMBER_OF_ROUNDS * Core.MAX_SCORE); var scoreBarProperties = Core.calculateScoreBarProperties(Core.scoreSum, Core.NUMBER_OF_ROUNDS * Core.MAX_SCORE);
var scoreBar = document.getElementById('scoreBar'); var scoreBar = document.getElementById('scoreBar');
@ -291,8 +319,10 @@
} }
setTimeout(function () { setTimeout(function () {
Core.googleLink.title = 'Google Maps' if (Core.googleLink) {
Core.googleLink.href = 'https://maps.google.com/maps' Core.googleLink.title = 'Google Maps';
Core.googleLink.href = 'https://maps.google.com/maps';
}
}, 1); }, 1);
}, },
@ -356,22 +386,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 +437,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 () {

30
views/game.php
View File

@ -5,27 +5,27 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>MapGuesser</title> <title>MapGuesser</title>
<link href="static/css/mapguesser.css" rel="stylesheet"> <link href="static/css/mapguesser.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&family=Roboto+Mono:wght@300;500&display=swap" rel="stylesheet">
</head> </head>
<body> <body>
<div id="loading"> <div id="loading">
<img src="static/img/loading.gif"> <img src="static/img/loading.gif">
</div> </div>
<div id="roundInfo">
<p>Round: <span id="currentRound" class="mono bold"></span> | Score: <span id="currentScoreSum" class="mono bold"></span></p>
</div>
<div id="panorama"></div> <div id="panorama"></div>
<div id="showGuessButtonContainer"> <div id="showGuessButtonContainer">
<button id="showGuessButton" class="block">Show guess map</button> <button id="showGuessButton" class="fullWidth">Show guess map</button>
</div> </div>
<div id="guess"> <div id="guess">
<div id="closeGuessButtonContainer" class="buttonContainer top"> <div id="closeGuessButtonContainer" class="buttonContainer top">
<button id="closeGuessButton" class="block gray">Close</button> <button id="closeGuessButton" class="fullWidth 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="fullWidth" 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,14 +36,16 @@
<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>
<button id="continueButton">Continue</button>
<button id="showSummaryButton">Show summary</button>
<button id="startNewGameButton">Start new game</button>
</div> </div>
</div> </div>
<div id="continueButtonContainer" class="buttonContainer bottom">
<button id="continueButton" class="fullWidth">Continue</button>
<button id="showSummaryButton" class="fullWidth">Show summary</button>
<button id="startNewGameButton" class="fullWidth">Start new game</button>
</div>
</div> </div>
<script> <script>
var mapArea = <?= $bounds->calculateApproximateArea() ?>; var mapArea = <?= $bounds->calculateApproximateArea() ?>;