add paddle

html/static/styles.css

@@ -2,11 +2,21 @@
 #game {
     width: calc((88px + 1px) * 11 + 1px);
     height: 500px;
-    background-color: red;
+    background-color: grey;
     position: relative;
 }
 
 .banner {
     margin: 1px;
     position: absolute;
+}
+
+.paddle {
+    position: absolute;
+    bottom: 20px;
+    height: 10px;
+    transform: translate(-50%, 0);
+    background-color: #333;
+    border-top-left-radius: 50%;
+    border-top-right-radius: 50%;
 }

src/game/Game.ts

@@ -1,13 +1,16 @@
 import {Banner, makeBanners} from "./Banner";
 import {Position} from "./Position";
+import {Paddle} from "./Paddle";
 
 export class Game {
     private readonly root: HTMLElement;
     private banners: Banner[];
+    private paddle: Paddle;
 
     constructor(root: HTMLElement) {
         this.root = root;
         this.banners = makeBanners(11 * 6, i => new Position((i % 11) * (88 + 1), (0 | (i / 11)) * (31 + 1)));
+        this.paddle = new Paddle();
     }
 
     public load(): Promise<void> {
@@ -18,5 +21,6 @@ export class Game {
         this.banners.forEach(banner => {
             this.root.appendChild(banner.element);
         });
+        this.root.appendChild(this.paddle.element);
     }
 }

src/game/Paddle.ts

@@ -0,0 +1,16 @@
+
+export class Paddle {
+    private position: number;
+    private size: number;
+    public readonly element: HTMLElement;
+
+    constructor() {
+        this.position = ((88 + 1) * 11 + 1) / 2;
+        this.size = 60;
+
+        this.element = document.createElement("div");
+        this.element.classList.add("paddle");
+        this.element.style.left = this.position + "px";
+        this.element.style.width = this.size + "px";
+    }
+}