decla-red/frontend/src/index.ts
2020-10-20 09:24:00 +02:00

68 lines
2.7 KiB
TypeScript

import { glMatrix } from 'gl-matrix';
import {
CharacterBase,
LampBase,
overrideDeserialization,
PlanetBase,
PlayerCharacterBase,
ProjectileBase,
} from 'shared';
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 { handleFullScreen } from './scripts/handle-full-screen';
import { Game } from './scripts/game';
import { PlayerCharacterView } from './scripts/objects/player-character-view';
import '../static/settings.svg';
import '../static/minimize.svg';
import '../static/maximize.svg';
glMatrix.setMatrixArrayType(Array);
overrideDeserialization(CharacterBase, CharacterView);
overrideDeserialization(PlayerCharacterBase, PlayerCharacterView);
overrideDeserialization(PlanetBase, PlanetView);
overrideDeserialization(LampBase, LampView);
overrideDeserialization(ProjectileBase, ProjectileView);
const main = async () => {
try {
const landingUI = document.querySelector('#landing-ui') as HTMLElement;
const joinGameForm = document.querySelector('#join-game-form') as HTMLFormElement;
const serverContainer = document.querySelector('#server-container') as HTMLElement;
const canvas = document.querySelector('canvas') as HTMLCanvasElement;
const overlay = document.querySelector('#overlay') as HTMLElement;
const settings = document.querySelector('#settings') as HTMLElement;
const openSettings = document.querySelector('#open-settings') as HTMLElement;
const closeSettings = document.querySelector('#close-settings') as HTMLElement;
const minimize = document.querySelector('#minimize') as HTMLElement;
const maximize = document.querySelector('#maximize') as HTMLElement;
const enableRelativeMovementCheckbox = document.querySelector(
'#enable-relative-movement',
) as HTMLElement;
openSettings.addEventListener('click', () => (settings.style.visibility = 'visible'));
closeSettings.addEventListener('click', () => (settings.style.visibility = 'hidden'));
const background = new LandingPageBackground(canvas);
const joinHandler = new JoinFormHandler(joinGameForm, serverContainer);
handleFullScreen(minimize, maximize);
const playerDecision = await joinHandler.getPlayerDecision();
landingUI.style.display = 'none';
background.destroy();
new Game(playerDecision, canvas, overlay);
} catch (e) {
console.error(e);
alert(e);
}
};
main();