virtual-gamepad-lib/helpers.js

Emulate and display virtual and real gamepads on the web

import { PRESET_SVG_GPAD_BTN_TAP_TARGET_IDS as m, gamepadButtonType as o, gamepadDirection as a, PRESET_SVG_GPAD_DPAD_DIAGONAL_TAP_TARGET_IDS_TO_BTN_INDEXES as x, PRESET_SVG_GPAD_BTN_IDS as d, standardGpadButtonMap as p, PRESET_SVG_GPAD_CLASS as g } from "./enums.js";
import { GamepadDisplay as k } from "./GamepadDisplay.js";
import { GamepadEmulator as f, DEFAULT_GPAD_BUTTON_COUNT as I, DEFAULT_GPAD_AXIS_COUNT as P } from "./GamepadEmulator.js";
import { GamepadApiWrapper as E } from "./GamepadApiWrapper.js";
import { CenterTransformOrigin as T } from "./utilities.js";
const w = (r, t) => {
  t = Object.assign({
    GpadDisplayConfig: { gamepadIndex: 0 },
    EmulatedGamepadIndex: 0,
    EmulatedGamepadOverlayMode: !0,
    AllowDpadDiagonals: !1,
    VariableTriggers: !0,
    ClickableJoysticks: !0,
    JoystickDragDistance: 50,
    TriggerDragDistance: 50
  }, t), r.classList.add("gpad-container");
  const n = t.GpadEmulator ?? new f(0.1), c = t.GpadApiWrapper ?? new E({
    updateDelay: 0,
    // update the gamepad state every 0ms, updateDelay: 0 means update as fast as the framerate of the browser (fastest possible).
    axisDeadZone: 0.05,
    // set the deadzone for all axes to 0.05 [5%] (to avoid extra events when the joystick is near its neutral point).
    buttonConfigs: []
    // if we want special behavior for any buttons like HOLD events, we can add them here (see the keyboard example).
  }), u = t.EmulatedGamepadIndex;
  n.AddEmulatedGamepad(u, t.EmulatedGamepadOverlayMode, I, P);
  const l = [];
  for (let e = 0; e < m.length; e++) {
    const i = m[e], s = r.querySelector("#" + i), G = i.includes("trigger"), D = i.includes("stick");
    if (s)
      G && t.VariableTriggers ? l.push({
        buttonIndex: e,
        type: o.variable,
        tapTarget: s,
        dragDistance: t.TriggerDragDistance,
        // svg pixels that the user must drag the trigger button down to fully press it.
        lockTargetWhilePressed: !0,
        directions: {
          [a.down]: !0
        }
      }) : (!D || t.ClickableJoysticks) && l.push({
        buttonIndex: e,
        tapTarget: s,
        type: o.onOff,
        lockTargetWhilePressed: D === !0
      });
    else {
      console.error("Could not find gamepad tap target with id " + i + ". Make sure to insert the full gamepad SVG into the DOM before calling setupPremadeInteractiveGamepad().");
      continue;
    }
  }
  if (t.AllowDpadDiagonals)
    for (const [e, i] of Object.entries(x)) {
      const s = r.querySelector("#" + e);
      if (s)
        l.push({
          buttonIndexes: i,
          type: o.onOff,
          tapTarget: s,
          lockTargetWhilePressed: !1
          // important to set this to false for dpad buttons to allow sliding a finger between the buttons.
        });
      else {
        console.error("Could not find gamepad tap target with id " + e + ". Make sure to insert the full gamepad SVG into the DOM before calling setupPremadeInteractiveGamepad().");
        continue;
      }
    }
  n.AddButtonTouchEventListeners(u, l), n.AddJoystickTouchEventListeners(u, [
    {
      tapTarget: r.querySelector("#stick_button_left_tap_target"),
      dragDistance: t.JoystickDragDistance,
      // svg pixels that the user must drag the joystick to represent + 1 (or in reverse to represent minus one).
      xAxisIndex: 0,
      yAxisIndex: 1,
      lockTargetWhilePressed: !0,
      directions: {
        [a.up]: !0,
        [a.down]: !0,
        [a.left]: !0,
        [a.right]: !0
      }
    },
    {
      tapTarget: r.querySelector("#stick_button_right_tap_target"),
      dragDistance: t.JoystickDragDistance,
      //svg pixels that the user must drag the joystick to represent + 1 (or in reverse to represent minus one).
      xAxisIndex: 2,
      yAxisIndex: 3,
      lockTargetWhilePressed: !0,
      directions: {
        [a.up]: !0,
        [a.down]: !0,
        [a.left]: !0,
        [a.right]: !0
      }
    }
  ]);
  const y = document.querySelector(`#${d[p.LStick]}`), _ = document.querySelector(`#${d[p.RStick]}`);
  T(y), T(_);
  const S = d.map((e) => e.includes("trigger") && t.VariableTriggers ? {
    type: o.variable,
    direction: a.down,
    buttonElement: r.querySelector(`#${e}`),
    highlight: r.querySelector(`#${e} .${g.ButtonHighlight}`),
    directionHighlight: r.querySelector(`#${e} .${g.DirectionHighlight}`),
    movementRange: 10
    // SVG pixels that the button can move down to represent fully pressed.
  } : {
    type: o.onOff,
    highlight: r.querySelector(`#${e} .${g.ButtonHighlight}`),
    extraData: {
      // we can add custom data to the button config that will be passed to the buttonDisplayFunction when the button is updated.
      myCustomData: "onOff btn name is " + e
    }
  }), h = [{
    joystickElement: r.querySelector(`#${d[p.LStick]}`),
    xAxisIndex: 0,
    yAxisIndex: 1,
    movementRange: 10
  }, {
    joystickElement: r.querySelector(`#${d[p.RStick]}`),
    xAxisIndex: 2,
    yAxisIndex: 3,
    movementRange: 10
  }], A = new k(Object.assign({
    gamepadIndex: u,
    // the index of the emulated gamepad that we want to display.
    buttons: S,
    sticks: h
  }, t.GpadDisplayConfig), c);
  return { gpadEmulator: n, gpadApiWrapper: c, gpadDisplay: A };
};
export {
  w as setupPresetInteractiveGamepad
};
//# sourceMappingURL=helpers.js.map