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

Optimize performance

Browse source
This commit is contained in:
schmelczerandras 2020-10-26 14:18:36 +01:00
parent e4cd3284b7
commit b8ef90c100
31 changed files with 319 additions and 206 deletions
Download patch file Download diff file Expand all files Collapse all files

93
frontend/package-lock.json generated
View file

@ -33,9 +33,10 @@
"resolve-url-loader": "^3.1.1",
"sass": "^1.27.0",
"sass-loader": "^8.0.2",
"sdf-2d": "file:..\\..\\sdf-2d",
"sdf-2d": "^0.6.2",
"shared": "file:../shared",
"socket.io-client": "^2.3.1",
"socket.io-msgpack-parser": "^2.0.0",
"source-map-loader": "^1.1.1",
"svg-url-loader": "^6.0.0",
"terser-webpack-plugin": "^4.2.2",
@ -46,32 +47,6 @@
"webpack-dev-server": "^3.11.0"
}
},
"../../sdf-2d": {
"version": "0.6.1",
"dev": true,
"license": "ISC",
"dependencies": {
"gl-matrix": "^3.3.0"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^3.10.1",
"@typescript-eslint/parser": "^3.10.1",
"eslint": "^7.9.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-unused-imports": "^0.1.3",
"prettier": "^2.1.2",
"raw-loader": "^4.0.1",
"terser-webpack-plugin": "^2.3.8",
"ts-loader": "^8.0.3",
"typedoc": "^0.19.2",
"typedoc-plugin-extras": "^1.1.6",
"typescript": "^3.9.7",
"webpack": "^4.44.2",
"webpack-cli": "^3.3.11"
}
},
"../shared": {
"version": "0.0.0",
"dev": true,
@ -11687,6 +11662,12 @@
"node": ">=4"
}
},
"node_modules/notepack.io": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/notepack.io/-/notepack.io-2.2.0.tgz",
"integrity": "sha512-9b5w3t5VSH6ZPosoYnyDONnUTF8o0UkBw7JLA6eBlYJWyGT1Q3vQa8Hmuj1/X6RYvHjjygBDgw6fJhe0JEojfw==",
"dev": true
},
"node_modules/npmlog": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
@ -15147,8 +15128,14 @@
}
},
"node_modules/sdf-2d": {
"resolved": "../../sdf-2d",
"link": true
"version": "0.6.2",
"resolved": "https://registry.npmjs.org/sdf-2d/-/sdf-2d-0.6.2.tgz",
"integrity": "sha512-VUeToQdZn96ZhliHTRcfHYGgQ/4TyUDicy6GaUug1skZdxmh/er9KRcihRIVjyiJg/6DGY87J71y+CcygwZqwA==",
"dev": true,
"dependencies": {
"gl-matrix": "^3.3.0",
"resize-observer-polyfill": "^1.5.1"
}
},
"node_modules/select-hose": {
"version": "2.0.0",
@ -15700,6 +15687,16 @@
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
"dev": true
},
"node_modules/socket.io-msgpack-parser": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/socket.io-msgpack-parser/-/socket.io-msgpack-parser-2.2.1.tgz",
"integrity": "sha512-T2/vHDxuKBHqmLDAFeJ714OJsV1QbeVo6WApx1gSOwXE96OVCJErOTyjzDnISMbn/yxLIrUex9vJv4IO5/skdQ==",
"dev": true,
"dependencies": {
"component-emitter": "~1.3.0",
"notepack.io": "~2.2.0"
}
},
"node_modules/socket.io-parser": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-3.3.1.tgz",
@ -28988,6 +28985,12 @@
"sort-keys": "^1.0.0"
}
},
"notepack.io": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/notepack.io/-/notepack.io-2.2.0.tgz",
"integrity": "sha512-9b5w3t5VSH6ZPosoYnyDONnUTF8o0UkBw7JLA6eBlYJWyGT1Q3vQa8Hmuj1/X6RYvHjjygBDgw6fJhe0JEojfw==",
"dev": true
},
"npmlog": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
@ -31851,25 +31854,13 @@
}
},
"sdf-2d": {
"version": "file:../../sdf-2d",
"version": "0.6.2",
"resolved": "https://registry.npmjs.org/sdf-2d/-/sdf-2d-0.6.2.tgz",
"integrity": "sha512-VUeToQdZn96ZhliHTRcfHYGgQ/4TyUDicy6GaUug1skZdxmh/er9KRcihRIVjyiJg/6DGY87J71y+CcygwZqwA==",
"dev": true,
"requires": {
"@typescript-eslint/eslint-plugin": "^3.10.1",
"@typescript-eslint/parser": "^3.10.1",
"eslint": "^7.9.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-unused-imports": "^0.1.3",
"gl-matrix": "^3.3.0",
"prettier": "^2.1.2",
"raw-loader": "^4.0.1",
"terser-webpack-plugin": "^2.3.8",
"ts-loader": "^8.0.3",
"typedoc": "^0.19.2",
"typedoc-plugin-extras": "^1.1.6",
"typescript": "^3.9.7",
"webpack": "^4.44.2",
"webpack-cli": "^3.3.11"
"resize-observer-polyfill": "^1.5.1"
}
},
"select-hose": {
@ -32369,6 +32360,16 @@
}
}
},
"socket.io-msgpack-parser": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/socket.io-msgpack-parser/-/socket.io-msgpack-parser-2.2.1.tgz",
"integrity": "sha512-T2/vHDxuKBHqmLDAFeJ714OJsV1QbeVo6WApx1gSOwXE96OVCJErOTyjzDnISMbn/yxLIrUex9vJv4IO5/skdQ==",
"dev": true,
"requires": {
"component-emitter": "~1.3.0",
"notepack.io": "~2.2.0"
}
},
"socket.io-parser": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-3.3.1.tgz",

1
frontend/package.json
View file

@ -50,6 +50,7 @@
"sdf-2d": "^0.6.2",
"shared": "file:../shared",
"socket.io-client": "^2.3.1",
"socket.io-msgpack-parser": "^2.0.0",
"source-map-loader": "^1.1.1",
"svg-url-loader": "^6.0.0",
"terser-webpack-plugin": "^4.2.2",

5
frontend/src/main.scss
View file

@ -114,9 +114,8 @@ body {
}
.player-tag {
transform: translateX(-50%) translateY(-50%) rotate(-15deg);
transition: left 150ms, top 150ms;
border-radius: 1000px;
transition: transform 200ms;
&.decla {
color: $bright-decla;
@ -163,8 +162,6 @@ body {
.ownership {
font-size: 0;
transform: translateX(-50%) translateY(-50%);
box-shadow: inset 0 0 3px 0px rgba(0, 0, 0, 0.2);
@include square(50px);

12
frontend/src/scripts/commands/generators/mouse-listener.ts
View file

@ -1,21 +1,11 @@
import { vec2 } from 'gl-matrix';
import {
CommandGenerator,
PrimaryActionCommand,
SecondaryActionCommand,
TernaryActionCommand,
} from 'shared';
import { CommandGenerator, SecondaryActionCommand, TernaryActionCommand } from 'shared';
import { Game } from '../../game';
export class MouseListener extends CommandGenerator {
constructor(target: HTMLElement, private readonly game: Game) {
super();
target.addEventListener('mousemove', (event: MouseEvent) => {
const position = this.positionFromEvent(event);
this.sendCommandToSubcribers(new PrimaryActionCommand(position));
});
target.addEventListener('mousedown', (event: MouseEvent) => {
const position = this.positionFromEvent(event);

10
frontend/src/scripts/commands/receivers/command-receiver-socket.ts
View file

@ -5,7 +5,15 @@ export class CommandReceiverSocket extends CommandReceiver {
super();
}
private commandQueue: Array<Command> = [];
protected defaultCommandExecutor(command: Command) {
this.socket.emit(TransportEvents.PlayerToServer, serialize(command));
this.commandQueue.push(command);
}
public sendQueuedCommands() {
if (this.commandQueue.length > 0) {
this.socket.emit(TransportEvents.PlayerToServer, serialize(this.commandQueue));
this.commandQueue = [];
}
}
}

63
frontend/src/scripts/game.ts
View file

@ -28,6 +28,7 @@ import { startAnimation } from './start-animation';
import { PlayerDecision } from './join-form-handler';
import { GameObjectContainer } from './objects/game-object-container';
import { OptionsHandler } from './options-handler';
import parser from 'socket.io-msgpack-parser';
export class Game extends CommandReceiver {
public gameObjects = new GameObjectContainer(this);
@ -43,6 +44,7 @@ export class Game extends CommandReceiver {
private announcementText = document.createElement('h2');
private progressBar = document.createElement('div');
private arrowElements: Array<HTMLElement> = [];
private socketReceiver!: CommandReceiverSocket;
constructor(
private readonly playerDecision: PlayerDecision,
@ -71,7 +73,8 @@ export class Game extends CommandReceiver {
reconnectionDelayMax: 10000,
transports: ['websocket'],
forceNew: true,
});
parser,
} as any);
this.socket.on('reconnect_attempt', () => {
this.socket.io.opts.transports = ['polling', 'websocket'];
@ -87,17 +90,19 @@ export class Game extends CommandReceiver {
this.socket.emit(TransportEvents.Pong);
});
this.socket.on(TransportEvents.ServerToPlayer, (serialized: string) =>
this.sendCommand(deserialize(serialized)),
);
this.socket.on(TransportEvents.ServerToPlayer, (serializedCommands: string) => {
const commands: Array<Command> = deserialize(serializedCommands);
commands.forEach((c) => this.sendCommand(c));
});
this.socketReceiver = new CommandReceiverSocket(this.socket);
broadcastCommands(
[
new KeyboardListener(document.body),
new MouseListener(this.canvas, this),
new TouchJoystickListener(this.canvas, this.overlay, this),
],
[this.gameObjects, new CommandReceiverSocket(this.socket)],
[this.socketReceiver],
);
this.isBetweenGames = false;
@ -111,29 +116,31 @@ export class Game extends CommandReceiver {
this.gameObjects.sendCommand(c);
}
private lastGameState?: UpdateGameState;
private lastAnnouncementText = '';
protected commandExecutors: CommandExecutors = {
[ServerAnnouncement.type]: (c: ServerAnnouncement) =>
(this.announcementText.innerText = c.text),
(this.lastAnnouncementText = c.text),
[PlayerDiedCommand.type]: (c: PlayerDiedCommand) => {
if (OptionsHandler.options.vibrationEnabled) {
navigator.vibrate(150);
}
},
[UpdateGameState.type]: (c: UpdateGameState) => {
this.declaPlanetCountElement.style.width = (c.declaCount / c.limit) * 50 + '%';
this.redPlanetCountElement.style.width = (c.redCount / c.limit) * 50 + '%';
},
[UpdateGameState.type]: (c: UpdateGameState) => (this.lastGameState = c),
[GameEnd.type]: (c: GameEnd) => {
const team =
c.winningTeam === CharacterTeam.decla
? '<span class="decla">decla</span>'
: '<span class="red">red</span>';
this.announcementText.innerHTML = `Team ${team} won 🎉`;
this.lastAnnouncementText = `Team ${team} won 🎉`;
},
[UpdateOtherPlayerDirections.type]: this.handleOtherPlayerDirections.bind(this),
[UpdateOtherPlayerDirections.type]: (c: UpdateOtherPlayerDirections) =>
(this.lastOtherPlayerDirections = c),
[GameStart.type]: this.initialize.bind(this),
};
private lastOtherPlayerDirections?: UpdateOtherPlayerDirections;
private handleOtherPlayerDirections(command: UpdateOtherPlayerDirections) {
this.arrowElements
.splice(command.otherPlayerDirections.length, this.arrowElements.length)
@ -205,10 +212,7 @@ export class Game extends CommandReceiver {
}
public aspectRatioChanged(aspectRatio: number) {
this.socket.emit(
TransportEvents.PlayerToServer,
serialize(new SetAspectRatioActionCommand(aspectRatio)),
);
this.socketReceiver.sendCommand(new SetAspectRatioActionCommand(aspectRatio));
}
private isActive = true;
@ -216,6 +220,7 @@ export class Game extends CommandReceiver {
this.isActive = false;
}
private framesSinceLastLayoutUpdate = 0;
private gameLoop(
renderer: Renderer,
_: DOMHighResTimeStamp,
@ -224,10 +229,34 @@ export class Game extends CommandReceiver {
this.resolveStarted();
deltaTime /= 1000;
let shouldChangeLayout = false;
if (++this.framesSinceLastLayoutUpdate > 1) {
shouldChangeLayout = true;
this.framesSinceLastLayoutUpdate = 0;
this.draw();
}
this.renderer = renderer;
this.socketReceiver.sendQueuedCommands();
this.gameObjects.stepObjects(deltaTime);
this.gameObjects.drawObjects(this.renderer, this.overlay);
this.gameObjects.drawObjects(this.renderer, this.overlay, shouldChangeLayout);
return this.isActive;
}
private draw() {
if (this.lastGameState) {
this.declaPlanetCountElement.style.width =
(this.lastGameState.declaCount / this.lastGameState.limit) * 50 + '%';
this.redPlanetCountElement.style.width =
(this.lastGameState.redCount / this.lastGameState.limit) * 50 + '%';
}
if (this.lastOtherPlayerDirections) {
this.handleOtherPlayerDirections(this.lastOtherPlayerDirections);
}
this.announcementText.innerHTML = this.lastAnnouncementText;
}
}

8
frontend/src/scripts/join-form-handler.ts
View file

@ -1,13 +1,14 @@
import { ServerInformation, serverInformationEndpoint, TransportEvents } from 'shared';
import io from 'socket.io-client';
import { Configuration } from './config/configuration';
import parser from 'socket.io-msgpack-parser';
export type PlayerDecision = {
playerName: string;
server: string;
};
const pollInterval = 10000;
const pollInterval = 8000;
export class JoinFormHandler {
private waitingForDecision: Promise<PlayerDecision>;
private resolvePlayerDecision!: (d: PlayerDecision) => void;
@ -122,8 +123,9 @@ class ServerChooserOption {
this.socket = io(url, {
reconnection: false,
timeout: 1500,
});
timeout: 4000,
parser,
} as any);
this.socket.on('connect_error', this.destroy.bind(this));
this.socket.on('connect_timeout', this.destroy.bind(this));

2
frontend/src/scripts/objects/camera.ts
View file

@ -18,7 +18,7 @@ export class Camera extends GameObject implements ViewObject {
public step(deltaTimeInSeconds: number): void {}
public draw(renderer: Renderer, overlay: HTMLElement) {
public draw(renderer: Renderer, overlay: HTMLElement, shouldChangeLayout: boolean) {
const canvasAspectRatio = renderer.canvasSize.x / renderer.canvasSize.y;
if (canvasAspectRatio !== this.aspectRatio) {
this.aspectRatio = canvasAspectRatio;

8
frontend/src/scripts/objects/game-object-container.ts
View file

@ -56,8 +56,12 @@ export class GameObjectContainer extends CommandReceiver {
this.objects.forEach((o) => o.step(deltaTimeInSeconds));
}
public drawObjects(renderer: Renderer, overlay: HTMLElement) {
this.objects.forEach((o) => o.draw(renderer, overlay));
public drawObjects(
renderer: Renderer,
overlay: HTMLElement,
shouldChangeLayout: boolean,
) {
this.objects.forEach((o) => o.draw(renderer, overlay, shouldChangeLayout));
}
private addObject(object: ViewObject) {

6
frontend/src/scripts/objects/lamp-view.ts
View file

@ -20,7 +20,11 @@ export class LampView extends LampBase implements ViewObject {
public beforeDestroy(): void {}
public draw(renderer: Renderer, overlay: HTMLElement): void {
public draw(
renderer: Renderer,
overlay: HTMLElement,
shouldChangeLayout: boolean,
): void {
renderer.addDrawable(this.light);
}
}

112
frontend/src/scripts/objects/planet-view.ts
View file

@ -47,31 +47,76 @@ export class PlanetView extends PlanetBase implements ViewObject {
vec2.scale(vec2.create(), p.velocity, deltaTimeInSeconds),
);
if ((p.timeToLive -= deltaTimeInSeconds) <= 0) {
p.element.parentElement?.removeChild(p.element);
} else {
p.element.style.opacity = Math.min(1, p.timeToLive).toString();
}
p.timeToLive -= deltaTimeInSeconds;
});
this.generatedPointElements = this.generatedPointElements.filter(
(p) => p.timeToLive > 0,
);
}
private generatedPointElements: Array<FallingPoint> = [];
private lastGeneratedPoint?: number;
public generatedPoints(value: number) {
const element = document.createElement('div');
element.className = 'falling-point ' + (this.ownership < 0.5 ? 'decla' : 'red');
element.innerText = '+' + value;
this.generatedPointElements.push({
element,
addedToOverlay: false,
timeToLive: Random.getRandomInRange(2, 3),
position: vec2.create(),
velocity: vec2.fromValues(Random.getRandomInRange(-30, 30), 0),
});
this.lastGeneratedPoint = value;
}
public beforeDestroy(): void {
this.ownershipProgess.parentElement?.removeChild(this.ownershipProgess);
this.generatedPointElements.forEach((p) =>
p.element.parentElement?.removeChild(p.element),
);
}
public draw(
renderer: Renderer,
overlay: HTMLElement,
shouldChangeLayout: boolean,
): void {
if (shouldChangeLayout) {
if (!this.ownershipProgess.parentElement) {
overlay.appendChild(this.ownershipProgess);
}
const screenPosition = renderer.worldToDisplayCoordinates(this.center);
this.generatedPointElements.forEach((p) => {
if (!p.addedToOverlay) {
overlay.appendChild(p.element);
}
p.element.style.transform = `translateX(${
screenPosition.x + p.position.x
}px) translateY(${screenPosition.y + p.position.y}px)`;
if (p.timeToLive <= 0) {
p.element.parentElement?.removeChild(p.element);
} else {
p.element.style.opacity = Math.min(1, p.timeToLive).toString();
}
});
this.generatedPointElements = this.generatedPointElements.filter(
(p) => p.timeToLive > 0,
);
this.ownershipProgess.style.transform = `translateX(${screenPosition.x}px) translateY(${screenPosition.y}px) translateX(-50%) translateY(-50%)`;
this.ownershipProgess.style.background = this.getGradient();
if (this.lastGeneratedPoint !== undefined) {
const element = document.createElement('div');
element.className = 'falling-point ' + (this.ownership < 0.5 ? 'decla' : 'red');
element.innerText = '+' + this.lastGeneratedPoint;
this.generatedPointElements.push({
element,
addedToOverlay: false,
timeToLive: Random.getRandomInRange(2, 3),
position: vec2.create(),
velocity: vec2.fromValues(Random.getRandomInRange(-30, 30), 0),
});
this.lastGeneratedPoint = undefined;
}
}
renderer.addDrawable(this.shape);
}
private getGradient(): string {
@ -91,33 +136,4 @@ export class PlanetView extends PlanetBase implements ViewObject {
var(--bright-red) 100%
)`;
}
public beforeDestroy(): void {
this.ownershipProgess.parentElement?.removeChild(this.ownershipProgess);
this.generatedPointElements.forEach((p) =>
p.element.parentElement?.removeChild(p.element),
);
}
public draw(renderer: Renderer, overlay: HTMLElement): void {
if (!this.ownershipProgess.parentElement) {
overlay.appendChild(this.ownershipProgess);
}
const screenPosition = renderer.worldToDisplayCoordinates(this.center);
this.generatedPointElements.forEach((p) => {
if (!p.addedToOverlay) {
overlay.appendChild(p.element);
}
p.element.style.left = screenPosition.x + p.position.x + 'px';
p.element.style.top = screenPosition.y + p.position.y + 'px';
});
this.ownershipProgess.style.left = screenPosition.x + 'px';
this.ownershipProgess.style.top = screenPosition.y + 'px';
this.ownershipProgess.style.background = this.getGradient();
renderer.addDrawable(this.shape);
}
}

30
frontend/src/scripts/objects/player-character-view.ts
View file

@ -49,8 +49,6 @@ export class PlayerCharacterView extends PlayerCharacterBase implements ViewObje
}
public step(deltaTimeInSeconds: number): void {
this.healthElement.style.width = (50 * this.health) / settings.playerMaxHealth + 'px';
this.statsElement.innerText = this.getStatsText();
if (this.previousHealth > this.health) {
this.previousHealth = this.health;
if (OptionsHandler.options.vibrationEnabled) {
@ -68,16 +66,26 @@ export class PlayerCharacterView extends PlayerCharacterBase implements ViewObje
this.nameElement.parentElement?.removeChild(this.nameElement);
}
public draw(renderer: Renderer, overlay: HTMLElement): void {
if (!this.nameElement.parentElement) {
overlay.appendChild(this.nameElement);
}
public draw(
renderer: Renderer,
overlay: HTMLElement,
shouldChangeLayout: boolean,
): void {
if (shouldChangeLayout) {
if (!this.nameElement.parentElement) {
overlay.appendChild(this.nameElement);
}
const screenPosition = renderer.worldToDisplayCoordinates(
this.calculateTextPosition(),
);
this.nameElement.style.left = screenPosition.x + 'px';
this.nameElement.style.top = screenPosition.y + 'px';
const screenPosition = renderer.worldToDisplayCoordinates(
this.calculateTextPosition(),
);
this.nameElement.style.transform = `translateX(${screenPosition.x}px) translateY(${screenPosition.y}px) translateX(-50%) translateY(-50%) rotate(-15deg)`;
this.healthElement.style.width =
(50 * this.health) / settings.playerMaxHealth + 'px';
this.statsElement.innerText = this.getStatsText();
}
this.shape.setCircles([this.head!, this.leftFoot!, this.rightFoot!]);
renderer.addDrawable(this.shape);

6
frontend/src/scripts/objects/projectile-view.ts
View file

@ -33,7 +33,11 @@ export class ProjectileView extends ProjectileBase implements ViewObject {
public beforeDestroy(): void {}
public draw(renderer: Renderer, overlay: HTMLElement): void {
public draw(
renderer: Renderer,
overlay: HTMLElement,
shouldChangeLayout: boolean,
): void {
renderer.addDrawable(this.circle);
renderer.addDrawable(this.light);
}

2
frontend/src/scripts/objects/view-object.ts
View file

@ -3,6 +3,6 @@ import { GameObject } from 'shared';
export interface ViewObject extends GameObject {
step(deltaTimeInMilliseconds: number): void;
draw(renderer: Renderer, overlay: HTMLElement): void;
draw(renderer: Renderer, overlay: HTMLElement, shouldChangeLayout: boolean): void;
beforeDestroy(): void;
}

6
frontend/tsconfig.json
View file

@ -9,7 +9,9 @@
"moduleResolution": "node",
"skipLibCheck": true,
"module": "commonjs",
"lib": ["dom", "es2017"]
"lib": ["dom", "es2017"],
"typeRoots": ["./types", "./node_modules/@types"]
},
"include": ["src/**/*.ts", "src/*.ts"]
"include": ["src/**/*.ts", "src/*.ts"],
"exclude": ["node_modules", "typings"]
}

1
frontend/types/socket.io-msgpack-parser/index.d.ts vendored Normal file
View file

@ -0,0 +1 @@
declare module 'socket.io-msgpack-parser';