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

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

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

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

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

32
views/game.php
View File

@ -5,27 +5,27 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>MapGuesser</title>
<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>
<body>
<div id="loading">
<img src="static/img/loading.gif">
</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="showGuessButtonContainer">
<button id="showGuessButton" class="block">Show guess map</button>
<button id="showGuessButton" class="fullWidth">Show guess map</button>
</div>
<div id="guess">
<div id="closeGuessButtonContainer" class="buttonContainer top">
<button id="closeGuessButton" class="block gray">Close</button>
<button id="closeGuessButton" class="fullWidth gray">Close</button>
</div>
<div id="guessMap"></div>
<div class="buttonContainer bottom">
<button id="guessButton" class="block" disabled>Guess</button>
<div id="map"></div>
<div id="guessButtonContainer" class="buttonContainer bottom">
<button id="guessButton" class="fullWidth" 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,14 +36,16 @@
<p>You got <span id="scoreSum" class="bold"></span> points in total.</p>
</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 id="scoreBarBase">
<div id="scoreBar"></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>
<script>
var mapArea = <?= $bounds->calculateApproximateArea() ?>;