Add server screen

frontend/src/index.ts

@@ -1,12 +1,15 @@
 import { glMatrix } from 'gl-matrix';
 import { CharacterBase, LampBase, overrideDeserialization, PlanetBase } from 'shared';
 import { ProjectileBase } from 'shared/src/objects/types/projectile-base';
-import { Game } from './scripts/game';
+
 import { CharacterView } from './scripts/objects/character-view';
 import { LampView } from './scripts/objects/lamp-view';
 import { ProjectileView } from './scripts/objects/projectile-view';
 import { PlanetView } from './scripts/objects/planet-view';
 import './styles/main.scss';
+import { LandingPageBackground } from './scripts/landing-page-background';
+import { JoinFormHandler } from './scripts/join-form-handler';
+import { Game } from './scripts/game';
 
 glMatrix.setMatrixArrayType(Array);
 
@@ -15,9 +18,35 @@ overrideDeserialization(PlanetBase, PlanetView);
 overrideDeserialization(LampBase, LampView);
 overrideDeserialization(ProjectileBase, ProjectileView);
 
+const addSupportForTabNavigation = () =>
+  (document.onkeydown = (e) => {
+    if (e.key === ' ') {
+      (document.activeElement as HTMLElement)?.click();
+      e.preventDefault();
+    }
+  });
+
+/*const removeUnnecessaryOutlines = () =>
+  (document.onclick = (e) => {
+    (e.target as HTMLElement)?.blur();
+  });
+*/
+addSupportForTabNavigation();
+//removeUnnecessaryOutlines();
+
 const main = async () => {
   try {
-    await new Game().start();
+    const landingUI = document.querySelector('#landing-ui') as HTMLElement;
+    const background = new LandingPageBackground();
+    const joinHandler = new JoinFormHandler(
+      document.querySelector('#join-game-form') as HTMLFormElement,
+      document.querySelector('#server-container') as HTMLElement,
+    );
+    const playerDecision = await joinHandler.getPlayerDecision();
+    landingUI.style.display = 'none';
+    console.log(playerDecision);
+    background.destroy();
+    await new Game(playerDecision).start();
   } catch (e) {
     console.error(e);
     alert(e);