show loading screen

web/static/index.html

@@ -58,6 +58,10 @@
   <div class="boundingbox" id="playerbox"></div>
   <div class="boundingbox" id="pipebox"></div>
 
+  <div class='overlay' id='loading'>
+    Fetching a new game from the server...
+  </div>
+
   <div class='controls'>
     <a id='new' class='btn' title='Fetch a new game'><i class='fa fa-refresh'></i></a>
     <a id='faster' class='btn' title='Faster'><i class='fa fa-plus-square'></i></a>

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;

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;
+}