@gamelearn/arcade-components 0.2.0

package/dist/components/comic-component/components/ComicComponent.js

@@ -0,0 +1,106 @@
+"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 _Slide = _interopRequireDefault(require("./Slide"));
+
+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; }
+
+var ComicComponent = function ComicComponent(_ref) {
+  var slides = _ref.slides,
+      emitEvent = _ref.emitEvent;
+
+  var _useState = (0, _react.useState)(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      slideCount = _useState2[0],
+      setCount = _useState2[1];
+
+  var _useState3 = (0, _react.useState)('slide-animation'),
+      _useState4 = _slicedToArray(_useState3, 2),
+      slideTransition = _useState4[0],
+      setTransition = _useState4[1];
+
+  var classControls = slideCount === 0 ? 'comic--controls single' : 'comic--controls';
+
+  var close = function close() {
+    emitEvent({
+      type: 'success'
+    });
+  };
+
+  var goToNextSlide = function goToNextSlide() {
+    if (slideCount + 1 < slides.length) {
+      setTransition('slide-animation');
+      setCount(slideCount + 1);
+    }
+  };
+
+  var goToPreviousSlide = function goToPreviousSlide() {
+    if (slideCount - 1 >= 0) {
+      setTransition('slide-animation');
+      setCount(slideCount - 1);
+    }
+  };
+
+  if (!(slides !== null && slides !== void 0 && slides.length)) return null;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "comic component growIn-animation"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "comic--slider"
+  }, /*#__PURE__*/_react.default.createElement(_Slide.default, {
+    key: "comic page ".concat(slides[slideCount].slideOrder),
+    slide: slides[slideCount],
+    transition: slideTransition
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: classControls
+  }, slideCount > 0 && /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: "gat--btn__round",
+    onClick: goToPreviousSlide,
+    "data-testid": "btn-bck"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "icon-back"
+  })), slideCount + 1 < slides.length && /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: "gat--btn__round",
+    "data-testid": "btn-nxt",
+    onClick: goToNextSlide
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "icon-next"
+  }))), slideCount + 1 >= slides.length && /*#__PURE__*/_react.default.createElement("div", {
+    className: "position--absolute top right"
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: "gat--btn__round",
+    "data-testid": "btn-cls",
+    onClick: close
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "icon-close"
+  })))));
+};
+
+var _default = ComicComponent;
+exports.default = _default;

package/dist/components/comic-component/components/Slide.js

@@ -0,0 +1,74 @@
+"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 _Vignette = _interopRequireDefault(require("./Vignette"));
+
+var _useSound3 = _interopRequireDefault(require("use-sound"));
+
+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; }
+
+var Slide = function Slide(_ref) {
+  var _slide$audio;
+
+  var slide = _ref.slide,
+      transition = _ref.transition;
+  var slideTransition = slide.transitionEffects || transition;
+
+  var _useSound = (0, _useSound3.default)(slide === null || slide === void 0 ? void 0 : (_slide$audio = slide.audio) === null || _slide$audio === void 0 ? void 0 : _slide$audio.url),
+      _useSound2 = _slicedToArray(_useSound, 2),
+      play = _useSound2[0],
+      stop = _useSound2[1].stop;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isMounted = _useState2[0],
+      setisMounted = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    setisMounted(true);
+    return function () {
+      setisMounted(false);
+    };
+  }, []);
+  (0, _react.useEffect)(function () {
+    isMounted && play();
+    return function () {
+      stop();
+    };
+  }, [play, stop, isMounted]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "comic--slide__item ".concat(slideTransition)
+  }, slide.vignettes.map(function (vignette) {
+    return /*#__PURE__*/_react.default.createElement(_Vignette.default, {
+      key: "Vignete ".concat(vignette.vignetteOrder),
+      vignette: vignette
+    });
+  }));
+};
+
+var _default = Slide;
+exports.default = _default;

package/dist/components/comic-component/components/Vignette.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Vignette = function Vignette(_ref) {
+  var _vignette$textData;
+
+  var vignette = _ref.vignette;
+  var resource = vignette.img || {};
+  var resolvedIdImg = resource.url;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "comic--image"
+  }, resolvedIdImg && /*#__PURE__*/_react.default.createElement("img", {
+    src: resolvedIdImg,
+    alt: "comic pic"
+  })), vignette !== null && vignette !== void 0 && (_vignette$textData = vignette.textData) !== null && _vignette$textData !== void 0 && _vignette$textData.text ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "comic--text"
+  }, vignette.textData.text) : null);
+};
+
+var _default = Vignette;
+exports.default = _default;

package/dist/components/comic-component/index.js

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

package/dist/components/comic-component/mocks/mockForStory.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.comicProps = void 0;
+var comicProps = {
+  slides: [{
+    slideOrder: 1,
+    transitionEffects: null,
+    audio: {
+      url: 'https://s3-eu-west-1.amazonaws.com/gl-lms-storage/development/clients/58dccfba26561500117caf53/documents/Cat-sound.mp3'
+    },
+    vignettes: [{
+      vignetteOrder: 1,
+      img: {
+        url: 'https://s3-eu-west-1.amazonaws.com/gl-lms-storage/development/clients/58dccfba26561500117caf53/image/60508f84901f3e00123a0796/holamundo.jpg',
+        imgName: 'prueba6.png',
+        resourceId: '6007f80eac41ad001120f135'
+      },
+      imgName: 'prueba6.png',
+      sytle: null,
+      transitionEffects: null,
+      textData: {
+        text: 'hola soy el hombre barbudo',
+        style: null,
+        text_labelId: 'text_0_0_E1XylCXz'
+      },
+      imgId_labelId: 'imgId_0_0_E1XymubP'
+    }],
+    audioId_labelId: 'audioId_0_E1XymRPE'
+  }, {
+    slideOrder: 2,
+    transitionEffects: null,
+    audio: {
+      url: 'https://s3-eu-west-1.amazonaws.com/gl-lms-storage/development/clients/58dccfba26561500117caf53/audio/5f646497f6d21e001139b0ed/coin.wav'
+    },
+    vignettes: [{
+      vignetteOrder: 1,
+      img: {
+        url: 'https://s3-eu-west-1.amazonaws.com/gl-lms-storage/development/clients/58dccfba26561500117caf53/image/60507fb0901f3e00123a05db/14b936c651869bf50fdfb8071e719c47.png',
+        imgName: 'holamundo.jpg',
+        resourceId: '60508f84901f3e00123a0796'
+      },
+      imgName: 'holamundo.jpg',
+      sytle: null,
+      transitionEffects: null,
+      textData: {
+        text: 'he si sido yo, hablando idiomas',
+        style: null,
+        text_labelId: 'text_1_0_E1Xynyri'
+      },
+      imgId_labelId: 'imgId_1_0_E1Xynq2k'
+    }],
+    audioId_labelId: 'audioId_1_E1XynHal'
+  }]
+};
+exports.comicProps = comicProps;

package/dist/components/conversational-component/components/ConversationalComponent.js

@@ -0,0 +1,116 @@
+"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 _SlotList = _interopRequireDefault(require("../../conversational-pro-component/components/SlotList"));
+
+var _Message = _interopRequireDefault(require("../../conversational-pro-component/components/Message"));
+
+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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+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; }
+
+var ConversationalComponent = function ConversationalComponent(_ref) {
+  var _background$img;
+
+  var emitEvent = _ref.emitEvent,
+      messages = _ref.messages,
+      characters = _ref.characters,
+      alias = _ref.alias,
+      background = _ref.background;
+
+  var _useState = (0, _react.useState)(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      messageIndex = _useState2[0],
+      setMessageIndex = _useState2[1];
+
+  var backgroundImage = (background === null || background === void 0 ? void 0 : (_background$img = background.img) === null || _background$img === void 0 ? void 0 : _background$img.url) || null;
+  var currentMessage = messages[messageIndex];
+  var parsedCharacters = characters.map(function (c, index) {
+    return _objectSpread(_objectSpread({}, c), {}, {
+      name: alias[index] ? alias[index] : c.name,
+      uid: index
+    });
+  });
+
+  var handleClickNext = function handleClickNext() {
+    var max = messages.length - 1;
+
+    if (messageIndex + 1 <= max) {
+      setMessageIndex(messageIndex + 1);
+    } else {
+      emitEvent({
+        type: 'success'
+      });
+    }
+  };
+
+  var handleClickBack = function handleClickBack() {
+    if (messageIndex > 0) {
+      setMessageIndex(messageIndex - 1);
+    }
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "conversation--layer"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "conversation",
+    style: backgroundImage ? {
+      backgroundImage: "url(\"".concat(backgroundImage, "\")")
+    } : {}
+  }, /*#__PURE__*/_react.default.createElement(_SlotList.default, {
+    characters: parsedCharacters,
+    currentMessage: currentMessage,
+    slots: parsedCharacters,
+    flex: true
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "conversation--body"
+  }, currentMessage ? /*#__PURE__*/_react.default.createElement(_Message.default, {
+    current: currentMessage,
+    voiceOver: currentMessage.emotion === null
+  }) : /*#__PURE__*/_react.default.createElement("div", null), /*#__PURE__*/_react.default.createElement("div", {
+    className: "conversation--controls"
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    className: "gat--btn__round ".concat(messageIndex > 0 ? '' : 'visibility--hidden'),
+    type: "button",
+    onClick: handleClickBack
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "icon-back"
+  })), /*#__PURE__*/_react.default.createElement("button", {
+    className: "gat--btn__round",
+    type: "button",
+    onClick: handleClickNext
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "icon-next"
+  }))))));
+};
+
+var _default = ConversationalComponent;
+exports.default = _default;

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

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

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

@@ -0,0 +1,226 @@
+"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 _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _useSound3 = _interopRequireDefault(require("use-sound"));
+
+var _SlotList = _interopRequireDefault(require("./SlotList"));
+
+var _Message = _interopRequireDefault(require("./Message"));
+
+var _decisionComponent = _interopRequireDefault(require("../../decision-component"));
+
+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 _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); }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+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; }
+
+var ConversationProViewer = function ConversationProViewer(_ref) {
+  var _lines$currentLine, _lines$currentLine$au, _background$img;
+
+  var emitEvent = _ref.emitEvent,
+      lines = _ref.lines,
+      characters = _ref.characters,
+      background = _ref.background;
+
+  var _useState = (0, _react.useState)(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      currentLine = _useState2[0],
+      setCurrentLine = _useState2[1];
+
+  var _useSound = (0, _useSound3.default)((_lines$currentLine = lines[currentLine]) === null || _lines$currentLine === void 0 ? void 0 : (_lines$currentLine$au = _lines$currentLine.audio) === null || _lines$currentLine$au === void 0 ? void 0 : _lines$currentLine$au.url),
+      _useSound2 = _slicedToArray(_useSound, 2),
+      play = _useSound2[0],
+      stop = _useSound2[1].stop;
+
+  var backgroundImage = (background === null || background === void 0 ? void 0 : (_background$img = background.img) === null || _background$img === void 0 ? void 0 : _background$img.url) || null;
+  var currentLineData = lines[currentLine];
+  var voiceOverSlots = [];
+  var voiceOver = currentLineData.voiceOver,
+      decision = currentLineData.decision;
+  var isFlex = currentLineData.flex;
+
+  var getCurrentMessage = function getCurrentMessage() {
+    if (voiceOver) {
+      return currentLineData;
+    }
+
+    var currentMessage = currentLineData.slots.find(function (slot) {
+      return slot.uid && slot.talking;
+    });
+
+    if (currentMessage) {
+      return currentMessage;
+    } // Old conversational schema
+
+
+    return currentLineData.slots.find(function (slot) {
+      return slot.uid && slot.text;
+    });
+  };
+
+  var currentMessage = !decision ? getCurrentMessage() : {}; // Recupera la antigua linea de la conversacion para conservar los personajes en voice-over
+
+  var leftWithSlots = lines.slice(0, currentLine + 1).reverse().find(function (line) {
+    return line.slots;
+  });
+  var lastLine = lines[currentLine - 1] ? lines[currentLine - 1] : {};
+
+  if (voiceOver) {
+    var rightWithSlots = lines.slice(currentLine).find(function (line) {
+      return line.slots;
+    });
+    var lineWithSlots = !leftWithSlots ? rightWithSlots : leftWithSlots;
+
+    if (lineWithSlots) {
+      voiceOverSlots = lineWithSlots.slots;
+      isFlex = lineWithSlots.flex;
+    }
+  } else if (!decision) {
+    currentLineData.slots.forEach(function (slot) {
+      var indx = characters.findIndex(function (char) {
+        return char.uid === slot.uid;
+      });
+
+      if (indx >= 0) {
+        characters[indx].emotion = slot.emotion;
+      }
+    });
+
+    if (currentMessage && currentMessage.uid) {
+      var notFlexedPosition = currentLineData.slots.findIndex(function (char) {
+        return char.uid === currentMessage.uid;
+      });
+      var flexedPosition = characters.findIndex(function (char) {
+        return char.uid === currentMessage.uid;
+      });
+      currentMessage.position = isFlex ? flexedPosition : notFlexedPosition;
+    }
+  }
+
+  var listProps = {
+    characters: characters,
+    currentMessage: currentMessage || {},
+    slots: !voiceOver ? currentLineData.slots : voiceOverSlots,
+    flex: isFlex
+  };
+
+  var handleClickNext = function handleClickNext() {
+    var line = currentLine;
+    var maxLine = lines.length - 1;
+
+    if (line + 1 <= maxLine) {
+      setCurrentLine(line + 1);
+    } else {
+      emitEvent({
+        type: 'success'
+      });
+    }
+  };
+
+  var handleClickBack = function handleClickBack() {
+    if (currentLine > 0) {
+      setCurrentLine(currentLine - 1);
+    }
+  };
+
+  (0, _react.useEffect)(function () {
+    play();
+    return function () {
+      stop();
+    };
+  }, [currentLine, play, stop]);
+
+  var decisionPayload = _objectSpread(_objectSpread({}, currentLineData.payload), {}, {
+    onFinish: handleClickNext,
+    emitEvent: emitEvent,
+    inheritProps: {
+      characters: characters,
+      background: backgroundImage,
+      flex: leftWithSlots ? leftWithSlots.flex : true,
+      slots: !leftWithSlots ? [] : leftWithSlots.slots
+    }
+  });
+
+  if (decision) {
+    return /*#__PURE__*/_react.default.createElement(_decisionComponent.default, decisionPayload);
+  }
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "conversation--layer"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "conversation",
+    style: backgroundImage ? {
+      backgroundImage: "url(\"".concat(backgroundImage, "\")")
+    } : {}
+  }, /*#__PURE__*/_react.default.createElement(_SlotList.default, _extends({}, listProps, {
+    characters: characters
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "conversation--body"
+  }, currentMessage ? /*#__PURE__*/_react.default.createElement(_Message.default, {
+    current: currentMessage,
+    voiceOver: voiceOver
+  }) : /*#__PURE__*/_react.default.createElement("div", null), /*#__PURE__*/_react.default.createElement("div", {
+    className: "conversation--controls"
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    className: "gat--btn__round ".concat(currentLine > 0 && !lastLine.decision ? '' : 'visibility--hidden'),
+    type: "button",
+    onClick: handleClickBack
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "icon-back"
+  })), /*#__PURE__*/_react.default.createElement("button", {
+    className: "gat--btn__round",
+    type: "button",
+    onClick: handleClickNext
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "icon-next"
+  }))))));
+};
+
+ConversationProViewer.propTypes = {
+  emitEvent: _propTypes.default.func,
+  background: _propTypes.default.shape({}),
+  lines: _propTypes.default.arrayOf(_propTypes.default.shape({})).isRequired,
+  characters: _propTypes.default.arrayOf(_propTypes.default.shape({
+    character: _propTypes.default.string,
+    emotion: _propTypes.default.string,
+    slot: _propTypes.default.number,
+    text: _propTypes.default.string
+  })).isRequired
+};
+ConversationProViewer.defaultProps = {
+  background: {},
+  emitEvent: function emitEvent() {}
+};
+var _default = ConversationProViewer;
+exports.default = _default;