Merged in develop (pull request #19)
Develop
This commit is contained in:
commit
4a2da9c89b
@ -27,16 +27,17 @@ p {
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
font-size: 15px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
background-color: #5e77aa;
|
||||
padding: 8px 15px;
|
||||
padding: 0 15px;
|
||||
height: 35px;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
button:hover, button:focus {
|
||||
button:enabled:hover, button:enabled:focus {
|
||||
background-color: #29457f;
|
||||
outline: none;
|
||||
}
|
||||
@ -44,10 +45,34 @@ button:hover, button:focus {
|
||||
button:disabled {
|
||||
cursor: no-drop;
|
||||
color: #dddddd;
|
||||
background-color: #808080;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
button.block {
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
button.gray {
|
||||
background-color: #808080;
|
||||
}
|
||||
|
||||
button.gray:hover, button.gray:focus {
|
||||
background-color: #555555;
|
||||
}
|
||||
|
||||
div.buttonContainer {
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
div.buttonContainer.top {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
div.buttonContainer.bottom {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
#loading {
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
@ -56,8 +81,7 @@ button:disabled {
|
||||
left: 50%;
|
||||
margin-top: -20px;
|
||||
margin-left: -20px;
|
||||
z-index: 2;
|
||||
visibility: visible;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
#panorama {
|
||||
@ -68,57 +92,18 @@ button:disabled {
|
||||
|
||||
#guess {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
width: 250px;
|
||||
height: 150px;
|
||||
opacity: 0.5;
|
||||
right: 20px;
|
||||
z-index: 2;
|
||||
visibility: visible;
|
||||
transition-property: width, height, opacity;
|
||||
transition-duration: 0.1s;
|
||||
transition-delay: 0.8s;
|
||||
}
|
||||
|
||||
#guess:hover {
|
||||
width: 500px;
|
||||
height: 350px;
|
||||
opacity: 0.95;
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
#guess > #guessMap {
|
||||
height: 115px;
|
||||
#guessMap {
|
||||
width: 100%;
|
||||
transition-property: height;
|
||||
transition-duration: 0.1s;
|
||||
transition-delay: 0.8s;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
#guess:hover > #guessMap {
|
||||
height: 315px;
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
#guessButtonContainer {
|
||||
margin-top: 5px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
#guessButton {
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#result {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
right: 50px;
|
||||
bottom: 50px;
|
||||
opacity: 0.95;
|
||||
z-index: 2;
|
||||
visibility: hidden;
|
||||
@ -152,8 +137,7 @@ button:disabled {
|
||||
}
|
||||
|
||||
#scoreBarBase {
|
||||
height: 20px;
|
||||
width: 60%;
|
||||
height: 24px;
|
||||
margin: 0 auto;
|
||||
background-color: #eeeeee;
|
||||
border-radius: 3px;
|
||||
@ -162,6 +146,104 @@ button:disabled {
|
||||
#scoreBar {
|
||||
height: 100%;
|
||||
width: 0;
|
||||
border-radius: 3px;
|
||||
transition-property: width;
|
||||
transition-duration: 2.0s;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 599px) {
|
||||
button {
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#showGuessButtonContainer {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#guess {
|
||||
left: 20px;
|
||||
top: 20px;
|
||||
opacity: 0.95;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#guessMap {
|
||||
height: calc(100% - 80px);
|
||||
}
|
||||
|
||||
#result {
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
}
|
||||
|
||||
#scoreBarBase {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 600px) {
|
||||
#showGuessButtonContainer {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#guess {
|
||||
width: 500px;
|
||||
height: 350px;
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
#guess.adapt {
|
||||
top: initial;
|
||||
width: 250px;
|
||||
height: 175px;
|
||||
opacity: 0.5;
|
||||
transition-property: width, height, opacity;
|
||||
transition-duration: 0.1s;
|
||||
transition-delay: 0.8s;
|
||||
}
|
||||
|
||||
#guess.adapt:hover {
|
||||
width: 500px;
|
||||
height: 350px;
|
||||
opacity: 0.95;
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
#closeGuessButtonContainer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#guessMap {
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
|
||||
#result {
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
right: 50px;
|
||||
bottom: 50px;
|
||||
}
|
||||
|
||||
#scoreBarBase {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
@media screen and (max-height: 389px) {
|
||||
#guess {
|
||||
top: 20px;
|
||||
height: initial;
|
||||
}
|
||||
|
||||
#guess.adapt:hover {
|
||||
top: 20px;
|
||||
height: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
|
||||
realPosition: null,
|
||||
panorama: null,
|
||||
adaptGuess: false,
|
||||
guessMap: null,
|
||||
guessMarker: null,
|
||||
resultMap: null,
|
||||
@ -37,6 +38,10 @@
|
||||
|
||||
document.getElementById('loading').style.visibility = 'hidden';
|
||||
|
||||
if (Core.adaptGuess) {
|
||||
document.getElementById('guess').classList.add('adapt');
|
||||
}
|
||||
|
||||
Core.panorama.setVisible(true);
|
||||
Core.panorama.setPov({ heading: 0, pitch: 0, zoom: 0 });
|
||||
Core.panorama.setPano(data.location.pano);
|
||||
@ -120,6 +125,10 @@
|
||||
}
|
||||
};
|
||||
|
||||
if (!('ontouchstart' in document.documentElement)) {
|
||||
Core.adaptGuess = true;
|
||||
}
|
||||
|
||||
Core.guessMap = new google.maps.Map(document.getElementById('guessMap'), {
|
||||
disableDefaultUI: true,
|
||||
clickableIcons: false,
|
||||
@ -172,6 +181,16 @@
|
||||
|
||||
Core.getNewPosition();
|
||||
|
||||
document.getElementById('showGuessButton').onclick = function () {
|
||||
this.style.visibility = 'hidden';
|
||||
document.getElementById('guess').style.visibility = 'visible';
|
||||
}
|
||||
|
||||
document.getElementById('closeGuessButton').onclick = function () {
|
||||
document.getElementById('showGuessButton').style.visibility = null;
|
||||
document.getElementById('guess').style.visibility = null;
|
||||
}
|
||||
|
||||
document.getElementById('guessButton').onclick = function () {
|
||||
if (!Core.guessMarker) {
|
||||
return;
|
||||
@ -231,15 +250,20 @@
|
||||
}
|
||||
|
||||
document.getElementById('continueButton').onclick = function () {
|
||||
document.getElementById('scoreBar').style.width = '0';
|
||||
document.getElementById('scoreBar').style.width = null;
|
||||
|
||||
Core.resultMarkers.real.setMap(null);
|
||||
Core.resultMarkers.real = null;
|
||||
Core.resultMarkers.guess.setMap(null);
|
||||
Core.resultMarkers.guess = null;
|
||||
|
||||
document.getElementById('guess').style.visibility = 'visible';
|
||||
document.getElementById('result').style.visibility = 'hidden';
|
||||
if (Core.adaptGuess) {
|
||||
document.getElementById('guess').classList.remove('adapt');
|
||||
}
|
||||
|
||||
document.getElementById('showGuessButton').style.visibility = null;
|
||||
document.getElementById('guess').style.visibility = null;
|
||||
document.getElementById('result').style.visibility = null;
|
||||
|
||||
Core.guessMap.fitBounds(guessMapBounds);
|
||||
|
||||
|
||||
@ -14,10 +14,16 @@ class GetNewPosition implements ControllerInterface
|
||||
// demo map
|
||||
$mapId = 1;
|
||||
|
||||
// using RAND() for the time being, could be changed in the future
|
||||
$stmt = $mysql->prepare('SELECT lat, lng FROM places WHERE map_id=? ORDER BY RAND() LIMIT 1');
|
||||
$stmt = $mysql->prepare('SELECT COUNT(*) AS num FROM places WHERE map_id=?');
|
||||
$stmt->bind_param("i", $mapId);
|
||||
$stmt->execute();
|
||||
$numberOfPlaces = $stmt->get_result()->fetch_assoc()['num'];
|
||||
|
||||
$randomOffset = random_int(0, $numberOfPlaces-1);
|
||||
|
||||
$stmt = $mysql->prepare('SELECT lat, lng FROM places WHERE map_id=? ORDER BY id LIMIT 1 OFFSET ?');
|
||||
$stmt->bind_param("ii", $mapId, $randomOffset);
|
||||
$stmt->execute();
|
||||
$place = $stmt->get_result()->fetch_assoc();
|
||||
|
||||
$position = new Position($place['lat'], $place['lng']);
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<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">
|
||||
@ -11,10 +12,16 @@
|
||||
<img src="static/img/loading.gif">
|
||||
</div>
|
||||
<div id="panorama"></div>
|
||||
<div id="showGuessButtonContainer">
|
||||
<button id="showGuessButton" class="block">Show guess map</button>
|
||||
</div>
|
||||
<div id="guess">
|
||||
<div id="closeGuessButtonContainer" class="buttonContainer top">
|
||||
<button id="closeGuessButton" class="block gray">Close</button>
|
||||
</div>
|
||||
<div id="guessMap"></div>
|
||||
<div id="guessButtonContainer">
|
||||
<button id="guessButton" disabled>Guess</button>
|
||||
<div class="buttonContainer bottom">
|
||||
<button id="guessButton" class="block" disabled>Guess</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="result">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user