refactor to using lambdas instead of binds

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();
     }

src/game/Banner.ts

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

src/game/Game.ts

@@ -23,33 +23,32 @@ export class Game {
         this.balls = [];
     }
 
-    public load(): Promise<void> {
-        return Promise.all(this.banners.map(banner => banner.load())).then(() => {});
-    }
+    public readonly load = (): Promise<void> =>
+        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);
         }
     }
 }

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) {

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
         );
 }
-}