js-gamepad-overlay/dist/index.js

js/html overlay for gamepad inputs

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _draggable = _interopRequireDefault(require("draggable"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

var GamepadOverlay = /*#__PURE__*/function () {
  /**
   * PUBLIC FUNCTIONS
   **/
  function GamepadOverlay(_ref) {
    var domHook = _ref.domHook;

    _classCallCheck(this, GamepadOverlay);

    if (!domHook) {
      throw new Error("no domHook was provided in the constructor of GamepadOverlayProvider");
    }

    this.domHook = domHook;
    this.buttons = {};
    this.axes = {};
    this.sticks = {};

    if (GamepadOverlay.instanceId) {
      GamepadOverlay.instanceId++;
    } else {
      GamepadOverlay.instanceId = 0;
    }

    this.id = GamepadOverlay.instanceId;
  }

  _createClass(GamepadOverlay, [{
    key: "getDomHook",
    value: function getDomHook() {
      return this.domHook;
    }
  }, {
    key: "toHTML5GamepadAPI",
    value: function toHTML5GamepadAPI() {
      var _this = this;

      return {
        axes: Object.keys(this.axes).map(function (axeKey) {
          return _this.axes[axeKey];
        }),
        buttons: Object.keys(this.buttons).map(function (buttonKey) {
          return {
            pressed: _this.buttons[buttonKey].pressed,
            value: _this.buttons[buttonKey].pressed ? 1 : 0
          };
        }),
        connected: true,
        timestamp: Date.now(),
        id: "overlay-".concat(this.id)
      };
    }
  }, {
    key: "createNewStick",
    value: function createNewStick(_ref2) {
      var _this2 = this;

      var code = _ref2.code,
          _ref2$radius = _ref2.radius,
          radius = _ref2$radius === void 0 ? 0 : _ref2$radius,
          _ref2$styles = _ref2.styles,
          styles = _ref2$styles === void 0 ? {} : _ref2$styles,
          _ref2$stickButtonStyl = _ref2.stickButtonStyles,
          stickButtonStyles = _ref2$stickButtonStyl === void 0 ? {} : _ref2$stickButtonStyl,
          _ref2$stickButtonScal = _ref2.stickButtonScale,
          stickButtonScale = _ref2$stickButtonScal === void 0 ? 0.5 : _ref2$stickButtonScal,
          _ref2$snapBackDelay = _ref2.snapBackDelay,
          snapBackDelay = _ref2$snapBackDelay === void 0 ? 0 : _ref2$snapBackDelay,
          _ref2$onMove = _ref2.onMove,
          onMove = _ref2$onMove === void 0 ? function () {
        return null;
      } : _ref2$onMove,
          _ref2$onMoveEnd = _ref2.onMoveEnd,
          onMoveEnd = _ref2$onMoveEnd === void 0 ? function () {
        return null;
      } : _ref2$onMoveEnd;

      if (code !== 0 && !code) {
        throw new Error("no code provided in GamepadOverlayProvider.createNewStick");
      }

      var stick = {
        code: code,
        axes: {
          0: 0,
          1: 0
        },
        ui: document.createElement("div"),
        pressed: false
      };
      stick.ui.style.width = "".concat(radius * 2, "px");
      stick.ui.style.height = "".concat(radius * 2, "px");
      stick.ui.style.borderRadius = "50%";
      var stickButton = document.createElement("button");
      stickButton.style.position = "relative";
      stickButton.style.left = "".concat((1 - stickButtonScale) * radius, "px");
      stickButton.style.top = "".concat((1 - stickButtonScale) * radius, "px");
      stickButton.style.borderRadius = "50%";
      stickButton.style.width = "".concat(2 * stickButtonScale * radius, "px");
      stickButton.style.height = "".concat(2 * stickButtonScale * radius, "px");
      stickButton.style.padding = "0px";
      stickButton.style.border = "1px solid grey";
      this.getDomHook().appendChild(stick.ui);
      stick.buttonUi = stickButton;
      stick.ui.appendChild(stickButton);
      new _draggable["default"](stickButton, {
        limit: function limit(x, // current X coordinate
        y, // current Y coordinate
        x0, // original X coordinate (where drag was started)
        y0 // original Y coordinate (where drag was started)
        ) {
          var dx = x - x0;
          var dy = y - y0;
          var distance = Math.sqrt(dx * dx + dy * dy);
          var outOfRange = distance > radius;

          if (outOfRange) {
            x = x0 + radius * (x - x0) / distance;
            y = y0 + radius * (y - y0) / distance;
          }

          return {
            x: x,
            y: y
          };
        },
        onDrag: function onDrag() {
          stick.axes[0] = (Math.round(_this2._getValueOutOfStyleProp(stickButton.style.left)) - (1 - stickButtonScale) * radius) * 2 / 100;
          stick.axes[1] = (Math.round(_this2._getValueOutOfStyleProp(stickButton.style.top)) - (1 - stickButtonScale) * radius) * 2 / 100;
          _this2.axes["".concat(code, "-0")] = stick.axes[0];
          _this2.axes["".concat(code, "-1")] = stick.axes[1];
          onMove(stick);
        },
        onDragEnd: function onDragEnd() {
          setTimeout(function () {
            stickButton.style.left = "".concat((1 - stickButtonScale) * radius, "px");
            stickButton.style.top = "".concat((1 - stickButtonScale) * radius, "px");
            stick.axes[0] = 0;
            stick.axes[1] = 0;
            _this2.axes["".concat(code, "-0")] = stick.axes[0];
            _this2.axes["".concat(code, "-1")] = stick.axes[1];
            onMoveEnd(stick);
          }, snapBackDelay);
        }
      });
      this.sticks[code] = stick;
      this.axes["".concat(code, "-0")] = stick.axes[0];
      this.axes["".concat(code, "-1")] = stick.axes[1];

      this._mergeStylesToObject(stick.ui, styles);

      this._mergeStylesToObject(stickButton, stickButtonStyles);
    }
  }, {
    key: "createNewButton",
    value: function createNewButton(_ref3) {
      var code = _ref3.code,
          _ref3$width = _ref3.width,
          width = _ref3$width === void 0 ? 0 : _ref3$width,
          _ref3$height = _ref3.height,
          height = _ref3$height === void 0 ? 0 : _ref3$height,
          _ref3$text = _ref3.text,
          text = _ref3$text === void 0 ? "" : _ref3$text,
          _ref3$styles = _ref3.styles,
          styles = _ref3$styles === void 0 ? {} : _ref3$styles,
          _ref3$onPress = _ref3.onPress,
          onPress = _ref3$onPress === void 0 ? function () {
        return null;
      } : _ref3$onPress,
          _ref3$onRelease = _ref3.onRelease,
          onRelease = _ref3$onRelease === void 0 ? function () {
        return null;
      } : _ref3$onRelease;

      if (code !== 0 && !code) {
        throw new Error("no code provided in GamepadOverlayProvider.createNewButton");
      }

      var button = {
        code: code,
        ui: document.createElement("button"),
        pressed: false
      };
      button.ui.innerText = text;
      button.ui.style.width = "".concat(width, "px");
      button.ui.style.height = "".concat(height, "px");
      button.ui.style.outline = "none";

      var buttonPressed = function buttonPressed() {
        button.pressed = true;
        onPress(button);
      };

      var buttonReleased = function buttonReleased() {
        button.pressed = false;
        onRelease(button);
      };

      button.ui.addEventListener("mousedown", buttonPressed);
      button.ui.addEventListener("touchstart", buttonPressed);
      button.ui.addEventListener("touchend", buttonReleased);
      button.ui.addEventListener("mouseup", buttonReleased);
      button.ui.addEventListener("mouseleave", buttonReleased);

      this._mergeStylesToObject(button.ui, styles);

      this.getDomHook().appendChild(button.ui);
      this.buttons[code] = button;
    }
    /**
     * PRIVATE FUNCTIONS
     **/

  }, {
    key: "_getValueOutOfStyleProp",
    value: function _getValueOutOfStyleProp(styleProp) {
      return styleProp.substr(0, styleProp.indexOf("px"));
    }
  }, {
    key: "_mergeStylesToObject",
    value: function _mergeStylesToObject(obj, styles) {
      Object.keys(styles).forEach(function (styleKey) {
        if (obj.style.hasOwnProperty(styleKey) && styles.hasOwnProperty(styleKey)) {
          obj.style[styleKey] = styles[styleKey];
        }
      });
    }
  }]);

  return GamepadOverlay;
}();

var _default = GamepadOverlay;
exports["default"] = _default;