the paddle can move now

html/static/styles.css

@@ -9,6 +9,7 @@
 .banner {
     margin: 1px;
     position: absolute;
+    pointer-events: none;
 }
 
 .paddle {
@@ -19,4 +20,5 @@
     background-color: #333;
     border-top-left-radius: 50%;
     border-top-right-radius: 50%;
+    pointer-events: none;
 }

src/game/Paddle.ts

@@ -1,3 +1,4 @@
+import {fieldWidth} from "./geometry";
 
 export class Paddle {
     private position: number;
@@ -5,16 +6,33 @@ export class Paddle {
     private readonly element: HTMLElement;
 
     constructor() {
-        this.position = ((88 + 1) * 11 + 1) / 2;
+        this.position = fieldWidth / 2;
         this.size = 60;
 
         this.element = document.createElement("div");
         this.element.classList.add("paddle");
+
+        this.redraw();
+    }
+
+    private redraw() {
         this.element.style.left = this.position + "px";
         this.element.style.width = this.size + "px";
     }
 
+    private mouseHandler(event: MouseEvent) {
+        this.position =
+            Math.min(fieldWidth - this.size / 2,
+            Math.max(this.size / 2, event.offsetX)
+        );
+
+        this.redraw();
+    }
+
     public setup(gameElement: HTMLElement): 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));
     }
 }

src/game/geometry.ts

@@ -0,0 +1,2 @@
+
+export const fieldWidth = (88 + 1) * 11 + 1;