From 037d19b0b3941c18356c18c179f61662073571c7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?P=C5=91cze=20Bence?= Date: Tue, 19 May 2020 03:13:55 +0200 Subject: [PATCH 1/6] MAPG-10 refactor view-controller to be able to handle JSON response --- src/Controller/BaseController.php | 24 --------------------- src/Controller/ControllerInterface.php | 8 +++++++ src/View/HtmlView.php | 29 ++++++++++++++++++++++++++ src/View/JsonView.php | 21 +++++++++++++++++++ src/View/ViewBase.php | 15 +++++++++++++ 5 files changed, 73 insertions(+), 24 deletions(-) delete mode 100644 src/Controller/BaseController.php create mode 100644 src/Controller/ControllerInterface.php create mode 100644 src/View/HtmlView.php create mode 100644 src/View/JsonView.php create mode 100644 src/View/ViewBase.php diff --git a/src/Controller/BaseController.php b/src/Controller/BaseController.php deleted file mode 100644 index 9e2c2a7..0000000 --- a/src/Controller/BaseController.php +++ /dev/null @@ -1,24 +0,0 @@ -operate(); - - extract($this->variables); - - ob_start(); - require ROOT . '/views/' . $this->view . '.php'; - $content = ob_get_contents(); - ob_end_clean(); - - return $content; - } - - abstract protected function operate() : void; -} diff --git a/src/Controller/ControllerInterface.php b/src/Controller/ControllerInterface.php new file mode 100644 index 0000000..22d2f8f --- /dev/null +++ b/src/Controller/ControllerInterface.php @@ -0,0 +1,8 @@ +template = $template; + $this->data = &$data; + } + + public function &render(): string + { + extract($this->data); + + ob_start(); + require ROOT . '/views/' . $this->template . '.php'; + $content = ob_get_contents(); + ob_end_clean(); + + return $content; + } + + public function getContentType(): string + { + return 'text/html'; + } +} diff --git a/src/View/JsonView.php b/src/View/JsonView.php new file mode 100644 index 0000000..78eb90f --- /dev/null +++ b/src/View/JsonView.php @@ -0,0 +1,21 @@ +data = &$data; + } + + public function &render(): string + { + $content = json_encode($this->data); + + return $content; + } + + public function getContentType(): string + { + return 'application/json'; + } +} diff --git a/src/View/ViewBase.php b/src/View/ViewBase.php new file mode 100644 index 0000000..9bad81f --- /dev/null +++ b/src/View/ViewBase.php @@ -0,0 +1,15 @@ +data; + } + + abstract public function &render(): string; + + abstract public function getContentType(): string; +} From 61cde2d40b05741890aa714b0e02281c87552523 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?P=C5=91cze=20Bence?= Date: Tue, 19 May 2020 03:14:20 +0200 Subject: [PATCH 2/6] MAPG-10 add toArray to Position --- src/Util/Geo/Position.php | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/Util/Geo/Position.php b/src/Util/Geo/Position.php index 4e2499c..2ac9fc2 100644 --- a/src/Util/Geo/Position.php +++ b/src/Util/Geo/Position.php @@ -21,11 +21,16 @@ class Position return $this->lng; } - public function toJson(): string + public function toArray(): array { - return json_encode([ + return [ 'lat' => $this->lat, 'lng' => $this->lng, - ]); + ]; + } + + public function toJson(): string + { + return json_encode($this->toArray()); } } From 88e8a4e9e4b0a0e854019a9ca39b1467535a39bc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?P=C5=91cze=20Bence?= Date: Tue, 19 May 2020 03:17:40 +0200 Subject: [PATCH 3/6] MAPG-10 add GetNewPosition controller remove position selecing from GuessController adapt GuessController to the new view-controller concept --- src/Controller/GetNewPosition.php | 28 ++++++++++++++++++++++++++++ src/Controller/GuessController.php | 11 ++++++----- views/guess.php | 1 - 3 files changed, 34 insertions(+), 6 deletions(-) create mode 100644 src/Controller/GetNewPosition.php diff --git a/src/Controller/GetNewPosition.php b/src/Controller/GetNewPosition.php new file mode 100644 index 0000000..565a3d2 --- /dev/null +++ b/src/Controller/GetNewPosition.php @@ -0,0 +1,28 @@ +prepare('SELECT lat, lng FROM places WHERE map_id=? ORDER BY RAND() LIMIT 1'); + $stmt->bind_param("i", $mapId); + $stmt->execute(); + $place = $stmt->get_result()->fetch_assoc(); + + $position = new Position($place['lat'], $place['lng']); + + $data = ['position' => $position->toArray()]; + return new JsonView($data); + } +} diff --git a/src/Controller/GuessController.php b/src/Controller/GuessController.php index 036d224..1b851ef 100644 --- a/src/Controller/GuessController.php +++ b/src/Controller/GuessController.php @@ -2,13 +2,13 @@ use MapGuesser\Util\Geo\Bounds; use MapGuesser\Util\Geo\Position; +use MapGuesser\View\HtmlView; +use MapGuesser\View\ViewBase; use mysqli; -class GuessController extends BaseController +class GuessController implements ControllerInterface { - protected string $view = 'guess'; - - protected function operate() : void + public function run(): ViewBase { $mysql = new mysqli($_ENV['DB_HOST'], $_ENV['DB_USER'], $_ENV['DB_PASSWORD'], $_ENV['DB_NAME']); @@ -29,6 +29,7 @@ class GuessController extends BaseController $realPosition = new Position($place['lat'], $place['lng']); $bounds = Bounds::createDirectly($map['bound_south_lat'], $map['bound_west_lng'], $map['bound_north_lat'], $map['bound_east_lng']); - $this->variables = compact('realPosition', 'bounds'); + $data = compact('bounds'); + return new HtmlView('guess', $data); } } diff --git a/views/guess.php b/views/guess.php index 4658d5a..2c96a51 100644 --- a/views/guess.php +++ b/views/guess.php @@ -14,7 +14,6 @@ From e0d65b6e275ad059a9b1961d18b31bf74be3eac8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?P=C5=91cze=20Bence?= Date: Tue, 19 May 2020 03:19:23 +0200 Subject: [PATCH 4/6] MAPG-10 adapt index.php to the new view-controller concept add GetNewPosition's route to index.php --- public/index.php | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/public/index.php b/public/index.php index cae72c9..45f4ab8 100644 --- a/public/index.php +++ b/public/index.php @@ -8,9 +8,16 @@ switch($url) { case '/': $controller = new MapGuesser\Controller\GuessController(); break; + case '/getNewPosition.json': + $controller = new MapGuesser\Controller\GetNewPosition(); + break; default: echo 'Error 404'; die; } -echo $controller->render(); +$view = $controller->run(); + +header('Content-Type: ' . $view->getContentType() . '; charset=UTF-8'); + +echo $view->render(); From 9555a43cf9a7f188b1af0dbdcc026fe2a06f1118 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?P=C5=91cze=20Bence?= Date: Tue, 19 May 2020 03:19:50 +0200 Subject: [PATCH 5/6] MAPG-10 reformat Bounds.php --- src/Util/Geo/Bounds.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Util/Geo/Bounds.php b/src/Util/Geo/Bounds.php index bd1c458..b34d583 100644 --- a/src/Util/Geo/Bounds.php +++ b/src/Util/Geo/Bounds.php @@ -10,7 +10,7 @@ class Bounds private bool $initialized = false; - public static function createWithPosition(Position $position) : Bounds + public static function createWithPosition(Position $position): Bounds { $instance = new static(); @@ -19,7 +19,7 @@ class Bounds return $instance; } - public static function createDirectly(float $southLat, $westLng, $northLat, $eastLng) : Bounds + public static function createDirectly(float $southLat, $westLng, $northLat, $eastLng): Bounds { $instance = new static(); From ef95f5b986e48ae46e05ec808568f033293a3684 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?P=C5=91cze=20Bence?= Date: Tue, 19 May 2020 03:25:42 +0200 Subject: [PATCH 6/6] MAPG-10 query new position with AJAX check if pano at position exists load new pano after guess --- public/static/js/mapguesser.js | 68 ++++++++++++++++++++++++++-------- 1 file changed, 52 insertions(+), 16 deletions(-) diff --git a/public/static/js/mapguesser.js b/public/static/js/mapguesser.js index 1dc203d..4b85e78 100644 --- a/public/static/js/mapguesser.js +++ b/public/static/js/mapguesser.js @@ -45,26 +45,14 @@ var MapManipulator = { } }; +var realPosition; var panorama; var guessMap; var guessMarker; var googleLink; function initialize() { - panorama = new google.maps.StreetViewPanorama(document.getElementById('panorama'), { - position: realPosition, - disableDefaultUI: true, - linksControl: true, - showRoadLabels: false - }); - - panorama.addListener('position_changed', function () { - MapManipulator.rewriteGoogleLink(); - }); - - panorama.addListener('pov_changed', function () { - MapManipulator.rewriteGoogleLink(); - }); + getNewPosition(); guessMap = new google.maps.Map(document.getElementById('guessMap'), { disableDefaultUI: true, @@ -90,6 +78,48 @@ function initialize() { }); } +function getNewPosition() { + var xhr = new XMLHttpRequest(); + xhr.responseType = 'json'; + xhr.onreadystatechange = function () { + if (this.readyState == 4 && this.status == 200) { + realPosition = this.response.position; + + var sv = new google.maps.StreetViewService(); + sv.getPanorama({ location: this.response.position, preference: google.maps.StreetViewPreference.BEST }, loadPano); + } + }; + xhr.open('GET', 'getNewPosition.json', true); + xhr.send(); +} + +function loadPano(data, status) { + if (status !== google.maps.StreetViewStatus.OK) { + getNewPosition(); + return; + } + + if (panorama) { + panorama.setPano(data.location.pano); + return; + } + + panorama = new google.maps.StreetViewPanorama(document.getElementById('panorama'), { + pano: data.location.pano, + disableDefaultUI: true, + linksControl: true, + showRoadLabels: false + }); + + panorama.addListener('position_changed', function () { + MapManipulator.rewriteGoogleLink(); + }); + + panorama.addListener('pov_changed', function () { + MapManipulator.rewriteGoogleLink(); + }); +} + document.getElementById('guessButton').onclick = function () { if (!guessMarker) { return; @@ -98,7 +128,13 @@ document.getElementById('guessButton').onclick = function () { var guessedPosition = guessMarker.getPosition(); var distance = Util.calculateDistance(realPosition, { lat: guessedPosition.lat(), lng: guessedPosition.lng() }); - alert('You were ' + distance + 'm close!'); + alert('You were ' + (Math.round(distance) / 1000) + ' km close!'); - this.blur(); + this.disabled = true; + guessMarker.setMap(null); + guessMarker = null; + //TODO: fit to the same size as on init + guessMap.fitBounds(guessMapBounds); + + getNewPosition(); }