Merge pull request 'Feature In-Game Compass' (#27) from feature/in-game-compass into develop

Reviewed-on: https://gitea.e5tv.hu/esoko/mapguesser/pulls/27
Reviewed-by: Pőcze Bence <bence@pocze.ch>

multi/package.json

@@ -8,6 +8,6 @@
         "ws": "^7.4.4"
     },
     "scripts": {},
-    "author": "Pőcze Bence <bence@pocze.ch>",
+    "author": "Pőcze Bence and The MapGuesser Contributors <bence@pocze.ch>",
     "license": "GNU AGPL 3.0"
 }

public/static/css/game.css

@@ -157,13 +157,14 @@
 #navigation .navigationItem {
     margin-top: 10px;
     opacity: 70%;
+    cursor: pointer;
 }
 
 #navigation .navigationItem:hover {
     opacity: 100%;
 }
 
-#navigation span {
+#navigation .navigationItem div {
     position: absolute;
 }
 
@@ -188,9 +189,9 @@
     }
     #showGuessButtonContainer {
         position: absolute;
-        left: 60px;
+        left: 65px;
         bottom: 30px;
-        right: 60px;
+        right: 20px;
         z-index: 2;
     }
     #guess {
@@ -207,7 +208,7 @@
     }
     #navigation {
         bottom: 25px;
-        left: 5px;
+        left: 10px;
         width: 45px;
     }
     #navigation .navigationItem {

public/static/css/mapguesser.css

@@ -12,6 +12,10 @@ html, body {
     padding: 0;
 }
 
+body {
+    background-color: #cccccc;
+}
+
 button::-moz-focus-inner, input::-moz-focus-inner {
     padding: 0;
     border: 0;
@@ -374,6 +378,7 @@ header>p>span:not(:last-child) {
 }
 
 main {
+    background-color: #ffffff;
     padding: 6px 12px;
 }
 

public/static/js/game.js

@@ -17,7 +17,7 @@
         adaptGuess: false,
         googleLink: null,
 
-        readyToContinue: false,
+        readyToContinue: true,
         timeoutEnd: null,
         countdownHandler: null,
 
@@ -97,6 +97,8 @@
             },
 
             initialize: function (data) {
+                Game.readyToContinue = false;
+
                 if (data.history.length === 0 && !data.place) {
                     var div = document.getElementById('players');
 
@@ -334,6 +336,9 @@
             document.getElementById('guess').style.visibility = null;
             document.getElementById('guess').classList.remove('result');
 
+            // needs to be set visible after the show guess map hid it in mobile view
+            document.getElementById("navigation").style.visibility = 'visible';
+
             Game.initialize();
         },
 
@@ -358,7 +363,10 @@
             document.getElementById('panoCover').style.visibility = 'hidden';
             document.getElementById('showGuessButton').style.visibility = null;
             document.getElementById('guess').style.visibility = null;
-            document.getElementById('guess').classList.remove('result')
+            document.getElementById('guess').classList.remove('result');
+
+            // needs to be set visible after the show guess map hid it in mobile view
+            document.getElementById("navigation").style.visibility = 'visible';
 
             Game.map.setOptions({
                 draggableCursor: 'crosshair'
@@ -380,12 +388,9 @@
 
             Game.loadPano(Game.panoId, Game.pov);
 
-            // 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)";
+            document.getElementById("compass").style.transform = "translateY(-50%) rotate(" + heading + "deg)";
         },
 
         handleErrorResponse: function (error) {
@@ -864,7 +869,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) {
@@ -952,4 +957,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 });
+    }
 })();

views/game.php

@@ -60,21 +60,21 @@
         </div>
     </div>
     <div id="navigation">
-        <div id="compass" class="navigationItem">
+        <div id="compassContainer" class="navigationItem">
-            <span>
+            <div>
                 <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/circle_background.svg?rev=<?= REVISION ?>" alt="Circle Background" class="circleBackground" />
-            </span>
+            </div>
-            <span>
+            <div>
-                <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>
         <div id="returnToStart" class="navigationItem">
-            <span>
+            <div>
                 <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/circle_background.svg?rev=<?= REVISION ?>" alt="Circle Background" class="circleBackground" />
-            </span>
+            </div>
-            <span>
+            <div>
                 <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/house-fill.svg?rev=<?= REVISION ?>" alt="Return to Start icon" class="navigationIcon" />
-            </span>
+            </div>
         </div>
     </div>
 @endsection

views/templates/layout_normal.php

@@ -29,6 +29,6 @@
 </main>
 <footer>
     <p><span class="bold"><?= $_ENV['APP_NAME'] ?></span> <?= str_replace('Release_', '', VERSION) ?></p><!--
- --><p>&copy; Pőcze Bence <?= (new DateTime(REVISION_DATE))->format('Y') ?></p>
+ --><p>&copy; The MapGuesser Contributors <?= (new DateTime(REVISION_DATE))->format('Y') ?></p>
 </footer>
 @endsection