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>

public/static/css/game.css

@@ -164,7 +164,7 @@
     opacity: 100%;
 }
 
-#navigation span {
+#navigation .navigationItem div {
     position: absolute;
 }
 
@@ -208,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');
 
@@ -955,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 class="navigationItem">
-            <span>
+        <div id="compassContainer" class="navigationItem">
+            <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">
-            <span>
+            <div>
                 <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/circle_background.svg?rev=<?= REVISION ?>" alt="Circle Background" class="circleBackground" />
-            </span>
-            <span>
+            </div>
+            <div>
                 <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/house-fill.svg?rev=<?= REVISION ?>" alt="Return to Start icon" class="navigationIcon" />
-            </span>
+            </div>
         </div>
     </div>
 @endsection