diff --git a/frontend/src/index.html b/frontend/src/index.html index 54a67bd..7492db1 100644 --- a/frontend/src/index.html +++ b/frontend/src/index.html @@ -120,5 +120,9 @@ alt="maximize-application" src="../static/maximize.svg" /> + +
+ waiting +
diff --git a/frontend/src/index.ts b/frontend/src/index.ts index 3b767a4..c0c2a8d 100644 --- a/frontend/src/index.ts +++ b/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) { diff --git a/frontend/src/main.scss b/frontend/src/main.scss index 008d497..ffc2012 100644 --- a/frontend/src/main.scss +++ b/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%; diff --git a/frontend/src/scripts/helper/hide.ts b/frontend/src/scripts/helper/hide.ts new file mode 100644 index 0000000..8283913 --- /dev/null +++ b/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'; + } +}; diff --git a/frontend/src/scripts/helper/show.ts b/frontend/src/scripts/helper/show.ts new file mode 100644 index 0000000..cb43718 --- /dev/null +++ b/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'; + } +}; diff --git a/frontend/src/styles/_vars.scss b/frontend/src/styles/_vars.scss index 14affc2..dc4cd7b 100644 --- a/frontend/src/styles/_vars.scss +++ b/frontend/src/styles/_vars.scss @@ -1,5 +1,3 @@ -$gray: #ccc; -$red: #b33951; $accent: #b33951; $border-width: 1.5px; $border-width-focused: 3px; diff --git a/frontend/src/styles/form.scss b/frontend/src/styles/form.scss index 785e448..175e13d 100644 --- a/frontend/src/styles/form.scss +++ b/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; } diff --git a/frontend/static/spinner.svg b/frontend/static/spinner.svg new file mode 100644 index 0000000..5d0cc38 --- /dev/null +++ b/frontend/static/spinner.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/frontend/webpack.config.js b/frontend/webpack.config.js index f2bccb1..d6b7efa 100644 --- a/frontend/webpack.config.js +++ b/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]', + }, }, }, ],