esoko/mapguesser
esoko/mapguesser
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 18 Wiki Activity

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

Browse Source 
add loading animation to maps page too
CSS fixes
This commit is contained in:
Bence Pőcze 2020-05-30 20:13:00 +02:00
parent 8a433abe9f
commit 88a1d5ab8e
4 changed files with 53 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
public/static/css/mapguesser.css
View File

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

6
public/static/js/game.js
View File

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

7
views/game.php
View File

@ -8,6 +8,9 @@
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&family=Roboto+Mono:wght@300;500&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&family=Roboto+Mono:wght@300;500&display=swap" rel="stylesheet">
</head> </head>
<body> <body>
<div id="loading">
<img src="static/img/loading.svg">
</div>
<div class="header small"> <div class="header small">
<div class="grid"> <div class="grid">
<h1> <h1>
@ -22,9 +25,7 @@
<p id="roundInfo">Round: <span id="currentRound" class="mono bold"></span> | Score: <span id="currentScoreSum" class="mono bold"></span></p> <p id="roundInfo">Round: <span id="currentRound" class="mono bold"></span> | Score: <span id="currentScoreSum" class="mono bold"></span></p>
</div> </div>
</div> </div>
<div id="loading"> <div id="cover"></div>
<img src="static/img/loading.svg">
</div>
<div id="panorama"></div> <div id="panorama"></div>
<div id="showGuessButtonContainer"> <div id="showGuessButtonContainer">
<button id="showGuessButton" class="fullWidth">Show guess map</button> <button id="showGuessButton" class="fullWidth">Show guess map</button>

10
views/maps.php
View File

@ -8,6 +8,9 @@
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&family=Roboto+Mono:wght@300;500&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&family=Roboto+Mono:wght@300;500&display=swap" rel="stylesheet">
</head> </head>
<body> <body>
<div id="loading">
<img src="static/img/loading.svg">
</div>
<div class="header"> <div class="header">
<h1> <h1>
<!-- Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. --> <!-- Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. -->
@ -56,5 +59,12 @@
<?php endif; ?> <?php endif; ?>
</div> </div>
</div> </div>
<script>
document.getElementById('loading').style.visibility = 'hidden';
window.addEventListener('beforeunload', function (e) {
document.getElementById('loading').style.visibility = 'visible';
});
</script>
</body> </body>
</html> </html>