Add spinner and fix og-image

frontend/src/index.html

@@ -120,5 +120,9 @@
       alt="maximize-application"
       src="../static/maximize.svg"
     />
+
+    <div id="spinner-container">
+      <img id="spinner" alt="waiting" src="../static/spinner.svg" />
+    </div>
   </body>
 </html>

frontend/src/index.ts

@@ -12,6 +12,7 @@ import { LampView } from './scripts/objects/lamp-view';
 import { ProjectileView } from './scripts/objects/projectile-view';
 import { PlanetView } from './scripts/objects/planet-view';
 import './main.scss';
+import '../static/og-image.png';
 import { LandingPageBackground } from './scripts/landing-page-background';
 import { JoinFormHandler } from './scripts/join-form-handler';
 import { handleFullScreen } from './scripts/handle-full-screen';
@@ -22,6 +23,8 @@ import { getInsightsFromRenderer } from './scripts/get-insights-from-renderer';
 import { Renderer } from 'sdf-2d';
 import ResizeObserver from 'resize-observer-polyfill';
 import { OptionsHandler } from './scripts/options-handler';
+import { hide } from './scripts/helper/hide';
+import { show } from './scripts/helper/show';
 
 glMatrix.setMatrixArrayType(Array);
 
@@ -48,6 +51,7 @@ const enableRelativeMovement = document.querySelector(
 ) as HTMLInputElement;
 const enableSounds = document.querySelector('#enable-sounds') as HTMLInputElement;
 const enableVibration = document.querySelector('#enable-vibration') as HTMLInputElement;
+const spinner = document.querySelector('#spinner-container') as HTMLElement;
 
 let isInGame = false;
 
@@ -123,27 +127,31 @@ const main = async () => {
     startInsights(() => (isInGame ? game.renderer : backgroundRenderer));
 
     for (;;) {
-      landingUI.style.visibility = 'inherit';
-      logoutButton.style.visibility = 'hidden';
+      show(spinner);
+      hide(logoutButton);
+      show(landingUI, true, 'flex');
 
       const background = new LandingPageBackground(canvas);
       const joinHandler = new JoinFormHandler(joinGameForm, serverContainer);
 
       backgroundRenderer = await background.renderer;
+      hide(spinner);
 
       const playerDecision = await joinHandler.getPlayerDecision();
       if (!history.state) {
         history.pushState(true, '');
       }
 
-      landingUI.style.visibility = 'hidden';
-
+      hide(landingUI, true);
+      show(spinner);
       background.destroy();
-
-      logoutButton.style.visibility = 'inherit';
       game = new Game(playerDecision, canvas, overlay);
+      const gameOver = game.start();
+      await game.started;
       isInGame = true;
-      await game.start();
+      hide(spinner);
+      show(logoutButton);
+      await gameOver;
       isInGame = false;
     }
   } catch (e) {

frontend/src/main.scss

@@ -44,7 +44,7 @@ h1 {
 }
 
 .red {
-  color: $red;
+  color: $accent;
   &::selection {
     color: $accent;
     background-color: white;
@@ -62,6 +62,24 @@ canvas {
 body {
   overflow: hidden;
 
+  #spinner-container {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    top: 0;
+
+    @include background;
+    #spinner {
+      @include square(20vmax);
+      @media (max-width: $breakpoint) {
+        @include square(20vmax);
+      }
+    }
+  }
+
   #landing-ui {
     width: 100%;
     height: 100%;

frontend/src/scripts/helper/hide.ts

@@ -0,0 +1,7 @@
+export const hide = (e: HTMLElement, useDisplay = false) => {
+  if (useDisplay) {
+    e.style.display = 'none';
+  } else {
+    e.style.visibility = 'hidden';
+  }
+};

frontend/src/scripts/helper/show.ts

@@ -0,0 +1,7 @@
+export const show = (e: HTMLElement, useDisplay = false, normalDisplayValue?: string) => {
+  if (useDisplay) {
+    e.style.display = normalDisplayValue!;
+  } else {
+    e.style.visibility = 'inherit';
+  }
+};

frontend/src/styles/_vars.scss

@@ -1,5 +1,3 @@
-$gray: #ccc;
-$red: #b33951;
 $accent: #b33951;
 $border-width: 1.5px;
 $border-width-focused: 3px;

frontend/src/styles/form.scss

@@ -66,7 +66,7 @@ form {
         top: 0;
         display: block;
         transition: $animation-time;
-        color: $gray;
+        color: $bright-neutral;
         font-size: 1.1rem;
       }