@gamelearn/arcade-components 0.22.13 → 0.23.0

package/dist/components/arcade-render/element/AnimateElement.js

@@ -43,6 +43,8 @@ var AnimateElement = function AnimateElement(_ref) {
     if (ref.current) {
       mixer.stopAllAction();
       var clip = animations[0];
+      ref.current.userData.defaultAnim = clip;
+      ref.current.userData.mixer = mixer;
 
       if (clip) {
         var action = mixer.clipAction(clip, ref.current);

package/dist/components/arcade-render/elements-list/index.js

@@ -73,7 +73,8 @@ var ElementsList = function ElementsList(_ref) {
     name: "CLICKABLE_ELEMENTS"
   }, elements === null || elements === void 0 ? void 0 : elements.map(function (_ref3) {
     var id = _ref3.id,
-        element = _objectWithoutProperties(_ref3, ["id"]);
+        name = _ref3.name,
+        element = _objectWithoutProperties(_ref3, ["id", "name"]);
 
     switch (element.type) {
       case 'character':
@@ -86,6 +87,7 @@ var ElementsList = function ElementsList(_ref) {
             rotation: element.rotation,
             scale: element.scale,
             layers: 1,
+            name: element.uid,
             visible: isVisible(element),
             onClick: function onClick(e) {
               return handleClick(e, element);
@@ -108,6 +110,7 @@ var ElementsList = function ElementsList(_ref) {
             rotation: element.rotation,
             scale: element.scale,
             layers: 1,
+            name: element.uid,
             visible: isVisible(element),
             onClick: function onClick(e) {
               return handleClick(e, element);
@@ -129,6 +132,7 @@ var ElementsList = function ElementsList(_ref) {
             rotation: element.rotation,
             scale: element.scale,
             layers: 1,
+            name: element.uid,
             visible: isVisible(element),
             onClick: function onClick(e) {
               return handleClick(e, element);

package/dist/components/arcade-render/loading/LoadingLogic.js

@@ -3,15 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.LoadingLogic = void 0;
 
-var _react = require("react");
-
-var _drei = require("@react-three/drei");
+var _drawLOD = _interopRequireDefault(require("../../../helpers/drawLOD"));
 
 var _fiber = require("@react-three/fiber");
 
-var _drawLOD = _interopRequireDefault(require("../../../helpers/drawLOD"));
+var _react = require("react");
+
+var _drei = require("@react-three/drei");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -27,7 +27,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "und
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-function LoadingLogic(_ref) {
+var LoadingLogic = function LoadingLogic(_ref) {
   var onFinish = _ref.onFinish,
       lodSettings = _ref.lodSettings;
   var progress = (0, _drei.useProgress)(function (state) {
@@ -47,9 +47,8 @@ function LoadingLogic(_ref) {
       onFinish();
       (0, _drawLOD.default)(scene, camera, lodSettings);
     }
-  }, [onFinish, percentage, scene, camera, lodSettings]);
+  }, [camera, percentage, lodSettings, onFinish, scene]);
   return null;
-}
+};
 
-var _default = LoadingLogic;
-exports.default = _default;
+exports.LoadingLogic = LoadingLogic;

package/dist/components/arcade-render/loading/index.js

@@ -3,18 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "LoadingLogic", {
-  enumerable: true,
-  get: function get() {
-    return _LoadingLogic.default;
-  }
-});
 exports.default = void 0;
 
 var _Loading = _interopRequireDefault(require("./Loading"));
 
-var _LoadingLogic = _interopRequireDefault(require("./LoadingLogic"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var _default = _Loading.default;

package/dist/components/arcade-render/scene/index.js

@@ -13,14 +13,12 @@ var _fiber = require("@react-three/fiber");
 
 var _drei = require("@react-three/drei");
 
-var _elementsList = _interopRequireDefault(require("../elements-list"));
-
-var _background = _interopRequireDefault(require("../background"));
-
-var _loading = _interopRequireWildcard(require("../loading"));
+var _loading = _interopRequireDefault(require("../loading"));
 
 var _ConfigController = _interopRequireDefault(require("./ConfigController"));
 
+var _LoadingLogic = require("../loading/LoadingLogic");
+
 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; }
@@ -40,27 +38,26 @@ function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "und
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var Scene = function Scene(_ref) {
-  var _ref$elements = _ref.elements,
-      elements = _ref$elements === void 0 ? [] : _ref$elements,
+  var _ref$sceneChanged = _ref.sceneChanged,
+      sceneChanged = _ref$sceneChanged === void 0 ? false : _ref$sceneChanged,
       _ref$hasControls = _ref.hasControls,
       hasControls = _ref$hasControls === void 0 ? false : _ref$hasControls,
       _ref$has3Stats = _ref.has3Stats,
       has3Stats = _ref$has3Stats === void 0 ? false : _ref$has3Stats,
-      _ref$backgroundData = _ref.backgroundData,
-      backgroundData = _ref$backgroundData === void 0 ? {} : _ref$backgroundData,
       _ref$loadingText = _ref.loadingText,
       loadingText = _ref$loadingText === void 0 ? '' : _ref$loadingText,
       _ref$toggleShadows = _ref.toggleShadows,
       toggleShadows = _ref$toggleShadows === void 0 ? true : _ref$toggleShadows,
       _ref$lodSettings = _ref.lodSettings,
       lodSettings = _ref$lodSettings === void 0 ? {} : _ref$lodSettings,
+      _ref$onLoadFinish = _ref.onLoadFinish,
+      onLoadFinish = _ref$onLoadFinish === void 0 ? function () {} : _ref$onLoadFinish,
       _ref$stopAnimate = _ref.stopAnimate,
       stopAnimate = _ref$stopAnimate === void 0 ? false : _ref$stopAnimate,
       lookingSide = _ref.lookingSide,
-      _ref$emitEvent = _ref.emitEvent,
-      emitEvent = _ref$emitEvent === void 0 ? function () {} : _ref$emitEvent;
+      children = _ref.children;
 
-  var _useState = (0, _react.useState)(true),
+  var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
       showLoad = _useState2[0],
       setShowLoad = _useState2[1];
@@ -77,15 +74,16 @@ var Scene = function Scene(_ref) {
     gl.physicallyCorrectLights = true;
   };
 
-  var handleLoadFinish = (0, _react.useCallback)(function () {
-    emitEvent({
-      type: 'sceneLoaded'
-    });
+  var onFinish = function onFinish() {
+    onLoadFinish();
     setShowLoad(false);
-  }, [emitEvent]);
+  };
+
   (0, _react.useEffect)(function () {
-    setShowLoad(true);
-  }, [backgroundData, elements, lodSettings.currentLOD, lodSettings.rgbSimulation, lodSettings.showHelpers, lodSettings.showStats]);
+    if (sceneChanged) {
+      setShowLoad(true);
+    }
+  }, [sceneChanged]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_fiber.Canvas, {
     className: "main-canvas",
     style: {
@@ -111,15 +109,10 @@ var Scene = function Scene(_ref) {
     fallback: /*#__PURE__*/_react.default.createElement(_loading.default, {
       text: loadingText
     })
-  }, showLoad && /*#__PURE__*/_react.default.createElement(_loading.LoadingLogic, {
-    onFinish: handleLoadFinish,
+  }, showLoad && /*#__PURE__*/_react.default.createElement(_LoadingLogic.LoadingLogic, {
+    onFinish: onFinish,
     lodSettings: lodSettings
-  }), elements.length ? /*#__PURE__*/_react.default.createElement(_elementsList.default, {
-    elements: elements,
-    eventHandler: emitEvent
-  }) : null, Object.keys(backgroundData).length && /*#__PURE__*/_react.default.createElement(_background.default, {
-    data: backgroundData
-  }), /*#__PURE__*/_react.default.createElement(_drei.Preload, {
+  }), children, /*#__PURE__*/_react.default.createElement(_drei.Preload, {
     all: true
   })), has3Stats && /*#__PURE__*/_react.default.createElement(_drei.Stats, null), hasControls && /*#__PURE__*/_react.default.createElement(_drei.OrbitControls, null)), /*#__PURE__*/_react.default.createElement("div", {
     id: "elements-projection"

package/dist/components/dialog-component/components/DialogComponent.js

@@ -0,0 +1,210 @@
+"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 _drei = require("@react-three/drei");
+
+var _fiber = require("@react-three/fiber");
+
+var _three = require("three");
+
+var _GLTFLoader = require("three/examples/jsm/loaders/GLTFLoader");
+
+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 DialogComponent = function DialogComponent(_ref) {
+  var emitEvent = _ref.emitEvent,
+      lines = _ref.lines,
+      actors = _ref.actors,
+      enableZoom = _ref.enableZoom;
+
+  var _useState = (0, _react.useState)(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      line = _useState2[0],
+      changeLine = _useState2[1];
+
+  var _useState3 = (0, _react.useState)({
+    text: '',
+    name: ''
+  }),
+      _useState4 = _slicedToArray(_useState3, 2),
+      currentMessage = _useState4[0],
+      setCurrentMessage = _useState4[1];
+
+  var _useThree = (0, _fiber.useThree)(function (state) {
+    return [state.camera, state.scene];
+  }),
+      _useThree2 = _slicedToArray(_useThree, 2),
+      camera = _useThree2[0],
+      scene = _useThree2[1];
+
+  var loader = (0, _react.useMemo)(function () {
+    return new _GLTFLoader.GLTFLoader();
+  }, []);
+  var messagePosition = (0, _react.useRef)(new _three.Vector3());
+  var defaultCamera = (0, _react.useRef)(camera.clone());
+  var animationStart = (0, _react.useRef)(false);
+  var currentLine = lines[line];
+  var lastLine = lines[line - 1];
+  var resetAnims = (0, _react.useCallback)(function (end) {
+    var slottedCharacters = currentLine.slots.filter(function (slot) {
+      return slot.uid;
+    });
+    var lastSlotterCharacters = lastLine === null || lastLine === void 0 ? void 0 : lastLine.slots.filter(function (slot) {
+      return slot.uid;
+    });
+
+    if (end) {
+      slottedCharacters === null || slottedCharacters === void 0 ? void 0 : slottedCharacters.forEach(function (slot) {
+        var element = scene.getObjectByName(slot.uid);
+
+        if (element) {
+          var mixer = element.userData.mixer;
+          mixer.stopAllAction();
+          var action = mixer.clipAction(element.userData.defaultAnim, element);
+          action.play();
+        }
+      });
+    }
+
+    lastSlotterCharacters === null || lastSlotterCharacters === void 0 ? void 0 : lastSlotterCharacters.forEach(function (slot) {
+      var element = scene.getObjectByName(slot.uid);
+
+      if (element) {
+        var mixer = element.userData.mixer;
+        mixer.stopAllAction();
+        var action = mixer.clipAction(element.userData.defaultAnim, element);
+        action.play();
+      }
+    });
+  }, [lastLine === null || lastLine === void 0 ? void 0 : lastLine.slots, currentLine, scene]);
+  var onKeyCallback = (0, _react.useCallback)(function (e) {
+    if (e.keyCode === 32) {
+      resetAnims(line >= lines.length - 1);
+
+      if (line < lines.length - 1) {
+        changeLine(line + 1);
+      } else {
+        messagePosition.current = defaultCamera.current.position.clone().add(new _three.Vector3(0, 5, -35));
+        animationStart.current = true;
+        setCurrentMessage({
+          text: ''
+        });
+        setTimeout(function () {
+          camera.copy(defaultCamera.current);
+          emitEvent({
+            type: 'success'
+          });
+        }, 2000);
+      }
+    }
+  }, [line, lines, camera, resetAnims, emitEvent]);
+  (0, _react.useEffect)(function () {
+    var talkingCharacter = currentLine.slots.find(function (slot) {
+      return slot.talking;
+    });
+    var slottedCharacters = currentLine.slots.filter(function (slot) {
+      return slot.uid;
+    });
+    var box = new _three.Box3();
+    slottedCharacters.forEach(function (slot) {
+      var element = scene.getObjectByName(slot.uid);
+
+      if (element) {
+        var mixer = element.userData.mixer;
+        var animation = slot.character.resource.animations[slot.emotion];
+        loader.load(animation.url, function (anim) {
+          mixer.stopAllAction();
+          var clip = anim.animations[0];
+          var action = mixer.clipAction(clip, element);
+          action.play();
+
+          if (talkingCharacter.uid === element.name) {
+            var head = element.getObjectByName('Head_M');
+            var size = box.setFromObject(head).getSize(new _three.Vector3());
+            messagePosition.current = head.getWorldPosition(new _three.Vector3());
+            messagePosition.current.add(new _three.Vector3(size.x + 3, 2.5, 0));
+
+            if (enableZoom) {
+              animationStart.current = true;
+            }
+
+            setCurrentMessage({
+              text: talkingCharacter.text,
+              name: talkingCharacter.alias
+            });
+          }
+        });
+      }
+    });
+  }, [camera, currentLine, enableZoom, lastLine, scene, loader]);
+  (0, _react.useEffect)(function () {
+    window.addEventListener('keydown', onKeyCallback);
+    return function () {
+      window.removeEventListener('keydown', onKeyCallback);
+    };
+  }, [onKeyCallback]);
+  (0, _fiber.useFrame)(function (_ref2, delta) {
+    var camera = _ref2.camera;
+
+    if (animationStart.current) {
+      var target = messagePosition.current.clone();
+      target.add(new _three.Vector3(0, -5, 35));
+      camera.position.lerp(target, delta * 2.5);
+
+      if (target.distanceTo(camera.position) < 1) {
+        animationStart.current = false;
+      }
+    }
+  });
+  return currentMessage.text ? /*#__PURE__*/_react.default.createElement(_drei.Html, {
+    position: messagePosition.current,
+    zIndexRange: [3, 0],
+    sprite: true
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      backgroundColor: 'white',
+      display: 'flex',
+      flexDirection: 'column',
+      borderRadius: '10px',
+      border: '2px solid black',
+      padding: '5px',
+      width: '240px',
+      maxWidth: '400px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      borderBottom: '2px solid black'
+    }
+  }, currentMessage.name), /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      fontSize: '20px',
+      wordWrap: 'break-word',
+      overflow: 'auto'
+    }
+  }, currentMessage.text))) : null;
+};
+
+var _default = DialogComponent;
+exports.default = _default;

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

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

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

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mockProps = void 0;
+
+var emitEvent = function emitEvent() {
+  console.log('Emit event called');
+};
+
+var mockProps = {
+  emitEvent: emitEvent
+};
+exports.mockProps = mockProps;

package/dist/components/index.js

@@ -11,6 +11,18 @@ Object.defineProperty(exports, "Scene", {
     return _scene.default;
   }
 });
+Object.defineProperty(exports, "ElementList", {
+  enumerable: true,
+  get: function get() {
+    return _elementsList.default;
+  }
+});
+Object.defineProperty(exports, "Background", {
+  enumerable: true,
+  get: function get() {
+    return _background.default;
+  }
+});
 Object.defineProperty(exports, "NoticeComponent", {
   enumerable: true,
   get: function get() {
@@ -209,9 +221,25 @@ Object.defineProperty(exports, "TextClickPuzzleComponent", {
     return _textClickPuzzleComponent.default;
   }
 });
+Object.defineProperty(exports, "ZoomTest", {
+  enumerable: true,
+  get: function get() {
+    return _zoomTest.default;
+  }
+});
+Object.defineProperty(exports, "DialogComponent", {
+  enumerable: true,
+  get: function get() {
+    return _dialogComponent.default;
+  }
+});
 
 var _scene = _interopRequireDefault(require("./arcade-render/scene"));
 
+var _elementsList = _interopRequireDefault(require("./arcade-render/elements-list"));
+
+var _background = _interopRequireDefault(require("./arcade-render/background"));
+
 var _noticeComponent = _interopRequireDefault(require("./notice-component"));
 
 var _inventoryItem = _interopRequireDefault(require("./inventory-item"));
@@ -276,6 +304,10 @@ var _patternComponent = _interopRequireDefault(require("./pattern-component"));
 
 var _textClickPuzzleComponent = _interopRequireDefault(require("./text-click-puzzle-component"));
 
+var _zoomTest = _interopRequireDefault(require("./zoom-test"));
+
+var _dialogComponent = _interopRequireDefault(require("./dialog-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/zoom-test/components/ZoomTest.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _fiber = require("@react-three/fiber");
+
+var _react = require("react");
+
+var _three = require("three");
+
+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 ZoomTest = function ZoomTest(_ref) {
+  var targetId = _ref.targetId,
+      emitEvent = _ref.emitEvent;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      mounted = _useState2[0],
+      setMounted = _useState2[1];
+
+  var camera = (0, _fiber.useThree)(function (state) {
+    return state.camera;
+  });
+  var startAnimation = (0, _react.useRef)(false);
+  var defaultCamera = (0, _react.useRef)(null);
+
+  var onEnter = function onEnter(_ref2, delta) {
+    var scene = _ref2.scene,
+        camera = _ref2.camera;
+    var target = scene.getObjectByName(targetId);
+
+    if (target) {
+      var head = target.getObjectByName('Head_M');
+      var worldPos = head.getWorldPosition(new _three.Vector3());
+
+      if (camera.position.distanceTo(new _three.Vector3()) <= 5) {
+        onFinish({
+          scene: scene,
+          camera: camera
+        }, delta);
+      } else {
+        head.attach(camera);
+        camera.position.lerp(new _three.Vector3(), delta * 0.5);
+        camera.lookAt(worldPos);
+      }
+    } else {
+      startAnimation.current = false;
+    }
+  };
+
+  var onFinish = function onFinish(_ref3, delta) {
+    var camera = _ref3.camera;
+    startAnimation.current = false;
+    camera.parent = null;
+    camera.copy(defaultCamera.current);
+    emitEvent({
+      type: 'success'
+    });
+  };
+
+  (0, _react.useEffect)(function () {
+    if (!mounted) {
+      startAnimation.current = true;
+      defaultCamera.current = camera.clone();
+      setMounted(true);
+    }
+  }, [camera, mounted]);
+  (0, _fiber.useFrame)(function (state, delta) {
+    if (startAnimation.current) {
+      onEnter(state, delta);
+    }
+  });
+  return null;
+};
+
+var _default = ZoomTest;
+exports.default = _default;

package/dist/components/zoom-test/index.js

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

package/dist/components/zoom-test/mocks/mockForStory.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mockProps = void 0;
+
+var _bg001_street = _interopRequireDefault(require("../../arcade-render/mocks/scenes/bg001_street.json"));
+
+var _characters = require("../../arcade-render/mocks/scenes/characters.json");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var mockProps = {
+  background: _bg001_street.default,
+  elements: _characters.elements,
+  scene: {
+    sceneChanged: true,
+    loadingText: 'Cargando... {percent}%',
+    hasControls: false
+  }
+};
+exports.mockProps = mockProps;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@gamelearn/arcade-components",
   "license": "Gamelearn",
-  "version": "0.22.13",
+  "version": "0.23.0",
   "main": "dist/index.js",
   "files": [
     "dist",