From 0673f90454ba96f7e70f19c600f59c816c2579aa Mon Sep 17 00:00:00 2001 From: sigmasternchen 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;