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
This commit is contained in:
parent
8a433abe9f
commit
88a1d5ab8e
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -8,23 +8,24 @@
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&family=Roboto+Mono:wght@300;500&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header small">
|
||||
<div class="grid">
|
||||
<h1>
|
||||
<a href="maps" title="Back to playable maps">
|
||||
<!-- Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. -->
|
||||
<svg class="inline" width="1em" height="1em" viewBox="0 0 16 16" fill="#28a745" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" d="M15.817.613A.5.5 0 0 1 16 1v13a.5.5 0 0 1-.402.49l-5 1a.502.502 0 0 1-.196 0L5.5 14.51l-4.902.98A.5.5 0 0 1 0 15V2a.5.5 0 0 1 .402-.49l5-1a.5.5 0 0 1 .196 0l4.902.98 4.902-.98a.5.5 0 0 1 .415.103zM10 2.41l-4-.8v11.98l4 .8V2.41zm1 11.98l4-.8V1.61l-4 .8v11.98zm-6-.8V1.61l-4 .8v11.98l4-.8z" />
|
||||
</svg>
|
||||
<span>MapGuesser</span>
|
||||
</a>
|
||||
</h1>
|
||||
<p id="roundInfo">Round: <span id="currentRound" class="mono bold"></span> | Score: <span id="currentScoreSum" class="mono bold"></span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="loading">
|
||||
<img src="static/img/loading.svg">
|
||||
</div>
|
||||
<div class="header small">
|
||||
<div class="grid">
|
||||
<h1>
|
||||
<a href="maps" title="Back to playable maps">
|
||||
<!-- Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. -->
|
||||
<svg class="inline" width="1em" height="1em" viewBox="0 0 16 16" fill="#28a745" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" d="M15.817.613A.5.5 0 0 1 16 1v13a.5.5 0 0 1-.402.49l-5 1a.502.502 0 0 1-.196 0L5.5 14.51l-4.902.98A.5.5 0 0 1 0 15V2a.5.5 0 0 1 .402-.49l5-1a.5.5 0 0 1 .196 0l4.902.98 4.902-.98a.5.5 0 0 1 .415.103zM10 2.41l-4-.8v11.98l4 .8V2.41zm1 11.98l4-.8V1.61l-4 .8v11.98zm-6-.8V1.61l-4 .8v11.98l4-.8z" />
|
||||
</svg>
|
||||
<span>MapGuesser</span>
|
||||
</a>
|
||||
</h1>
|
||||
<p id="roundInfo">Round: <span id="currentRound" class="mono bold"></span> | Score: <span id="currentScoreSum" class="mono bold"></span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="cover"></div>
|
||||
<div id="panorama"></div>
|
||||
<div id="showGuessButtonContainer">
|
||||
<button id="showGuessButton" class="fullWidth">Show guess map</button>
|
||||
|
||||
@ -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">
|
||||
</head>
|
||||
<body>
|
||||
<div id="loading">
|
||||
<img src="static/img/loading.svg">
|
||||
</div>
|
||||
<div class="header">
|
||||
<h1>
|
||||
<!-- Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. -->
|
||||
@ -56,5 +59,12 @@
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.getElementById('loading').style.visibility = 'hidden';
|
||||
|
||||
window.addEventListener('beforeunload', function (e) {
|
||||
document.getElementById('loading').style.visibility = 'visible';
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user