diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 0000000..fe357d6
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1,2 @@
+*.gif filter=lfs diff=lfs merge=lfs -text
+
diff --git a/public/static/css/mapguesser.css b/public/static/css/mapguesser.css
index 19f7fae..d22455b 100644
--- a/public/static/css/mapguesser.css
+++ b/public/static/css/mapguesser.css
@@ -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;
}
diff --git a/public/static/img/loading.gif b/public/static/img/loading.gif
new file mode 100644
index 0000000..6752946
--- /dev/null
+++ b/public/static/img/loading.gif
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d4400fe604ac37f8a9f7ce77f645e89645166347976f8233a0852c2ccb0a24f0
+size 27593
diff --git a/public/static/js/mapguesser.js b/public/static/js/mapguesser.js
index 10043ae..a405aee 100644
--- a/public/static/js/mapguesser.js
+++ b/public/static/js/mapguesser.js
@@ -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);
},
diff --git a/views/game.php b/views/game.php
index ee1fb8b..1aa5b7a 100644
--- a/views/game.php
+++ b/views/game.php
@@ -7,6 +7,9 @@
+
+
+