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

frontend/static/spinner.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+  <path fill="none" stroke="#b33951" stroke-width="5" stroke-dasharray="128.29446411132812 128.29446411132812" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40 C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke-linecap="round" style="transform:scale(1);transform-origin:50px 50px">
+    <animate attributeName="stroke-dashoffset" repeatCount="indefinite" dur="1s" keyTimes="0;1" values="0;256.58892822265625"></animate>
+  </path>
+</svg>

frontend/webpack.config.js

@@ -18,7 +18,6 @@ module.exports = {
     },
   },
   plugins: [
-    // Cleans the dist folder before the build starts
     new CleanWebpackPlugin(),
     new MiniCssExtractPlugin(),
     new HtmlWebpackPlugin({
@@ -74,16 +73,20 @@ module.exports = {
         ],
       },
       {
-        test: /\.svg/,
+        test: /\.svg$/,
         use: {
           loader: 'svg-url-loader',
           options: {},
         },
       },
       {
-        test: /\.(png)$/,
+        test: /\.png$/,
         use: {
           loader: 'file-loader',
+          query: {
+            outputPath: '/',
+            name: '[name].[ext]',
+          },
         },
       },
     ],