MAPG-64 create cover div when user should not click on the pano or guess map

add loading animation to maps page too
CSS fixes

public/static/css/mapguesser.css

@@ -12,6 +12,11 @@ html, body {
     padding: 0;
 }
 
+button::-moz-focus-inner, input::-moz-focus-inner {
+    padding: 0;
+    border: 0;
+}
+
 p, h1, h2, button, a {
     font-family: 'Roboto', sans-serif;
 }
@@ -210,7 +215,7 @@ div.mapItem>div.inner>div.info>p:nth-child(2) {
     left: 50%;
     margin-top: -32px;
     margin-left: -32px;
-    z-index: 3;
+    z-index: 5;
 }
 
 #roundInfo {
@@ -229,6 +234,17 @@ div.mapItem>div.inner>div.info>p:nth-child(2) {
     z-index: 1;
 }
 
+#cover {
+    position: absolute;
+    top: 40px;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background-color: #000000;
+    opacity: 0.5;
+    z-index: 3;
+}
+
 #guess {
     position: absolute;
     bottom: 30px;
@@ -236,6 +252,10 @@ div.mapItem>div.inner>div.info>p:nth-child(2) {
     z-index: 2;
 }
 
+#guess.result {
+    z-index: 4;
+}
+
 #guess>#continueButtonContainer {
     display: none;
 }
@@ -355,8 +375,8 @@ div.mapItem>div.inner>div.info>p:nth-child(2) {
         z-index: 2;
     }
     #guess {
-        left: 20px;
         top: 50px;
+        left: 20px;
         opacity: 0.95;
         visibility: hidden;
     }

public/static/js/game.js

@@ -16,6 +16,7 @@
 
         initialize: function () {
             document.getElementById('loading').style.visibility = 'visible';
+            document.getElementById('cover').style.visibility = 'visible';
             document.getElementById('currentRound').innerHTML = '1/' + String(Core.NUMBER_OF_ROUNDS);
             document.getElementById('currentScoreSum').innerHTML = '0/0';
 
@@ -33,6 +34,7 @@
                 }
 
                 document.getElementById('loading').style.visibility = 'hidden';
+                document.getElementById('cover').style.visibility = 'hidden';
 
                 Core.panoId = this.response.panoId;
 
@@ -101,6 +103,7 @@
                 lastRound.line.setVisible(false);
             }
 
+            document.getElementById('cover').style.visibility = 'hidden';
             document.getElementById('showGuessButton').style.visibility = null;
             document.getElementById('guess').style.visibility = null;
             document.getElementById('guess').classList.remove('result')
@@ -154,6 +157,7 @@
                 document.getElementById('guess').classList.remove('adapt');
             }
             document.getElementById('loading').style.visibility = 'visible';
+            document.getElementById('cover').style.visibility = 'visible';
 
             var data = new FormData();
             data.append('guess', '1');
@@ -443,6 +447,8 @@
         Core.resetGame();
     }
 
+    // showing the loading animation is not possible, because we don't know if user cancelled the leave
+
     window.onbeforeunload = function (e) {
         if (Core.rounds[Core.rounds.length - 1].position) {
             return;