diff --git a/web/static/index.html b/web/static/index.html
index 5878148..b3261f5 100644
--- a/web/static/index.html
+++ b/web/static/index.html
@@ -58,6 +58,10 @@
+
+ Fetching a new game from the server...
+
+
diff --git a/web/static/js/main.js b/web/static/js/main.js
index 280caf9..8734479 100644
--- a/web/static/js/main.js
+++ b/web/static/js/main.js
@@ -511,9 +511,13 @@ function newGame() {
return;
}
+ $('#loading').addClass('active');
+
fetch('/play').then(res => res.json()).then(function(states) {
playing = true;
+ $('#loading').removeClass('active');
+
var i = 0;
setTimeout(function p() {
if (!playing) return;
diff --git a/web/static/style.css b/web/static/style.css
index 8a46c91..f0242c2 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -59,3 +59,35 @@ footer > * {
.btn i {
font-size: 25px;
}
+
+.overlay {
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 100vh;
+
+ z-index: 9999;
+
+ font-size: 25px;
+ font-weight: bold;
+
+ overflow: hidden;
+
+ background: rgba(255, 255, 255, 0.8);
+
+ position: fixed;
+
+ opacity: 0;
+ pointer-events: none;
+
+ text-align: center;
+
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.overlay.active {
+ opacity: 1;
+ pointer-events: all;
+}