@gamelearn/arcade-components 0.4.0 → 0.4.2-beta-terminal

package/dist/components/image-click-wrapper-component/components/Feedback/index.js

@@ -21,15 +21,14 @@ var Feedback = function Feedback(_ref) {
   var text = _ref.text,
       success = _ref.success,
       playSound = _ref.playSound;
-  var play = playSound(success ? 'score' : 'fail');
   (0, _react.useEffect)(function () {
-    if (text) {
-      play();
+    if (text && playSound) {
+      playSound(success ? 'score' : 'fail');
     }
-  }, [play, text]);
+  }, [playSound, success, text]);
 
   if (!text) {
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+    return null;
   }
 
   return /*#__PURE__*/_react.default.createElement("div", {

package/dist/components/image-click-wrapper-component/components/ImageClickWrapperComponent.js

@@ -105,7 +105,12 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
   var _useState7 = (0, _react.useState)(false),
       _useState8 = _slicedToArray(_useState7, 2),
       showWrongFeedback = _useState8[0],
-      setShowWrongFeedback = _useState8[1]; // Common config
+      setShowWrongFeedback = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(false),
+      _useState10 = _slicedToArray(_useState9, 2),
+      disableClick = _useState10[0],
+      setDisableClick = _useState10[1]; // Common config
 
 
   var soundActions = props.soundActions,
@@ -122,10 +127,8 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
       defaultCompleted = props.defaultCompleted,
       isLast = props.isLast,
       hideContinue = props.hideContinue,
-      className = props.className;
-
-  var _soundActions = _slicedToArray(soundActions, 1),
-      playSound = _soundActions[0];
+      className = props.className,
+      emitFinish = props.emitFinish;
 
   var translate = function translate(id) {
     return emitEvent({
@@ -134,9 +137,11 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
     });
   };
 
-  var solution = info.solution;
-  var imageUrl = image.img.url || defaultImg; // Image Click Puzzle
+  var _soundActions = _slicedToArray(soundActions, 1),
+      playSound = _soundActions[0];
 
+  var solution = info.solution;
+  var imageUrl = image.img.url || defaultImg;
   var areasList = areas.map(function (area, index) {
     return _objectSpread({
       index: index,
@@ -151,11 +156,16 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
   });
   var handleFinish = (0, _react.useCallback)(function () {
     var rewards = solution.right.rewards;
-    emitEvent({
-      type: 'addPoints',
-      payload: rewards
-    });
-  }, [emitEvent, solution.right]);
+
+    if (emitFinish) {
+      emitFinish(rewards);
+    } else {
+      emitEvent({
+        type: 'addPoints',
+        payload: rewards
+      });
+    }
+  }, [emitEvent, emitFinish, solution.right]);
   (0, _react.useEffect)(function () {
     if (completed) {
       disableExit(true);
@@ -169,6 +179,7 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
 
     if (areas.length === clickedZones.length) {
       setCompleted(true);
+      setDisableClick(true);
 
       if (hideContinue) {
         timeout = setTimeout(function () {
@@ -198,7 +209,7 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
   }, [finished, disableExit]);
 
   var handleClickOutSide = function handleClickOutSide() {
-    if (!defaultCompleted) {
+    if (!disableClick && !defaultCompleted) {
       var _solution$wrong = solution.wrong,
           wrongRewards = _solution$wrong.rewards,
           feedback = _solution$wrong.desc;
@@ -212,7 +223,8 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
       } else {
         emitEvent({
           type: 'addPoints',
-          payload: wrongRewards
+          payload: wrongRewards,
+          finish: false
         });
       }
     }
@@ -221,7 +233,7 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
   var handleAreaClick = function handleAreaClick(area) {
     if (!clickedZones.some(function (zone) {
       return zone.index === area.index;
-    }) && !defaultCompleted && !showWrongFeedback) {
+    }) && !defaultCompleted && !showWrongFeedback && !disableClick) {
       var updatedClickedZones = [].concat(_toConsumableArray(clickedZones), [area]);
 
       if (hasClickOrder && area.index === clickedZones.length || !hasClickOrder) {
@@ -238,7 +250,8 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
         } else {
           emitEvent({
             type: 'addPoints',
-            payload: wrongRewards
+            payload: wrongRewards,
+            finish: false
           });
         }
       }
@@ -253,7 +266,8 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
       setShowWrongFeedback(false);
       emitEvent({
         type: 'addPoints',
-        payload: info.solution.wrong.rewards
+        payload: info.solution.wrong.rewards,
+        finish: false
       });
     },
     text: info.solution.wrong.desc

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

@@ -13,7 +13,7 @@ var mockProps = {
   emitEvent: emitEvent,
   img: {
     imgId: 'alfalfa',
-    url: 'https://s3-eu-west-1.amazonaws.com/gl-lms-storage/development/clients/58dccfba26561500117caf53/image/603fb8b1901f3e001238e297/gif.gif',
+    url: 'https://min.int.gamelearn.io/cooked.gl-lms-storage/clients/58dccfba26561500117caf53/image/603fb8b1901f3e001238e297/gif.gif',
     resourceId: '5e79e0c8f5b3a6000fd81472'
   },
   imgName: 'Hand gif',
@@ -26,7 +26,7 @@ var mockWithNotVisible = {
   emitEvent: emitEvent,
   img: {
     imgId: 'alfalfa2',
-    url: 'https://s3-eu-west-1.amazonaws.com/gl-lms-storage/development/clients/58dccfba26561500117caf53/image/603fb8b1901f3e001238e297/gif.gif',
+    url: 'https://min.int.gamelearn.io/cooked.gl-lms-storage/clients/58dccfba26561500117caf53/image/603fb8b1901f3e001238e297/gif.gif',
     resourceId: '5e79e0c8f5b3a6000fd81472'
   },
   imgName: 'Hand gif',
@@ -39,7 +39,7 @@ var mockWithImageNotViewed = {
   emitEvent: emitEvent,
   img: {
     imgId: 'alfalfa2',
-    url: 'https://s3-eu-west-1.amazonaws.com/gl-lms-storage/development/clients/58dccfba26561500117caf53/image/603fb8b1901f3e001238e297/gif.gif',
+    url: 'https://min.int.gamelearn.io/cooked.gl-lms-storage/clients/58dccfba26561500117caf53/image/603fb8b1901f3e001238e297/gif.gif',
     resourceId: '5e79e0c8f5b3a6000fd81472'
   },
   imgName: 'Hand gif',

package/dist/components/index.js

@@ -131,6 +131,36 @@ Object.defineProperty(exports, "HangedPuzzleComponent", {
     return _hangedPuzzleComponent.default;
   }
 });
+Object.defineProperty(exports, "ChainedImageClickPuzzleComponent", {
+  enumerable: true,
+  get: function get() {
+    return _chainedImageClickPuzzleComponent.default;
+  }
+});
+Object.defineProperty(exports, "WebBuilderPuzzleComponent", {
+  enumerable: true,
+  get: function get() {
+    return _webBuilderPuzzleComponent.default;
+  }
+});
+Object.defineProperty(exports, "WriterPuzzleComponent", {
+  enumerable: true,
+  get: function get() {
+    return _writerPuzzleComponent.default;
+  }
+});
+Object.defineProperty(exports, "TerminalPuzzleComponent", {
+  enumerable: true,
+  get: function get() {
+    return _terminalPuzzleComponent.default;
+  }
+});
+Object.defineProperty(exports, "DragItemPuzzleComponent", {
+  enumerable: true,
+  get: function get() {
+    return _dragItemPuzzleComponent.default;
+  }
+});
 
 var _scene = _interopRequireDefault(require("./arcade-render/scene"));
 
@@ -172,6 +202,16 @@ var _crackerPuzzleComponent = _interopRequireDefault(require("./cracker-puzzle-c
 
 var _hangedPuzzleComponent = _interopRequireDefault(require("./hanged-puzzle-component"));
 
+var _chainedImageClickPuzzleComponent = _interopRequireDefault(require("./chained-image-click-puzzle-component"));
+
+var _webBuilderPuzzleComponent = _interopRequireDefault(require("./web-builder-puzzle-component"));
+
+var _writerPuzzleComponent = _interopRequireDefault(require("./writer-puzzle-component"));
+
+var _terminalPuzzleComponent = _interopRequireDefault(require("./terminal-puzzle-component"));
+
+var _dragItemPuzzleComponent = _interopRequireDefault(require("./drag-item-puzzle-component"));
+
 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; }

package/dist/components/inventory-item/components/InventoryItem.js

@@ -47,11 +47,12 @@ var InventoryItem = function InventoryItem(_ref) {
   var onLoad = function onLoad(model, scene, camera) {
     if (model && orbit.current) {
       model.position.set(0, 0, 0);
+      scene.add(camera);
       camera.position.z += 10;
       camera.fov = 35;
       camera.updateProjectionMatrix();
       (0, _helpers.cameraFitAnyObject)(model, camera, null, orbit.current);
-      (0, _drawLOD.default)(scene);
+      (0, _drawLOD.default)(scene, camera);
     }
   };
 

package/dist/components/keyboard-puzzle-component/mocks/mockForStory.js

@@ -17,7 +17,7 @@ var mockProps = {
   keyboard: [['1', '2', '3'], ['4', '5', '6'], ['7', '8', '9'], ['*', '0', '#']],
   image: {
     img: {
-      url: 'https://s3-eu-west-1.amazonaws.com/gl-lms-storage/development/clients/58dccfba26561500117caf53/image/60508f84901f3e00123a0796/holamundo.jpg'
+      url: 'https://min.int.gamelearn.io/cooked.gl-lms-storage/clients/58dccfba26561500117caf53/image/60508f84901f3e00123a0796/holamundo.jpg'
     }
   },
   info: {

package/dist/components/login-puzzle-component/mocks/mockForStory.js

@@ -16,8 +16,8 @@ var emitEvent = function emitEvent(_ref) {
 
 var mockProps = {
   emitEvent: emitEvent,
-  user: "pepe",
-  password: "1234",
+  user: 'pepe',
+  password: '1234',
   login: true,
   info: {
     solution: {
@@ -31,7 +31,7 @@ var mockProps = {
   },
   image: {
     img: {
-      url: 'https://s3-eu-west-1.amazonaws.com/gl-lms-storage/development/clients/58dccfba26561500117caf53/image/60508f84901f3e00123a0796/holamundo.jpg'
+      url: 'https://min.int.gamelearn.io/cooked.gl-lms-storage/clients/58dccfba26561500117caf53/image/60508f84901f3e00123a0796/holamundo.jpg'
     }
   }
 };

package/dist/components/pdf-component/components/PdfComponent.js

@@ -17,6 +17,18 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -25,15 +37,28 @@ var PdfComponent = function PdfComponent(_ref) {
   var emitEvent = _ref.emitEvent,
       documentType = _ref.documentType,
       name = _ref.name,
+      required = _ref.required,
       viewed = _ref.viewed,
       visible = _ref.visible,
-      props = _objectWithoutProperties(_ref, ["emitEvent", "documentType", "name", "viewed", "visible"]);
+      props = _objectWithoutProperties(_ref, ["emitEvent", "documentType", "name", "required", "viewed", "visible"]);
+
+  var translate = function translate(id) {
+    return emitEvent({
+      type: 'translate',
+      payload: id
+    });
+  };
 
   var documentFile = props.document;
 
   var _ref2 = documentFile || '',
       url = _ref2.url;
 
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      closeVisible = _useState2[0],
+      setcloseVisible = _useState2[1];
+
   var item = (0, _react.useMemo)(function () {
     return {
       documentType: documentType,
@@ -52,17 +77,23 @@ var PdfComponent = function PdfComponent(_ref) {
     if (!visible) {
       emitFinish();
     }
+
+    if (!required) {
+      setcloseVisible(true);
+    }
   }, [visible, emitFinish]);
 
   if (!visible) {
     return null;
   }
 
+  var endPdf = function endPdf() {
+    setcloseVisible(true);
+  };
+
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(viewed ? 'notes--results' : 'readings--container')
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: viewed ? 'notes--results__text' : 'readings pdf--type'
-  }, !viewed && /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(viewed ? 'notes--results' : '')
+  }, !viewed && closeVisible && /*#__PURE__*/_react.default.createElement("div", {
     className: "position--absolute top right z-index1"
   }, /*#__PURE__*/_react.default.createElement("button", {
     type: "button",
@@ -71,8 +102,10 @@ var PdfComponent = function PdfComponent(_ref) {
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "icon-close"
   }))), url && /*#__PURE__*/_react.default.createElement(_PdfVisor.default, {
-    url: url
-  })));
+    url: url,
+    endPdf: endPdf,
+    translate: translate
+  }));
 };
 
 var _default = PdfComponent;

package/dist/components/pdf-component/components/PdfVisor.js

@@ -15,8 +15,6 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 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 _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."); }
@@ -30,40 +28,50 @@ function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "und
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 _reactPdf.pdfjs.GlobalWorkerOptions.workerSrc = "//cdnjs.cloudflare.com/ajax/libs/pdf.js/".concat(_reactPdf.pdfjs.version, "/pdf.worker.js");
-;
-
-var PageList = function PageList(_ref) {
-  var pages = _ref.pages;
-  var isMobile = (0, _react.useMemo)(function () {
-    return navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i);
-  }, []);
-
-  if (pages === 1) {
-    return /*#__PURE__*/_react.default.createElement(_reactPdf.Page, {
-      pageNumber: pages
-    });
-  }
-
-  return Array(pages).fill(1).map(function (_, i) {
-    return /*#__PURE__*/_react.default.createElement(_reactPdf.Page, {
-      renderTextLayer: false,
-      key: i,
-      pageNumber: i + 1,
-      scale: isMobile ? 1 : 2
-    });
-  });
-};
 
-var PdfVisor = function PdfVisor(_ref2) {
-  var url = _ref2.url;
+var PdfVisor = function PdfVisor(_ref) {
+  var url = _ref.url,
+      endPdf = _ref.endPdf,
+      translate = _ref.translate;
+  var scrollElement = (0, _react.useRef)();
 
-  var _useState = (0, _react.useState)(0),
+  var _useState = (0, _react.useState)(1),
       _useState2 = _slicedToArray(_useState, 2),
       pages = _useState2[0],
       setPages = _useState2[1];
 
+  var _useState3 = (0, _react.useState)(true),
+      _useState4 = _slicedToArray(_useState3, 2),
+      overlay = _useState4[0],
+      setOverlay = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(),
+      _useState6 = _slicedToArray(_useState5, 2),
+      currentPage = _useState6[0],
+      setCurrentPage = _useState6[1];
+
+  var isMobile = (0, _react.useMemo)(function () {
+    return navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i);
+  }, []);
+  var scale = isMobile ? 1 : 2;
   var handleLoadSucess = (0, _react.useCallback)(function (pdf) {
     setPages(pdf.numPages);
+
+    var timeOut = function timeOut() {
+      setTimeout(function () {
+        if (scrollElement.current.scrollHeight <= scrollElement.current.offsetHeight) {
+          setOverlay(false);
+        }
+      }, 1000);
+      return function () {
+        if (timeOut) clearTimeout(timeOut);
+      };
+    };
+
+    timeOut();
+  }, []);
+  (0, _react.useEffect)(function () {
+    setCurrentPage(1);
   }, []);
   var documentProps = {
     file: url,
@@ -73,11 +81,56 @@ var PdfVisor = function PdfVisor(_ref2) {
       return console.log(error);
     }
   };
-  return /*#__PURE__*/_react.default.createElement(_reactPdf.Document, _extends({
-    className: "readings--pdf"
-  }, documentProps), /*#__PURE__*/_react.default.createElement(PageList, {
-    pages: pages
-  }));
+
+  var turnPage = function turnPage(value) {
+    scrollElement.current.scrollTo(0, 0);
+    setOverlay(false);
+    setCurrentPage(currentPage + value);
+
+    if (currentPage === pages - 1) {
+      endPdf();
+    }
+  };
+
+  var removeOverlay = function removeOverlay() {
+    setOverlay(false);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "pdf-box"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "pdf-box__scrollwrap"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    onScroll: removeOverlay,
+    ref: scrollElement,
+    className: "pdf-box__scroll ".concat(overlay ? 'pdf-box__scroll--overlay' : '')
+  }, /*#__PURE__*/_react.default.createElement(_reactPdf.Document, documentProps, /*#__PURE__*/_react.default.createElement(_reactPdf.Page, {
+    renderTextLayer: false,
+    scale: scale,
+    pageNumber: currentPage
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "pdf-box__mouse icon-scroll-down-black"
+  })), pages > 1 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "pdf-box__paginator"
+  }, /*#__PURE__*/_react.default.createElement("span", null, translate('storylines.misc.page'), " ", currentPage, ' ', translate('storylines.misc.of'), " ", pages)))), pages > 1 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
+    className: "pdf-box__arrow pdf-box__arrow--left gat--btn__round ".concat(currentPage === 1 ? 'pdf-box__arrow--hidden' : ''),
+    type: "button",
+    disabled: currentPage === 1,
+    onClick: function onClick() {
+      return turnPage(-1);
+    }
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "icon-back"
+  })), /*#__PURE__*/_react.default.createElement("button", {
+    className: "pdf-box__arrow pdf-box__arrow--right gat--btn__round ".concat(currentPage === pages ? 'disabled' : ''),
+    type: "button",
+    disabled: currentPage === pages,
+    onClick: function onClick() {
+      return turnPage(1);
+    }
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "icon-next"
+  })))));
 };
 
 var _default = PdfVisor;

package/dist/components/pdf-component/mocks/mockForProps.js

@@ -5,19 +5,35 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.mockProps = void 0;
 
-var emitEvent = function emitEvent() {
+var emitEvent = function emitEvent(action) {
   console.log('Emit event called');
+
+  if (action.type === 'translate') {
+    return action.payload;
+  }
 };
 
-var mockProps = {
+var mockProps = [{
   emitEvent: emitEvent,
   documentType: 'lesson',
   name: 'pdf',
+  required: false,
   document: {
-    url: 'https://s3-eu-west-1.amazonaws.com/gl-lms-storage/stag/clients/58dccfba26561500117caf53/documents/01.%20Demo%20Presentacion%20DE.pdf?',
-    resourceId: "test"
+    url: 'https://min.int.gamelearn.io/cooked.gl-lms-storage/clients/58dccfba26561500117caf53/pdf/60af606c6deb7a0011201fd6/diploma_2100_minio.pdf',
+    resourceId: 'test'
   },
   visible: true,
   viewed: false
-};
+}, {
+  emitEvent: emitEvent,
+  documentType: 'lesson',
+  name: 'pdf',
+  required: true,
+  document: {
+    url: 'https://min.gamelearn.io/cooked.gl-lms-storage/clients/5981fca94d82290bcbe957fe/pdf/602e36b777cf020011920783/ZULU%CC%81-PDF%20Cromo%202md.pdf',
+    resourceId: 'test'
+  },
+  visible: true,
+  viewed: false
+}];
 exports.mockProps = mockProps;

package/dist/components/terminal-puzzle-component/components/FilesGroup/Item.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _utils = require("../utils");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Item = function Item(_ref) {
+  var item = _ref.item,
+      selectItem = _ref.selectItem;
+  var filename = item.name;
+  return /*#__PURE__*/_react.default.createElement("li", {
+    className: "puzzle--terminal__folder__list--item"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    title: filename,
+    className: "puzzle--terminal__item id-".concat(item.id),
+    onClick: function onClick() {
+      return !item.fixed ? selectItem(item) : null;
+    }
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "puzzle--terminal__icon ".concat(_utils.ICONS[item.type])
+  }), /*#__PURE__*/_react.default.createElement("span", null, filename)));
+};
+
+var _default = Item;
+exports.default = _default;

package/dist/components/terminal-puzzle-component/components/FilesGroup/index.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Item = _interopRequireDefault(require("./Item"));
+
+var _utils = require("../utils");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var FilesGroup = function FilesGroup(_ref) {
+  var initFile = _ref.initFile,
+      backFile = _ref.backFile,
+      file = _ref.file,
+      closeFolder = _ref.closeFolder,
+      selectItem = _ref.selectItem;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, file.id === 'init' ? /*#__PURE__*/_react.default.createElement("ul", {
+    className: "puzzle--terminal__folder__list desktop"
+  }, file.children.map(function (item) {
+    return /*#__PURE__*/_react.default.createElement(_Item.default, {
+      key: item.fileId,
+      selectItem: selectItem,
+      item: item
+    });
+  })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("ul", {
+    className: "puzzle--terminal__folder__list desktop"
+  }, initFile.children.map(function (item) {
+    return /*#__PURE__*/_react.default.createElement(_Item.default, {
+      key: item.fileId,
+      selectItem: selectItem,
+      item: item
+    });
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "puzzle--terminal__folder"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "puzzle--terminal__folder--head"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    onClick: function onClick() {
+      return backFile();
+    },
+    className: "puzzle--terminal__folder--back"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "icon-back"
+  })), /*#__PURE__*/_react.default.createElement("span", {
+    className: "puzzle--terminal__folder--head__icon ".concat(_utils.ICONS[file.type])
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: "text"
+  }, file.name), /*#__PURE__*/_react.default.createElement("span", {
+    onClick: function onClick() {
+      return closeFolder();
+    },
+    className: "puzzle--terminal__folder--close"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "icon-close"
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "puzzle--terminal__folder--body"
+  }, /*#__PURE__*/_react.default.createElement("ul", {
+    className: "puzzle--terminal__folder__list"
+  }, file.children.map(function (item) {
+    return /*#__PURE__*/_react.default.createElement(_Item.default, {
+      key: item.fileId,
+      selectItem: selectItem,
+      item: item
+    });
+  }))))));
+};
+
+var _default = FilesGroup;
+exports.default = _default;