From 0673f90454ba96f7e70f19c600f59c816c2579aa Mon Sep 17 00:00:00 2001
From: sigmasternchen <git@sigma-star.io>
Date: Tue, 29 Oct 2024 22:08:24 +0100
Subject: [PATCH] the paddle can move now

---
 html/static/styles.css |  2 ++
 src/game/Paddle.ts     | 20 +++++++++++++++++++-
 src/game/geometry.ts   |  2 ++
 3 files changed, 23 insertions(+), 1 deletion(-)
 create mode 100644 src/game/geometry.ts

diff --git a/html/static/styles.css b/html/static/styles.css
index 9c73f35..5221209 100644
--- a/html/static/styles.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/src/game/Paddle.ts b/src/game/Paddle.ts
index 1d93a94..9e15695 100644
--- a/src/game/Paddle.ts
+++ b/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));
     }
 }
\ No newline at end of file
diff --git a/src/game/geometry.ts b/src/game/geometry.ts
new file mode 100644
index 0000000..9db270e
--- /dev/null
+++ b/src/game/geometry.ts
@@ -0,0 +1,2 @@
+
+export const fieldWidth = (88 + 1) * 11 + 1;