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

Improve gameplay

Browse source
This commit is contained in:
schmelczerandras 2020-10-20 08:56:38 +02:00
parent e02a5b264c
commit 7c76b16d13
53 changed files with 1084 additions and 404 deletions
Download patch file Download diff file Expand all files Collapse all files

2
.do/apps.yml
View file

@ -9,7 +9,7 @@ services:
http_port: 3000
instance_count: 1
instance_size_slug: basic-xxs
run_command: node main.js --name=Frankfurt --seed=102
run_command: ' node main.js --name=Frankfurt --seed=102'
name: decla-red-server
routes:
- path: /

4
Dockerfile
View file

@ -13,4 +13,6 @@ RUN npm install --production
COPY --from=build backend/dist/main.js main.js
EXPOSE 3000
CMD [ "node", "main.js" ]
CMD ["--port=3000", "--name=Docker server", "--seed=500"]
ENTRYPOINT [ "node", "main.js" ]

4
backend/src/game-server.ts
View file

@ -29,7 +29,7 @@ export class GameServer {
io.on('connection', (socket: SocketIO.Socket) => {
socket.on(TransportEvents.PlayerJoining, (playerInfo: PlayerInformation) => {
const player = new Player(playerInfo, this.objects, socket);
const player = new Player(playerInfo, this.players, this.objects, socket);
this.players.push(player);
socket.on(TransportEvents.PlayerToServer, (json: string) => {
const command = deserialize(json);
@ -61,7 +61,7 @@ export class GameServer {
this.deltaTimes.sort((a, b) => a - b);
console.log(
`Median physics time: ${this.deltaTimes[
framesBetweenDeltaTimeCalculation
Math.floor(framesBetweenDeltaTimeCalculation / 2)
].toFixed(2)} ms`,
);
console.log(

21
backend/src/map/create-world.ts
View file

@ -1,5 +1,5 @@
import { vec2, vec3 } from 'gl-matrix';
import { Random, settings, PlanetBase } from 'shared';
import { Random, settings, PlanetBase, hsl } from 'shared';
import { LampPhysical } from '../objects/lamp-physical';
import { PlanetPhysical } from '../objects/planet-physical';
import { PhysicalContainer } from '../physics/containers/physical-container';
@ -17,7 +17,7 @@ export const createWorld = (objectContainer: PhysicalContainer) => {
),
);
for (let i = 0; i < worldSize / 400; i++) {
for (let i = 0; i < 15; i++) {
console.log('planet', i);
let position: vec2;
@ -44,7 +44,7 @@ export const createWorld = (objectContainer: PhysicalContainer) => {
);
}
for (let i = 0; i < worldSize / 350; i++) {
for (let i = 0; i < 15; i++) {
console.log('light', i);
let position: vec2;
do {
@ -54,20 +54,17 @@ export const createWorld = (objectContainer: PhysicalContainer) => {
);
} while (
evaluateSdf(position, objects) < 200 ||
lights.find((l) => l.distance(position) < 1800)
lights.find((l) => l.distance(position) < 1500)
);
lights.push(
new LampPhysical(
position,
vec3.normalize(
vec3.create(),
vec3.fromValues(
Random.getRandomInRange(0.5, 1),
0,
Random.getRandomInRange(0.5, 1),
hsl(
Random.getRandomInRange(0, 360),
Random.getRandomInRange(50, 100),
Random.getRandomInRange(25, 50),
),
),
Random.getRandomInRange(0.25, 1),
Random.getRandomInRange(0.5, 2),
),
);
}

4
backend/src/objects/circle-physical.ts
View file

@ -30,10 +30,6 @@ export class CirclePhysical implements Circle, DynamicPhysical, ReactsToCollisio
this.recalculateBoundingBox();
}
public calculateUpdates(): UpdateObjectMessage | null {
return null;
}
public get boundingBox(): BoundingBoxBase {
return this._boundingBox;
}

52
backend/src/objects/planet-physical.ts
View file

@ -9,23 +9,28 @@ import {
serializesTo,
settings,
PlanetBase,
CharacterTeam,
UpdateObjectMessage,
} from 'shared';
import { ImmutableBoundingBox } from '../physics/bounding-boxes/immutable-bounding-box';
import { StaticPhysical } from '../physics/physicals/static-physical';
import { UpdateGameObjectMessage } from '../update-game-object-message';
@serializesTo(PlanetBase)
export class PlanetPhysical extends PlanetBase implements StaticPhysical {
public readonly canCollide = true;
public readonly canMove = false;
private center: vec2;
public static neutralPlanetCount = 0;
public static declaPlanetCount = 0;
public static redPlanetCount = 0;
private _boundingBox?: ImmutableBoundingBox;
constructor(vertices: Array<vec2>) {
super(id(), vertices);
this.center = vertices.reduce((sum, v) => vec2.add(sum, sum, v), vec2.create());
vec2.scale(this.center, this.center, 1 / vertices.length);
PlanetPhysical.neutralPlanetCount++;
}
public distance(target: vec2): number {
@ -62,6 +67,47 @@ export class PlanetPhysical extends PlanetBase implements StaticPhysical {
return sign * d;
}
public calculateUpdates(): UpdateObjectMessage {
return new UpdateGameObjectMessage(this, ['ownership']);
}
public takeControl(team: CharacterTeam, deltaTime: number) {
const previousOwnership = this.ownership;
if (team === CharacterTeam.decla) {
this.ownership -= (0.5 / settings.takeControlTimeInSeconds) * deltaTime;
if (
previousOwnership >= 0.5 - settings.planetControlThreshold &&
this.ownership < 0.5 - settings.planetControlThreshold
) {
PlanetPhysical.declaPlanetCount++;
PlanetPhysical.neutralPlanetCount--;
} else if (
previousOwnership > 0.5 + settings.planetControlThreshold &&
previousOwnership <= 0.5 + settings.planetControlThreshold
) {
PlanetPhysical.redPlanetCount--;
PlanetPhysical.neutralPlanetCount++;
}
} else {
this.ownership += (0.5 / settings.takeControlTimeInSeconds) * deltaTime;
if (
previousOwnership < 0.5 + settings.planetControlThreshold &&
this.ownership >= 0.5 + settings.planetControlThreshold
) {
PlanetPhysical.redPlanetCount++;
PlanetPhysical.neutralPlanetCount--;
} else if (
previousOwnership <= 0.5 - settings.planetControlThreshold &&
previousOwnership > 0.5 + settings.planetControlThreshold
) {
PlanetPhysical.declaPlanetCount--;
PlanetPhysical.neutralPlanetCount++;
}
}
this.ownership = clamp01(this.ownership);
}
public get boundingBox(): ImmutableBoundingBox {
if (!this._boundingBox) {
const { xMin, xMax, yMin, yMax } = this.vertices.reduce(

59
backend/src/objects/player-character-physical.ts
View file

@ -9,6 +9,7 @@ import {
GameObject,
Circle,
PlayerCharacterBase,
CharacterTeam,
} from 'shared';
import { DynamicPhysical } from '../physics/physicals/dynamic-physical';
import { CirclePhysical } from './circle-physical';
@ -32,6 +33,8 @@ export class PlayerCharacterPhysical
private static readonly headRadius = 50;
private static readonly feetRadius = 20;
private projectileStrength = settings.playerMaxStrength;
// offsets are meassured from (0, 0)
private static readonly desiredHeadOffset = vec2.fromValues(0, 65);
private static readonly desiredLeftFootOffset = vec2.fromValues(-20, 0);
@ -93,10 +96,11 @@ export class PlayerCharacterPhysical
constructor(
name: string,
public readonly colorIndex: number,
team: CharacterTeam,
private readonly container: PhysicalContainer,
startPosition: vec2,
) {
super(id(), name, colorIndex);
super(id(), name, colorIndex, team, settings.playerMaxHealth);
this.head = new CirclePhysical(
vec2.add(vec2.create(), startPosition, PlayerCharacterPhysical.headOffset),
@ -129,7 +133,7 @@ export class PlayerCharacterPhysical
}
public calculateUpdates(): UpdateObjectMessage {
return new UpdateGameObjectMessage(this, ['head', 'leftFoot', 'rightFoot']);
return new UpdateGameObjectMessage(this, ['head', 'leftFoot', 'rightFoot', 'health']);
}
public handleMovementAction(c: MoveActionCommand) {
@ -137,11 +141,43 @@ export class PlayerCharacterPhysical
}
public onCollision(other: GameObject) {
if (other instanceof ProjectilePhysical) {
if (other instanceof ProjectilePhysical && other.team !== this.team) {
other.destroy();
this.health -= other.strength;
if (this.health <= 0) {
this.destroy();
}
}
}
public shootTowards(position: vec2) {
if (!this.isAlive) {
return;
}
const start = vec2.clone(this.center);
const direction = vec2.subtract(vec2.create(), position, start);
vec2.normalize(direction, direction);
vec2.add(
start,
start,
vec2.scale(vec2.create(), direction, settings.projectileStartOffset),
);
const velocity = vec2.scale(direction, direction, settings.projectileSpeed);
vec2.add(velocity, velocity, this.velocity);
const strength = this.projectileStrength / 2;
this.projectileStrength -= strength;
const projectile = new ProjectilePhysical(
start,
20,
this.colorIndex,
strength,
this.team,
velocity,
this.container,
);
this.container.addObject(projectile);
}
public get boundingBox(): BoundingBoxBase {
this.bound.center = this.head.center;
@ -197,6 +233,13 @@ export class PlayerCharacterPhysical
this.currentPlanet = undefined;
}
this.projectileStrength = Math.min(
settings.playerMaxStrength,
this.projectileStrength + settings.playerStrengthRegenerationPerSeconds * deltaTime,
);
this.currentPlanet?.takeControl(this.team, deltaTime);
const intersectingWithForcefield = this.container.findIntersecting(
getBoundingBoxOfCircle(
new Circle(
@ -205,7 +248,13 @@ export class PlayerCharacterPhysical
),
),
);
const actualGravity = forceAtPosition(this.center, intersectingWithForcefield);
const feetCenter = vec2.add(
vec2.create(),
this.leftFoot.center,
this.rightFoot.center,
);
vec2.scale(feetCenter, feetCenter, 0.5);
const actualGravity = forceAtPosition(feetCenter, intersectingWithForcefield);
const direction = this.averageAndResetMovementActions();
const movementForce = vec2.scale(direction, direction, settings.maxAcceleration);
@ -269,7 +318,7 @@ export class PlayerCharacterPhysical
private springMove(object: CirclePhysical, center: vec2, offset: vec2) {
// todo: make time-independent
const springConstant = 0.35;
const springConstant = 0.55;
const desiredPosition = vec2.add(vec2.create(), center, offset);
vec2.rotate(desiredPosition, desiredPosition, center, this.direction);

28
backend/src/objects/projectile-physical.ts
View file

@ -1,5 +1,12 @@
import { vec2 } from 'gl-matrix';
import { id, settings, serializesTo, ProjectileBase, GameObject } from 'shared';
import {
id,
settings,
serializesTo,
ProjectileBase,
GameObject,
CharacterTeam,
} from 'shared';
import { ImmutableBoundingBox } from '../physics/bounding-boxes/immutable-bounding-box';
import { CirclePhysical } from './circle-physical';
import { DynamicPhysical } from '../physics/physicals/dynamic-physical';
@ -8,6 +15,7 @@ import { PlanetPhysical } from './planet-physical';
import { ReactsToCollision } from '../physics/physicals/reacts-to-collision';
import { UpdateObjectMessage } from 'shared/lib/src/objects/update-object-message';
import { UpdateGameObjectMessage } from '../update-game-object-message';
import { PlayerCharacterPhysical } from './player-character-physical';
@serializesTo(ProjectileBase)
export class ProjectilePhysical
@ -15,6 +23,7 @@ export class ProjectilePhysical
implements DynamicPhysical, ReactsToCollision {
public readonly canCollide = true;
public readonly canMove = true;
private isDestroyed = false;
private bounceCount = 0;
private _boundingBox?: ImmutableBoundingBox;
@ -24,15 +33,18 @@ export class ProjectilePhysical
constructor(
center: vec2,
radius: number,
colorIndex: number,
public strength: number,
public team: CharacterTeam,
private velocity: vec2,
readonly container: PhysicalContainer,
) {
super(id(), center, radius);
super(id(), center, radius, colorIndex, strength);
this.object = new CirclePhysical(center, radius, this, container, 0.9);
}
public calculateUpdates(): UpdateObjectMessage {
return new UpdateGameObjectMessage(this, ['center']);
return new UpdateGameObjectMessage(this, ['center', 'strength']);
}
public get boundingBox(): ImmutableBoundingBox {
@ -59,12 +71,20 @@ export class ProjectilePhysical
}
public onCollision(other: GameObject) {
if (this.bounceCount++ === settings.projectileMaxBounceCount) {
if (
!(other instanceof PlayerCharacterPhysical && other.team === this.team) &&
this.bounceCount++ === settings.projectileMaxBounceCount
) {
this.destroy();
}
}
public step(deltaTime: number) {
if ((this.strength -= settings.projectileFadeSpeed * deltaTime) < 0) {
this.destroy();
return;
}
const gravity = vec2.create();
const intersecting = this.container.findIntersecting(this.boundingBox);
intersecting.forEach((i) => {

3
backend/src/physics/physicals/dynamic-physical.ts
View file

@ -1,9 +1,6 @@
import { UpdateObjectMessage } from 'shared/lib/src/objects/update-object-message';
import { PhysicalBase } from './physical-base';
export interface DynamicPhysical extends PhysicalBase {
readonly canMove: true;
step(deltaTimeInMilliseconds: number): void;
calculateUpdates(): UpdateObjectMessage | null;
}

15
backend/src/players/player-color-service.ts
View file

@ -1,15 +0,0 @@
import { settings } from 'shared';
const colorUsage: Array<boolean> = new Array(settings.playerColors.length).fill(false);
export const requestColor = (): number => {
const index = colorUsage.findIndex((a) => !a);
if (index >= 0) {
colorUsage[index] = true;
}
return index + settings.playerColorIndexOffset;
};
export const freeColor = (index: number) => {
colorUsage[index - settings.playerColorIndexOffset] = false;
};

22
backend/src/players/player-team-service.ts Normal file
View file

@ -0,0 +1,22 @@
import { CharacterTeam, Random } from 'shared';
let declaCount = 0;
let redCount = 0;
export const requestTeam = (): { team: CharacterTeam; colorIndex: number } => {
if ((declaCount === redCount && Random.getRandom() > 0.5) || declaCount < redCount) {
declaCount++;
return { team: CharacterTeam.decla, colorIndex: 0 };
} else {
redCount++;
return { team: CharacterTeam.red, colorIndex: 1 };
}
};
export const freeTeam = (team: CharacterTeam) => {
if (team === CharacterTeam.decla) {
declaCount--;
} else {
redCount--;
}
};

180
backend/src/players/player.ts
View file

@ -12,30 +12,32 @@ import {
SetAspectRatioActionCommand,
calculateViewArea,
SecondaryActionCommand,
PlayerDiedCommand,
settings,
Circle,
PlayerInformation,
CharacterTeam,
UpdatePlanetOwnershipCommand,
GameObject,
Command,
UpdateObjectMessage,
} from 'shared';
import { getTimeInMilliseconds } from '../helper/get-time-in-milliseconds';
import { ProjectilePhysical } from '../objects/projectile-physical';
import { BoundingBox } from '../physics/bounding-boxes/bounding-box';
import { PhysicalContainer } from '../physics/containers/physical-container';
import { getBoundingBoxOfCircle } from '../physics/functions/get-bounding-box-of-circle';
import { isCircleIntersecting } from '../physics/functions/is-circle-intersecting';
import { requestColor, freeColor } from './player-color-service';
import { PlayerCharacterPhysical } from '../objects/player-character-physical';
import { DynamicPhysical } from '../physics/physicals/dynamic-physical';
import { Physical } from '../physics/physicals/physical';
import { freeTeam, requestTeam } from './player-team-service';
import { PlanetPhysical } from '../objects/planet-physical';
export class Player extends CommandReceiver {
private character: PlayerCharacterPhysical;
private character?: PlayerCharacterPhysical | null;
private aspectRatio: number = 16 / 9;
private isActive = true;
private timeSinceLastProjectile = 0;
private objectsPreviouslyInViewArea: Array<Physical> = [];
private objectsInViewArea: Array<Physical> = [];
private objectsPreviouslyInViewArea: Array<GameObject> = [];
private pingTime?: number;
private _latency?: number;
@ -55,35 +57,20 @@ export class Player extends CommandReceiver {
[SetAspectRatioActionCommand.type]: (v: SetAspectRatioActionCommand) =>
(this.aspectRatio = v.aspectRatio),
[MoveActionCommand.type]: (c: MoveActionCommand) =>
this.character.handleMovementAction(c),
this.character?.handleMovementAction(c),
[SecondaryActionCommand.type]: (c: SecondaryActionCommand) => {
if (
!this.character.isAlive ||
this.timeSinceLastProjectile < settings.projectileCreationInterval
) {
return;
}
const start = vec2.clone(this.character.center);
const direction = vec2.subtract(vec2.create(), c.position, start);
vec2.normalize(direction, direction);
vec2.add(
start,
start,
vec2.scale(vec2.create(), direction, settings.projectileStartOffset),
);
const velocity = vec2.scale(direction, direction, settings.projectileSpeed);
vec2.add(velocity, velocity, this.character.velocity);
const projectile = new ProjectilePhysical(start, 20, velocity, this.objects);
this.objects.addObject(projectile);
this.timeSinceLastProjectile = 0;
this.character?.shootTowards(c.position);
},
};
private findEmptyPositionForPlayer(): vec2 {
let rotation = 0;
let radius = 0;
let possibleCenter = this.players.find((p) => p.team === this.team)?.center;
if (!possibleCenter) {
possibleCenter = vec2.create();
}
let rotation = Math.atan2(possibleCenter.y, possibleCenter.x);
let radius = vec2.length(possibleCenter);
for (;;) {
const playerPosition = vec2.fromValues(
radius * Math.cos(rotation),
@ -106,27 +93,21 @@ export class Player extends CommandReceiver {
}
}
public readonly team: CharacterTeam;
private colorIndex: number;
constructor(
playerInfo: PlayerInformation,
private readonly playerInfo: PlayerInformation,
private readonly players: Array<Player>,
private readonly objects: PhysicalContainer,
private readonly socket: SocketIO.Socket,
) {
super();
const colorIndex = requestColor();
const { team, colorIndex } = requestTeam();
this.team = team;
this.colorIndex = colorIndex;
this.character = new PlayerCharacterPhysical(
playerInfo.name,
colorIndex,
objects,
this.findEmptyPositionForPlayer(),
);
this.objects.addObject(this.character);
socket.emit(
TransportEvents.ServerToPlayer,
serialize(new CreatePlayerCommand(this.character)),
);
this.createCharacter();
socket.on(
TransportEvents.Pong,
@ -134,78 +115,99 @@ export class Player extends CommandReceiver {
);
this.measureLatency();
this.sendObjects();
this.step(0);
}
private createCharacter() {
this.character = new PlayerCharacterPhysical(
this.playerInfo.name.slice(0, 20),
this.colorIndex,
this.team,
this.objects,
this.findEmptyPositionForPlayer(),
);
this.objects.addObject(this.character);
this.objectsPreviouslyInViewArea.push(this.character);
this.socket.emit(
TransportEvents.ServerToPlayer,
serialize(new CreatePlayerCommand(this.character)),
);
}
private center: vec2 = vec2.create();
private timeUntilRespawn = 0;
public step(deltaTime: number) {
this.sendObjects();
this.timeSinceLastProjectile += deltaTime;
if (this.character) {
this.center = this.character?.center;
if (!this.character.isAlive) {
this.socket.emit(
TransportEvents.ServerToPlayer,
serialize(new PlayerDiedCommand(settings.playerDiedTimeout)),
);
this.character = null;
this.timeUntilRespawn = settings.playerDiedTimeout;
}
} else if ((this.timeUntilRespawn -= deltaTime) < 0) {
this.createCharacter();
}
public sendObjects() {
const viewArea = calculateViewArea(this.character.center, this.aspectRatio, 1.5);
const viewArea = calculateViewArea(this.center, this.aspectRatio, 1.5);
const bb = new BoundingBox();
bb.topLeft = viewArea.topLeft;
bb.size = viewArea.size;
this.objectsInViewArea = this.objects.findIntersecting(bb);
const objectsInViewArea = Array.from(
new Set(this.objects.findIntersecting(bb).map((o) => o.gameObject)),
);
const newlyIntersecting = this.objectsInViewArea.filter(
const newlyIntersecting = objectsInViewArea.filter(
(o) => !this.objectsPreviouslyInViewArea.includes(o),
);
const noLongerIntersecting = this.objectsPreviouslyInViewArea.filter(
(o) => !this.objectsInViewArea.includes(o),
(o) => !objectsInViewArea.includes(o),
);
this.objectsPreviouslyInViewArea = this.objectsInViewArea;
this.objectsPreviouslyInViewArea = objectsInViewArea;
if (noLongerIntersecting.length > 0) {
this.socket.emit(
TransportEvents.ServerToPlayer,
serialize(
new DeleteObjectsCommand([
...new Set(
noLongerIntersecting
.filter((p) => p.gameObject !== this.character)
.map((p) => p.gameObject.id),
),
]),
),
);
this.sendToPlayer(new DeleteObjectsCommand(noLongerIntersecting.map((g) => g.id)));
}
if (newlyIntersecting.length > 0) {
this.socket.emit(
TransportEvents.ServerToPlayer,
serialize(
new CreateObjectsCommand([
...new Set(
newlyIntersecting
.map((p) => p.gameObject)
.filter((g) => g !== this.character),
this.sendToPlayer(new CreateObjectsCommand(newlyIntersecting));
}
this.sendToPlayer(
new UpdateObjectsCommand(
this.objectsPreviouslyInViewArea
.map((g) => g.calculateUpdates())
.filter((u) => u) as Array<UpdateObjectMessage>,
),
]),
);
this.sendToPlayer(
new UpdatePlanetOwnershipCommand(
PlanetPhysical.declaPlanetCount,
PlanetPhysical.redPlanetCount,
PlanetPhysical.neutralPlanetCount,
),
);
}
this.socket.emit(
TransportEvents.ServerToPlayer,
serialize(
new UpdateObjectsCommand(
Array.from(new Set(this.objectsInViewArea))
.filter((p) => p.canMove)
.map((p) => (p as DynamicPhysical).calculateUpdates())
.filter((p) => p !== null) as any,
),
),
);
private sendToPlayer(command: Command) {
this.socket.emit(TransportEvents.ServerToPlayer, serialize(command));
}
public destroy() {
this.isActive = false;
freeColor(this.character.colorIndex);
freeTeam(this.team);
if (this.character) {
this.character.destroy();
}
}
}

2
frontend/package.json
View file

@ -45,7 +45,7 @@
"ts-loader": "^8.0.3",
"sass": "^1.26.3",
"sass-loader": "^9.0.2",
"sdf-2d": "^0.5.3",
"sdf-2d": "^0.6.0",
"shared": "0.0.0",
"socket.io-client": "^2.3.1",
"source-map-loader": "^1.1.0",

31
frontend/src/index.html
View file

@ -4,7 +4,8 @@
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width,initial-scale=1,viewport-fit=cover"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0,
user-scalable=0"
/>
<meta name="theme-color" content="#b7455e" />
@ -15,10 +16,12 @@
</head>
<body>
<noscript>Javascript is required for this website.</noscript>
<canvas></canvas>
<div id="overlay"></div>
<article id="landing-ui">
<section id="landing-ui">
<h1>decla.<span class="red">red</span></h1>
<form id="join-game-form">
<fieldset class="content">
@ -41,8 +44,28 @@
<button id="join-game" type="submit">Join</button>
</fieldset>
</form>
</article>
</section>
<noscript>Javascript is required for this website.</noscript>
<img id="open-settings" class="icon" alt="open-settings" src="static/settings.svg" />
<section id="settings">
<h2>Settings</h2>
<input id="enable-relative-movement" checked type="checkbox" />
<label for="enable-relative-movement">Enable relative movement</label>
<button id="close-settings">Back</button>
</section>
<img
class="full-screen-controllers icon"
id="minimize"
alt="minimize-application"
src="static/minimize.svg"
/>
<img
class="full-screen-controllers icon"
id="maximize"
alt="maximize-application"
src="static/maximize.svg"
/>
</body>
</html>

16
frontend/src/index.ts
View file

@ -14,6 +14,7 @@ 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';
@ -32,15 +33,28 @@ const main = async () => {
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();
await new Game(playerDecision, canvas, overlay).start();
new Game(playerDecision, canvas, overlay);
} catch (e) {
console.error(e);
alert(e);

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

@ -1,11 +1,13 @@
import { vec2 } from 'gl-matrix';
import {
CircleLight,
ColorfulCircle,
compile,
FilteringOptions,
Flashlight,
Renderer,
renderNoise,
runAnimation,
WrapOptions,
} from 'sdf-2d';
import {
@ -17,36 +19,41 @@ import {
SetAspectRatioActionCommand,
rgb,
PlayerInformation,
PlayerDiedCommand,
UpdatePlanetOwnershipCommand,
} from 'shared';
import io from 'socket.io-client';
import { KeyboardListener } from './commands/generators/keyboard-listener';
import { MouseListener } from './commands/generators/mouse-listener';
import { TouchListener } from './commands/generators/touch-listener';
import { CommandReceiverSocket } from './commands/receivers/command-receiver-socket';
import { DeltaTimeCalculator } from './helper/delta-time-calculator';
import { PlayerDecision } from './join-form-handler';
import { GameObjectContainer } from './objects/game-object-container';
import { BlobShape } from './shapes/blob-shape';
import { Circle } from './shapes/circle';
import { Polygon } from './shapes/polygon';
import { PlanetShape } from './shapes/planet-shape';
export class Game {
public readonly gameObjects = new GameObjectContainer(this);
private renderer!: Renderer;
private renderer?: Renderer;
private socket!: SocketIOClient.Socket;
private promises: Promise<[void, void]>;
private deltaTimeCalculator = new DeltaTimeCalculator();
private deadTimeout = 0;
private declaPlanetCountElement = document.createElement('div');
private redPlanetCountElement = document.createElement('div');
private neutralPlanetCountElement = document.createElement('div');
constructor(
private readonly playerDecision: PlayerDecision,
private readonly canvas: HTMLCanvasElement,
private readonly overlay: HTMLElement,
) {
this.promises = Promise.all([
this.setupCommunication(playerDecision.server),
this.setupRenderer(),
]);
this.start();
const progressBar = document.createElement('div');
progressBar.className = 'planet-progress';
overlay.appendChild(progressBar);
progressBar.appendChild(this.declaPlanetCountElement);
progressBar.appendChild(this.neutralPlanetCountElement);
progressBar.appendChild(this.redPlanetCountElement);
}
private async setupCommunication(serverUrl: string): Promise<void> {
@ -61,7 +68,26 @@ export class Game {
this.socket.on(TransportEvents.ServerToPlayer, (serialized: string) => {
const command = deserialize(serialized);
this.gameObjects.sendCommand(command);
if (command instanceof PlayerDiedCommand) {
this.deadTimeout = command.timeout;
this.overlay.appendChild(this.announcmentText);
} else if (command instanceof UpdatePlanetOwnershipCommand) {
const all = command.declaCount + command.redCount + command.neutralCount;
this.declaPlanetCountElement.style.width = (command.declaCount / all) * 100 + '%';
this.neutralPlanetCountElement.style.width =
(command.neutralCount / all) * 100 + '%';
this.redPlanetCountElement.style.width = (command.redCount / all) * 100 + '%';
if (command.declaCount > all * 0.5) {
this.overlay.appendChild(this.announcmentText);
this.announcmentText.innerText = 'Decla team won 🎉';
}
if (command.redCount > all * 0.5) {
this.overlay.appendChild(this.announcmentText);
this.announcmentText.innerText = 'Red team won 🎉';
}
} else this.gameObjects.sendCommand(command);
});
this.socket.on(TransportEvents.Ping, () => {
@ -82,14 +108,14 @@ export class Game {
);
}
private async setupRenderer(): Promise<void> {
private async start(): Promise<void> {
const noiseTexture = await renderNoise([256, 256], 2, 1);
this.renderer = await compile(
this.setupCommunication(this.playerDecision.server);
runAnimation(
this.canvas,
[
{
...Polygon.descriptor,
...PlanetShape.descriptor,
shaderCombinationSteps: [0, 1, 2, 3],
},
{
@ -97,33 +123,27 @@ export class Game {
shaderCombinationSteps: [0, 1, 2, 8],
},
{
...Circle.descriptor,
...ColorfulCircle.descriptor,
shaderCombinationSteps: [0, 2, 16],
},
{
...CircleLight.descriptor,
shaderCombinationSteps: [0, 1, 2, 4, 8],
shaderCombinationSteps: [0, 1, 2, 4, 8, 16],
},
{
...Flashlight.descriptor,
shaderCombinationSteps: [0],
},
],
this.gameLoop.bind(this),
{
shadowTraceCount: 16,
paletteSize: 10,
paletteSize: settings.palette.length,
//enableStopwatch: true,
},
);
this.renderer.setRuntimeSettings({
{
ambientLight: rgb(0.45, 0.4, 0.45),
colorPalette: [
rgb(1, 1, 1),
rgb(0.4, 0.4, 0.4),
rgb(1, 1, 1),
...settings.playerColors,
],
colorPalette: settings.palette,
enableHighDpiRendering: true,
lightCutoffDistance: settings.lightCutoffDistance,
textures: {
@ -136,16 +156,16 @@ export class Game {
},
},
},
});
}
public async start(): Promise<void> {
await this.promises;
requestAnimationFrame(this.gameLoop.bind(this));
},
);
}
public displayToWorldCoordinates(p: vec2): vec2 {
return this.renderer?.displayToWorldCoordinates(p);
const result = this.renderer?.displayToWorldCoordinates(p);
if (!result) {
return vec2.create();
}
return result;
}
public aspectRatioChanged(aspectRatio: number) {
@ -155,14 +175,23 @@ export class Game {
);
}
private gameLoop(time: DOMHighResTimeStamp) {
const deltaTime = this.deltaTimeCalculator.getNextDeltaTimeInMilliseconds(time);
private announcmentText = document.createElement('h2');
private gameLoop(
renderer: Renderer,
currentTime: DOMHighResTimeStamp,
deltaTime: DOMHighResTimeStamp,
): boolean {
this.renderer = renderer;
if ((this.deadTimeout -= deltaTime / 1000) > 0) {
this.announcmentText.innerText = `Respawning in ${Math.floor(this.deadTimeout)} …`;
} else {
this.announcmentText.parentElement?.removeChild(this.announcmentText);
}
this.gameObjects.stepObjects(deltaTime);
this.gameObjects.drawObjects(this.renderer);
this.renderer.renderDrawables();
this.gameObjects.drawObjects(this.renderer, this.overlay);
// this.overlay.innerText = prettyPrint(this.renderer.insights);
requestAnimationFrame(this.gameLoop.bind(this));
return true;
}
}

27
frontend/src/scripts/handle-full-screen.ts Normal file
View file

@ -0,0 +1,27 @@
export const handleFullScreen = (
minimizeButton: HTMLElement,
maximizeButton: HTMLElement,
) => {
if (!document.fullscreenEnabled) {
minimizeButton.style.visibility = 'hidden';
maximizeButton.style.visibility = 'hidden';
return;
}
let isInFullScreen = document.fullscreenElement !== null;
const showButtons = () => {
minimizeButton.style.visibility = isInFullScreen ? 'visible' : 'hidden';
maximizeButton.style.visibility = isInFullScreen ? 'hidden' : 'visible';
};
showButtons();
maximizeButton.addEventListener('click', () => document.body.requestFullscreen());
minimizeButton.addEventListener('click', () => document.exitFullscreen());
document.addEventListener('fullscreenchange', () => {
isInFullScreen = !isInFullScreen;
showButtons();
});
};

25
frontend/src/scripts/helper/delta-time-calculator.ts
View file

@ -1,25 +0,0 @@
export class DeltaTimeCalculator {
private previousTime: DOMHighResTimeStamp | null = null;
constructor() {
document.addEventListener('visibilitychange', this.handleVisibilityChange.bind(this));
}
public getNextDeltaTimeInMilliseconds(
currentTime: DOMHighResTimeStamp,
): DOMHighResTimeStamp {
if (this.previousTime === null) {
this.previousTime = currentTime;
}
const delta = currentTime - this.previousTime;
this.previousTime = currentTime;
return delta;
}
private handleVisibilityChange() {
if (!document.hidden) {
this.previousTime = null;
}
}
}

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

@ -7,6 +7,7 @@ import {
NoisyPolygonFactory,
Renderer,
renderNoise,
runAnimation,
WrapOptions,
} from 'sdf-2d';
import { settings, rgb, PlanetBase, Random } from 'shared';
@ -18,17 +19,17 @@ const LangindPagePolygon = NoisyPolygonFactory(
);
export class LandingPageBackground {
private renderer!: Renderer;
private isActive = true;
constructor(private readonly canvas: HTMLCanvasElement) {
this.start();
constructor(canvas: HTMLCanvasElement) {
this.start(canvas);
}
private async start(): Promise<void> {
private async start(canvas: HTMLCanvasElement): Promise<void> {
const noiseTexture = await renderNoise([256, 256], 1.2, 2);
this.renderer = await compile(
this.canvas,
runAnimation(
canvas,
[
{
...LangindPagePolygon.descriptor,
@ -39,13 +40,12 @@ export class LandingPageBackground {
shaderCombinationSteps: [0, 2],
},
],
this.gameLoop.bind(this),
{
shadowTraceCount: 16,
paletteSize: 1,
},
);
this.renderer.setRuntimeSettings({
{
ambientLight: rgb(0, 0, 0),
lightCutoffDistance: settings.lightCutoffDistance,
textures: {
@ -58,26 +58,18 @@ export class LandingPageBackground {
},
},
},
});
requestAnimationFrame(this.gameLoop.bind(this));
},
);
}
public destroy() {
this.renderer.destroy();
}
private gameLoop(time: DOMHighResTimeStamp) {
private gameLoop(renderer: Renderer, time: DOMHighResTimeStamp, _: number): boolean {
Random.seed = 42;
this.renderer.setViewArea(
vec2.fromValues(0, this.renderer.canvasSize.y),
this.renderer.canvasSize,
);
renderer.setViewArea(vec2.fromValues(0, renderer.canvasSize.y), renderer.canvasSize);
const topPlanetPosition = vec2.fromValues(
0.7 * this.renderer.canvasSize.x,
0.7 * this.renderer.canvasSize.y,
0.7 * renderer.canvasSize.x,
0.7 * renderer.canvasSize.y,
);
const topPlanet = new LangindPagePolygon(
@ -93,8 +85,8 @@ export class LandingPageBackground {
(topPlanet as any).randomOffset = 0.5 + time / 3500;
const bottomPlanetPosition = vec2.fromValues(
0.3 * this.renderer.canvasSize.x,
0.3 * this.renderer.canvasSize.y,
0.3 * renderer.canvasSize.x,
0.3 * renderer.canvasSize.y,
);
const bottomPlanet = new LangindPagePolygon(
@ -118,11 +110,12 @@ export class LandingPageBackground {
const planetDirection = vec2.normalize(planetDistance, planetDistance);
const planetAngle = Math.atan2(planetDirection.y, planetDirection.x);
this.renderer.addDrawable(topPlanet);
this.renderer.addDrawable(bottomPlanet);
this.renderer.addDrawable(
renderer.addDrawable(topPlanet);
renderer.addDrawable(bottomPlanet);
renderer.addDrawable(
new CircleLight(
this.calculateLightPosition(
renderer,
planetAngle,
planetDistanceLength * 1.2,
-time / 3000,
@ -132,9 +125,10 @@ export class LandingPageBackground {
),
);
this.renderer.addDrawable(
renderer.addDrawable(
new CircleLight(
this.calculateLightPosition(
renderer,
planetAngle,
planetDistanceLength * 1.2,
time / 2000 + Math.PI,
@ -144,21 +138,28 @@ export class LandingPageBackground {
),
);
this.renderer.renderDrawables();
requestAnimationFrame(this.gameLoop.bind(this));
return this.isActive;
}
private calculateLightPosition(angle: number, length: number, t: number): vec2 {
private calculateLightPosition(
renderer: Renderer,
angle: number,
length: number,
t: number,
): vec2 {
const lightPosition = vec2.fromValues(
length * Math.sin(t),
length * Math.sin(t) * Math.cos(t),
);
const canvasCenter = vec2.scale(vec2.create(), this.renderer.canvasSize, 0.5);
const canvasCenter = vec2.scale(vec2.create(), renderer.canvasSize, 0.5);
vec2.add(lightPosition, lightPosition, canvasCenter);
vec2.rotate(lightPosition, lightPosition, canvasCenter, angle);
return lightPosition;
}
public destroy() {
this.isActive = false;
}
}

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

@ -14,13 +14,11 @@ export class Camera extends GameObject implements ViewObject {
super(null);
}
public update(updates: Array<UpdateMessage>) {
throw new Error();
}
public beforeDestroy(): void {}
public step(deltaTimeInMilliseconds: number): void {}
public draw(renderer: Renderer) {
public draw(renderer: Renderer, overlay: HTMLElement) {
const canvasAspectRatio = renderer.canvasSize.x / renderer.canvasSize.y;
if (canvasAspectRatio !== this.aspectRatio) {
this.aspectRatio = canvasAspectRatio;

14
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, UpdateMessage } from 'shared';
import { CharacterBase, CharacterTeam, Circle, Id, UpdateMessage } from 'shared';
import { BlobShape } from '../shapes/blob-shape';
import { ViewObject } from './view-object';
@ -11,25 +11,25 @@ export class CharacterView extends CharacterBase implements ViewObject {
constructor(
id: Id,
colorIndex: number,
team: CharacterTeam,
health: number,
head?: Circle,
leftFoot?: Circle,
rightFoot?: Circle,
) {
super(id, colorIndex, head, leftFoot, rightFoot);
super(id, colorIndex, team, health, 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 beforeDestroy(): void {}
public step(deltaTimeInMilliseconds: number): void {}
public draw(renderer: Renderer): void {
public draw(renderer: Renderer, overlay: HTMLElement): void {
this.shape.setCircles([this.head!, this.leftFoot!, this.rightFoot!]);
renderer.addDrawable(this.shape);
}

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

@ -22,6 +22,7 @@ export class GameObjectContainer extends CommandReceiver {
protected commandExecutors: CommandExecutors = {
[CreatePlayerCommand.type]: (c: CreatePlayerCommand) => {
this.player = c.character as PlayerCharacterView;
console.log(c.character);
this.camera = new Camera(this.game);
this.addObject(this.player);
this.addObject(this.camera);
@ -31,7 +32,7 @@ export class GameObjectContainer extends CommandReceiver {
c.objects.forEach((o) => this.addObject(o as ViewObject)),
[DeleteObjectsCommand.type]: (c: DeleteObjectsCommand) =>
c.ids.forEach((id: Id) => this.objects.delete(id)),
c.ids.forEach((id: Id) => this.deleteObject(id)),
[UpdateObjectsCommand.type]: (c: UpdateObjectsCommand) => {
c.updates.forEach((u) => this.objects.get(u.id)?.update(u.updates));
@ -50,11 +51,17 @@ export class GameObjectContainer extends CommandReceiver {
this.objects.forEach((o) => o.step(delta));
}
public drawObjects(renderer: Renderer) {
this.objects.forEach((o) => o.draw(renderer));
public drawObjects(renderer: Renderer, overlay: HTMLElement) {
this.objects.forEach((o) => o.draw(renderer, overlay));
}
private addObject(object: ViewObject) {
this.objects.set(object.id, object);
}
private deleteObject(id: Id) {
const object = this.objects.get(id);
object?.beforeDestroy();
this.objects.delete(id);
}
}

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

@ -16,13 +16,11 @@ 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 {
public beforeDestroy(): void {}
public draw(renderer: Renderer, overlay: HTMLElement): void {
renderer.addDrawable(this.light);
}
}

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

@ -1,32 +1,62 @@
import { vec2 } from 'gl-matrix';
import { Drawable, Renderer } from 'sdf-2d';
import { CommandExecutors, Id, Random, PlanetBase, UpdateMessage } from 'shared';
import {
CommandExecutors,
Id,
Random,
PlanetBase,
UpdateMessage,
settings,
} from 'shared';
import { RenderCommand } from '../commands/types/render';
import { Polygon } from '../shapes/polygon';
import { PlanetShape } from '../shapes/planet-shape';
import { ViewObject } from './view-object';
export class PlanetView extends PlanetBase implements ViewObject {
private shape: Drawable;
private shape: PlanetShape;
private ownershipProgess: HTMLElement;
protected commandExecutors: CommandExecutors = {
[RenderCommand.type]: (c: RenderCommand) => c.renderer.addDrawable(this.shape),
};
constructor(id: Id, vertices: Array<vec2>) {
constructor(id: Id, vertices: Array<vec2>, ownership: number) {
super(id, vertices);
this.shape = new Polygon(vertices);
this.shape = new PlanetShape(vertices, ownership);
(this.shape as any).randomOffset = Random.getRandom();
}
public update(message: Array<UpdateMessage>): void {
throw new Error('Method not implemented.');
this.ownershipProgess = document.createElement('div');
this.ownershipProgess.className = 'ownership';
}
public step(deltaTimeInMilliseconds: number): void {
(this.shape as any).randomOffset += deltaTimeInMilliseconds / 4000;
this.shape.randomOffset += deltaTimeInMilliseconds / 4000;
this.shape.colorMixQ = this.ownership;
let teamName = 'Neutral';
if (this.ownership < 0.5 - settings.planetControlThreshold) {
teamName = 'Decla';
} else if (this.ownership > 0.5 + settings.planetControlThreshold) {
teamName = 'Red';
}
public draw(renderer: Renderer): void {
this.ownershipProgess.innerText = `${teamName} ${Math.round(
(Math.abs(this.ownership - 0.5) / 0.5) * 100,
)}%`;
}
public beforeDestroy(): void {
this.ownershipProgess.parentElement?.removeChild(this.ownershipProgess);
}
public draw(renderer: Renderer, overlay: HTMLElement): void {
if (!this.ownershipProgess.parentElement) {
overlay.appendChild(this.ownershipProgess);
}
const screenPosition = renderer.worldToDisplayCoordinates(this.center);
this.ownershipProgess.style.left = screenPosition.x + 'px';
this.ownershipProgess.style.top = screenPosition.y + 'px';
renderer.addDrawable(this.shape);
}
}

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

@ -1,37 +1,84 @@
import { vec2 } from 'gl-matrix';
import { Renderer } from 'sdf-2d';
import { Circle, Id, PlayerCharacterBase, UpdateMessage } from 'shared';
import { Circle, Id, PlayerCharacterBase, UpdateMessage, CharacterTeam } from 'shared';
import { BlobShape } from '../shapes/blob-shape';
import { ViewObject } from './view-object';
export class PlayerCharacterView extends PlayerCharacterBase implements ViewObject {
private shape: BlobShape;
private nameElement: HTMLElement;
private healthElement: HTMLElement;
private timeSinceLastNameElementUpdate = 0;
constructor(
id: Id,
name: string,
colorIndex: number,
team: CharacterTeam,
health: number,
head?: Circle,
leftFoot?: Circle,
rightFoot?: Circle,
) {
super(id, name, colorIndex, head, leftFoot, rightFoot);
super(id, name, colorIndex, team, health, head, leftFoot, rightFoot);
this.shape = new BlobShape(colorIndex);
}
public update(updates: Array<UpdateMessage>) {
updates.forEach((u) => ((this as any)[u.key] = u.value));
console.log(this.id, 'created');
this.nameElement = document.createElement('div');
this.nameElement.className = 'player-tag';
this.nameElement.innerText = this.name;
this.healthElement = document.createElement('div');
this.nameElement.appendChild(this.healthElement);
}
public get position(): vec2 {
return this.head!.center;
}
public step(deltaTimeInMilliseconds: number): void {}
public step(deltaTimeInMilliseconds: number): void {
this.timeSinceLastNameElementUpdate += deltaTimeInMilliseconds;
this.healthElement.style.width = this.health + '%';
}
public beforeDestroy(): void {
console.log(this.id, 'destroyes');
this.nameElement.parentElement?.removeChild(this.nameElement);
}
private elementAdded = false;
public draw(renderer: Renderer, overlay: HTMLElement): void {
if (!this.elementAdded) {
this.elementAdded = true;
console.log(this.id, 'add', this.nameElement, this.nameElement.parentElement);
overlay.appendChild(this.nameElement);
}
if (this.timeSinceLastNameElementUpdate > 0.15) {
const screenPosition = renderer.worldToDisplayCoordinates(
this.calculateTextPosition(),
);
this.nameElement.style.left = screenPosition.x + 'px';
this.nameElement.style.top = screenPosition.y + 'px';
this.timeSinceLastNameElementUpdate = 0;
}
public draw(renderer: Renderer): void {
this.shape.setCircles([this.head!, this.leftFoot!, this.rightFoot!]);
renderer.addDrawable(this.shape);
}
private calculateTextPosition(): vec2 {
const footAverage = vec2.add(
vec2.create(),
this.leftFoot!.center,
this.rightFoot!.center,
);
vec2.scale(footAverage, footAverage, 0.5);
const headFeetDelta = vec2.subtract(footAverage, this.head!.center, footAverage);
vec2.normalize(headFeetDelta, headFeetDelta);
const textOffset = vec2.scale(headFeetDelta, headFeetDelta, this.head!.radius + 50);
return vec2.add(textOffset, this.head!.center, textOffset);
}
}

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

@ -1,29 +1,33 @@
import { vec2 } from 'gl-matrix';
import { CircleLight, Renderer } from 'sdf-2d';
import { Id, ProjectileBase, rgb, UpdateMessage } from 'shared';
import { CircleLight, ColorfulCircle, Renderer } from 'sdf-2d';
import { Id, ProjectileBase, settings, UpdateMessage } from 'shared';
import { ViewObject } from './view-object';
import { Circle } from '../shapes/circle';
export class ProjectileView extends ProjectileBase implements ViewObject {
private circle: InstanceType<typeof Circle>;
private circle: ColorfulCircle;
private light: CircleLight;
constructor(id: Id, center: vec2, radius: number) {
super(id, center, radius);
this.circle = new Circle(center, radius / 2);
this.light = new CircleLight(center, rgb(1, 0.5, 0), 0.15);
}
update(updates: Array<UpdateMessage>): void {
updates.forEach((u) => ((this as any)[u.key] = u.value));
constructor(
id: Id,
center: vec2,
radius: number,
colorIndex: number,
strength: number,
) {
super(id, center, radius, colorIndex, strength);
this.circle = new ColorfulCircle(center, radius / 2, colorIndex);
this.light = new CircleLight(center, settings.palette[colorIndex], 0);
}
public step(deltaTimeInMilliseconds: number): void {
this.circle.center = this.center;
this.light.center = this.center;
this.light.intensity = (0.15 * this.strength) / settings.projectileMaxStrength;
}
public draw(renderer: Renderer): void {
public beforeDestroy(): void {}
public draw(renderer: Renderer, overlay: HTMLElement): void {
renderer.addDrawable(this.circle);
renderer.addDrawable(this.light);
}

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

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

3
frontend/src/scripts/shapes/circle.ts
View file

@ -1,3 +0,0 @@
import { CircleFactory } from 'sdf-2d';
export const Circle = CircleFactory(2);

163
frontend/src/scripts/shapes/planet-shape.ts Normal file
View file

@ -0,0 +1,163 @@
import { mat2d, vec2, vec3, vec4 } from 'gl-matrix';
import { PolygonFactory, DrawableDescriptor, Drawable } from 'sdf-2d';
import { settings } from 'shared';
export const colorToString = (v: vec3 | vec4): string =>
`vec4(${v[0]}, ${v[1]}, ${v[2]}, ${v.length > 3 ? v[3] : 1})`;
export class PlanetShape extends PolygonFactory(settings.planetEdgeCount, 0) {
public static descriptor: DrawableDescriptor = {
sdf: {
shader: `
uniform vec2 planetVertices[PLANET_COUNT * ${settings.planetEdgeCount}];
uniform vec2 planetCenters[PLANET_COUNT];
uniform float planetLengths[PLANET_COUNT];
uniform float planetRandoms[PLANET_COUNT];
uniform float planetColorMixQ[PLANET_COUNT];
uniform sampler2D noiseTexture;
#ifdef WEBGL2_IS_AVAILABLE
float planetTerrain(vec2 h) {
return texture(noiseTexture, h)[0] - 0.5;
}
#else
float planetTerrain(vec2 h) {
return texture2D(noiseTexture, h)[0] - 0.5;
}
#endif
vec2 planetLineDistance(vec2 target, vec2 from, vec2 to) {
vec2 targetFromDelta = target - from;
vec2 toFromDelta = to - from;
float h = clamp(
dot(targetFromDelta, toFromDelta) / dot(toFromDelta, toFromDelta),
0.0, 1.0
);
vec2 diff = targetFromDelta - toFromDelta * h;
return vec2(
dot(diff, diff),
toFromDelta.x * targetFromDelta.y - toFromDelta.y * targetFromDelta.x
);
}
float planetMinDistance(vec2 target, out vec4 color) {
float minDistance = 100.0;
for (int j = 0; j < PLANET_COUNT; j++) {
vec2 startEnd = planetVertices[j * ${settings.planetEdgeCount}];
vec2 vb = startEnd;
vec2 center = planetCenters[j];
float l = planetLengths[j];
float randomOffset = planetRandoms[j];
vec2 targetTangent = normalize(target - center);
vec2 noisyTarget = target - (
targetTangent * planetTerrain(vec2(
l * abs(atan(targetTangent.y, targetTangent.x)),
randomOffset
)) / 12.0
);
float d = 10000.0;
float s = 1.0;
for (int k = 1; k < ${settings.planetEdgeCount}; k++) {
vec2 va = vb;
vb = planetVertices[j * ${settings.planetEdgeCount} + k];
vec2 ds = planetLineDistance(noisyTarget, va, vb);
bvec3 cond = bvec3(noisyTarget.y >= va.y, noisyTarget.y < vb.y, ds.y > 0.0);
if (all(cond) || all(not(cond))) {
s *= -1.0;
}
d = min(d, ds.x);
}
vec2 ds = planetLineDistance(noisyTarget, vb, startEnd);
bvec3 cond = bvec3(noisyTarget.y >= vb.y, noisyTarget.y < startEnd.y, ds.y > 0.0);
if (all(cond) || all(not(cond))) {
s *= -1.0;
}
d = min(d, ds.x);
float dist = s * sqrt(d);
if (dist < minDistance) {
minDistance = dist;
color = mix(${colorToString(settings.declaPlanetColor)}, ${colorToString(
settings.redPlanetColor,
)}, planetColorMixQ[j]);
}
}
return minDistance;
}
`,
distanceFunctionName: 'planetMinDistance',
},
propertyUniformMapping: {
length: 'planetLengths',
random: 'planetRandoms',
center: 'planetCenters',
vertices: 'planetVertices',
colorMixQ: 'planetColorMixQ',
},
uniformCountMacroName: `PLANET_COUNT`,
shaderCombinationSteps: [0, 1, 2, 3, 8, 16],
empty: new PlanetShape(new Array(settings.planetEdgeCount).fill(vec2.create()), 0),
};
public randomOffset = 0;
constructor(public vertices: Array<vec2>, public colorMixQ: number) {
super(vertices);
}
protected getObjectToSerialize(transform2d: mat2d, transform1d: number): any {
const transformedVertices = (this as any).actualVertices.map((v: vec2) =>
vec2.transformMat2d(vec2.create(), v, transform2d),
);
const center = transformedVertices.reduce(
(sum: vec2, v: vec2) => vec2.add(sum, sum, v),
vec2.create(),
);
vec2.scale(center, center, 1 / transformedVertices.length);
let length = 0;
for (let i = 1; i < this.vertices.length; i++) {
length += vec2.distance(transformedVertices[i - 1], transformedVertices[i]);
}
return {
vertices: transformedVertices,
center,
length,
random: this.randomOffset,
colorMixQ: this.colorMixQ,
};
}
public serializeToUniforms(
uniforms: any,
transform2d: mat2d,
transform1d: number,
): void {
const { propertyUniformMapping } = (this.constructor as typeof Drawable).descriptor;
const serialized = this.getObjectToSerialize(transform2d, transform1d);
Object.entries(propertyUniformMapping).forEach(([k, v]) => {
if (!Object.prototype.hasOwnProperty.call(uniforms, v)) {
uniforms[v] = [];
}
if (k === 'vertices') {
uniforms[v].push(...serialized[k]);
} else {
uniforms[v].push(serialized[k]);
}
});
}
}

4
frontend/src/scripts/shapes/polygon.ts
View file

@ -1,4 +0,0 @@
import { NoisyPolygonFactory } from 'sdf-2d';
import { settings } from 'shared';
export const Polygon = NoisyPolygonFactory(settings.polygonEdgeCount, 1);

21
frontend/src/styles/form.scss
View file

@ -1,9 +1,18 @@
@import './vars.scss';
@import './mixins.scss';
form {
backdrop-filter: blur(24px);
background-color: rgba(0, 0, 0, 0.15);
@include background;
padding: $small-padding / 2 $small-padding $small-padding $small-padding;
border-radius: $border-radius;
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
-webkit-text-fill-color: white;
transition: background-color 5000s ease-in-out 0s;
}
input,
label {
@ -57,6 +66,7 @@ form {
display: block;
transition: $animation-time;
color: $gray;
font-size: 1.1rem;
}
input:focus,
@ -78,6 +88,7 @@ form {
input[type='radio'] {
width: 0;
height: 0;
appearance: none;
+ label {
display: block;
@ -100,8 +111,9 @@ form {
}
}
}
}
button {
button {
border: none;
background: none;
font-size: 2rem;
@ -118,7 +130,4 @@ form {
color: $accent;
transform: translateY(-8px);
}
}
border-radius: $border-radius;
}

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

@ -1,5 +1,6 @@
@import './vars.scss';
@import './form.scss';
@import './mixins.scss';
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&family=Open+Sans&display=swap');
* {
@ -21,7 +22,8 @@ html {
}
}
h1 {
h1,
h2 {
&,
* {
font-family: 'Comfortaa', sans-serif;
@ -31,6 +33,10 @@ h1 {
padding-bottom: $medium-padding;
}
h2 {
font-size: 4rem;
}
.red {
color: $red;
&::selection {
@ -48,6 +54,8 @@ canvas {
}
body {
overflow: hidden;
#landing-ui {
width: 100%;
height: 100%;
@ -67,7 +75,104 @@ body {
top: 0;
pointer-events: none;
user-select: none;
font-size: 0.75rem;
overflow: hidden;
h2 {
margin: $large-padding 0;
}
.player-tag {
font-size: 1.3rem;
position: absolute;
transform: translateX(-50%) translateY(-50%) rotate(-15deg);
transition: left 200ms, top 200ms;
div {
height: 3px;
background-color: rebeccapurple;
}
}
.ownership {
font-size: 1.3rem;
position: absolute;
transform: translateX(-50%) translateY(-50%);
}
.planet-progress {
position: absolute;
top: $small-padding;
left: 50%;
transform: translateX(-50%);
width: 50%;
display: flex;
$height: 8px;
height: $height;
border-radius: 4px;
div {
height: $height;
}
div:nth-child(1) {
background: rebeccapurple;
}
div:nth-child(2) {
background: gray;
}
div:nth-child(3) {
background: red;
}
}
}
#open-settings {
position: absolute;
top: 0;
right: 0;
animation: spin 32s linear infinite;
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
}
.icon {
box-sizing: content-box;
user-select: none;
cursor: pointer;
padding: $medium-padding;
@include square(48px);
@media (max-width: $breakpoint) {
@include square(32px);
padding: $small-padding;
}
}
.full-screen-controllers {
position: absolute;
bottom: 0;
left: 0;
}
#settings {
@include background;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
padding: $large-padding;
visibility: hidden;
}
}

11
frontend/src/styles/mixins.scss Normal file
View file

@ -0,0 +1,11 @@
@mixin square($size) {
width: $size;
height: $size;
}
@mixin background {
backdrop-filter: blur(24px);
@supports not (backdrop-filter: blur(24px)) {
background-color: rgba(0, 0, 0, 0.15);
}
}

BIN
frontend/static/declared.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 25 KiB

BIN
frontend/static/declared.psd (Stored with Git LFS)
View file

Binary file not shown.

7
frontend/static/maximize.svg Normal file
View file

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 24 24" stroke-width="1.5" stroke="#FFFFFF" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M4 8v-2a2 2 0 0 1 2 -2h2" />
<path d="M4 16v2a2 2 0 0 0 2 2h2" />
<path d="M16 4h2a2 2 0 0 1 2 2v2" />
<path d="M16 20h2a2 2 0 0 0 2 -2v-2" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 399 B

7
frontend/static/minimize.svg Normal file
View file

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 24 24" stroke-width="1.5" stroke="#FFFFFF" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M15 19v-2a2 2 0 0 1 2 -2h2" />
<path d="M15 5v2a2 2 0 0 0 2 2h2" />
<path d="M5 15h2a2 2 0 0 1 2 2v2" />
<path d="M5 9h2a2 2 0 0 0 2 -2v-2" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 399 B

4
frontend/static/settings.svg Normal file
View file

@ -0,0 +1,4 @@
<svg enable-background="new 0 0 512 512" width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="white">
<path d="m272.066 512h-32.133c-25.989 0-47.134-21.144-47.134-47.133v-10.871c-11.049-3.53-21.784-7.986-32.097-13.323l-7.704 7.704c-18.659 18.682-48.548 18.134-66.665-.007l-22.711-22.71c-18.149-18.129-18.671-48.008.006-66.665l7.698-7.698c-5.337-10.313-9.792-21.046-13.323-32.097h-10.87c-25.988 0-47.133-21.144-47.133-47.133v-32.134c0-25.989 21.145-47.133 47.134-47.133h10.87c3.531-11.05 7.986-21.784 13.323-32.097l-7.704-7.703c-18.666-18.646-18.151-48.528.006-66.665l22.713-22.712c18.159-18.184 48.041-18.638 66.664.006l7.697 7.697c10.313-5.336 21.048-9.792 32.097-13.323v-10.87c0-25.989 21.144-47.133 47.134-47.133h32.133c25.989 0 47.133 21.144 47.133 47.133v10.871c11.049 3.53 21.784 7.986 32.097 13.323l7.704-7.704c18.659-18.682 48.548-18.134 66.665.007l22.711 22.71c18.149 18.129 18.671 48.008-.006 66.665l-7.698 7.698c5.337 10.313 9.792 21.046 13.323 32.097h10.87c25.989 0 47.134 21.144 47.134 47.133v32.134c0 25.989-21.145 47.133-47.134 47.133h-10.87c-3.531 11.05-7.986 21.784-13.323 32.097l7.704 7.704c18.666 18.646 18.151 48.528-.006 66.665l-22.713 22.712c-18.159 18.184-48.041 18.638-66.664-.006l-7.697-7.697c-10.313 5.336-21.048 9.792-32.097 13.323v10.871c0 25.987-21.144 47.131-47.134 47.131zm-106.349-102.83c14.327 8.473 29.747 14.874 45.831 19.025 6.624 1.709 11.252 7.683 11.252 14.524v22.148c0 9.447 7.687 17.133 17.134 17.133h32.133c9.447 0 17.134-7.686 17.134-17.133v-22.148c0-6.841 4.628-12.815 11.252-14.524 16.084-4.151 31.504-10.552 45.831-19.025 5.895-3.486 13.4-2.538 18.243 2.305l15.688 15.689c6.764 6.772 17.626 6.615 24.224.007l22.727-22.726c6.582-6.574 6.802-17.438.006-24.225l-15.695-15.695c-4.842-4.842-5.79-12.348-2.305-18.242 8.473-14.326 14.873-29.746 19.024-45.831 1.71-6.624 7.684-11.251 14.524-11.251h22.147c9.447 0 17.134-7.686 17.134-17.133v-32.134c0-9.447-7.687-17.133-17.134-17.133h-22.147c-6.841 0-12.814-4.628-14.524-11.251-4.151-16.085-10.552-31.505-19.024-45.831-3.485-5.894-2.537-13.4 2.305-18.242l15.689-15.689c6.782-6.774 6.605-17.634.006-24.225l-22.725-22.725c-6.587-6.596-17.451-6.789-24.225-.006l-15.694 15.695c-4.842 4.843-12.35 5.791-18.243 2.305-14.327-8.473-29.747-14.874-45.831-19.025-6.624-1.709-11.252-7.683-11.252-14.524v-22.15c0-9.447-7.687-17.133-17.134-17.133h-32.133c-9.447 0-17.134 7.686-17.134 17.133v22.148c0 6.841-4.628 12.815-11.252 14.524-16.084 4.151-31.504 10.552-45.831 19.025-5.896 3.485-13.401 2.537-18.243-2.305l-15.688-15.689c-6.764-6.772-17.627-6.615-24.224-.007l-22.727 22.726c-6.582 6.574-6.802 17.437-.006 24.225l15.695 15.695c4.842 4.842 5.79 12.348 2.305 18.242-8.473 14.326-14.873 29.746-19.024 45.831-1.71 6.624-7.684 11.251-14.524 11.251h-22.148c-9.447.001-17.134 7.687-17.134 17.134v32.134c0 9.447 7.687 17.133 17.134 17.133h22.147c6.841 0 12.814 4.628 14.524 11.251 4.151 16.085 10.552 31.505 19.024 45.831 3.485 5.894 2.537 13.4-2.305 18.242l-15.689 15.689c-6.782 6.774-6.605 17.634-.006 24.225l22.725 22.725c6.587 6.596 17.451 6.789 24.225.006l15.694-15.695c3.568-3.567 10.991-6.594 18.244-2.304z"/>
<path d="m256 367.4c-61.427 0-111.4-49.974-111.4-111.4s49.973-111.4 111.4-111.4 111.4 49.974 111.4 111.4-49.973 111.4-111.4 111.4zm0-192.8c-44.885 0-81.4 36.516-81.4 81.4s36.516 81.4 81.4 81.4 81.4-36.516 81.4-81.4-36.515-81.4-81.4-81.4z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.3 KiB

5
frontend/tsconfig.json
View file

@ -1,9 +1,6 @@
{
"compilerOptions": {
"outDir": "dist",
"sourceMap": true,
"declaration": true,
"declarationMap": true,
"target": "es6",
"esModuleInterop": true,
"strict": true,
@ -14,5 +11,5 @@
"composite": true,
"lib": ["dom", "es2017"]
},
"include": ["src/**/*.ts"]
"include": ["src/**/*.ts", "src/*.ts"]
}

10
frontend/webpack.config.js
View file

@ -80,6 +80,16 @@ module.exports = (env, argv) => ({
},
},
},
{
test: /\.svg$/,
use: {
loader: 'file-loader',
query: {
outputPath: '/static',
name: '[name].[ext]',
},
},
},
{
test: /\.scss$/,
use: [

14
shared/src/commands/types/player-died.ts Normal file
View file

@ -0,0 +1,14 @@
import { vec2 } from 'gl-matrix';
import { serializable } from '../../transport/serialization/serializable';
import { Command } from '../command';
@serializable
export class PlayerDiedCommand extends Command {
public constructor(public readonly timeout: number) {
super();
}
public toArray(): Array<any> {
return [this.timeout];
}
}

17
shared/src/commands/types/update-planet-ownership.ts Normal file
View file

@ -0,0 +1,17 @@
import { serializable } from '../../transport/serialization/serializable';
import { Command } from '../command';
@serializable
export class UpdatePlanetOwnershipCommand extends Command {
public constructor(
public readonly declaCount: number,
public readonly redCount: number,
public readonly neutralCount: number,
) {
super();
}
public toArray(): Array<any> {
return [this.declaCount, this.redCount, this.neutralCount];
}
}

34
shared/src/helper/hsl.ts Normal file
View file

@ -0,0 +1,34 @@
import { vec3 } from 'gl-matrix';
import { rgb } from './rgb';
export const hsl = (hue: number, saturation: number, lightness: number): vec3 => {
hue /= 360;
saturation /= 100;
lightness /= 100;
let r, g, b;
if (saturation == 0) {
r = g = b = lightness;
} else {
const hue2rgb = (p: number, q: number, t: number) => {
if (t < 0) t += 1;
if (t > 1) t -= 1;
if (t < 1 / 6) return p + (q - p) * 6 * t;
if (t < 1 / 2) return q;
if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
return p;
};
const q =
lightness < 0.5
? lightness * (1 + saturation)
: lightness + saturation - lightness * saturation;
const p = 2 * lightness - q;
r = hue2rgb(p, q, hue + 1 / 3);
g = hue2rgb(p, q, hue);
b = hue2rgb(p, q, hue - 1 / 3);
}
return rgb(r, g, b);
};

4
shared/src/main.ts
View file

@ -5,7 +5,9 @@ export * from './commands/types/delete-objects';
export * from './commands/types/ternary-action';
export * from './commands/types/move-action';
export * from './commands/types/primary-action';
export * from './commands/types/player-died';
export * from './commands/types/update-objects';
export * from './commands/types/update-planet-ownership';
export * from './commands/types/secondary-action';
export * from './commands/command-receiver';
export * from './commands/command-executors';
@ -15,6 +17,7 @@ export * from './commands/types/set-aspect-ratio-action';
export * from './helper/array';
export * from './helper/last';
export * from './helper/rgb';
export * from './helper/hsl';
export * from './helper/rgb255';
export * from './helper/mix-rgb';
export * from './helper/clamp';
@ -36,6 +39,7 @@ export * from './transport/serialization/serializes-to';
export * from './transport/serialization/serializable';
export * from './transport/serialization/override-deserialization';
export * from './objects/types/character-base';
export * from './objects/types/character-team';
export * from './objects/update-message';
export * from './objects/types/player-character-base';
export * from './objects/types/lamp-base';

9
shared/src/objects/game-object.ts
View file

@ -1,5 +1,14 @@
import { UpdateMessage, UpdateObjectMessage } from '../main';
import { Id } from '../transport/identity';
export abstract class GameObject {
constructor(public readonly id: Id) {}
public calculateUpdates(): UpdateObjectMessage | undefined {
return;
}
update(updates: Array<UpdateMessage>): void {
updates.forEach((u) => ((this as any)[u.key] = u.value));
}
}

7
shared/src/objects/types/character-base.ts
View file

@ -2,12 +2,15 @@ import { Circle } from '../../helper/circle';
import { Id } from '../../transport/identity';
import { serializable } from '../../transport/serialization/serializable';
import { GameObject } from '../game-object';
import { CharacterTeam } from './character-team';
@serializable
export class CharacterBase extends GameObject {
constructor(
id: Id,
public colorIndex: number,
public team: CharacterTeam,
public health: number,
public head?: Circle,
public leftFoot?: Circle,
public rightFoot?: Circle,
@ -16,7 +19,7 @@ export class CharacterBase extends GameObject {
}
public toArray(): Array<any> {
const { id, colorIndex, head, leftFoot, rightFoot } = this;
return [id, colorIndex, head, leftFoot, rightFoot];
const { id, colorIndex, team, health, head, leftFoot, rightFoot } = this;
return [id, colorIndex, team, health, head, leftFoot, rightFoot];
}
}

4
shared/src/objects/types/character-team.ts Normal file
View file

@ -0,0 +1,4 @@
export enum CharacterTeam {
decla = 'decla',
red = 'red',
}

12
shared/src/objects/types/planet-base.ts
View file

@ -7,8 +7,16 @@ import { GameObject } from '../game-object';
@serializable
export class PlanetBase extends GameObject {
constructor(id: Id, public readonly vertices: Array<vec2>) {
public readonly center: vec2;
constructor(
id: Id,
public readonly vertices: Array<vec2>,
public ownership: number = 0.5,
) {
super(id);
this.center = vertices.reduce((sum, v) => vec2.add(sum, sum, v), vec2.create());
vec2.scale(this.center, this.center, 1 / vertices.length);
}
public static createPlanetVertices(
@ -16,7 +24,7 @@ export class PlanetBase extends GameObject {
width: number,
height: number,
randomness: number,
vertexCount = settings.polygonEdgeCount,
vertexCount = settings.planetEdgeCount,
): Array<vec2> {
const vertices = [];

9
shared/src/objects/types/player-character-base.ts
View file

@ -2,6 +2,7 @@ import { CharacterBase } from './character-base';
import { Circle } from '../../helper/circle';
import { Id } from '../../transport/identity';
import { serializable } from '../../transport/serialization/serializable';
import { CharacterTeam } from './character-team';
@serializable
export class PlayerCharacterBase extends CharacterBase {
@ -9,15 +10,17 @@ export class PlayerCharacterBase extends CharacterBase {
id: Id,
public name: string,
colorIndex: number,
team: CharacterTeam,
health: number,
head?: Circle,
leftFoot?: Circle,
rightFoot?: Circle,
) {
super(id, colorIndex, head, leftFoot, rightFoot);
super(id, colorIndex, team, health, head, leftFoot, rightFoot);
}
public toArray(): Array<any> {
const { id, name, colorIndex, head, leftFoot, rightFoot } = this;
return [id, name, colorIndex, head, leftFoot, rightFoot];
const { id, name, colorIndex, team, health, head, leftFoot, rightFoot } = this;
return [id, name, colorIndex, team, health, head, leftFoot, rightFoot];
}
}

10
shared/src/objects/types/projectile-base.ts
View file

@ -5,11 +5,17 @@ import { GameObject } from '../game-object';
@serializable
export class ProjectileBase extends GameObject {
constructor(id: Id, public center: vec2, public radius: number) {
constructor(
id: Id,
public center: vec2,
public radius: number,
public colorIndex: number,
public strength: number,
) {
super(id);
}
public toArray(): Array<any> {
return [this.id, this.center, this.radius];
return [this.id, this.center, this.radius, this.colorIndex, this.strength];
}
}

64
shared/src/settings.ts
View file

@ -1,55 +1,47 @@
import { rgb } from './helper/rgb';
import { rgb255 } from './helper/rgb255';
const declaColor = rgb255(181, 138, 255);
const redColor = rgb255(255, 138, 138);
const declaPlanetColor = rgb(0, 0, 3);
const redPlanetColor = rgb(3, 0, 0);
export const settings = {
lightCutoffDistance: 600,
physicsMaxStep: 2,
maxVelocityX: 1000,
maxVelocityY: 1000,
polygonEdgeCount: 7,
planetEdgeCount: 7,
takeControlTimeInSeconds: 10,
maxGravityDistance: 700,
maxGravityQ: 180,
planetControlThreshold: 0.2,
playerMaxHealth: 100,
maxGravityStrength: 10000,
maxAcceleration: 10000,
playerMaxStrength: 80,
playerDiedTimeout: 5,
playerStrengthRegenerationPerSeconds: 40,
projectileMaxStrength: 40,
projectileSpeed: 4000,
projectileMaxBounceCount: 1,
projectileStartOffset: 250,
projectileTimeout: 3,
projectileFadeSpeed: 20,
projectileStartOffset: 150,
projectileCreationInterval: 0.1,
playerColorIndexOffset: 3,
worldTopEdge: 10000,
worldRightEdge: 10000,
worldLeftEdge: -10000,
worldBottomEdge: -10000,
worldTopEdge: 3000,
worldRightEdge: 3000,
worldLeftEdge: -3000,
worldBottomEdge: -3000,
backgroundGradient: [rgb255(90, 38, 43), rgb255(43, 39, 73)],
playerColors: [
rgb255(107, 48, 188),
rgb255(56, 254, 220),
rgb255(197, 17, 17),
rgb255(24, 24, 24),
rgb255(245, 245, 88),
rgb255(80, 239, 58),
rgb255(18, 127, 45),
rgb255(240, 125, 13),
rgb255(214, 227, 241),
rgb255(0, 161, 161),
rgb255(250, 161, 151),
rgb255(235, 84, 185),
rgb255(114, 73, 30),
rgb255(75, 75, 75),
rgb255(107, 48, 188),
rgb255(56, 254, 220),
rgb255(197, 17, 17),
rgb255(24, 24, 24),
rgb255(245, 245, 88),
rgb255(80, 239, 58),
rgb255(18, 127, 45),
rgb255(240, 125, 13),
rgb255(214, 227, 241),
rgb255(0, 161, 161),
rgb255(250, 161, 151),
rgb255(235, 84, 185),
rgb255(114, 73, 30),
rgb255(75, 75, 75),
],
declaColor,
declaPlanetColor,
redColor,
redPlanetColor,
declaIndex: 0,
redIndex: 1,
palette: [declaColor, redColor],
targetPhysicsDeltaTimeInMilliseconds: 20,
minPhysicsSleepTime: 4,
velocityAttenuation: 0.25,

3
shared/tsconfig.json
View file

@ -13,5 +13,6 @@
"module": "commonjs",
"composite": true,
"lib": ["dom", "es2017"]
}
},
"include": ["src/**/*.ts", "src/*.ts"]
}

13
tsconfig.json Normal file
View file

@ -0,0 +1,13 @@
{
"compilerOptions": {
"target": "es6",
"esModuleInterop": true,
"strict": true,
"experimentalDecorators": true,
"downlevelIteration": true,
"moduleResolution": "node",
"module": "commonjs",
"composite": true,
"lib": ["dom", "es2017"]
}
}