From 6116b94527c390ae18b590b320198df2809bbfa1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?P=C5=91cze=20Bence?= Date: Wed, 20 May 2020 21:48:37 +0200 Subject: [PATCH 1/5] MAPG-37 use random_int() for selecting the position --- src/Controller/GetNewPosition.php | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/Controller/GetNewPosition.php b/src/Controller/GetNewPosition.php index 565a3d2..f0abf75 100644 --- a/src/Controller/GetNewPosition.php +++ b/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 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']); From 4d8ad9f10f4ddc1ea764925ddd2a1d048ab9de37 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?P=C5=91cze=20Bence?= Date: Thu, 21 May 2020 01:58:47 +0200 Subject: [PATCH 2/5] MAPG-35 introduce layout for mobile further style fixes and adjustments --- public/static/css/mapguesser.css | 162 +++++++++++++++++++++---------- views/game.php | 11 ++- 2 files changed, 121 insertions(+), 52 deletions(-) diff --git a/public/static/css/mapguesser.css b/public/static/css/mapguesser.css index d22455b..85b59e3 100644 --- a/public/static/css/mapguesser.css +++ b/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; - 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,16 +137,93 @@ button:disabled { } #scoreBarBase { - height: 20px; - width: 60%; + height: 24px; margin: 0 auto; background-color: #eeeeee; - border-radius: 3px; } #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: 250px; + height: 150px; + opacity: 0.5; + 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; + } + + #closeGuessButtonContainer { + display: none; + } + + #guessMap { + height: calc(100% - 40px); + } + + #result { + top: 50px; + left: 50px; + right: 50px; + bottom: 50px; + } + + #scoreBarBase { + width: 60%; + } +} diff --git a/views/game.php b/views/game.php index 1aa5b7a..80ced1c 100644 --- a/views/game.php +++ b/views/game.php @@ -2,6 +2,7 @@ + MapGuesser @@ -11,10 +12,16 @@
+
+ +
+
+ +
-
- +
+
From cdbcb6ca5276745c4a4cb017869f1aa92356505f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?P=C5=91cze=20Bence?= Date: Thu, 21 May 2020 01:59:31 +0200 Subject: [PATCH 3/5] MAPG-35 adapt JS to mobile layout use null instead of explicit value when reset --- public/static/js/mapguesser.js | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/public/static/js/mapguesser.js b/public/static/js/mapguesser.js index f4704dd..1da83ee 100644 --- a/public/static/js/mapguesser.js +++ b/public/static/js/mapguesser.js @@ -172,6 +172,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 +241,16 @@ } 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'; + document.getElementById('showGuessButton').style.visibility = null; + document.getElementById('guess').style.visibility = null; + document.getElementById('result').style.visibility = null; Core.guessMap.fitBounds(guessMapBounds); From bbd19cc1d851ea1cffe2aed0b0c5909030895e16 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?P=C5=91cze=20Bence?= Date: Thu, 21 May 2020 02:26:36 +0200 Subject: [PATCH 4/5] MAPG-35 re-add border-radius for scoreBarBase --- public/static/css/mapguesser.css | 1 + 1 file changed, 1 insertion(+) diff --git a/public/static/css/mapguesser.css b/public/static/css/mapguesser.css index 85b59e3..be56808 100644 --- a/public/static/css/mapguesser.css +++ b/public/static/css/mapguesser.css @@ -140,6 +140,7 @@ div.buttonContainer.bottom { height: 24px; margin: 0 auto; background-color: #eeeeee; + border-radius: 3px; } #scoreBar { From f0344bfc6ca1295a75b14b887a877f445ce23113 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?P=C5=91cze=20Bence?= Date: Thu, 21 May 2020 03:24:09 +0200 Subject: [PATCH 5/5] MAPG-35 further adaptations for mobile devices implicitely fix issue MAPG-17 --- public/static/css/mapguesser.css | 23 +++++++++++++++++++++-- public/static/js/mapguesser.js | 13 +++++++++++++ 2 files changed, 34 insertions(+), 2 deletions(-) diff --git a/public/static/css/mapguesser.css b/public/static/css/mapguesser.css index be56808..c93a739 100644 --- a/public/static/css/mapguesser.css +++ b/public/static/css/mapguesser.css @@ -194,15 +194,22 @@ div.buttonContainer.bottom { } #guess { + width: 500px; + height: 350px; + opacity: 0.95; + } + + #guess.adapt { + top: initial; width: 250px; - height: 150px; + height: 175px; opacity: 0.5; transition-property: width, height, opacity; transition-duration: 0.1s; transition-delay: 0.8s; } - #guess:hover { + #guess.adapt:hover { width: 500px; height: 350px; opacity: 0.95; @@ -227,4 +234,16 @@ div.buttonContainer.bottom { #scoreBarBase { width: 60%; } + + @media screen and (max-height: 389px) { + #guess { + top: 20px; + height: initial; + } + + #guess.adapt:hover { + top: 20px; + height: initial; + } + } } diff --git a/public/static/js/mapguesser.js b/public/static/js/mapguesser.js index 1da83ee..b45208a 100644 --- a/public/static/js/mapguesser.js +++ b/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, @@ -248,6 +257,10 @@ Core.resultMarkers.guess.setMap(null); Core.resultMarkers.guess = null; + 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;