Change gameplay
This commit is contained in:
schmelczerandras
parent
d79900e3ea
commit
34dae300da
56 changed files with 906 additions and 400 deletions
|
|
@ -1,156 +1,95 @@
|
|||
import { vec2 } from 'gl-matrix';
|
||||
import {
|
||||
CircleLight,
|
||||
ColorfulCircle,
|
||||
FilteringOptions,
|
||||
Flashlight,
|
||||
Renderer,
|
||||
renderNoise,
|
||||
runAnimation,
|
||||
WrapOptions,
|
||||
} from 'sdf-2d';
|
||||
import { Renderer, renderNoise } from 'sdf-2d';
|
||||
import {
|
||||
broadcastCommands,
|
||||
deserialize,
|
||||
serialize,
|
||||
settings,
|
||||
TransportEvents,
|
||||
SetAspectRatioActionCommand,
|
||||
PlayerInformation,
|
||||
PlayerDiedCommand,
|
||||
UpdateGameState,
|
||||
UpdateOtherPlayerDirections,
|
||||
clamp,
|
||||
UpdateGameState,
|
||||
GameEnd,
|
||||
CharacterTeam,
|
||||
ServerAnnouncement,
|
||||
GameStart,
|
||||
CommandReceiver,
|
||||
CommandExecutors,
|
||||
Command,
|
||||
} from 'shared';
|
||||
import io from 'socket.io-client';
|
||||
import { KeyboardListener } from './commands/generators/keyboard-listener';
|
||||
import { MouseListener } from './commands/generators/mouse-listener';
|
||||
import { TouchJoystickListener } from './commands/generators/touch-joystick-listener';
|
||||
import { CommandReceiverSocket } from './commands/receivers/command-receiver-socket';
|
||||
import { startAnimation } from './start-animation';
|
||||
import { PlayerDecision } from './join-form-handler';
|
||||
import { GameObjectContainer } from './objects/game-object-container';
|
||||
import { OptionsHandler } from './options-handler';
|
||||
import { BlobShape } from './shapes/blob-shape';
|
||||
import { PlanetShape } from './shapes/planet-shape';
|
||||
|
||||
export class Game {
|
||||
public readonly gameObjects = new GameObjectContainer(this);
|
||||
export class Game extends CommandReceiver {
|
||||
public gameObjects = new GameObjectContainer(this);
|
||||
public renderer?: Renderer;
|
||||
private socket!: SocketIOClient.Socket;
|
||||
private deadTimeout = 0;
|
||||
private isBetweenGames = false;
|
||||
|
||||
public started: Promise<void>;
|
||||
private resolveStarted!: () => unknown;
|
||||
|
||||
private declaPlanetCountElement = document.createElement('div');
|
||||
private redPlanetCountElement = document.createElement('div');
|
||||
private neutralPlanetCountElement = document.createElement('div');
|
||||
private announcementText = document.createElement('h2');
|
||||
private progressBar = document.createElement('div');
|
||||
private arrowElements: Array<HTMLElement> = [];
|
||||
|
||||
constructor(
|
||||
private readonly playerDecision: PlayerDecision,
|
||||
private readonly canvas: HTMLCanvasElement,
|
||||
private readonly overlay: HTMLElement,
|
||||
) {
|
||||
super();
|
||||
this.started = new Promise((r) => (this.resolveStarted = r));
|
||||
this.announcementText.className = 'announcement';
|
||||
const progressBar = document.createElement('div');
|
||||
progressBar.className = 'planet-progress';
|
||||
overlay.appendChild(progressBar);
|
||||
progressBar.appendChild(this.declaPlanetCountElement);
|
||||
progressBar.appendChild(this.neutralPlanetCountElement);
|
||||
progressBar.appendChild(this.redPlanetCountElement);
|
||||
this.progressBar.className = 'planet-progress';
|
||||
this.progressBar.appendChild(this.declaPlanetCountElement);
|
||||
this.progressBar.appendChild(this.redPlanetCountElement);
|
||||
}
|
||||
|
||||
private arrowElements: Array<HTMLElement> = [];
|
||||
private async setupCommunication(serverUrl: string): Promise<void> {
|
||||
this.socket = io(serverUrl, {
|
||||
private initialize() {
|
||||
this.isBetweenGames = true;
|
||||
|
||||
this.socket?.close();
|
||||
this.gameObjects = new GameObjectContainer(this);
|
||||
this.overlay.innerHTML = '';
|
||||
this.overlay.appendChild(this.progressBar);
|
||||
this.announcementText.innerText = '';
|
||||
this.overlay.appendChild(this.announcementText);
|
||||
|
||||
this.socket = io(this.playerDecision.server, {
|
||||
reconnectionDelayMax: 10000,
|
||||
transports: ['websocket'],
|
||||
forceNew: true,
|
||||
});
|
||||
|
||||
this.socket.on('reconnect_attempt', () => {
|
||||
this.socket.io.opts.transports = ['polling', 'websocket'];
|
||||
});
|
||||
|
||||
this.socket.on('disconnect', this.destroy.bind(this));
|
||||
|
||||
this.socket.on(TransportEvents.ServerToPlayer, (serialized: string) => {
|
||||
const command = deserialize(serialized);
|
||||
if (command instanceof PlayerDiedCommand) {
|
||||
this.deadTimeout = command.timeout;
|
||||
if (OptionsHandler.options.vibrationEnabled) {
|
||||
navigator.vibrate(150);
|
||||
}
|
||||
this.overlay.appendChild(this.announcementText);
|
||||
} else if (command instanceof UpdateGameState) {
|
||||
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.announcementText);
|
||||
this.announcementText.innerText = 'Decla team won 🎉';
|
||||
}
|
||||
|
||||
if (command.redCount > all * 0.5) {
|
||||
this.overlay.appendChild(this.announcementText);
|
||||
this.announcementText.innerText = 'Red team won 🎉';
|
||||
}
|
||||
|
||||
this.arrowElements
|
||||
.splice(command.otherPlayerDirections.length, this.arrowElements.length)
|
||||
.forEach((e) => e.parentElement?.removeChild(e));
|
||||
|
||||
for (
|
||||
let i = this.arrowElements.length;
|
||||
i < command.otherPlayerDirections.length;
|
||||
i++
|
||||
) {
|
||||
const element = document.createElement('div');
|
||||
this.arrowElements.push(element);
|
||||
this.overlay.appendChild(element);
|
||||
}
|
||||
|
||||
this.arrowElements.forEach((e, i) => {
|
||||
const direction = command.otherPlayerDirections[i].direction;
|
||||
const team = command.otherPlayerDirections[i].team;
|
||||
const angle = Math.atan2(direction.y, direction.x);
|
||||
e.className = 'other-player-arrow ' + team;
|
||||
|
||||
const { width, height } = this.overlay.getBoundingClientRect();
|
||||
const aspectRatio = width / height;
|
||||
const directionRatio = direction.x / direction.y;
|
||||
|
||||
let deltaX: number, deltaY: number;
|
||||
if (aspectRatio < Math.abs(directionRatio)) {
|
||||
deltaX = (width / 2) * Math.sign(direction.x);
|
||||
deltaY = deltaX / directionRatio;
|
||||
} else {
|
||||
deltaY = (height / 2) * Math.sign(direction.y);
|
||||
deltaX = deltaY * directionRatio;
|
||||
}
|
||||
|
||||
const delta = vec2.fromValues(deltaX, deltaY);
|
||||
const center = vec2.fromValues(width / 2, height / 2);
|
||||
const p = vec2.add(center, center, delta);
|
||||
const arrowPadding = 24;
|
||||
vec2.set(
|
||||
p,
|
||||
clamp(p.x, arrowPadding, width - arrowPadding),
|
||||
clamp(height - p.y, arrowPadding, height - arrowPadding),
|
||||
);
|
||||
e.style.transform = `translateX(${p.x}px) translateY(${
|
||||
p.y
|
||||
}px) translateX(-50%) translateY(-50%) rotate(${-angle + Math.PI / 2}rad) `;
|
||||
});
|
||||
} else this.gameObjects.sendCommand(command);
|
||||
this.socket.on('disconnect', () => {
|
||||
if (!this.isBetweenGames) {
|
||||
this.destroy();
|
||||
}
|
||||
});
|
||||
|
||||
this.socket.on(TransportEvents.Ping, () => {
|
||||
this.socket.emit(TransportEvents.Pong);
|
||||
});
|
||||
|
||||
this.socket.emit(TransportEvents.PlayerJoining, {
|
||||
name: this.playerDecision.playerName,
|
||||
} as PlayerInformation);
|
||||
this.socket.on(TransportEvents.ServerToPlayer, (serialized: string) =>
|
||||
this.sendCommand(deserialize(serialized)),
|
||||
);
|
||||
|
||||
broadcastCommands(
|
||||
[
|
||||
|
|
@ -160,57 +99,94 @@ export class Game {
|
|||
],
|
||||
[this.gameObjects, new CommandReceiverSocket(this.socket)],
|
||||
);
|
||||
|
||||
this.isBetweenGames = false;
|
||||
|
||||
this.socket.emit(TransportEvents.PlayerJoining, {
|
||||
name: this.playerDecision.playerName,
|
||||
} as PlayerInformation);
|
||||
}
|
||||
|
||||
protected defaultCommandExecutor(c: Command) {
|
||||
this.gameObjects.sendCommand(c);
|
||||
}
|
||||
|
||||
protected commandExecutors: CommandExecutors = {
|
||||
[ServerAnnouncement.type]: (c: ServerAnnouncement) =>
|
||||
(this.announcementText.innerText = 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 + '%';
|
||||
},
|
||||
[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 🎉`;
|
||||
},
|
||||
[UpdateOtherPlayerDirections.type]: this.handleOtherPlayerDirections.bind(this),
|
||||
[GameStart.type]: this.initialize.bind(this),
|
||||
};
|
||||
|
||||
private handleOtherPlayerDirections(command: UpdateOtherPlayerDirections) {
|
||||
this.arrowElements
|
||||
.splice(command.otherPlayerDirections.length, this.arrowElements.length)
|
||||
.forEach((e) => e.parentElement?.removeChild(e));
|
||||
|
||||
for (
|
||||
let i = this.arrowElements.length;
|
||||
i < command.otherPlayerDirections.length;
|
||||
i++
|
||||
) {
|
||||
const element = document.createElement('div');
|
||||
this.arrowElements.push(element);
|
||||
this.overlay.appendChild(element);
|
||||
}
|
||||
|
||||
this.arrowElements.forEach((e, i) => {
|
||||
const direction = command.otherPlayerDirections[i].direction;
|
||||
const team = command.otherPlayerDirections[i].team;
|
||||
const angle = Math.atan2(direction.y, direction.x);
|
||||
e.className = 'other-player-arrow ' + team;
|
||||
|
||||
const { width, height } = this.overlay.getBoundingClientRect();
|
||||
const aspectRatio = width / height;
|
||||
const directionRatio = direction.x / direction.y;
|
||||
|
||||
let deltaX: number, deltaY: number;
|
||||
if (aspectRatio < Math.abs(directionRatio)) {
|
||||
deltaX = (width / 2) * Math.sign(direction.x);
|
||||
deltaY = deltaX / directionRatio;
|
||||
} else {
|
||||
deltaY = (height / 2) * Math.sign(direction.y);
|
||||
deltaX = deltaY * directionRatio;
|
||||
}
|
||||
|
||||
const delta = vec2.fromValues(deltaX, deltaY);
|
||||
const center = vec2.fromValues(width / 2, height / 2);
|
||||
const p = vec2.add(center, center, delta);
|
||||
const arrowPadding = 24;
|
||||
vec2.set(
|
||||
p,
|
||||
clamp(p.x, arrowPadding, width - arrowPadding),
|
||||
clamp(height - p.y, arrowPadding, height - arrowPadding),
|
||||
);
|
||||
e.style.transform = `translateX(${p.x}px) translateY(${
|
||||
p.y
|
||||
}px) translateX(-50%) translateY(-50%) rotate(${-angle + Math.PI / 2}rad) `;
|
||||
});
|
||||
}
|
||||
|
||||
public async start(): Promise<void> {
|
||||
const noiseTexture = await renderNoise([256, 256], 2, 1);
|
||||
this.setupCommunication(this.playerDecision.server);
|
||||
await runAnimation(
|
||||
this.canvas,
|
||||
[
|
||||
{
|
||||
...PlanetShape.descriptor,
|
||||
shaderCombinationSteps: [0, 1, 2, 3],
|
||||
},
|
||||
{
|
||||
...BlobShape.descriptor,
|
||||
shaderCombinationSteps: [0, 1, 2, 8],
|
||||
},
|
||||
{
|
||||
...ColorfulCircle.descriptor,
|
||||
shaderCombinationSteps: [0, 2, 16],
|
||||
},
|
||||
{
|
||||
...CircleLight.descriptor,
|
||||
shaderCombinationSteps: [0, 1, 2, 4, 8, 16],
|
||||
},
|
||||
{
|
||||
...Flashlight.descriptor,
|
||||
shaderCombinationSteps: [0],
|
||||
},
|
||||
],
|
||||
this.gameLoop.bind(this),
|
||||
{
|
||||
shadowTraceCount: 16,
|
||||
paletteSize: settings.palette.length,
|
||||
//enableStopwatch: true,
|
||||
},
|
||||
{
|
||||
colorPalette: settings.palette,
|
||||
enableHighDpiRendering: true,
|
||||
lightCutoffDistance: settings.lightCutoffDistance,
|
||||
textures: {
|
||||
noiseTexture: {
|
||||
source: noiseTexture,
|
||||
overrides: {
|
||||
maxFilter: FilteringOptions.LINEAR,
|
||||
wrapS: WrapOptions.MIRRORED_REPEAT,
|
||||
wrapT: WrapOptions.MIRRORED_REPEAT,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
);
|
||||
this.initialize();
|
||||
await startAnimation(this.canvas, this.gameLoop.bind(this), noiseTexture);
|
||||
this.socket.close();
|
||||
this.overlay.innerHTML = '';
|
||||
}
|
||||
|
|
@ -237,17 +213,13 @@ export class Game {
|
|||
|
||||
private gameLoop(
|
||||
renderer: Renderer,
|
||||
currentTime: DOMHighResTimeStamp,
|
||||
_: DOMHighResTimeStamp,
|
||||
deltaTime: DOMHighResTimeStamp,
|
||||
): boolean {
|
||||
this.resolveStarted();
|
||||
deltaTime /= 1000;
|
||||
|
||||
this.renderer = renderer;
|
||||
|
||||
if ((this.deadTimeout -= deltaTime / 1000) > 0) {
|
||||
this.announcementText.innerText = `Reviving in ${Math.floor(this.deadTimeout)}…`;
|
||||
} else {
|
||||
this.announcementText.parentElement?.removeChild(this.announcementText);
|
||||
}
|
||||
|
||||
this.gameObjects.stepObjects(deltaTime);
|
||||
this.gameObjects.drawObjects(this.renderer, this.overlay);
|
||||
|
||||
|
|
|
|||
|
|
@ -95,6 +95,9 @@ class ServerChooserOption {
|
|||
private divElement = document.createElement('div');
|
||||
private inputElement = document.createElement('input');
|
||||
private labelElement = document.createElement('label');
|
||||
private serverNameElement = document.createElement('span');
|
||||
private completionElement = document.createElement('span');
|
||||
|
||||
private socket: SocketIOClient.Socket;
|
||||
|
||||
constructor(
|
||||
|
|
@ -111,7 +114,11 @@ class ServerChooserOption {
|
|||
this.labelElement.htmlFor = url;
|
||||
this.divElement.appendChild(this.inputElement);
|
||||
this.divElement.appendChild(this.labelElement);
|
||||
this.setPlayerLabelText();
|
||||
this.labelElement.appendChild(this.serverNameElement);
|
||||
this.labelElement.appendChild(document.createElement('br'));
|
||||
this.labelElement.appendChild(this.completionElement);
|
||||
this.completionElement.className = 'completion';
|
||||
this.setServerInfoLabelText();
|
||||
|
||||
this.socket = io(url, {
|
||||
reconnection: false,
|
||||
|
|
@ -121,11 +128,15 @@ class ServerChooserOption {
|
|||
this.socket.on('connect_error', this.destroy.bind(this));
|
||||
this.socket.on('connect_timeout', this.destroy.bind(this));
|
||||
this.socket.on('disconnect', this.destroy.bind(this));
|
||||
this.socket.emit(TransportEvents.SubscribeForPlayerCount);
|
||||
this.socket.on(TransportEvents.PlayerCountUpdate, (v: number) => {
|
||||
this.content.playerCount = v;
|
||||
this.setPlayerLabelText();
|
||||
});
|
||||
this.socket.emit(TransportEvents.SubscribeForServerInfoUpdates);
|
||||
this.socket.on(
|
||||
TransportEvents.ServerInfoUpdate,
|
||||
([playerCount, gameState]: [number, number]) => {
|
||||
this.content.playerCount = playerCount;
|
||||
this.content.gameStatePercent = gameState;
|
||||
this.setServerInfoLabelText();
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
public destroy() {
|
||||
|
|
@ -134,8 +145,25 @@ class ServerChooserOption {
|
|||
this.onDestroy(this);
|
||||
}
|
||||
|
||||
private setPlayerLabelText() {
|
||||
this.labelElement.innerText = `${this.content.serverName} - ${this.content.playerCount}/${this.content.playerLimit} players`;
|
||||
private getRoundCompletionText(percent: number): string {
|
||||
const texts = [
|
||||
'Just started',
|
||||
'Just started',
|
||||
'Ongoing',
|
||||
'Halfway through',
|
||||
'Nearly over',
|
||||
'About to finish',
|
||||
'Game is over',
|
||||
];
|
||||
|
||||
return texts[Math.floor((percent / 100) * (texts.length - 1))];
|
||||
}
|
||||
|
||||
private setServerInfoLabelText() {
|
||||
this.serverNameElement.innerText = `${this.content.serverName} - ${this.content.playerCount}/${this.content.playerLimit} players`;
|
||||
this.completionElement.innerText = this.getRoundCompletionText(
|
||||
this.content.gameStatePercent,
|
||||
);
|
||||
}
|
||||
|
||||
public get element(): HTMLElement {
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ export class Camera extends GameObject implements ViewObject {
|
|||
|
||||
public beforeDestroy(): void {}
|
||||
|
||||
public step(deltaTimeInMilliseconds: number): void {}
|
||||
public step(deltaTimeInSeconds: number): void {}
|
||||
|
||||
public draw(renderer: Renderer, overlay: HTMLElement) {
|
||||
const canvasAspectRatio = renderer.canvasSize.x / renderer.canvasSize.y;
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ export class CharacterView extends CharacterBase implements ViewObject {
|
|||
|
||||
public beforeDestroy(): void {}
|
||||
|
||||
public step(deltaTimeInMilliseconds: number): void {}
|
||||
public step(deltaTimeInSeconds: number): void {}
|
||||
|
||||
public draw(renderer: Renderer, overlay: HTMLElement): void {
|
||||
this.shape.setCircles([this.head!, this.leftFoot!, this.rightFoot!]);
|
||||
|
|
|
|||
|
|
@ -5,9 +5,8 @@ import {
|
|||
CreateObjectsCommand,
|
||||
CreatePlayerCommand,
|
||||
DeleteObjectsCommand,
|
||||
GameObject,
|
||||
Id,
|
||||
UpdateObjectsCommand,
|
||||
RemoteCallsForObjects,
|
||||
} from 'shared';
|
||||
import { Game } from '../game';
|
||||
import { Camera } from './camera';
|
||||
|
|
@ -24,8 +23,11 @@ export class GameObjectContainer extends CommandReceiver {
|
|||
if (this.camera) {
|
||||
this.deleteObject(this.camera.id);
|
||||
}
|
||||
|
||||
this.player = c.character as PlayerCharacterView;
|
||||
|
||||
this.camera = new Camera(this.game);
|
||||
|
||||
this.addObject(this.player);
|
||||
this.addObject(this.camera);
|
||||
},
|
||||
|
|
@ -33,24 +35,25 @@ export class GameObjectContainer extends CommandReceiver {
|
|||
[CreateObjectsCommand.type]: (c: CreateObjectsCommand) =>
|
||||
c.objects.forEach((o) => this.addObject(o as ViewObject)),
|
||||
|
||||
[RemoteCallsForObjects.type]: (c: RemoteCallsForObjects) =>
|
||||
c.callsForObjects.forEach((c) =>
|
||||
this.objects.get(c.id)?.processRemoteCalls(c.calls),
|
||||
),
|
||||
|
||||
[DeleteObjectsCommand.type]: (c: DeleteObjectsCommand) =>
|
||||
c.ids.forEach((id: Id) => this.deleteObject(id)),
|
||||
|
||||
[UpdateObjectsCommand.type]: (c: UpdateObjectsCommand) => {
|
||||
c.updates.forEach((u) => this.objects.get(u.id)?.update(u.updates));
|
||||
},
|
||||
};
|
||||
|
||||
constructor(private game: Game) {
|
||||
super();
|
||||
}
|
||||
|
||||
public stepObjects(delta: number) {
|
||||
public stepObjects(deltaTimeInSeconds: number) {
|
||||
if (this.player) {
|
||||
this.camera.center = this.player.position;
|
||||
}
|
||||
|
||||
this.objects.forEach((o) => o.step(delta));
|
||||
this.objects.forEach((o) => o.step(deltaTimeInSeconds));
|
||||
}
|
||||
|
||||
public drawObjects(renderer: Renderer, overlay: HTMLElement) {
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ export class LampView extends LampBase implements ViewObject {
|
|||
this.light = new CircleLight(center, color, lightness);
|
||||
}
|
||||
|
||||
public step(deltaTimeInMilliseconds: number): void {}
|
||||
public step(deltaTimeInSeconds: number): void {}
|
||||
|
||||
public beforeDestroy(): void {}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,14 @@ import { RenderCommand } from '../commands/types/render';
|
|||
import { PlanetShape } from '../shapes/planet-shape';
|
||||
import { ViewObject } from './view-object';
|
||||
|
||||
type FallingPoint = {
|
||||
velocity: vec2;
|
||||
position: vec2;
|
||||
element: HTMLElement;
|
||||
addedToOverlay: boolean;
|
||||
timeToLive: number;
|
||||
};
|
||||
|
||||
export class PlanetView extends PlanetBase implements ViewObject {
|
||||
private shape: PlanetShape;
|
||||
private ownershipProgess: HTMLElement;
|
||||
|
|
@ -22,9 +30,48 @@ export class PlanetView extends PlanetBase implements ViewObject {
|
|||
this.ownershipProgess.className = 'ownership';
|
||||
}
|
||||
|
||||
public step(deltaTimeInMilliseconds: number): void {
|
||||
this.shape.randomOffset += deltaTimeInMilliseconds / 4000;
|
||||
public step(deltaTimeInSeconds: number): void {
|
||||
this.shape.randomOffset += deltaTimeInSeconds / 4;
|
||||
this.shape.colorMixQ = this.ownership;
|
||||
|
||||
this.generatedPointElements.forEach((p) => {
|
||||
vec2.add(
|
||||
p.velocity,
|
||||
p.velocity,
|
||||
vec2.scale(vec2.create(), vec2.fromValues(0, 50), deltaTimeInSeconds),
|
||||
);
|
||||
|
||||
vec2.add(
|
||||
p.position,
|
||||
p.position,
|
||||
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();
|
||||
}
|
||||
});
|
||||
|
||||
this.generatedPointElements = this.generatedPointElements.filter(
|
||||
(p) => p.timeToLive > 0,
|
||||
);
|
||||
}
|
||||
|
||||
private generatedPointElements: Array<FallingPoint> = [];
|
||||
|
||||
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),
|
||||
});
|
||||
}
|
||||
|
||||
private getGradient(): string {
|
||||
|
|
@ -34,18 +81,21 @@ export class PlanetView extends PlanetBase implements ViewObject {
|
|||
? `conic-gradient(
|
||||
var(--bright-decla) ${sidePercent}%,
|
||||
var(--bright-decla) ${sidePercent}%,
|
||||
var(--bright-neutral) ${sidePercent}%,
|
||||
var(--bright-neutral) 100%
|
||||
rgba(0, 0, 0, 0) ${sidePercent}%,
|
||||
rgba(0, 0, 0, 0) 100%
|
||||
)`
|
||||
: `conic-gradient(
|
||||
var(--bright-neutral) 0%,
|
||||
var(--bright-neutral) ${100 - sidePercent}%,
|
||||
rgba(0, 0, 0, 0) 0%,
|
||||
rgba(0, 0, 0, 0) ${100 - sidePercent}%,
|
||||
var(--bright-red) ${100 - sidePercent}%,
|
||||
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 {
|
||||
|
|
@ -54,6 +104,16 @@ export class PlanetView extends PlanetBase implements ViewObject {
|
|||
}
|
||||
|
||||
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();
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import { Circle, Id, PlayerCharacterBase, CharacterTeam, settings } from 'shared
|
|||
import { OptionsHandler } from '../options-handler';
|
||||
|
||||
import { BlobShape } from '../shapes/blob-shape';
|
||||
import { SoundHandler, Sounds } from '../sound-handler';
|
||||
import { ViewObject } from './view-object';
|
||||
|
||||
export class PlayerCharacterView extends PlayerCharacterBase implements ViewObject {
|
||||
|
|
@ -39,8 +40,17 @@ export class PlayerCharacterView extends PlayerCharacterBase implements ViewObje
|
|||
return this.head!.center;
|
||||
}
|
||||
|
||||
public step(deltaTimeInMilliseconds: number): void {
|
||||
this.timeSinceLastNameElementUpdate += deltaTimeInMilliseconds;
|
||||
public setHealth(health: number) {
|
||||
const previousHealth = this.health;
|
||||
super.setHealth(health);
|
||||
SoundHandler.play(
|
||||
Sounds.hit,
|
||||
(0.4 * 2 * (previousHealth - health)) / settings.playerMaxStrength,
|
||||
);
|
||||
}
|
||||
|
||||
public step(deltaTimeInSeconds: number): void {
|
||||
this.timeSinceLastNameElementUpdate += deltaTimeInSeconds;
|
||||
this.healthElement.style.width = (50 * this.health) / settings.playerMaxHealth + 'px';
|
||||
this.statsElement.innerText = this.getStatsText();
|
||||
if (this.previousHealth > this.health) {
|
||||
|
|
@ -52,6 +62,10 @@ export class PlayerCharacterView extends PlayerCharacterBase implements ViewObje
|
|||
this.previousHealth = this.health;
|
||||
}
|
||||
|
||||
public onShoot(strength: number) {
|
||||
SoundHandler.play(Sounds.shoot, (0.3 * 2 * strength) / settings.playerMaxStrength);
|
||||
}
|
||||
|
||||
public beforeDestroy(): void {
|
||||
this.nameElement.parentElement?.removeChild(this.nameElement);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,7 +23,9 @@ export class ProjectileView extends ProjectileBase implements ViewObject {
|
|||
);
|
||||
}
|
||||
|
||||
public step(deltaTimeInMilliseconds: number): void {
|
||||
public step(deltaTimeInSeconds: number): void {
|
||||
super.step(deltaTimeInSeconds);
|
||||
|
||||
this.circle.center = this.center;
|
||||
this.light.center = this.center;
|
||||
this.light.intensity = (0.15 * this.strength) / settings.projectileMaxStrength;
|
||||
|
|
|
|||
|
|
@ -29,11 +29,7 @@ export abstract class OptionsHandler {
|
|||
};
|
||||
|
||||
if (this._options.musicEnabled) {
|
||||
const firstClickListener = () => {
|
||||
document.removeEventListener('click', firstClickListener);
|
||||
SoundHandler.playAmbient();
|
||||
};
|
||||
document.addEventListener('click', firstClickListener);
|
||||
SoundHandler.playAmbient();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,37 +8,71 @@ export enum Sounds {
|
|||
hit = 'hit',
|
||||
shoot = 'shoot',
|
||||
click = 'click',
|
||||
ambient = 'ambient',
|
||||
}
|
||||
|
||||
const concurrencyScale = 5;
|
||||
|
||||
export abstract class SoundHandler {
|
||||
private static sounds: { [key in Sounds]: HTMLAudioElement };
|
||||
private static isAmbientPlaying = false;
|
||||
|
||||
public static initialize() {
|
||||
private static ambientSound = new Audio(ambientSound);
|
||||
|
||||
private static initialized = false;
|
||||
public static async initialize() {
|
||||
this.sounds = {
|
||||
[Sounds.hit]: new Audio(hitSound),
|
||||
[Sounds.shoot]: new Audio(shootSound),
|
||||
[Sounds.click]: new Audio(clickSound),
|
||||
[Sounds.ambient]: new Audio(ambientSound),
|
||||
[Sounds.hit]: await this.initializeSound(hitSound),
|
||||
[Sounds.shoot]: await this.initializeSound(shootSound),
|
||||
[Sounds.click]: await this.initializeSound(clickSound),
|
||||
};
|
||||
this.sounds.ambient.volume = 0.5;
|
||||
|
||||
this.ambientSound.play();
|
||||
this.ambientSound.muted = true;
|
||||
this.initialized = true;
|
||||
|
||||
setTimeout(() => {
|
||||
this.ambientSound.muted = false;
|
||||
this.ambientSound.volume = 0.5;
|
||||
if (!this.isAmbientPlaying) {
|
||||
this.ambientSound.pause();
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
|
||||
public static play(sound: Sounds) {
|
||||
if (OptionsHandler.options.soundsEnabled) {
|
||||
if (this.sounds[sound].currentTime > 0) {
|
||||
(this.sounds[sound].cloneNode() as HTMLAudioElement).play();
|
||||
} else {
|
||||
this.sounds[sound].play();
|
||||
}
|
||||
private static async initializeSound(hitSound: string): Promise<HTMLAudioElement> {
|
||||
const sound = new Audio(hitSound);
|
||||
sound.muted = true;
|
||||
await sound.play();
|
||||
sound.pause();
|
||||
sound.muted = false;
|
||||
sound.currentTime = 0;
|
||||
return sound;
|
||||
}
|
||||
|
||||
public static play(sound: Sounds, volume: number = 1) {
|
||||
if (!this.initialized || !OptionsHandler.options.soundsEnabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
const audio =
|
||||
this.sounds[sound].currentTime > 0
|
||||
? (this.sounds[sound].cloneNode(true) as HTMLAudioElement)
|
||||
: this.sounds[sound];
|
||||
audio.volume = volume;
|
||||
audio.play();
|
||||
}
|
||||
|
||||
public static playAmbient() {
|
||||
this.sounds.ambient.play();
|
||||
this.isAmbientPlaying = true;
|
||||
if (this.initialized) {
|
||||
this.ambientSound.play();
|
||||
}
|
||||
}
|
||||
|
||||
public static stopAmbient() {
|
||||
this.sounds.ambient.pause();
|
||||
this.isAmbientPlaying = false;
|
||||
if (this.initialized) {
|
||||
this.ambientSound.pause();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
64
frontend/src/scripts/start-animation.ts
Normal file
64
frontend/src/scripts/start-animation.ts
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
import {
|
||||
CircleLight,
|
||||
ColorfulCircle,
|
||||
FilteringOptions,
|
||||
Flashlight,
|
||||
Renderer,
|
||||
runAnimation,
|
||||
WrapOptions,
|
||||
} from 'sdf-2d';
|
||||
import { settings } from 'shared';
|
||||
import { BlobShape } from './shapes/blob-shape';
|
||||
import { PlanetShape } from './shapes/planet-shape';
|
||||
|
||||
export const startAnimation = async (
|
||||
canvas: HTMLCanvasElement,
|
||||
draw: (r: Renderer, current: number, delta: number) => boolean,
|
||||
noiseTexture: TexImageSource,
|
||||
): Promise<void> =>
|
||||
await runAnimation(
|
||||
canvas,
|
||||
[
|
||||
{
|
||||
...PlanetShape.descriptor,
|
||||
shaderCombinationSteps: [0, 1, 2, 3],
|
||||
},
|
||||
{
|
||||
...BlobShape.descriptor,
|
||||
shaderCombinationSteps: [0, 1, 2, 8],
|
||||
},
|
||||
{
|
||||
...ColorfulCircle.descriptor,
|
||||
shaderCombinationSteps: [0, 2, 16],
|
||||
},
|
||||
{
|
||||
...CircleLight.descriptor,
|
||||
shaderCombinationSteps: [0, 1, 2, 4, 8, 16],
|
||||
},
|
||||
{
|
||||
...Flashlight.descriptor,
|
||||
shaderCombinationSteps: [0],
|
||||
},
|
||||
],
|
||||
draw,
|
||||
{
|
||||
shadowTraceCount: 16,
|
||||
paletteSize: settings.palette.length,
|
||||
//enableStopwatch: true,
|
||||
},
|
||||
{
|
||||
colorPalette: settings.palette,
|
||||
enableHighDpiRendering: true,
|
||||
lightCutoffDistance: settings.lightCutoffDistance,
|
||||
textures: {
|
||||
noiseTexture: {
|
||||
source: noiseTexture,
|
||||
overrides: {
|
||||
maxFilter: FilteringOptions.LINEAR,
|
||||
wrapS: WrapOptions.MIRRORED_REPEAT,
|
||||
wrapT: WrapOptions.MIRRORED_REPEAT,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
);
|
||||
Loading…
Add table
Add a link
Reference in a new issue