diff --git a/.env.example b/.env.example index 77ca310..3a5e91e 100644 --- a/.env.example +++ b/.env.example @@ -14,3 +14,4 @@ MAIL_HOST=mail MAIL_PORT=2500 GOOGLE_OAUTH_CLIENT_ID=your_google_oauth_client_id GOOGLE_OAUTH_CLIENT_SECRET=your_google_oauth_client_secret +GOOGLE_ANALITICS_ID=your_google_analytics_id diff --git a/public/static/css/game.css b/public/static/css/game.css index 4081aa9..9887cc7 100644 --- a/public/static/css/game.css +++ b/public/static/css/game.css @@ -1,12 +1,15 @@ #panorama { - width: 100%; - height: calc(100% - 40px); + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; z-index: 1; } -#guessCover { +#panoCover { position: absolute; - top: 40px; + top: 0; left: 0; bottom: 0; right: 0; @@ -111,7 +114,7 @@ z-index: 2; } #guess { - top: 50px; + top: 10px; left: 20px; opacity: 0.95; visibility: hidden; @@ -157,7 +160,7 @@ #guess.result { width: initial; height: initial; - top: 50px; + top: 10px; left: 50px; right: 50px; bottom: 50px; @@ -167,11 +170,11 @@ } @media screen and (max-height: 424px) { #guess { - top: 50px; + top: 10px; height: initial; } #guess.adapt:hover { - top: 50px; + top: 10px; height: initial; } #guess.result { diff --git a/public/static/css/map_editor.css b/public/static/css/map_editor.css index b0a161f..59f2315 100644 --- a/public/static/css/map_editor.css +++ b/public/static/css/map_editor.css @@ -1,9 +1,13 @@ #map { - width: 100%; - height: calc(100% - 40px); + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; z-index: 1; } +/* modify the cursor for the Leaflet map */ .leaflet-container { cursor: crosshair; } @@ -30,7 +34,7 @@ #control { position: absolute; - top: 50px; + top: 10px; right: 10px; width: 125px; z-index: 3; @@ -50,31 +54,34 @@ @media screen and (max-width: 999px) and (min-height: 600px) { #map.selected { - height: calc(50% - 20px); + height: 50%; } #panorama, #noPano { left: 0; bottom: 0; right: 0; - height: calc(50% - 20px); + height: 50%; } #placeControl { - top: calc(50% + 30px); + top: calc(50% + 10px); } } @media screen and (min-width: 1000px), (max-height: 599px) { #map.selected { + top: 0; + bottom: 0; + left: 0; width: 50%; } #panorama, #noPano { - top: 40px; + top: 0; bottom: 0; right: 0; width: 50%; } #placeControl { - top: 50px; + top: 10px; } #modified.selected { right: calc(50% + 10px); diff --git a/public/static/css/mapguesser.css b/public/static/css/mapguesser.css index b016fb5..ed8b4f7 100644 --- a/public/static/css/mapguesser.css +++ b/public/static/css/mapguesser.css @@ -324,6 +324,12 @@ main { padding: 6px 12px; } +div.full { + position: relative; + width: 100%; + height: calc(100% - 40px); +} + footer { background-color: #444444; padding: 6px 12px; diff --git a/public/static/js/game.js b/public/static/js/game.js index 8a835c0..0f557ee 100644 --- a/public/static/js/game.js +++ b/public/static/js/game.js @@ -16,7 +16,7 @@ initialize: function () { document.getElementById('loading').style.visibility = 'visible'; - document.getElementById('guessCover').style.visibility = 'visible'; + document.getElementById('panoCover').style.visibility = 'visible'; document.getElementById('currentRound').innerHTML = '1/' + String(Game.NUMBER_OF_ROUNDS); document.getElementById('currentScoreSum').innerHTML = '0/0'; @@ -27,7 +27,7 @@ MapGuesser.httpRequest('GET', '/game/' + mapId + '/newPlace.json', function () { document.getElementById('loading').style.visibility = 'hidden'; - document.getElementById('guessCover').style.visibility = 'hidden'; + document.getElementById('panoCover').style.visibility = 'hidden'; if (this.response.error) { //TODO: handle this error @@ -98,7 +98,7 @@ lastRound.line.setVisible(false); } - document.getElementById('guessCover').style.visibility = 'hidden'; + document.getElementById('panoCover').style.visibility = 'hidden'; document.getElementById('showGuessButton').style.visibility = null; document.getElementById('guess').style.visibility = null; document.getElementById('guess').classList.remove('result') @@ -152,7 +152,7 @@ document.getElementById('guess').classList.remove('adapt'); } document.getElementById('loading').style.visibility = 'visible'; - document.getElementById('guessCover').style.visibility = 'visible'; + document.getElementById('panoCover').style.visibility = 'visible'; var data = new FormData(); data.append('lat', String(guessPosition.lat)); @@ -370,6 +370,14 @@ } }; + MapGuesser.sessionAvailableHooks.reinitializeGame = function () { + MapGuesser.httpRequest('GET', '/game/' + mapId + '/json', function () { + mapBounds = this.response.bounds; + + Game.initialize(); + }); + }; + if (!('ontouchstart' in document.documentElement)) { Game.adaptGuess = true; } diff --git a/public/static/js/mapguesser.js b/public/static/js/mapguesser.js index cc7198f..0af777a 100644 --- a/public/static/js/mapguesser.js +++ b/public/static/js/mapguesser.js @@ -1,4 +1,49 @@ var MapGuesser = { + cookiesAgreed: false, + sessionAvailableHooks: {}, + + initGoogleAnalitics: function () { + if (typeof GOOGLE_ANALITICS_ID === 'undefined') { + return; + } + + // Global site tag (gtag.js) - Google Analytics + var script = document.createElement('script'); + script.src = 'https://www.googletagmanager.com/gtag/js?id=' + GOOGLE_ANALITICS_ID; + script.async = true; + + document.head.appendChild(script); + + window.dataLayer = window.dataLayer || []; + function gtag(){dataLayer.push(arguments);} + gtag('js', new Date()); + gtag('config', GOOGLE_ANALITICS_ID); + }, + + agreeCookies: function () { + if (MapGuesser.cookiesAgreed) { + return; + } + + var expirationDate = new Date(new Date().getTime() + 20 * 365 * 24 * 60 * 60 * 1000).toUTCString(); + document.cookie = 'COOKIES_CONSENT=1; expires=' + expirationDate + '; path=/'; + + MapGuesser.initGoogleAnalitics(); + MapGuesser.httpRequest('GET', '/startSession.json', function () { + ANTI_CSRF_TOKEN = this.response.antiCsrfToken; + + for (var hookId in MapGuesser.sessionAvailableHooks) { + if (!MapGuesser.sessionAvailableHooks.hasOwnProperty(hookId)) { + continue; + } + + MapGuesser.sessionAvailableHooks[hookId](); + } + }); + + MapGuesser.cookiesAgreed = true; + }, + httpRequest: function (method, url, callback, data) { var xhr = new XMLHttpRequest(); diff --git a/src/Controller/HomeController.php b/src/Controller/HomeController.php index b5a180e..a80c1ed 100644 --- a/src/Controller/HomeController.php +++ b/src/Controller/HomeController.php @@ -1,12 +1,30 @@ request = $request; + } + public function getIndex(): IRedirect { return new Redirect(\Container::$routeCollection->getRoute('maps')->generateLink(), IRedirect::TEMPORARY); } + + public function startSession(): IContent + { + // session starts with the request, this method just sends valid data to the client + + $data = ['antiCsrfToken' => $this->request->session()->get('anti_csrf_token')]; + return new JsonContent($data); + } } diff --git a/views/admin/map_editor.php b/views/admin/map_editor.php index 28b6c4d..5b8d74a 100644 --- a/views/admin/map_editor.php +++ b/views/admin/map_editor.php @@ -59,18 +59,20 @@ $jsFiles = [ -
-
- -
-
-
-

No panorama is available for this location.

-
-
- - - +
+
+
+
+

No panorama is available for this location.

+
+
+ +
+
+ + + +
@@ -17,22 +20,14 @@ + + + + \ No newline at end of file diff --git a/views/templates/main_header.php b/views/templates/main_header.php index 23e6e15..a88457d 100644 --- a/views/templates/main_header.php +++ b/views/templates/main_header.php @@ -27,7 +27,7 @@

uses cookies to improve user experience. By using the app or clicking 'Agree', you consent to our use of cookies.

- +
diff --git a/web.php b/web.php index 279ac51..807d96b 100644 --- a/web.php +++ b/web.php @@ -13,6 +13,7 @@ if (!empty($_ENV['DEV'])) { Container::$routeCollection = new MapGuesser\Routing\RouteCollection(); Container::$routeCollection->get('index', '', [MapGuesser\Controller\MapsController::class, 'getMaps']); +Container::$routeCollection->get('startSession', 'startSession.json', [MapGuesser\Controller\HomeController::class, 'startSession']); Container::$routeCollection->group('login', function (MapGuesser\Routing\RouteCollection $routeCollection) { $routeCollection->get('login', '', [MapGuesser\Controller\LoginController::class, 'getLoginForm']); $routeCollection->post('login-action', '', [MapGuesser\Controller\LoginController::class, 'login']);