index.js

let controllerIndex = null;

window.addEventListener("gamepadconnected", (event) => {
  handleConnectDisconnect(event, true);
});
window.addEventListener("gamepaddisconnected", (event) => {
  handleConnectDisconnect(event, false);
});
function handleConnectDisconnect(event, connected) {
  const controllerAreaNotConnected = document.getElementById(
    "controller-not-connected-area"
  );
  const controllerAreaConnected = document.getElementById(
    "controller-connected-area"
  );
  const gamepad = event.gamepad;
  console.log(gamepad);
  if (connected) {
    controllerIndex = gamepad.index;
    controllerAreaNotConnected.style.display = "none";
    controllerAreaConnected.style.display = "block";
    createButtonLayout(gamepad.buttons);
    createAxesLayout(gamepad.axes);
  } else {
    controllerIndex = null;
    controllerAreaNotConnected.style.display = "block";
    controllerAreaConnected.style.display = "none";
  }
}
function createAxesLayout(axes) {
  const buttonArea = document.getElementById("buttons");
  for (let i = 0; i < axes.length; i++) {
    buttonArea.innerHTML += `
    <div id = axis-${i} class = "axis">
      <div class = "axis-name">AXIS ${i}</div>
      <div class = "axis-value">${axes[i].toFixed(4)}
      </div>
    </div>`;
  }
}

function createButtonLayout(buttons) {
  const buttonArea = document.getElementById("buttons");
  buttonArea.innerHTMl = "";
  for (let i = 0; i < buttons.length; i++) {
    buttonArea.innerHTML += createButtonHtml(i, 0);
  }
}
function createButtonHtml(index, value) {
  return `<div class="button" id="button-${index}">
    <svg width="10px" height="50px">
      <rect width="10px" height="50px" fill="rgb(299,299,299)"></rect> 
      <rect
        class = "button-meter"
        width="10px"
        x = "0"
        y = "50"
        data-original-y-position="50"
        height ="50px"
        fill = "rgb(60,61,60)"
      ></rect>
      <div class = "button-text-area">
        <div class= "button-name">B${index}</div>
        <div class= "button-value">${value.toFixed(2)}</div>
      </div>
    </div>`;
}
function updateButtonOnGrid(index, value) {
  const buttonArea = document.getElementById(`button-${index}`);
  const buttonValue = buttonArea.querySelector(".button-value");
  buttonValue.innerHTML = value.toFixed(2);

  const buttonMeter = buttonArea.querySelector(".button-meter");
  const meterHeight = Number(buttonMeter.dataset.originalYPosition);
  const meterPosition = meterHeight - (meterHeight / 100) * (value * 100);
  buttonMeter.setAttribute("y", meterPosition);
}
function updateControllerButton(index, value) {
  const button = document.getElementById(`controller-b${index}`);
  const selectedButtonClass = "selected-button";

  if (button) {
    if (value > 0) {
      button.classList.add(selectedButtonClass);
      button.style.filter = `contrast(${value * 100}%)`;
    } else {
      button.classList.remove(selectedButtonClass);
      button.style.filter = `contrast(100%)`;
    }
  }
}

function handleButtons(buttons) {
  for (let i = 0; i < buttons.length; i++) {
    const buttonValue = buttons[i].value;
    updateButtonOnGrid(i, buttonValue);
    updateControllerButton(i, buttonValue);
  }
}

function handleSticks(axes) {
  updateAxisGrid(axes);
  updateStick("controller-b10", axes[0], axes[1]);
  updateStick("controller-b11", axes[2], axes[3]);
}
function updateAxisGrid(axes) {
  for (let i = 0; i < axes.length; i++) {
    const axis = document.querySelector(`#axis-${i} .axis-value`);
    const value = axes[i];

    axis.innerHTML = value.toFixed(4);
  }
}
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 handleRumble(gamepad) {
  const rumbleOnButtonPress = document.getElementById("rumble-on-button-press");
  if (rumbleOnButtonPress.checked) {
    if (gamepad.buttons.some((button) => button.value > 0)) {
      gamepad.vibrationActuator.playEffect("dual-rumble", {
        startDelay: 0,
        duration: 25,
        weakMagnitude: 1.0,
        strongMagnitude: 1.0,
      });
    }
  }
}
function gameLoop() {
  if (controllerIndex !== null) {
    const gamepad = navigator.getGamepads()[controllerIndex];
    handleButtons(gamepad.buttons);
    handleSticks(gamepad.axes);
    handleRumble(gamepad);
  }
  requestAnimationFrame(gameLoop);
}
gameLoop();