From 687cb1b034ed919bf422d866f458fbb6f72b5823 Mon Sep 17 00:00:00 2001 From: sigmasternchen Date: Wed, 30 Oct 2024 22:53:32 +0100 Subject: [PATCH] refactor to using lambdas instead of binds --- src/game/Ball.ts | 8 ++++---- src/game/Banner.ts | 4 ++-- src/game/Game.ts | 21 ++++++++++----------- src/game/Paddle.ts | 12 ++++++------ src/game/Position.ts | 5 ++--- 5 files changed, 24 insertions(+), 26 deletions(-) diff --git a/src/game/Ball.ts b/src/game/Ball.ts index f98d866..93e9a4e 100644 --- a/src/game/Ball.ts +++ b/src/game/Ball.ts @@ -24,21 +24,21 @@ export class Ball { this._position = position; } - public redraw(): void { + public readonly redraw = (): void => { this.element.style.left = this._position.x + "px"; this.element.style.top = this._position.y + "px"; } - public setup(gameElement: HTMLElement): void { + public readonly setup = (gameElement: HTMLElement): void => { gameElement.appendChild(this.element); } - public launch() { + public readonly launch = (): void => { this.phi = choice(startAngles); this.speed = defaultBallSpeed; } - public tick(delta: number) { + public readonly tick = (delta: number): void => { this._position = this._position.moveInDirection(this.phi, this.speed * delta / 1000); this.redraw(); } diff --git a/src/game/Banner.ts b/src/game/Banner.ts index e47404a..657b4f7 100644 --- a/src/game/Banner.ts +++ b/src/game/Banner.ts @@ -18,7 +18,7 @@ export class Banner { this.element.style.left = this.position.x + "px"; } - public load(): Promise { + public readonly load = (): Promise => { return new Promise((resolve, reject) => { const image = new Image(); image.onload = () => resolve(); @@ -28,7 +28,7 @@ export class Banner { }) } - public setup(gameElement: HTMLElement): void { + public readonly setup = (gameElement: HTMLElement): void => { gameElement.appendChild(this.element); } } diff --git a/src/game/Game.ts b/src/game/Game.ts index fdb1686..004a031 100644 --- a/src/game/Game.ts +++ b/src/game/Game.ts @@ -23,33 +23,32 @@ export class Game { this.balls = []; } - public load(): Promise { - return Promise.all(this.banners.map(banner => banner.load())).then(() => {}); - } + public readonly load = (): Promise => + Promise.all(this.banners.map(banner => banner.load())).then(() => {}); - public setup(): void { + public readonly setup = (): void => { this.banners.forEach(banner => banner.setup(this.root)); - this.paddle.setup(this.root, this.ballLaunchHandler.bind(this)); + this.paddle.setup(this.root, this.ballLaunchHandler); this.balls.forEach(ball => ball.setup(this.root)); } - private ballLaunchHandler(ball: Ball): void { + private readonly ballLaunchHandler = (ball: Ball): void => { this.balls.push(ball); ball.launch(); } - public run(): void { + public readonly run = (): void => { this.running = true; - requestAnimationFrame(this.tick.bind(this)) + requestAnimationFrame(this.tick) } - private tick(timestamp: number): void { + private readonly tick = (timestamp: number): void => { const delta = timestamp - this.lastTickTimestamp; this.lastTickTimestamp = timestamp; - this.balls.forEach(ball => ball.tick.bind(ball)(delta)); + this.balls.forEach(ball => ball.tick(delta)); if (this.running) { - requestAnimationFrame(this.tick.bind(this)); + requestAnimationFrame(this.tick); } } } diff --git a/src/game/Paddle.ts b/src/game/Paddle.ts index 83bceb4..82f8ce3 100644 --- a/src/game/Paddle.ts +++ b/src/game/Paddle.ts @@ -22,7 +22,7 @@ export class Paddle { this.redraw(); } - private redraw() { + private readonly redraw = (): void => { this.element.style.left = this.position + "px"; this.element.style.width = this.size + "px"; @@ -32,7 +32,7 @@ export class Paddle { } } - private mouseHandler(event: MouseEvent) { + private readonly mouseHandler = (event: MouseEvent): void => { this.position = Math.min(fieldWidth - this.size / 2, Math.max(this.size / 2, event.offsetX) @@ -41,11 +41,11 @@ export class Paddle { this.redraw(); } - public setup(gameElement: HTMLElement, ballLaunchHandler: (ball: Ball) => void): void { + public readonly setup = (gameElement: HTMLElement, ballLaunchHandler: (ball: Ball) => void): void => { gameElement.appendChild(this.element); - gameElement.addEventListener("mousemove", this.mouseHandler.bind(this)); - gameElement.addEventListener("mouseenter", this.mouseHandler.bind(this)); - gameElement.addEventListener("mouseleave", this.mouseHandler.bind(this)); + gameElement.addEventListener("mousemove", this.mouseHandler); + gameElement.addEventListener("mouseenter", this.mouseHandler); + gameElement.addEventListener("mouseleave", this.mouseHandler); gameElement.addEventListener("click", () => { if (this.ball) { diff --git a/src/game/Position.ts b/src/game/Position.ts index 9dbbb04..9d47f8a 100644 --- a/src/game/Position.ts +++ b/src/game/Position.ts @@ -16,10 +16,9 @@ export class Position { return this._y; } - public moveInDirection(phi: number, distance: number): Position { - return new Position( + public readonly moveInDirection = (phi: number, distance: number): Position => + new Position( this._x + Math.cos(phi) * distance, this._y - Math.sin(phi) * distance ); - } } \ No newline at end of file