From e33d8c02e9482ef6a91e53dc81d88823420c196b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bal=C3=A1zs=20Vigh?= <balazs@vigh.eu>
Date: Wed, 28 Apr 2021 20:33:17 +0200
Subject: [PATCH 1/9] added compass button and coupled its transform:rotate
 style attribute with the POV heading value

---
 public/static/img/compass.svg | 5 +++++
 public/static/js/game.js      | 7 +++++++
 views/game.php                | 8 ++++++++
 3 files changed, 20 insertions(+)
 create mode 100644 public/static/img/compass.svg

diff --git a/public/static/img/compass.svg b/public/static/img/compass.svg
new file mode 100644
index 0000000..5662d9e
--- /dev/null
+++ b/public/static/img/compass.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <polygon id="needleNorth" points="50,0 33,50 66,50" style="fill:red;stroke:black;stroke-width:1" />
+  <polygon id="needleSouth" points="50,100 33,50 66,50" style="fill:white;stroke:black;stroke-width:1" />
+  Sorry, your browser does not support inline SVG.
+</svg>
\ No newline at end of file
diff --git a/public/static/js/game.js b/public/static/js/game.js
index a21a66c..7f20842 100644
--- a/public/static/js/game.js
+++ b/public/static/js/game.js
@@ -382,6 +382,10 @@
 
             // needs to be set visible after the show guess map hid it in mobile view
             document.getElementById("navigation").style.visibility = 'visible';
+
+            // update the compass
+            const heading = Game.panorama.getPov().heading;
+            document.getElementById("compass").style.transform = "rotate(" + heading + "deg)";
         },
 
         handleErrorResponse: function (error) {
@@ -858,6 +862,9 @@
 
     Game.panorama.addListener('pov_changed', function () {
         Game.rewriteGoogleLink();
+
+        const heading = Game.panorama.getPov().heading;
+        document.getElementById("compass").style.transform = "rotate(" + heading + "deg)";
     });
 
     if (COOKIES_CONSENT) {
diff --git a/views/game.php b/views/game.php
index 5622c85..ff21ae9 100644
--- a/views/game.php
+++ b/views/game.php
@@ -60,6 +60,14 @@
         </div>
     </div>
     <div id="navigation">
+        <div id="compass" class="navigationItem">
+            <span>
+                <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/circle_background.svg?rev=<?= REVISION ?>" alt="Circle Background" class="circleBackground" />
+            </span>
+            <span>
+                <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/compass.svg?rev=<?= REVISION ?>" alt="compass icon" class="navigationIcon" />
+            </span>
+        </div>
         <div id="returnToStart" class="navigationItem">
             <span>
                 <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/circle_background.svg?rev=<?= REVISION ?>" alt="Circle Background" class="circleBackground" />

From 854775011ca97201603a674d6e868ab0fd4b8b2a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bal=C3=A1zs=20Vigh?= <balazs@vigh.eu>
Date: Wed, 28 Apr 2021 20:42:42 +0200
Subject: [PATCH 2/9] tailored the style for the navigation buttons

---
 public/static/css/game.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/public/static/css/game.css b/public/static/css/game.css
index 90b50d6..b81ebb3 100644
--- a/public/static/css/game.css
+++ b/public/static/css/game.css
@@ -195,7 +195,7 @@
     }
     #guess {
         top: 10px;
-        left: 20px;
+        left: 10px;
         opacity: 0.95;
         visibility: hidden;
     }
@@ -207,7 +207,7 @@
     }
     #navigation {
         bottom: 25px;
-        left: 10px;
+        left: 5px;
         width: 45px;
     }
     #navigation .navigationItem {
@@ -274,7 +274,7 @@
             height: initial;
         }
         #guess.result {
-            left: 20px;
+            left: 10px;
             right: 20px;
             bottom: 30px;
         }

From 08c38c6374be6853a430e28ff323b940b4af5f18 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bal=C3=A1zs=20Vigh?= <balazs@vigh.eu>
Date: Wed, 28 Apr 2021 20:46:52 +0200
Subject: [PATCH 3/9] reverted style tailoring for guess

---
 public/static/css/game.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/public/static/css/game.css b/public/static/css/game.css
index b81ebb3..a4cbf99 100644
--- a/public/static/css/game.css
+++ b/public/static/css/game.css
@@ -195,7 +195,7 @@
     }
     #guess {
         top: 10px;
-        left: 10px;
+        left: 20px;
         opacity: 0.95;
         visibility: hidden;
     }
@@ -274,7 +274,7 @@
             height: initial;
         }
         #guess.result {
-            left: 10px;
+            left: 20px;
             right: 20px;
             bottom: 30px;
         }

From d42280eb10cf20b6a014f9ce8d320b5da6bec5fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bal=C3=A1zs=20Vigh?= <balazs@vigh.eu>
Date: Thu, 29 Apr 2021 09:18:24 +0200
Subject: [PATCH 4/9] only the image is rotated, not the whole div

---
 public/static/js/game.js | 4 ++--
 views/game.php           | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/public/static/js/game.js b/public/static/js/game.js
index 359f749..920d2e7 100644
--- a/public/static/js/game.js
+++ b/public/static/js/game.js
@@ -388,7 +388,7 @@
 
             // update the compass
             const heading = Game.panorama.getPov().heading;
-            document.getElementById("compass").style.transform = "rotate(" + heading + "deg)";
+            document.getElementById("compass").style.transform = "translateY(-50%) rotate(" + heading + "deg)";
         },
 
         handleErrorResponse: function (error) {
@@ -867,7 +867,7 @@
         Game.rewriteGoogleLink();
 
         const heading = Game.panorama.getPov().heading;
-        document.getElementById("compass").style.transform = "rotate(" + heading + "deg)";
+        document.getElementById("compass").style.transform = "translateY(-50%) rotate(" + heading + "deg)";
     });
 
     if (COOKIES_CONSENT) {
diff --git a/views/game.php b/views/game.php
index ff21ae9..b7c8e2b 100644
--- a/views/game.php
+++ b/views/game.php
@@ -60,12 +60,12 @@
         </div>
     </div>
     <div id="navigation">
-        <div id="compass" class="navigationItem">
+        <div class="navigationItem">
             <span>
                 <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/circle_background.svg?rev=<?= REVISION ?>" alt="Circle Background" class="circleBackground" />
             </span>
             <span>
-                <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/compass.svg?rev=<?= REVISION ?>" alt="compass icon" class="navigationIcon" />
+                <img id="compass" src="<?= $_ENV['STATIC_ROOT'] ?>/img/compass.svg?rev=<?= REVISION ?>" alt="compass icon" class="navigationIcon" />
             </span>
         </div>
         <div id="returnToStart" class="navigationItem">

From 2a3f2212a70bd08f59944d7d9e3bdb6f131e6ae4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bal=C3=A1zs=20Vigh?= <balazs@vigh.eu>
Date: Thu, 29 Apr 2021 12:12:17 +0200
Subject: [PATCH 5/9] replaced span with div for the compass item

---
 views/game.php | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/views/game.php b/views/game.php
index 4847ed7..9b079c8 100644
--- a/views/game.php
+++ b/views/game.php
@@ -61,12 +61,12 @@
     </div>
     <div id="navigation">
         <div class="navigationItem">
-            <span>
+            <div>
                 <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/circle_background.svg?rev=<?= REVISION ?>" alt="Circle Background" class="circleBackground" />
-            </span>
-            <span>
+            </div>
+            <div>
                 <img id="compass" src="<?= $_ENV['STATIC_ROOT'] ?>/img/compass.svg?rev=<?= REVISION ?>" alt="compass icon" class="navigationIcon" />
-            </span>
+            </div>
         </div>
         <div id="returnToStart" class="navigationItem">
             <div>

From b22f13887f4ffc8c7f997793a7c6740495e8ee06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bal=C3=A1zs=20Vigh?= <balazs@vigh.eu>
Date: Thu, 29 Apr 2021 12:39:44 +0200
Subject: [PATCH 6/9] clicking on compass sets the heading direction to north

---
 public/static/js/game.js | 4 ++++
 views/game.php           | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/public/static/js/game.js b/public/static/js/game.js
index 920d2e7..890fb17 100644
--- a/public/static/js/game.js
+++ b/public/static/js/game.js
@@ -955,4 +955,8 @@
     document.getElementById('returnToStart').onclick = function () {
         Game.loadPano(Game.panoId, Game.pov);
     }
+
+    document.getElementById('compassContainer').onclick = function () {
+        Game.panorama.setPov({ heading: 0, pitch: Game.panorama.getPov().pitch });
+    }
 })();
diff --git a/views/game.php b/views/game.php
index 9b079c8..ad3d107 100644
--- a/views/game.php
+++ b/views/game.php
@@ -60,7 +60,7 @@
         </div>
     </div>
     <div id="navigation">
-        <div class="navigationItem">
+        <div id="compassContainer" class="navigationItem">
             <div>
                 <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/circle_background.svg?rev=<?= REVISION ?>" alt="Circle Background" class="circleBackground" />
             </div>

From 6d3f74f911b920f87cd6100d5eea077cce2fd26c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bal=C3=A1zs=20Vigh?= <balazs@vigh.eu>
Date: Thu, 29 Apr 2021 18:59:24 +0200
Subject: [PATCH 7/9] increased the left margin for mobile view

---
 public/static/css/game.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/static/css/game.css b/public/static/css/game.css
index 4547cd8..bc87bbb 100644
--- a/public/static/css/game.css
+++ b/public/static/css/game.css
@@ -208,7 +208,7 @@
     }
     #navigation {
         bottom: 25px;
-        left: 5px;
+        left: 10px;
         width: 45px;
     }
     #navigation .navigationItem {

From 7e68580db68c51e4f445f92a4c5b9deb14395619 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C5=91cze=20Bence?= <bence@pocze.ch>
Date: Thu, 29 Apr 2021 19:50:23 +0200
Subject: [PATCH 8/9] update readme

---
 README.md | 45 ++++++++++++++++++++++++++++++++++++---------
 1 file changed, 36 insertions(+), 9 deletions(-)

diff --git a/README.md b/README.md
index d574a67..c1e6050 100644
--- a/README.md
+++ b/README.md
@@ -14,7 +14,7 @@ git clone https://gitea.e5tv.hu/esoko/mapguesser.git
 
 All the commands listed here should be executed from the repository root.
 
-### (Optional) Setup Docker stack
+### Setup Docker stack (recommended)
 
 The easiest way to build up a fully working application with web server and database is to use Docker Compose with the included `docker-compose.yml`.
 
@@ -24,9 +24,17 @@ All you have to do is executing the following command:
 docker-compose up -d
 ```
 
-Attach shell to the container of `mapguesser_app`. All of the following commands should be executed there.
+Attach shell to the container of `mapguesser_app`:
 
-**If you don't use the Docker stack you need to install your environment manually. Check `docker-compose.yml` and `docker/Dockerfile` to see the system requirements.**
+```
+docker exec -it mapguesser_app_1 bash
+```
+
+All of the following commands should be executed there.
+
+### Manual setup (alternative)
+
+If you don't use the Docker stack you need to install your environment manually. Check `docker-compose.yml` and `docker/Dockerfile` to see the system requirements.
 
 ### Initialize project
 
@@ -40,15 +48,28 @@ composer create-project
 
 The `.env` file contains several environment variables that are needed by the application to work properly. These should be configured for your environment.
 
-**You should set here the API keys that enable playing the game. Without these API keys the application cannot work well. To get Google API keys visit this page: https://console.developers.google.com/**
+One very important variable is `DEV`. This indicates that the application operates in development (staging) and not in production mode.
 
-One very important variable is `DEV`. This indicates that the application operates in development (staging) and not in produciton mode.
+**Hint:** If you install the application in the Docker stack for development (staging) environment, only the variables for external dependencies (API keys, map attribution, etc.) should be adapted. All other variables (for DB connection, static root, mailing, multiplayer, etc.) are fine with the default value.
 
-If you install the application in the Docker stack for development (staging) environment, only the variables for external dependencies (API keys, map attribution, etc.) should be adapted. All other variables (for DB connection, static root, mailing, etc.) are fine with the default value.
+#### API keys
+
+**You should set the API keys that enable playing the game. Without these API keys the application cannot work well. To get Google API keys visit this page: https://console.developers.google.com/**
+
+Required Google APIs:
+* **Maps JavaScript API**: for the interactive maps and street views
+* **Maps Static API**: for the static map images
+* **Street View Static API**: for the backend metadata requests
+
+Required API keys:
+* **GOOGLE_MAPS_SERVER_API_KEY**: this it used by the backend and should have access to **Street View Static API**
+* **GOOGLE_MAPS_JS_API_KEY**: this is used by the frontend and should have access to **Maps JavaScript API** and **Maps Static API**
+
+Additionally, a tile provider is also needed for map editor. This should be configured by `LEAFLET_TILESERVER_URL` and `LEAFLET_TILESERVER_ATTRIBUTION`. You can find some providers here: https://wiki.openstreetmap.org/wiki/Tile_servers. OpenStreetMap's tile server is fine for testing.
 
 ### (Production only) Create cron job
 
-To maintain database (delete inactive users, old sessions etc.), the command `db:maintain` should be regularly executed. It is recommened to create a cron job that runs every hour:
+To maintain database (delete inactive users, old sessions etc.), the command `db:maintain` should be regularly executed. It is recommended to create a cron job that runs every hour:
 
 ```
 0 * * * * /path/to/your/installation/mapg db:maintain >>/var/log/cron-mapguesser.log 2>&1
@@ -56,13 +77,19 @@ To maintain database (delete inactive users, old sessions etc.), the command `db
 
 ### Finalize installation
 
-After you set the environment variables in the `.env` file, execute the following command:
+After you followed the above steps, execute the following command:
 
 ```
 scripts/install.sh
 ```
 
-**And you are done!** The application is ready to use and develop.
+**Warning: Because of a known issue the image `mapguesser_multi` fails to run without the installation steps. You have to relauch `docker-compose up -d` after you finished the installation process.**
+
+**And you are done!** The application is ready to use and develop. In development mode an administrative user is also created by the installation script, email is **mapg@mapg.dev**, password is **123456**. In production mode you should create the first administrative user with the following command:
+
+```
+./mapg user:add EMAIL PASSWORD admin
+```
 
 If you installed it in the Docker stack, you can reach it on http://localhost. The mails that are sent by the application can be found on http://localhost:8080/. If needed, the database server can be directly reached on localhost:3306.
 

From 70b60d2fb8ef92d9391ef9099791d35d47eb4334 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C5=91cze=20Bence?= <bence@pocze.ch>
Date: Thu, 29 Apr 2021 20:02:00 +0200
Subject: [PATCH 9/9] create the first user during installation in development
 mode

---
 scripts/install.sh | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/scripts/install.sh b/scripts/install.sh
index 761023d..6abf5a6 100755
--- a/scripts/install.sh
+++ b/scripts/install.sh
@@ -27,6 +27,9 @@ if [ -z "${DEV}" ] || [ "${DEV}" -eq "0" ]; then
 
     echo "Linking view files..."
     (cd ${ROOT_DIR} && ./mapg view:link)
+else
+    echo "Creating the first user..."
+    (cd ${ROOT_DIR} && ./mapg user:add mapg@mapg.dev 123456 admin)
 fi
 
 touch ${ROOT_DIR}/installed