diff --git a/public/static/css/mapguesser.css b/public/static/css/mapguesser.css
index 56b0f59..56bd909 100644
--- a/public/static/css/mapguesser.css
+++ b/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;
}
diff --git a/public/static/js/game.js b/public/static/js/game.js
index 14e5f79..a8084c8 100644
--- a/public/static/js/game.js
+++ b/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;
diff --git a/views/game.php b/views/game.php
index cc71a5a..1e17b03 100644
--- a/views/game.php
+++ b/views/game.php
@@ -8,23 +8,24 @@
-
+
+
+
