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

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;
}