From 310f36e4423ce31fabb9e34495878ff8a48e50b2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?P=C5=91cze=20Bence?= Date: Wed, 20 May 2020 15:52:55 +0200 Subject: [PATCH 1/3] MAPG-19 store gif files in LFS --- .gitattributes | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 .gitattributes 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 + From 51be16395e716567717e17adc62e1a5f37cdf766 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?P=C5=91cze=20Bence?= Date: Wed, 20 May 2020 15:53:14 +0200 Subject: [PATCH 2/3] MAPG-19 add loading.gif --- public/static/img/loading.gif | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 public/static/img/loading.gif 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 From f647e773663cdee96f4c0f49d4490cd0b0a2ce39 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?P=C5=91cze=20Bence?= Date: Wed, 20 May 2020 15:54:09 +0200 Subject: [PATCH 3/3] MAPG-19 show loading gif during loading --- public/static/css/mapguesser.css | 14 +++++++++++++- public/static/js/mapguesser.js | 7 +++++++ views/game.php | 3 +++ 3 files changed, 23 insertions(+), 1 deletion(-) 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/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 @@ +
+ +