​

window.addEventListener("gamepadconnected", (event) => {

  const gamepad = event.gamepad;

  controllerIndex = gamepad.index;

  console.log("connected");

});

​

window.addEventListener("gamepaddisconnected", (event) => {

  controllerIndex = null;

  console.log("disconnected");

});

​

function handleButtons(buttons) {

  for (let i = 0; i < buttons.length; i++) {

    const button = buttons[i];

    const buttonElement = document.getElementById(`controller-b${i}`);

    const selectedButtonClass = "selected-button";

​

    if (buttonElement) {

      if (button.value > 0) {

        buttonElement.classList.add(selectedButtonClass);

        buttonElement.style.filter = `contrast(${button.value * 150}%)`;

      } else {

        buttonElement.classList.remove(selectedButtonClass);

        buttonElement.style.filter = `contrast(100%)`;

      }

    }

  }

}

​

function updateStick(elementId, leftRightAxis, upDownAxis) {

  const multiplier = 25;

  const stickLeftRight = leftRightAxis * multiplier;

  const stickUpDown = upDownAxis * multiplier;

​

  //const stick = document.getElementById(elementId);

  //const x = Number(stick.dataset.originalXPosition);

  //const y = Number(stick.dataset.originalYPosition);

​

  //stick.setAttribute("cx", x + stickLeftRight);

  //stick.setAttribute("cy", y + stickUpDown);

}

​

function handleSticks(axes) {

  updateStick("controller-b10", axes[0], axes[1]);

  updateStick("controller-b11", axes[2], axes[3]);

}

​

function gameLoop() {

  if (controllerIndex !== null) {

    const gamepad = navigator.getGamepads()[controllerIndex];

    handleButtons(gamepad.buttons);

    handleSticks(gamepad.axes);

    console.log(gamepad);

  }

 // requestAnimationFrame(gameLoop);

}

​

gameLoop();