@gamelearn/arcade-components 0.2.0

package/dist/components/conversational-pro-component/components/Message.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Message = function Message(_ref) {
+  var current = _ref.current,
+      voiceOver = _ref.voiceOver;
+  var currentText = current.text;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "conversation--message ".concat(voiceOver ? 'voice--over' : '')
+  }, voiceOver ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "conversation--voice__over"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "icon-voice-over"
+  }), /*#__PURE__*/_react.default.createElement("span", null, current.name ? current.name : 'Voice-Over')) : /*#__PURE__*/_react.default.createElement("div", null), /*#__PURE__*/_react.default.createElement("span", {
+    className: "conversation--main__text"
+  }, currentText));
+};
+
+Message.propTypes = {
+  current: _propTypes.default.shape({
+    text: _propTypes.default.string,
+    text_labelId: _propTypes.default.string,
+    name: _propTypes.default.string
+  }),
+  voiceOver: _propTypes.default.bool
+};
+Message.defaultProps = {
+  current: {},
+  voiceOver: false
+};
+var _default = Message;
+exports.default = _default;

package/dist/components/conversational-pro-component/components/Slot.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Slot = function Slot(_ref) {
+  var _character$resource;
+
+  var character = _ref.character,
+      active = _ref.active,
+      slot = _ref.slot;
+  var isImage = character.type === 'image';
+  var imgUrl = character === null || character === void 0 ? void 0 : (_character$resource = character.resource) === null || _character$resource === void 0 ? void 0 : _character$resource.url;
+  var style = isImage ? {
+    backgroundImage: "url(".concat(imgUrl, ")"),
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: 'center',
+    backgroundSize: 'contain'
+  } : {};
+  return /*#__PURE__*/_react.default.createElement("div", {
+    key: character.name,
+    className: "conversation--character__item ".concat(active ? 'active' : '', " ").concat(slot),
+    style: style
+  }, active && character.name ? /*#__PURE__*/_react.default.createElement("span", {
+    className: "conversation--character__name"
+  }, character.name) : null);
+};
+
+Slot.propTypes = {
+  character: _propTypes.default.shape({
+    name: _propTypes.default.string,
+    url: _propTypes.default.string,
+    type: _propTypes.default.string,
+    emotion: _propTypes.default.string,
+    uid: _propTypes.default.string,
+    resource: _propTypes.default.shape({
+      resourceId: _propTypes.default.string,
+      url: _propTypes.default.string
+    })
+  }),
+  active: _propTypes.default.bool,
+  emotion: _propTypes.default.string,
+  slot: _propTypes.default.number
+};
+Slot.defaultProps = {
+  character: {
+    name: '',
+    url: '',
+    type: '',
+    resource: {
+      resourceId: ''
+    }
+  },
+  active: false,
+  emotion: '',
+  slot: 0
+};
+var _default = Slot;
+exports.default = _default;

package/dist/components/conversational-pro-component/components/SlotList.js

@@ -0,0 +1,112 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Slot = _interopRequireDefault(require("./Slot"));
+
+var _scene = _interopRequireDefault(require("./scene"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var SlotList = function SlotList(_ref) {
+  var characters = _ref.characters,
+      currentMessage = _ref.currentMessage,
+      flex = _ref.flex,
+      slots = _ref.slots,
+      children = _ref.children;
+
+  var characterProps = function characterProps(_ref2) {
+    var character = _ref2.character,
+        active = _ref2.active,
+        slot = _ref2.slot;
+    return {
+      character: character,
+      active: active,
+      emotion: active ? currentMessage.emotion : 'neutral',
+      slot: slot
+    };
+  };
+
+  var currentChars = characters.filter(function (c) {
+    return slots.find(function (s) {
+      return c.uid === s.uid;
+    });
+  });
+
+  var Slots = function Slots() {
+    if (flex) {
+      return currentChars.map(function (character, index) {
+        var active = currentMessage.position === index;
+        return /*#__PURE__*/_react.default.createElement(_Slot.default, _extends({
+          key: character.uid + index
+        }, characterProps({
+          character: character,
+          active: active,
+          slot: index
+        })));
+      });
+    }
+
+    return slots.length > 0 && characters.length > 0 ? slots.map(function (el, index) {
+      var character = characters.find(function (char) {
+        return char.uid === el.uid;
+      });
+
+      if (character) {
+        var active = currentMessage.position === index;
+        character.name = el.alias || character.name;
+        return /*#__PURE__*/_react.default.createElement(_Slot.default, _extends({
+          key: character.uid + index
+        }, characterProps({
+          character: character,
+          active: active,
+          slot: index
+        })));
+      }
+
+      return /*#__PURE__*/_react.default.createElement("div", {
+        key: index,
+        className: "conversation--character__item void ".concat(index)
+      });
+    }) : null;
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "conversation--characters"
+  }, /*#__PURE__*/_react.default.createElement(_scene.default, {
+    characters: currentChars,
+    slots: slots,
+    flex: flex,
+    currentMessage: currentMessage
+  }), children ? children : /*#__PURE__*/_react.default.createElement(Slots, null));
+};
+
+SlotList.propTypes = {
+  characters: _propTypes.default.arrayOf(_propTypes.default.shape({
+    name: _propTypes.default.string,
+    url: _propTypes.default.string
+  })),
+  currentMessage: _propTypes.default.shape({
+    emotion: _propTypes.default.string,
+    position: _propTypes.default.number
+  }),
+  flex: _propTypes.default.bool,
+  slots: _propTypes.default.arrayOf(_propTypes.default.shape({}))
+};
+SlotList.defaultProps = {
+  characters: [],
+  currentMessage: {},
+  flex: true,
+  slots: []
+};
+var _default = SlotList;
+exports.default = _default;

package/dist/components/conversational-pro-component/components/scene/Panel.js

@@ -0,0 +1,114 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _fiber = require("@react-three/fiber");
+
+var _drei = require("@react-three/drei");
+
+var _three = require("three");
+
+var _element = _interopRequireDefault(require("../../../arcade-render/element"));
+
+var _helpers = require("../../../../helpers");
+
+var _LightSet = _interopRequireDefault(require("../../../../helpers/LightSet"));
+
+var _drawLOD = _interopRequireDefault(require("../../../../helpers/drawLOD"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var defaultCamPos = [0, 14.63, 16];
+
+function Panel(_ref) {
+  var character = _ref.character,
+      active = _ref.active;
+  var cameraRef = (0, _react.useRef)(null);
+  var sceneRef = (0, _react.useRef)(null);
+  var cache = (0, _react.useRef)({});
+  var isCharacter = character.type === 'character';
+  var emotion = isCharacter ? character.resource.animations[character.emotion || 'neutral'] : {};
+  var onLoadElement = (0, _react.useCallback)(function (model) {
+    if (cameraRef.current) {
+      var boundingBox = new _three.Box3();
+      boundingBox.setFromObject(model);
+      var size = boundingBox.getSize(new _three.Vector3());
+      cameraRef.current.position.fromArray(defaultCamPos);
+      cameraRef.current.rotation.set(0, 0, 0);
+      cameraRef.current.updateProjectionMatrix();
+
+      if (character.type === 'character') {
+        cameraRef.current.position.setY(size.y - 1.5 * 1.3);
+        cameraRef.current.zoom = 1.85;
+      } else if (character.type === 'object') {
+        (0, _helpers.cameraFitAnyObject)(model, cameraRef.current);
+        cameraRef.current.zoom = 1;
+      }
+
+      cameraRef.current.updateProjectionMatrix();
+
+      if (!cache.current[character.uid]) {
+        cache.current[character.uid] = true;
+        (0, _drawLOD.default)(sceneRef.current);
+      }
+    }
+  }, [character]);
+  (0, _fiber.useFrame)(function (_ref2) {
+    var gl = _ref2.gl;
+
+    if (cameraRef.current && sceneRef.current) {
+      var doc = document.getElementsByClassName('conversation--character__item')[character.slot];
+
+      if (doc) {
+        var child = doc.getBoundingClientRect();
+        var parent = doc.parentNode.getBoundingClientRect();
+        var width = child.right - child.left,
+            height = child.bottom - child.top;
+        cameraRef.current.aspect = width / height;
+        cameraRef.current.updateProjectionMatrix();
+        var relativePos = {
+          top: child.top - parent.top,
+          right: child.right - parent.right,
+          left: child.left - parent.left,
+          bottom: child.bottom - parent.bottom
+        };
+        var paddingBottom = 40;
+        relativePos.bottom += active ? -paddingBottom : paddingBottom;
+        gl.setViewport(relativePos.left, relativePos.bottom, width, height);
+        gl.setScissor(relativePos.left, relativePos.bottom, width, height);
+        gl.render(sceneRef.current, cameraRef.current);
+      }
+    }
+  }, 100);
+  return character.type === 'image' ? null : /*#__PURE__*/_react.default.createElement("scene", {
+    ref: sceneRef
+  }, /*#__PURE__*/_react.default.createElement(_react.Suspense, {
+    fallback: null
+  }, /*#__PURE__*/_react.default.createElement(_element.default, {
+    name: "char_".concat(character.uid),
+    url: character.resource.url,
+    animationUrl: emotion.url,
+    position: [0, 0, 0],
+    onLoad: onLoadElement
+  })), /*#__PURE__*/_react.default.createElement(_drei.PerspectiveCamera, {
+    name: "camera_".concat(character.uid),
+    fov: 35,
+    focus: 10,
+    ref: cameraRef,
+    position: defaultCamPos
+  }), /*#__PURE__*/_react.default.createElement(_LightSet.default, null));
+}
+
+var _default = Panel;
+exports.default = _default;

package/dist/components/conversational-pro-component/components/scene/Panels.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Panel = _interopRequireDefault(require("./Panel"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Panels = function Panels(_ref) {
+  var characters = _ref.characters,
+      slots = _ref.slots,
+      activeIndex = _ref.activeIndex,
+      flex = _ref.flex;
+  return characters.map(function (char, index) {
+    var notFlexedPosition = slots.findIndex(function (s) {
+      return s.uid === char.uid;
+    });
+    var currentSlot = !flex ? notFlexedPosition : index;
+    char.index = index;
+    char.slot = currentSlot;
+    return /*#__PURE__*/_react.default.createElement(_Panel.default, {
+      key: index,
+      character: char,
+      active: activeIndex === currentSlot
+    });
+  });
+};
+
+var _default = Panels;
+exports.default = _default;

package/dist/components/conversational-pro-component/components/scene/index.js

@@ -0,0 +1,90 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _fiber = require("@react-three/fiber");
+
+var _Panels = _interopRequireDefault(require("./Panels"));
+
+var _drei = require("@react-three/drei");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]); if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function Renderer(_ref) {
+  var characters = _ref.characters,
+      slots = _ref.slots,
+      slotRefs = _ref.slotRefs,
+      flex = _ref.flex,
+      currentMessage = _ref.currentMessage;
+
+  var _useState = (0, _react.useState)(),
+      _useState2 = _slicedToArray(_useState, 2),
+      built = _useState2[0],
+      finishBuild = _useState2[1];
+
+  (0, _fiber.useFrame)(function (_ref2) {
+    var gl = _ref2.gl;
+    gl.setScissorTest(false);
+    gl.clear(true, true);
+    gl.setScissorTest(true);
+  }, 100);
+  (0, _react.useEffect)(function () {
+    finishBuild(true);
+  }, []);
+  return built ? /*#__PURE__*/_react.default.createElement(_Panels.default, {
+    characters: characters,
+    slots: slots,
+    slotRefs: slotRefs,
+    flex: flex,
+    activeIndex: currentMessage.position
+  }) : null;
+}
+
+var Scene = function Scene(props) {
+  return /*#__PURE__*/_react.default.createElement(_fiber.Canvas, {
+    resize: {
+      scroll: false
+    },
+    className: "conversation--canvas",
+    style: {
+      position: 'absolute',
+      width: '100%',
+      height: '100%'
+    },
+    flat: true,
+    mode: "concurrent",
+    onCreated: function onCreated(_ref3) {
+      var gl = _ref3.gl;
+      gl.setClearColor('white', 0);
+      gl.physicallyCorrectLights = true;
+    }
+  }, /*#__PURE__*/_react.default.createElement(Renderer, props), /*#__PURE__*/_react.default.createElement(_drei.Preload, {
+    all: true
+  }));
+};
+
+var _default = Scene;
+exports.default = _default;

package/dist/components/conversational-pro-component/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _ConversationalProComponent = _interopRequireDefault(require("./components/ConversationalProComponent"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _ConversationalProComponent.default;
+exports.default = _default;