Touch & Multi-Input Abstraction: Unifying Virtual Joysticks, Gamepads & Keyboards

export class VirtualJoystick {
  private container: HTMLElement;
  private knob: HTMLElement;
  private activePointerId: number | null = null;
  private originX: number = 0;
  private originY: number = 0;
  private radius: number = 50; // Max throw distance in pixels

  public vector = { x: 0, y: 0 }; // Normalized -1.0 to 1.0

  constructor(container: HTMLElement, knob: HTMLElement) {
    this.container = container;
    this.knob = knob;

    // Prevent default browser scrolling and gestures
    this.container.style.touchAction = 'none';

    this.container.addEventListener('pointerdown', this.onPointerDown.bind(this));
    this.container.addEventListener('pointermove', this.onPointerMove.bind(this));
    this.container.addEventListener('pointerup', this.onPointerUp.bind(this));
    this.container.addEventListener('pointercancel', this.onPointerUp.bind(this));
  }

  private onPointerDown(e: PointerEvent): void {
    if (this.activePointerId !== null) return;
    this.activePointerId = e.pointerId;
    this.container.setPointerCapture(e.pointerId);

    const rect = this.container.getBoundingClientRect();
    this.originX = rect.left + rect.width / 2;
    this.originY = rect.top + rect.height / 2;
    this.updatePosition(e.clientX, e.clientY);
  }

  private onPointerMove(e: PointerEvent): void {
    if (e.pointerId !== this.activePointerId) return;
    this.updatePosition(e.clientX, e.clientY);
  }

  private onPointerUp(e: PointerEvent): void {
    if (e.pointerId !== this.activePointerId) return;
    this.activePointerId = null;
    this.vector.x = 0;
    this.vector.y = 0;
    this.knob.style.transform = 'translate(0px, 0px)';
  }

  private updatePosition(clientX: number, clientY: number): void {
    let dx = clientX - this.originX;
    let dy = clientY - this.originY;
    const distance = Math.hypot(dx, dy);

    if (distance > this.radius) {
      dx = (dx / distance) * this.radius;
      dy = (dy / distance) * this.radius;
    }

    this.knob.style.transform = 'translate(' + dx + 'px, ' + dy + 'px)';

    // Apply radial dead zone
    const deadZone = 0.15;
    const rawMagnitude = distance / this.radius;
    if (rawMagnitude < deadZone) {
      this.vector.x = 0;
      this.vector.y = 0;
    } else {
      const normalizedMagnitude = (rawMagnitude - deadZone) / (1.0 - deadZone);
      this.vector.x = (dx / distance) * normalizedMagnitude;
      this.vector.y = (dy / distance) * normalizedMagnitude;
    }
  }
}

export class GamepadManager {
  private prevButtonStates: boolean[] = [];

  public update(): void {
    const gamepads = navigator.getGamepads ? navigator.getGamepads() : [];
    const gp = gamepads[0];
    if (!gp) return;

    // Standard mapping: Button 0 = Bottom (A / Cross), Button 1 = Right (B / Circle)
    for (let i = 0; i < gp.buttons.length; i++) {
      const isDown = gp.buttons[i].pressed;
      const wasDown = this.prevButtonStates[i] || false;

      if (isDown && !wasDown) {
        InputManager.triggerActionDown(this.mapGamepadButtonToAction(i));
      } else if (!isDown && wasDown) {
        InputManager.triggerActionUp(this.mapGamepadButtonToAction(i));
      }

      this.prevButtonStates[i] = isDown;
    }
  }

  private mapGamepadButtonToAction(buttonIndex: number): string {
    switch (buttonIndex) {
      case 0: return 'JUMP';
      case 2: return 'ATTACK';
      case 7: return 'FIRE';
      default: return 'NONE';
    }
  }
}