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/7] 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" />
-- 
2.45.2


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/7] 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;
         }
-- 
2.45.2


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/7] 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;
         }
-- 
2.45.2


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/7] 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">
-- 
2.45.2


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/7] 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>
-- 
2.45.2


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/7] 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>
-- 
2.45.2


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/7] 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 {
-- 
2.45.2