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

Add better object updates

Browse source
This commit is contained in:
schmelczerandras 2020-10-17 18:35:09 +02:00
parent fd80a299b6
commit e83c58e1a5
29 changed files with 289 additions and 123 deletions
Download patch file Download diff file Expand all files Collapse all files

5
frontend/src/index.html
View file

@ -15,6 +15,9 @@
</head>
<body>
<canvas></canvas>
<div id="overlay"></div>
<article id="landing-ui">
<h1>decla.<span class="red">red</span></h1>
<form id="join-game-form">
@ -41,7 +44,5 @@
</article>
<noscript>Javascript is required for this website.</noscript>
<div id="overlay"></div>
<canvas></canvas>
</body>
</html>

46
frontend/src/index.ts
View file

@ -1,7 +1,12 @@
import { glMatrix } from 'gl-matrix';
import { CharacterBase, LampBase, overrideDeserialization, PlanetBase } from 'shared';
import { ProjectileBase } from 'shared/src/objects/types/projectile-base';
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';
@ -10,43 +15,32 @@ import './styles/main.scss';
import { LandingPageBackground } from './scripts/landing-page-background';
import { JoinFormHandler } from './scripts/join-form-handler';
import { Game } from './scripts/game';
import { PlayerCharacterView } from './scripts/objects/player-character-view';
glMatrix.setMatrixArrayType(Array);
overrideDeserialization(CharacterBase, CharacterView);
overrideDeserialization(PlayerCharacterBase, PlayerCharacterView);
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 {
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 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 background = new LandingPageBackground(canvas);
const joinHandler = new JoinFormHandler(joinGameForm, serverContainer);
const playerDecision = await joinHandler.getPlayerDecision();
landingUI.style.display = 'none';
console.log(playerDecision);
background.destroy();
await new Game(playerDecision).start();
await new Game(playerDecision, canvas, overlay).start();
} catch (e) {
console.error(e);
alert(e);

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

@ -16,6 +16,7 @@ import {
TransportEvents,
SetAspectRatioActionCommand,
rgb,
PlayerInformation,
} from 'shared';
import io from 'socket.io-client';
import { KeyboardListener } from './commands/generators/keyboard-listener';
@ -32,15 +33,16 @@ import { Polygon } from './shapes/polygon';
export class Game {
public readonly gameObjects = new GameObjectContainer(this);
private readonly canvas = document.querySelector('canvas') as HTMLCanvasElement;
private renderer!: Renderer;
private socket!: SocketIOClient.Socket;
private promises: Promise<[void, void]>;
private deltaTimeCalculator = new DeltaTimeCalculator();
private overlay: HTMLElement = document.querySelector('#overlay') as HTMLDivElement;
constructor(playerDecision: PlayerDecision) {
console.log(playerDecision.server);
constructor(
private readonly playerDecision: PlayerDecision,
private readonly canvas: HTMLCanvasElement,
private readonly overlay: HTMLElement,
) {
this.promises = Promise.all([
this.setupCommunication(playerDecision.server),
this.setupRenderer(),
@ -66,7 +68,9 @@ export class Game {
this.socket.emit(TransportEvents.Pong);
});
this.socket.emit(TransportEvents.PlayerJoining, null);
this.socket.emit(TransportEvents.PlayerJoining, {
name: this.playerDecision.playerName,
} as PlayerInformation);
broadcastCommands(
[
@ -98,7 +102,7 @@ export class Game {
},
{
...CircleLight.descriptor,
shaderCombinationSteps: [0, 1, 2, 4, 8, 16],
shaderCombinationSteps: [0, 1, 2, 4, 8],
},
{
...Flashlight.descriptor,

3
frontend/src/scripts/landing-page-background.ts
View file

@ -18,10 +18,9 @@ const LangindPagePolygon = NoisyPolygonFactory(
);
export class LandingPageBackground {
private readonly canvas = document.querySelector('canvas') as HTMLCanvasElement;
private renderer!: Renderer;
constructor() {
constructor(private readonly canvas: HTMLCanvasElement) {
this.start();
}

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

@ -1,6 +1,6 @@
import { vec2 } from 'gl-matrix';
import { Renderer } from 'sdf-2d';
import { calculateViewArea, GameObject, mixRgb, settings } from 'shared';
import { calculateViewArea, GameObject, mixRgb, settings, UpdateMessage } from 'shared';
import { Game } from '../game';
import { ViewObject } from './view-object';
@ -14,6 +14,10 @@ export class Camera extends GameObject implements ViewObject {
super(null);
}
public update(updates: Array<UpdateMessage>) {
throw new Error();
}
public step(deltaTimeInMilliseconds: number): void {}
public draw(renderer: Renderer) {

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

@ -1,6 +1,6 @@
import { vec2 } from 'gl-matrix';
import { Renderer } from 'sdf-2d';
import { CharacterBase, Circle, Id } from 'shared';
import { CharacterBase, Circle, Id, UpdateMessage } from 'shared';
import { BlobShape } from '../shapes/blob-shape';
import { ViewObject } from './view-object';
@ -19,6 +19,10 @@ export class CharacterView extends CharacterBase implements ViewObject {
this.shape = new BlobShape(colorIndex);
}
public update(updates: Array<UpdateMessage>) {
updates.forEach((u) => ((this as any)[u.key] = u.value));
}
public get position(): vec2 {
return this.head!.center;
}

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

@ -5,22 +5,23 @@ import {
CreateObjectsCommand,
CreatePlayerCommand,
DeleteObjectsCommand,
GameObject,
Id,
UpdateObjectsCommand,
} from 'shared';
import { Game } from '../game';
import { Camera } from './camera';
import { CharacterView } from './character-view';
import { PlayerCharacterView } from './player-character-view';
import { ViewObject } from './view-object';
export class GameObjectContainer extends CommandReceiver {
protected objects: Map<Id, ViewObject> = new Map();
public player!: CharacterView;
public player!: PlayerCharacterView;
public camera!: Camera;
protected commandExecutors: CommandExecutors = {
[CreatePlayerCommand.type]: (c: CreatePlayerCommand) => {
this.player = c.character as CharacterView;
this.player = c.character as PlayerCharacterView;
this.camera = new Camera(this.game);
this.addObject(this.player);
this.addObject(this.camera);
@ -33,13 +34,7 @@ export class GameObjectContainer extends CommandReceiver {
c.ids.forEach((id: Id) => this.objects.delete(id)),
[UpdateObjectsCommand.type]: (c: UpdateObjectsCommand) => {
c.objects.forEach((o) => {
this.objects.delete(o.id);
this.addObject(o as ViewObject);
if (o.id === this.player.id) {
this.player = o as CharacterView;
}
});
c.updates.forEach((u) => this.objects.get(u.id)?.update(u.updates));
},
};

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

@ -1,6 +1,6 @@
import { vec2, vec3 } from 'gl-matrix';
import { CircleLight, Renderer } from 'sdf-2d';
import { CommandExecutors, Id, LampBase } from 'shared';
import { CommandExecutors, Id, LampBase, UpdateMessage } from 'shared';
import { RenderCommand } from '../commands/types/render';
import { ViewObject } from './view-object';
@ -16,6 +16,10 @@ export class LampView extends LampBase implements ViewObject {
this.light = new CircleLight(center, color, lightness);
}
public update(message: Array<UpdateMessage>): void {
throw new Error('Method not implemented.');
}
public step(deltaTimeInMilliseconds: number): void {}
public draw(renderer: Renderer): void {

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

@ -1,6 +1,6 @@
import { vec2 } from 'gl-matrix';
import { Drawable, Renderer } from 'sdf-2d';
import { CommandExecutors, Id, Random, PlanetBase } from 'shared';
import { CommandExecutors, Id, Random, PlanetBase, UpdateMessage } from 'shared';
import { RenderCommand } from '../commands/types/render';
import { Polygon } from '../shapes/polygon';
import { ViewObject } from './view-object';
@ -18,6 +18,10 @@ export class PlanetView extends PlanetBase implements ViewObject {
(this.shape as any).randomOffset = Random.getRandom();
}
public update(message: Array<UpdateMessage>): void {
throw new Error('Method not implemented.');
}
public step(deltaTimeInMilliseconds: number): void {
(this.shape as any).randomOffset += deltaTimeInMilliseconds / 4000;
}

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

@ -0,0 +1,37 @@
import { vec2 } from 'gl-matrix';
import { Renderer } from 'sdf-2d';
import { Circle, Id, PlayerCharacterBase, UpdateMessage } from 'shared';
import { BlobShape } from '../shapes/blob-shape';
import { ViewObject } from './view-object';
export class PlayerCharacterView extends PlayerCharacterBase implements ViewObject {
private shape: BlobShape;
constructor(
id: Id,
name: string,
colorIndex: number,
head?: Circle,
leftFoot?: Circle,
rightFoot?: Circle,
) {
super(id, name, colorIndex, head, leftFoot, rightFoot);
this.shape = new BlobShape(colorIndex);
}
public update(updates: Array<UpdateMessage>) {
updates.forEach((u) => ((this as any)[u.key] = u.value));
}
public get position(): vec2 {
return this.head!.center;
}
public step(deltaTimeInMilliseconds: number): void {}
public draw(renderer: Renderer): void {
this.shape.setCircles([this.head!, this.leftFoot!, this.rightFoot!]);
renderer.addDrawable(this.shape);
}
}

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

@ -1,6 +1,6 @@
import { vec2 } from 'gl-matrix';
import { CircleLight, Renderer } from 'sdf-2d';
import { Id, ProjectileBase, rgb } from 'shared';
import { Id, ProjectileBase, rgb, UpdateMessage } from 'shared';
import { ViewObject } from './view-object';
import { Circle } from '../shapes/circle';
@ -14,7 +14,14 @@ export class ProjectileView extends ProjectileBase implements ViewObject {
this.light = new CircleLight(center, rgb(1, 0.5, 0), 0.15);
}
public step(deltaTimeInMilliseconds: number): void {}
update(updates: Array<UpdateMessage>): void {
updates.forEach((u) => ((this as any)[u.key] = u.value));
}
public step(deltaTimeInMilliseconds: number): void {
this.circle.center = this.center;
this.light.center = this.center;
}
public draw(renderer: Renderer): void {
renderer.addDrawable(this.circle);

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

@ -1,7 +1,8 @@
import { Renderer } from 'sdf-2d';
import { GameObject } from 'shared';
import { GameObject, UpdateMessage } from 'shared';
export interface ViewObject extends GameObject {
update(updates: Array<UpdateMessage>): void;
step(deltaTimeInMilliseconds: number): void;
draw(renderer: Renderer): void;
}

17
frontend/src/styles/main.scss
View file

@ -49,9 +49,10 @@ canvas {
body {
#landing-ui {
position: absolute;
width: 100%;
height: 100%;
position: absolute;
top: 0;
display: flex;
flex-direction: column;
@ -60,15 +61,13 @@ body {
}
#overlay {
margin: 0.5rem 1.25rem;
height: 100%;
width: 100%;
position: absolute;
right: 0;
font-size: 0.75rem;
white-space: pre;
font-family: 'Lucida Console', Monaco, monospace;
top: 0;
@media (max-width: $breakpoint) {
font-size: 0.6rem;
}
pointer-events: none;
font-size: 0.75rem;
}
}