improve object model

src/game/Banner.ts

@@ -6,7 +6,7 @@ import {Position} from "./Position";
 export class Banner {
     private readonly position: Position;
     private readonly banner: string;
-    public readonly element: HTMLElement;
+    private readonly element: HTMLElement;
 
     constructor(position: Position, banner: string) {
         this.position = position;
@@ -27,6 +27,10 @@ export class Banner {
             this.element.setAttribute("src", image.src);
         })
     }
+
+    public setup(gameElement: HTMLElement): void {
+        gameElement.appendChild(this.element);
+    }
 }
 
 export const makeBanners = (numberOfBanners: number, positioning: (i: number) => Position) =>

src/game/Game.ts

@@ -17,10 +17,8 @@ export class Game {
         return Promise.all(this.banners.map(banner => banner.load())).then(() => {});
     }
 
-    public draw(): void {
-        this.banners.forEach(banner => {
-            this.root.appendChild(banner.element);
-        });
-        this.root.appendChild(this.paddle.element);
+    public setup(): void {
+        this.banners.forEach(banner => banner.setup(this.root));
+        this.paddle.setup(this.root);
     }
 }

src/game/Paddle.ts

@@ -2,7 +2,7 @@
 export class Paddle {
     private position: number;
     private size: number;
-    public readonly element: HTMLElement;
+    private readonly element: HTMLElement;
 
     constructor() {
         this.position = ((88 + 1) * 11 + 1) / 2;
@@ -13,4 +13,8 @@ export class Paddle {
         this.element.style.left = this.position + "px";
         this.element.style.width = this.size + "px";
     }
+
+    public setup(gameElement: HTMLElement): void {
+        gameElement.appendChild(this.element);
+    }
 }

src/index.ts

@@ -3,5 +3,5 @@ import {Game} from "./game/Game";
 window.addEventListener("load", async () => {
     const game = new Game(document.getElementById("game"));
     await game.load();
-    game.draw();
+    game.setup();
 });