andras/decla-red
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages 1 Wiki Activity Actions

Improve settings

Browse source
This commit is contained in:
schmelczerandras 2020-10-22 10:53:31 +02:00
parent 2509199abc
commit 81a8834c4d
19 changed files with 439 additions and 123 deletions
Download patch file Download diff file Expand all files Collapse all files

143
frontend/src/index.ts
View file

@ -17,12 +17,14 @@ 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';
import { handleInsights } from './scripts/handle-insights';
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';
glMatrix.setMatrixArrayType(Array);
@ -32,40 +34,44 @@ 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;
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 toggleSettingsButton = document.querySelector(
'#toggle-settings-container',
) as HTMLElement;
const minimize = document.querySelector('#minimize') as HTMLElement;
const maximize = document.querySelector('#maximize') as HTMLElement;
const logoutButton = document.querySelector('#logout') as HTMLElement;
const enableRelativeMovement = document.querySelector(
'#enable-relative-movement',
) as HTMLInputElement;
const enableSounds = document.querySelector('#enable-sounds') as HTMLInputElement;
const enableVibration = document.querySelector('#enable-vibration') as HTMLInputElement;
openSettings.addEventListener('click', () => (settings.style.visibility = 'visible'));
closeSettings.addEventListener('click', () => (settings.style.visibility = 'hidden'));
let isInGame = false;
const background = new LandingPageBackground(canvas);
const joinHandler = new JoinFormHandler(joinGameForm, serverContainer);
handleFullScreen(minimize, maximize);
let backgroundRenderer = await background.renderer;
let isInGame = false;
let game: Game;
const getFrameData = () => {
const startInsights = (getRenderer: () => Renderer | undefined) => {
const { vendor, renderer } = getInsightsFromRenderer(getRenderer());
handleInsights(
{
vendor,
renderer,
referrer: document.referrer,
connection: (navigator as any)?.connection?.effectiveType,
devicePixelRatio: devicePixelRatio,
},
() => {
const {
fps,
renderScale,
lightScale,
canvasWidth,
canvasHeight,
} = getInsightsFromRenderer(isInGame ? game.renderer : backgroundRenderer);
} = getInsightsFromRenderer(getRenderer());
return {
isInGame,
@ -75,26 +81,75 @@ const main = async () => {
canvasWidth,
canvasHeight,
};
};
const { vendor, renderer } = getInsightsFromRenderer(backgroundRenderer);
handleInsights(
{
vendor,
renderer,
referrer: document.referrer,
connection: (navigator as any)?.connection?.effectiveType,
devicePixelRatio: devicePixelRatio,
},
getFrameData,
);
},
);
};
const playerDecision = await joinHandler.getPlayerDecision();
landingUI.style.display = 'none';
const toggleSettings = () =>
(settings.className = settings.className === 'open' ? '' : 'open');
background.destroy();
const applyServerContainerShadows = () => {
const { scrollHeight, clientHeight, scrollTop } = serverContainer;
console.log(scrollHeight, clientHeight, scrollTop);
if (scrollHeight > clientHeight) {
serverContainer.className = 'scroll';
if (scrollTop === 0) {
serverContainer.className += ' top';
} else if (scrollTop + clientHeight === scrollHeight) {
serverContainer.className += ' bottom';
}
}
};
game = new Game(playerDecision, canvas, overlay);
isInGame = true;
const main = async () => {
try {
let game: Game;
handleFullScreen(minimize, maximize);
toggleSettingsButton.addEventListener('click', toggleSettings);
new ResizeObserver(applyServerContainerShadows).observe(serverContainer);
serverContainer.addEventListener('scroll', applyServerContainerShadows);
OptionsHandler.initialize({
relativeMovementEnabled: enableRelativeMovement,
soundsEnabled: enableSounds,
vibrationEnabled: enableVibration,
});
logoutButton.addEventListener('click', () => {
game.destroy();
toggleSettings();
});
window.onpopstate = () => game.destroy();
let backgroundRenderer: Renderer | undefined;
startInsights(() => (isInGame ? game.renderer : backgroundRenderer));
for (;;) {
landingUI.style.visibility = 'inherit';
logoutButton.style.visibility = 'hidden';
const background = new LandingPageBackground(canvas);
const joinHandler = new JoinFormHandler(joinGameForm, serverContainer);
backgroundRenderer = await background.renderer;
const playerDecision = await joinHandler.getPlayerDecision();
if (!history.state) {
history.pushState(true, '');
}
landingUI.style.visibility = 'hidden';
background.destroy();
logoutButton.style.visibility = 'inherit';
game = new Game(playerDecision, canvas, overlay);
isInGame = true;
await game.start();
isInGame = false;
}
} catch (e) {
console.error(e);
alert(e);