refactor to using lambdas instead of binds

This commit is contained in:
sigmasternchen 2024-10-30 22:53:32 +01:00
parent 3c6e1aff5f
commit 687cb1b034
5 changed files with 24 additions and 26 deletions

View file

@ -24,21 +24,21 @@ export class Ball {
this._position = position; this._position = position;
} }
public redraw(): void { public readonly redraw = (): void => {
this.element.style.left = this._position.x + "px"; this.element.style.left = this._position.x + "px";
this.element.style.top = this._position.y + "px"; this.element.style.top = this._position.y + "px";
} }
public setup(gameElement: HTMLElement): void { public readonly setup = (gameElement: HTMLElement): void => {
gameElement.appendChild(this.element); gameElement.appendChild(this.element);
} }
public launch() { public readonly launch = (): void => {
this.phi = choice(startAngles); this.phi = choice(startAngles);
this.speed = defaultBallSpeed; 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._position = this._position.moveInDirection(this.phi, this.speed * delta / 1000);
this.redraw(); this.redraw();
} }

View file

@ -18,7 +18,7 @@ export class Banner {
this.element.style.left = this.position.x + "px"; this.element.style.left = this.position.x + "px";
} }
public load(): Promise<void> { public readonly load = (): Promise<void> => {
return new Promise<void>((resolve, reject) => { return new Promise<void>((resolve, reject) => {
const image = new Image(); const image = new Image();
image.onload = () => resolve(); 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); gameElement.appendChild(this.element);
} }
} }

View file

@ -23,33 +23,32 @@ export class Game {
this.balls = []; this.balls = [];
} }
public load(): Promise<void> { public readonly load = (): Promise<void> =>
return Promise.all(this.banners.map(banner => banner.load())).then(() => {}); 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.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)); this.balls.forEach(ball => ball.setup(this.root));
} }
private ballLaunchHandler(ball: Ball): void { private readonly ballLaunchHandler = (ball: Ball): void => {
this.balls.push(ball); this.balls.push(ball);
ball.launch(); ball.launch();
} }
public run(): void { public readonly run = (): void => {
this.running = true; 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; const delta = timestamp - this.lastTickTimestamp;
this.lastTickTimestamp = timestamp; this.lastTickTimestamp = timestamp;
this.balls.forEach(ball => ball.tick.bind(ball)(delta)); this.balls.forEach(ball => ball.tick(delta));
if (this.running) { if (this.running) {
requestAnimationFrame(this.tick.bind(this)); requestAnimationFrame(this.tick);
} }
} }
} }

View file

@ -22,7 +22,7 @@ export class Paddle {
this.redraw(); this.redraw();
} }
private redraw() { private readonly redraw = (): void => {
this.element.style.left = this.position + "px"; this.element.style.left = this.position + "px";
this.element.style.width = this.size + "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 = this.position =
Math.min(fieldWidth - this.size / 2, Math.min(fieldWidth - this.size / 2,
Math.max(this.size / 2, event.offsetX) Math.max(this.size / 2, event.offsetX)
@ -41,11 +41,11 @@ export class Paddle {
this.redraw(); 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.appendChild(this.element);
gameElement.addEventListener("mousemove", this.mouseHandler.bind(this)); gameElement.addEventListener("mousemove", this.mouseHandler);
gameElement.addEventListener("mouseenter", this.mouseHandler.bind(this)); gameElement.addEventListener("mouseenter", this.mouseHandler);
gameElement.addEventListener("mouseleave", this.mouseHandler.bind(this)); gameElement.addEventListener("mouseleave", this.mouseHandler);
gameElement.addEventListener("click", () => { gameElement.addEventListener("click", () => {
if (this.ball) { if (this.ball) {

View file

@ -16,10 +16,9 @@ export class Position {
return this._y; return this._y;
} }
public moveInDirection(phi: number, distance: number): Position { public readonly moveInDirection = (phi: number, distance: number): Position =>
return new Position( new Position(
this._x + Math.cos(phi) * distance, this._x + Math.cos(phi) * distance,
this._y - Math.sin(phi) * distance this._y - Math.sin(phi) * distance
); );
}
} }