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; 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 { #panorama {
height: 100%; height: 100%;
width: 100%; width: 100%;
@ -151,5 +163,5 @@ button:disabled {
height: 100%; height: 100%;
width: 0; width: 0;
transition-property: width; 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, googleLink: null,
getNewPosition: function () { getNewPosition: function () {
Core.panorama.setVisible(false);
document.getElementById('loading').style.visibility = 'visible';
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
xhr.responseType = 'json'; xhr.responseType = 'json';
xhr.onreadystatechange = function () { xhr.onreadystatechange = function () {
@ -31,6 +35,9 @@
return; return;
} }
document.getElementById('loading').style.visibility = 'hidden';
Core.panorama.setVisible(true);
Core.panorama.setPov({ heading: 0, pitch: 0, zoom: 1 }); Core.panorama.setPov({ heading: 0, pitch: 0, zoom: 1 });
Core.panorama.setPano(data.location.pano); 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"> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap" rel="stylesheet">
</head> </head>
<body> <body>
<div id="loading">
<img src="static/img/loading.gif">
</div>
<div id="panorama"></div> <div id="panorama"></div>
<div id="guess"> <div id="guess">
<div id="guessMap"></div> <div id="guessMap"></div>