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

MAPG-19 show loading gif during loading

Browse Source
This commit is contained in:
Bence Pőcze 2020-05-20 15:54:09 +02:00
parent 51be16395e
commit f647e77366
3 changed files with 23 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -48,6 +48,18 @@ button:disabled {
opacity: 0.7;
}
#loading {
position: absolute;
width: 40px;
height: 40px;
top: 50%;
left: 50%;
margin-top: -20px;
margin-left: -20px;
z-index: 2;
visibility: visible;
}
#panorama {
height: 100%;
width: 100%;
@ -151,5 +163,5 @@ button:disabled {
height: 100%;
width: 0;
transition-property: width;
transition-duration: 1.0s;
transition-duration: 2.0s;
}

7
public/static/js/mapguesser.js
View File

@ -11,6 +11,10 @@
googleLink: null,
getNewPosition: function () {
Core.panorama.setVisible(false);
document.getElementById('loading').style.visibility = 'visible';
var xhr = new XMLHttpRequest();
xhr.responseType = 'json';
xhr.onreadystatechange = function () {
@ -31,6 +35,9 @@
return;
}
document.getElementById('loading').style.visibility = 'hidden';
Core.panorama.setVisible(true);
Core.panorama.setPov({ heading: 0, pitch: 0, zoom: 1 });
Core.panorama.setPano(data.location.pano);
},

3
views/game.php
View File

@ -7,6 +7,9 @@
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap" rel="stylesheet">
</head>
<body>
<div id="loading">
<img src="static/img/loading.gif">
</div>
<div id="panorama"></div>
<div id="guess">
<div id="guessMap"></div>