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