add standby ball handling

html/static/styles.css

@@ -1,9 +1,6 @@
-
 #game {
-    width: calc((88px + 1px) * 11 + 1px);
-    height: 500px;
-    background-color: grey;
     position: relative;
+    border: solid 1px black;
 }
 
 .banner {
@@ -14,11 +11,16 @@
 
 .paddle {
     position: absolute;
-    bottom: 20px;
-    height: 10px;
     transform: translate(-50%, 0);
     background-color: #333;
     border-top-left-radius: 50%;
     border-top-right-radius: 50%;
     pointer-events: none;
+}
+
+.ball {
+    position: absolute;
+    transform: translate(-50%, -50%);
+    background-color: black;
+    border-radius: 50%;
 }

src/game/Ball.ts

@@ -0,0 +1,31 @@
+import {Position} from "./Position";
+import {ballSize} from "./geometry";
+
+export class Ball {
+    private _position: Position;
+    private readonly element: HTMLElement;
+
+    constructor() {
+        this.position = new Position(0, 0);
+
+        this.element = document.createElement("div");
+        this.element.classList.add("ball");
+        this.element.style.width = ballSize + "px";
+        this.element.style.height = ballSize + "px";
+
+        this.redraw();
+    }
+
+    set position(position: Position) {
+        this._position = position;
+    }
+
+    public redraw(): void {
+        this.element.style.left = this._position.x + "px";
+        this.element.style.top = this._position.y + "px";
+    }
+
+    public setup(gameElement: HTMLElement): void {
+        gameElement.appendChild(this.element);
+    }
+}

src/game/Game.ts

@@ -1,16 +1,23 @@
 import {Banner, makeBanners} from "./Banner";
 import {Position} from "./Position";
 import {Paddle} from "./Paddle";
+import {Ball} from "./Ball";
+import {fieldHeight, fieldWidth} from "./geometry";
 
 export class Game {
     private readonly root: HTMLElement;
     private banners: Banner[];
     private paddle: Paddle;
+    private balls: Ball[];
 
     constructor(root: HTMLElement) {
         this.root = root;
+        this.root.style.height = fieldHeight + "px";
+        this.root.style.width = fieldWidth + "px";
+
         this.banners = makeBanners(11 * 6, i => new Position((i % 11) * (88 + 1), (0 | (i / 11)) * (31 + 1)));
-        this.paddle = new Paddle();
+        this.paddle = new Paddle(new Ball());
+        this.balls = [];
     }
 
     public load(): Promise<void> {
@@ -20,5 +27,6 @@ export class Game {
     public setup(): void {
         this.banners.forEach(banner => banner.setup(this.root));
         this.paddle.setup(this.root);
+        this.balls.forEach(ball => ball.setup(this.root));
     }
 }

src/game/Paddle.ts

@@ -1,16 +1,23 @@
-import {fieldWidth} from "./geometry";
+import {ballSize, fieldWidth, paddleHeight, paddleY} from "./geometry";
+import {Ball} from "./Ball";
+import {Position} from "./Position";
 
 export class Paddle {
     private position: number;
     private size: number;
     private readonly element: HTMLElement;
 
-    constructor() {
+    private ball: Ball|null;
+
+    constructor(ball: Ball|null) {
         this.position = fieldWidth / 2;
         this.size = 60;
+        this.ball = ball;
 
         this.element = document.createElement("div");
         this.element.classList.add("paddle");
+        this.element.style.top = paddleY + "px";
+        this.element.style.height = paddleHeight + "px";
 
         this.redraw();
     }
@@ -18,6 +25,11 @@ export class Paddle {
     private redraw() {
         this.element.style.left = this.position + "px";
         this.element.style.width = this.size + "px";
+
+        if (this.ball) {
+            this.ball.position = new Position(this.position, paddleY - ballSize / 2);
+            this.ball.redraw();
+        }
     }
 
     private mouseHandler(event: MouseEvent) {
@@ -34,5 +46,9 @@ export class Paddle {
         gameElement.addEventListener("mousemove", this.mouseHandler.bind(this));
         gameElement.addEventListener("mouseenter", this.mouseHandler.bind(this));
         gameElement.addEventListener("mouseleave", this.mouseHandler.bind(this));
+
+        if (this.ball) {
+            this.ball.setup(gameElement);
+        }
     }
 }

src/game/geometry.ts

@@ -1,2 +1,8 @@
 
 export const fieldWidth = (88 + 1) * 11 + 1;
+export const fieldHeight = 500;
+
+export const paddleY = fieldHeight - 20;
+export const paddleHeight = 10;
+
+export const ballSize = 15;