Merged in develop (pull request #19)

Develop

public/static/css/mapguesser.css

@@ -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;
+    z-index: 3;
-    visibility: visible;
 }
 
 #panorama {
@@ -68,57 +92,18 @@ button:disabled {
 
 #guess {
     position: absolute;
-    right: 20px;
     bottom: 20px;
-    width: 250px;
+    right: 20px;
-    height: 150px;
-    opacity: 0.5;
     z-index: 2;
-    visibility: visible;
-    transition-property: width, height, opacity;
-    transition-duration: 0.1s;
-    transition-delay: 0.8s;
 }
 
-#guess:hover {
+#guessMap {
-    width: 500px;
-    height: 350px;
-    opacity: 0.95;
-    transition-delay: 0s;
-}
-
-#guess > #guessMap {
-    height: 115px;
     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;
+    height: 24px;
-    width: 60%;
     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;
+        }
+    }
+}

public/static/js/mapguesser.js

@@ -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';
+        if (Core.adaptGuess) {
-        document.getElementById('result').style.visibility = 'hidden';
+            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);
 

src/Controller/GetNewPosition.php

@@ -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 COUNT(*) AS num FROM places WHERE map_id=?');
-        $stmt = $mysql->prepare('SELECT lat, lng FROM places WHERE map_id=? ORDER BY RAND() LIMIT 1');
         $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']);

views/game.php

@@ -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">
+        <div class="buttonContainer bottom">
-            <button id="guessButton" disabled>Guess</button>
+            <button id="guessButton" class="block" disabled>Guess</button>
         </div>
     </div>
     <div id="result">