Merged in feature/MAPG-178-add-google-analytics (pull request #151)

Feature/MAPG-178 add google analytics

.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

.gitignore

@@ -1,3 +1,4 @@
 .env
 installed
+unit_test_results.xml
 vendor

bitbucket-pipelines.yml

@@ -0,0 +1,15 @@
+image: php:7.4.7-cli-buster
+
+pipelines:
+    default:
+        - step:
+              name: Unit Testing
+              caches:
+                  - composer
+              artifacts:
+                  - unit_test_results.xml
+              script:
+                  - apt-get update && apt-get install -y unzip
+                  - curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer
+                  - composer install
+                  - vendor/bin/phpunit --log-junit unit_test_results.xml --testdox tests

composer.json

@@ -8,7 +8,9 @@
     "symfony/console": "^5.1",
     "phpmailer/phpmailer": "^6.1"
   },
-  "require-dev": {},
+  "require-dev": {
+    "phpunit/phpunit": "^9"
+  },
   "autoload": {
     "psr-4": {
       "MapGuesser\\": "src"

docker/Dockerfile

@@ -4,8 +4,8 @@ ENV DEBIAN_FRONTEND noninteractive
 
 # Install Nginx, PHP and further necessary packages
 RUN apt update --fix-missing
-RUN apt install -y curl git mariadb-client nginx \
+RUN apt install -y curl git unzip mariadb-client nginx \
-    php-apcu php-xdebug php7.4-cli php7.4-curl php7.4-fpm php7.4-mbstring php7.4-mysql php7.4-zip
+    php-apcu php-xdebug php7.4-cli php7.4-curl php7.4-fpm php7.4-mbstring php7.4-mysql php7.4-zip php7.4-xml
 
 # Configure Nginx with PHP
 RUN mkdir -p /run/php

public/static/css/game.css

@@ -1,12 +1,15 @@
 #panorama {
-    width: 100%;
+    position: absolute;
-    height: calc(100% - 40px);
+    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 {

public/static/css/map_editor.css

@@ -1,9 +1,13 @@
 #map {
-    width: 100%;
+    position: absolute;
-    height: calc(100% - 40px);
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
     z-index: 1;
 }
 
+/* modify the cursor for the Leaflet map */
 .leaflet-container {
     cursor: crosshair;
 }
@@ -16,6 +20,8 @@
 
 #noPano {
     display: flex;
+    justify-content: center;
+    align-items: center;
     position: absolute;
     z-index: 2;
     visibility: hidden;
@@ -23,12 +29,12 @@
 }
 
 #noPano>p {
-    margin: auto;
+    text-align: center;
 }
 
 #control {
     position: absolute;
-    top: 50px;
+    top: 10px;
     right: 10px;
     width: 125px;
     z-index: 3;
@@ -48,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);

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;

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;
     }

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();
 

scripts/update.sh

@@ -5,7 +5,7 @@ ROOT_DIR=$(dirname $(readlink -f "$0"))/..
 . ${ROOT_DIR}/.env
 
 echo "Installing Composer packages..."
-(cd ${ROOT_DIR} && composer install)
+(cd ${ROOT_DIR} && composer install --no-dev)
 
 echo "Installing Yarn packages..."
 (cd ${ROOT_DIR}/public/static && yarn install)

src/Controller/HomeController.php

@@ -1,12 +1,30 @@
 <?php namespace MapGuesser\Controller;
 
+use MapGuesser\Interfaces\Request\IRequest;
+use MapGuesser\Interfaces\Response\IContent;
 use MapGuesser\Interfaces\Response\IRedirect;
+use MapGuesser\Response\JsonContent;
 use MapGuesser\Response\Redirect;
 
 class HomeController
 {
+    private IRequest $request;
+
+    public function __construct(IRequest $request)
+    {
+        $this->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);
+    }
 }

tests/Util/Geo/BoundsTest.php

@@ -0,0 +1,98 @@
+<?php namespace MapGuesser\Tests\Util\Geo;
+
+use MapGuesser\Util\Geo\Bounds;
+use MapGuesser\Util\Geo\Position;
+use PHPUnit\Framework\TestCase;
+
+final class BoundsTest extends TestCase
+{
+    public function testCanBeCreatedEmpty(): void
+    {
+        $bounds = new Bounds();
+
+        $this->assertEquals(90.0, $bounds->getSouthLat());
+        $this->assertEquals(180.0, $bounds->getWestLng());
+        $this->assertEquals(-90.0, $bounds->getNorthLat());
+        $this->assertEquals(-180.0, $bounds->getEastLng());
+    }
+
+    public function testCanBeCreatedWithPosition(): void
+    {
+        $position = new Position(45.25, 18.12);
+
+        $bounds = new Bounds($position);
+
+        $this->assertEquals($position->getLat(), $bounds->getSouthLat());
+        $this->assertEquals($position->getLng(), $bounds->getWestLng());
+        $this->assertEquals($position->getLat(), $bounds->getNorthLat());
+        $this->assertEquals($position->getLng(), $bounds->getEastLng());
+    }
+
+    public function testCanBeCreatedDirectly(): void
+    {
+        $bounds = Bounds::createDirectly(44.12, 7.33, 50.12, 15.11);
+
+        $this->assertEquals(44.12, $bounds->getSouthLat());
+        $this->assertEquals(7.33, $bounds->getWestLng());
+        $this->assertEquals(50.12, $bounds->getNorthLat());
+        $this->assertEquals(15.11, $bounds->getEastLng());
+    }
+
+    public function testExtendingWithOnePositionIsTheSameAsCreatingWithPosition(): void
+    {
+        $position = new Position(45.25, 18.12);
+
+        $bounds1 = new Bounds();
+        $bounds1->extend($position);
+
+        $bounds2 = new Bounds($position);
+
+        $this->assertEquals($bounds1, $bounds2);
+    }
+
+    public function testCanBeExtendedWithTwoPositions(): void
+    {
+        $bounds = new Bounds();
+
+        $position1 = new Position(45.25, 18.12);
+        $position2 = new Position(43.15, 19.28);
+
+        $bounds->extend($position1);
+        $bounds->extend($position2);
+
+        $this->assertEquals($position2->getLat(), $bounds->getSouthLat());
+        $this->assertEquals($position1->getLng(), $bounds->getWestLng());
+        $this->assertEquals($position1->getLat(), $bounds->getNorthLat());
+        $this->assertEquals($position2->getLng(), $bounds->getEastLng());
+
+        $bounds = new Bounds();
+
+        $position1 = new Position(43.15, 18.12);
+        $position2 = new Position(45.25, 19.28);
+
+        $bounds->extend($position1);
+        $bounds->extend($position2);
+
+        $this->assertEquals($position1->getLat(), $bounds->getSouthLat());
+        $this->assertEquals($position1->getLng(), $bounds->getWestLng());
+        $this->assertEquals($position2->getLat(), $bounds->getNorthLat());
+        $this->assertEquals($position2->getLng(), $bounds->getEastLng());
+    }
+
+    public function testCanCalculateApproximateArea(): void
+    {
+        $bounds = Bounds::createDirectly(44.12, 7.33, 50.12, 15.11);
+
+        $this->assertEqualsWithDelta(391766.09, $bounds->calculateApproximateArea(), 0.01);
+    }
+
+    public function testCanBeConvertedToArray(): void
+    {
+        $bounds = Bounds::createDirectly(44.12, 7.33, 50.12, 15.11);
+
+        $this->assertEquals(
+            ['south' => 44.12, 'west' => 7.33, 'north' => 50.12, 'east' => 15.11],
+            $bounds->toArray()
+        );
+    }
+}

tests/Util/Geo/PositionTest.php

@@ -0,0 +1,33 @@
+<?php namespace MapGuesser\Tests\Util\Geo;
+
+use MapGuesser\Util\Geo\Position;
+use PHPUnit\Framework\TestCase;
+
+final class PositionTest extends TestCase
+{
+    public function testCanBeCreatedWithLatAndLng(): void
+    {
+        $position = new Position(45.25, 18.12);
+
+        $this->assertEquals(45.25, $position->getLat());
+        $this->assertEquals(18.12, $position->getLng());
+    }
+
+    public function testCanCalculateDistanceToAnotherPosition(): void
+    {
+        $position1 = new Position(44.12, 7.33);
+        $position2 = new Position(50.12, 15.11);
+
+        $this->assertEqualsWithDelta(888785.73, $position1->calculateDistanceTo($position2), 0.01);
+    }
+
+    public function testCanBeConvertedToArray(): void
+    {
+        $position = new Position(45.25, 18.12);
+
+        $this->assertEquals(
+            ['lat' => 45.25, 'lng' => 18.12],
+            $position->toArray()
+        );
+    }
+}

views/admin/map_editor.php

@@ -59,18 +59,20 @@ $jsFiles = [
         </div>
     </form>
 </div>
-<div id="map"></div>
+<div class="full">
-<div id="control">
+    <div id="map"></div>
-    <button id="saveButton" class="fullWidth" disabled>Save</button>
+    <div id="panorama"></div>
-</div>
+    <div id="noPano">
-<div id="panorama"></div>
+        <p class="bold">No panorama is available for this location.</p>
-<div id="noPano">
+    </div>
-    <p class="bold">No panorama is available for this location.</p>
+    <div id="control">
-</div>
+        <button id="saveButton" class="fullWidth" disabled>Save</button>
-<div id="placeControl">
+    </div>
-    <button id="applyButton" class="fullWidth">Apply</button>
+    <div id="placeControl">
-    <button id="closeButton" class="gray fullWidth marginTop">Close</button>
+        <button id="applyButton" class="fullWidth">Apply</button>
-    <button id="deleteButton" class="red fullWidth marginTop">Delete</button>
+        <button id="closeButton" class="gray fullWidth marginTop">Close</button>
+        <button id="deleteButton" class="red fullWidth marginTop">Delete</button>
+    </div>
 </div>
 <script>
     var tileUrl = '<?= $_ENV['LEAFLET_TILESERVER_URL'] ?>';

views/game.php

@@ -21,38 +21,40 @@ $jsFiles = [
         --><span>Score <span id="currentScoreSum" class="bold"></span></span>
     </p>
 </header>
-<div id="guessCover"></div>
+<div class="full">
-<div id="panorama"></div>
+    <div id="panoCover"></div>
-<div id="showGuessButtonContainer">
+    <div id="panorama"></div>
-    <button id="showGuessButton" class="fullWidth">Show guess map</button>
+    <div id="showGuessButtonContainer">
-</div>
+        <button id="showGuessButton" class="fullWidth">Show guess map</button>
-<div id="guess">
-    <div id="closeGuessButtonContainer" class="buttonContainer marginBottom">
-        <button id="closeGuessButton" class="fullWidth gray">Close</button>
     </div>
-    <div id="map"></div>
+    <div id="guess">
-    <div id="guessButtonContainer" class="buttonContainer marginTop">
+        <div id="closeGuessButtonContainer" class="buttonContainer marginBottom">
-        <button id="guessButton" class="fullWidth" disabled>Guess</button>
+            <button id="closeGuessButton" class="fullWidth gray">Close</button>
-    </div>
-    <div id="resultInfo">
-        <div id="distanceInfo">
-            <p>You were <span id="distance" class="bold"></span> close.</p>
-            <p class="bold">Game finished.</p>
         </div>
-        <div id="scoreInfo">
+        <div id="map"></div>
-            <p>You earned <span id="score" class="bold"></span> points.</p>
+        <div id="guessButtonContainer" class="buttonContainer marginTop">
-            <p>You got <span id="scoreSum" class="bold"></span> points in total.</p>
+            <button id="guessButton" class="fullWidth" disabled>Guess</button>
         </div>
-        <div>
+        <div id="resultInfo">
-            <div id="scoreBarBase">
+            <div id="distanceInfo">
-                <div id="scoreBar"></div>
+                <p>You were <span id="distance" class="bold"></span> close.</p>
+                <p class="bold">Game finished.</p>
+            </div>
+            <div id="scoreInfo">
+                <p>You earned <span id="score" class="bold"></span> points.</p>
+                <p>You got <span id="scoreSum" class="bold"></span> points in total.</p>
+            </div>
+            <div>
+                <div id="scoreBarBase">
+                    <div id="scoreBar"></div>
+                </div>
             </div>
         </div>
-    </div>
+        <div id="continueButtonContainer" class="buttonContainer marginTop">
-    <div id="continueButtonContainer" class="buttonContainer marginTop">
+            <button id="continueButton" class="fullWidth">Continue</button>
-        <button id="continueButton" class="fullWidth">Continue</button>
+            <button id="showSummaryButton" class="fullWidth">Show summary</button>
-        <button id="showSummaryButton" class="fullWidth">Show summary</button>
+            <button id="startNewGameButton" class="fullWidth">Play this map again</button>
-        <button id="startNewGameButton" class="fullWidth">Play this map again</button>
+        </div>
     </div>
 </div>
 <script>

views/templates/main_footer.php

@@ -1,7 +1,10 @@
     <script>
         const STATIC_ROOT = '<?= $_ENV['STATIC_ROOT'] ?>';
         const REVISION = '<?= REVISION ?>';
-        const ANTI_CSRF_TOKEN = '<?= $_SESSION['anti_csrf_token'] ?>';
+        var ANTI_CSRF_TOKEN = '<?= \Container::$request->session()->get('anti_csrf_token') ?>';
+        <?php if (!empty($_ENV['GOOGLE_ANALITICS_ID'])): ?>
+            const GOOGLE_ANALITICS_ID = '<?= $_ENV['GOOGLE_ANALITICS_ID'] ?>';
+        <?php endif; ?>
     </script>
     <script src="<?= $_ENV['STATIC_ROOT'] ?>/js/mapguesser.js?rev=<?= REVISION ?>"></script>
     <?php if (isset($jsFiles)) : ?>
@@ -17,20 +20,15 @@
     <?php if (!isset($_COOKIE['COOKIES_CONSENT'])): ?>
         <script>
             (function () {
-                MapGuesser = {
+                // we don't want user to agree cookies when clicking on the notice itself
-                    cookiesAgreed: false,
+                document.getElementById('cookiesNotice').onclick = function (e) {
+                    e.stopPropagation();
+                };
 
-                    agreeCookies: function () {
+                document.getElementById('agreeCookiesButton').onclick = function () {
-                        if (MapGuesser.cookiesAgreed) {
+                    MapGuesser.agreeCookies();
-                            return;
-                        }
 
-                        var expirationDate = new Date(new Date().getTime() + 20 * 365 * 24 * 60 * 60 * 1000).toUTCString();
+                    document.getElementById('cookiesNotice').style.display = 'none';
-                        document.cookie = 'COOKIES_CONSENT=1; expires=' + expirationDate + '; path=/';
-
-                        MapGuesser.cookiesAgreed = true;
-                        document.getElementById('cookiesNotice').style.display = 'none';
-                    }
                 };
 
                 window.onclick = function () {
@@ -38,6 +36,14 @@
                 };
             })();
         </script>
+    <?php else: ?>
+        <?php if (!empty($_ENV['GOOGLE_ANALITICS_ID'])): ?>
+            <script>
+                (function () {
+                    MapGuesser.initGoogleAnalitics();
+                })();
+            </script>
+        <?php endif; ?>
     <?php endif; ?>
 </body>
 </html>

views/templates/main_header.php

@@ -25,9 +25,9 @@
     <?php if (!isset($_COOKIE['COOKIES_CONSENT'])): ?>
         <div id="cookiesNotice">
             <p class="small">
-                <?= $_ENV['APP_NAME'] ?> uses cookies to improve user experience. By using the app or clicking I agree, you consent to our use of cookies.
+                <?= $_ENV['APP_NAME'] ?> uses cookies to improve user experience. By using the app or clicking 'Agree', you consent to our use of cookies.
             </p>
-            <button id="agreeCookies" class="small marginTop">I agree</button>
+            <button id="agreeCookiesButton" class="small marginTop">Agree</button>
         </div>
     <?php endif; ?>
     <div id="loading">

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']);