Gamepad

<!doctype html>
<meta charset="utf-8">
<title>Gamepad · ejemplo mínimo</title>
<!-- Conecta un mando y pulsa un botón: el navegador solo lo muestra tras la primera pulsación. -->
<p id="status">Pulsa un botón del mando…</p>
<pre id="state"></pre>
<button id="rumble" disabled>Vibrar</button>
<script>
  const $ = (s) => document.querySelector(s);
  let index = null;

  addEventListener('gamepadconnected', (e) => {
    index = e.gamepad.index;
    $('#status').textContent = `Conectado: ${e.gamepad.id} (${e.gamepad.mapping || 'sin mapeo estándar'})`;
    $('#rumble').disabled = !e.gamepad.vibrationActuator;
    requestAnimationFrame(loop);
  });
  addEventListener('gamepaddisconnected', () => { index = null; $('#status').textContent = 'Desconectado'; });

  // El estado no llega por eventos: se consulta en cada fotograma
  function loop() {
    const pad = index === null ? null : navigator.getGamepads()[index];
    if (!pad) return;
    const pressed = pad.buttons.flatMap((b, i) => (b.pressed ? [i] : []));
    $('#state').textContent =
      `Botones pulsados: ${pressed.join(', ') || '—'}\n` +
      `Ejes: ${pad.axes.map((a) => a.toFixed(2)).join('  ')}`;
    requestAnimationFrame(loop);
  }

  // Vibración: 'trigger-rumble' en los gatillos de mandos Xbox (Chrome), si no 'dual-rumble'
  $('#rumble').onclick = () => {
    const actuator = navigator.getGamepads()[index]?.vibrationActuator;
    const effect = actuator?.effects?.includes('trigger-rumble') ? 'trigger-rumble' : 'dual-rumble';
    actuator?.playEffect(effect, {
      duration: 400, strongMagnitude: 1, weakMagnitude: 0.5, leftTrigger: 0.8, rightTrigger: 0.8,
    });
  };
</script>