mika/pokerogue
1
0
Fork 0
mirror of https://github.com/pagefaultgames/pokerogue.git synced 2025-09-24 07:23:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

Also updated the ui to change the position of touch controls

Browse Source
This commit is contained in:
Wlowscha 2025-09-07 17:31:31 +02:00 committed by Sirz Benjie
parent 4f698e1d58
commit 1af17e771b
No known key found for this signature in database
GPG Key ID: 4A524B4D196C759E
1 changed files with 26 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/ui/settings/move-touch-controls-handler.ts
View File

@ -9,9 +9,9 @@ export const TOUCH_CONTROL_POSITIONS_PORTRAIT = "touchControlPositionsPortrait";
type ControlPosition = { id: string; x: number; y: number }; type ControlPosition = { id: string; x: number; y: number };
type ConfigurationEventListeners = { type ConfigurationEventListeners = {
touchstart: EventListener[]; pointerdown: EventListener[];
touchmove: EventListener[]; pointermove: EventListener[];
touchend: EventListener[]; pointerup: EventListener[];
}; };
type ToolbarRefs = { type ToolbarRefs = {
@ -39,9 +39,9 @@ export class MoveTouchControlsHandler {
* These are used to remove the event listeners when the configuration mode is disabled. * These are used to remove the event listeners when the configuration mode is disabled.
*/ */
private configurationEventListeners: ConfigurationEventListeners = { private configurationEventListeners: ConfigurationEventListeners = {
touchstart: [], pointerdown: [],
touchmove: [], pointermove: [],
touchend: [], pointerup: [],
}; };
private overlay: Phaser.GameObjects.Container; private overlay: Phaser.GameObjects.Container;
@ -165,34 +165,33 @@ export class MoveTouchControlsHandler {
/** /**
* Start dragging the given button. * Start dragging the given button.
* @param controlGroup The button that is being dragged. * @param controlGroup The button that is being dragged.
* @param touch The touch event that started the drag. * @param event The pointer event that started the drag.
*/ */
private startDrag = (controlGroup: HTMLElement): void => { private startDrag = (controlGroup: HTMLElement): void => {
this.draggingElement = controlGroup; this.draggingElement = controlGroup;
}; };
/** /**
* Drags the currently dragged element to the given touch position. * Drags the currently dragged element to the given pointer position.
* @param touch The touch event that is currently happening. * @param event The pointer event that is currently happening.
* @param isLeft Whether the dragged element is a left button.
*/ */
private drag = (touch: Touch): void => { private drag = (event: PointerEvent): void => {
if (!this.draggingElement) { if (!this.draggingElement) {
return; return;
} }
const rect = this.draggingElement.getBoundingClientRect(); const rect = this.draggingElement.getBoundingClientRect();
// Map the touch position to the center of the dragged element. // Map the pointer position to the center of the dragged element.
const xOffset = this.isLeft(this.draggingElement) const xOffset = this.isLeft(this.draggingElement)
? touch.clientX - rect.width / 2 ? event.clientX - rect.width / 2
: window.innerWidth - touch.clientX - rect.width / 2; : window.innerWidth - event.clientX - rect.width / 2;
const yOffset = window.innerHeight - touch.clientY - rect.height / 2; const yOffset = window.innerHeight - event.clientY - rect.height / 2;
this.setPosition(this.draggingElement, xOffset, yOffset); this.setPosition(this.draggingElement, xOffset, yOffset);
}; };
/** /**
* Stops dragging the currently dragged element. * Stops dragging the currently dragged element.
*/ */
private stopDrag = () => { private stopDrag = (): void => {
this.draggingElement = null; this.draggingElement = null;
}; };
@ -303,19 +302,19 @@ export class MoveTouchControlsHandler {
*/ */
private createConfigurationEventListeners(controlGroups: HTMLDivElement[]): ConfigurationEventListeners { private createConfigurationEventListeners(controlGroups: HTMLDivElement[]): ConfigurationEventListeners {
return { return {
touchstart: controlGroups.map((element: HTMLDivElement) => { pointerdown: controlGroups.map((element: HTMLDivElement) => {
const startDrag = () => this.startDrag(element); const startDrag = () => this.startDrag(element);
element.addEventListener("touchstart", startDrag, { passive: true }); element.addEventListener("pointerdown", startDrag, { passive: true });
return startDrag; return startDrag;
}), }),
touchmove: controlGroups.map(() => { pointermove: controlGroups.map(() => {
const drag = event => this.drag(event.touches[0]); const drag = (event: PointerEvent) => this.drag(event);
window.addEventListener("touchmove", drag, { passive: true }); window.addEventListener("pointermove", drag, { passive: true });
return drag; return drag;
}), }),
touchend: controlGroups.map(() => { pointerup: controlGroups.map(() => {
const stopDrag = () => this.stopDrag(); const stopDrag = () => this.stopDrag();
window.addEventListener("touchend", stopDrag, { passive: true }); window.addEventListener("pointerup", stopDrag, { passive: true });
return stopDrag; return stopDrag;
}), }),
}; };
@ -373,12 +372,12 @@ export class MoveTouchControlsHandler {
this.draggingElement = null; this.draggingElement = null;
// Remove event listeners // Remove event listeners
const { touchstart, touchmove, touchend } = this.configurationEventListeners; const { pointerdown, pointermove, pointerup } = this.configurationEventListeners;
this.getControlGroupElements().forEach((element, index) => this.getControlGroupElements().forEach((element, index) =>
element.removeEventListener("touchstart", touchstart[index]), element.removeEventListener("touchstart", pointerdown[index]),
); );
touchmove.forEach(listener => window.removeEventListener("touchmove", listener)); pointermove.forEach(listener => window.removeEventListener("touchmove", listener));
touchend.forEach(listener => window.removeEventListener("touchend", listener)); pointerup.forEach(listener => window.removeEventListener("touchend", listener));
// Remove configuration toolbar // Remove configuration toolbar
const toolbar = document.querySelector("#touchControls #configToolbar"); const toolbar = document.querySelector("#touchControls #configToolbar");