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;