@gamelearn/arcade-components 1.0.0 → 1.0.3

package/dist/components/animation-component/components/AnimationComponent.js

@@ -51,7 +51,7 @@ var AnimationComponent = function AnimationComponent(_ref) {
     if (!mounted) {
       var object;
       scene.traverseVisible(function (node) {
-        if (node.uid === resource.uid && !object) {
+        if (resource.uid && node.uid === resource.uid && !object) {
           object = node;
         }
       });

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

@@ -5,12 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.mockProps = exports.default = 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 }; }
-
 /* eslint-disable no-console */
 
 /* eslint-disable max-len */
@@ -19,15 +13,9 @@ var emitEvent = function emitEvent() {
 };
 
 var mockProps = {
-  background: _bg001_street.default,
-  elements: _characters.elements,
-  scene: {
-    sceneChanged: true,
-    loadingText: 'Cargando... {percent}%',
-    hasControls: false
-  },
   resource: {
-    elementUid: 'snHJhg'
+    elementUid: 'snHJhg',
+    uid: 'snHJhg'
   },
   loopTimes: 1,
   animation: {

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

@@ -13,16 +13,14 @@ var _fiber = require("@react-three/fiber");
 
 var _drei = require("@react-three/drei");
 
-var _three = require("three");
+var _arcadeThreeCore = require("@gamelearn/arcade-three-core");
 
-var _element = _interopRequireDefault(require("../../../arcade-render/element"));
+var _three = require("three");
 
 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(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -35,8 +33,7 @@ function Panel(_ref) {
   var _character$resource4, _character$resource5;
 
   var character = _ref.character,
-      active = _ref.active,
-      lodSettings = _ref.lodSettings;
+      active = _ref.active;
   var cameraRef = (0, _react.useRef)(null);
   var sceneRef = (0, _react.useRef)(null);
   var isCharacter = character.type === 'character';
@@ -73,9 +70,8 @@ function Panel(_ref) {
       }
 
       cameraRef.current.updateProjectionMatrix();
-      (0, _drawLOD.default)(sceneRef.current, cameraRef.current, lodSettings);
     }
-  }, [character, lodSettings]);
+  }, [character]);
   (0, _fiber.useFrame)(function (_ref2) {
     var gl = _ref2.gl;
 
@@ -105,16 +101,17 @@ function Panel(_ref) {
   }, 100);
   return character.type === 'image' ? null : /*#__PURE__*/_react.default.createElement("scene", {
     ref: sceneRef
-  }, /*#__PURE__*/_react.default.createElement(_react.Suspense, {
-    fallback: null
-  }, (_character$resource5 = character.resource) !== null && _character$resource5 !== void 0 && _character$resource5.url ? /*#__PURE__*/_react.default.createElement(_element.default, {
+  }, (_character$resource5 = character.resource) !== null && _character$resource5 !== void 0 && _character$resource5.url ? /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.LodWrapper, {
+    progressive: true,
+    individualProgress: true
+  }, /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.TriggerWrapper, {
     name: "char_".concat(character.uid),
     url: character.resource.url,
     animationUrl: emotion.url,
     type: character.type,
     position: [0, 0, 0],
     onLoad: onLoadElement
-  }) : null), /*#__PURE__*/_react.default.createElement(_drei.PerspectiveCamera, {
+  })) : null, /*#__PURE__*/_react.default.createElement(_drei.PerspectiveCamera, {
     name: "camera_".concat(character.uid),
     fov: 35,
     focus: 10,

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

@@ -11,6 +11,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _fiber = require("@react-three/fiber");
 
+var _arcadeThreeCore = require("@gamelearn/arcade-three-core");
+
 var _drei = require("@react-three/drei");
 
 var _Panels = _interopRequireDefault(require("./Panels"));
@@ -33,15 +35,14 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-function Renderer(_ref) {
+var PanelsWrapper = function PanelsWrapper(_ref) {
   var characters = _ref.characters,
       slots = _ref.slots,
       slotRefs = _ref.slotRefs,
       flex = _ref.flex,
-      currentMessage = _ref.currentMessage,
-      lodSettings = _ref.lodSettings;
+      currentMessage = _ref.currentMessage;
 
-  var _useState = (0, _react.useState)(),
+  var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
       built = _useState2[0],
       finishBuild = _useState2[1];
@@ -51,8 +52,9 @@ function Renderer(_ref) {
     gl.setScissorTest(false);
     gl.clear(true, true);
     gl.setScissorTest(true);
-  }, 100);
+  });
   (0, _react.useEffect)(function () {
+    // let useFrame execute at least once
     finishBuild(true);
   }, []);
   return built ? /*#__PURE__*/_react.default.createElement(_Panels.default, {
@@ -60,32 +62,29 @@ function Renderer(_ref) {
     slots: slots,
     slotRefs: slotRefs,
     flex: flex,
-    activeIndex: currentMessage.position,
-    lodSettings: lodSettings
+    activeIndex: currentMessage.position
   }) : null;
-}
+};
 
 var Scene = function Scene(props) {
-  return /*#__PURE__*/_react.default.createElement(_fiber.Canvas, {
-    resize: {
-      scroll: false
-    },
+  return /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.Renderer, {
+    fullscreen: 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, {
+  }, /*#__PURE__*/_react.default.createElement(_react.Suspense, {
+    fallback: null
+  }, /*#__PURE__*/_react.default.createElement(PanelsWrapper, props), /*#__PURE__*/_react.default.createElement(_drei.Preload, {
     all: true
-  }));
+  })));
 };
 
 var _default = Scene;

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

@@ -15,14 +15,14 @@ var _three = require("three");
 
 var _GLTFLoader = require("three/examples/jsm/loaders/GLTFLoader");
 
+var _arcadeThreeCore = require("@gamelearn/arcade-three-core");
+
 var _SpeechBubbleComponent = _interopRequireDefault(require("./SpeechBubbleComponent"));
 
 var _decisionComponent = _interopRequireDefault(require("../../decision-component"));
 
 var _helpers = require("../../../helpers");
 
-var _HtmlPro = _interopRequireDefault(require("../../../helpers/HtmlPro"));
-
 var _deviceDetection = require("../../../helpers/deviceDetection");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -554,18 +554,23 @@ var DialogComponent = function DialogComponent(_ref) {
     height: '100vh',
     position: 'static'
   };
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, currentLine.decision ? /*#__PURE__*/_react.default.createElement(_HtmlPro.default, {
-    zIndexRange: [3, 3],
-    style: cleanStyle,
-    calculatePosition: function calculatePosition() {
-      return [0, 0];
-    }
-  }, /*#__PURE__*/_react.default.createElement(_decisionComponent.default, _extends({
-    inScene: true
-  }, decisionPayload))) : null, currentMessage.text ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("group", {
+
+  if (currentLine.decision) {
+    return /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.HtmlPro, {
+      zIndexRange: [3, 3],
+      style: cleanStyle,
+      calculatePosition: function calculatePosition() {
+        return [0, 0];
+      }
+    }, /*#__PURE__*/_react.default.createElement(_decisionComponent.default, _extends({
+      inScene: true
+    }, decisionPayload)));
+  }
+
+  return currentMessage.text ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("group", {
     ref: groupRef,
     position: messagePosition.current.pos
-  }, /*#__PURE__*/_react.default.createElement(_HtmlPro.default, {
+  }, /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.HtmlPro, {
     zIndexRange: [2, 2],
     calculatePosition: currentMessage.inScene ? undefined : function () {
       return [0, 0];
@@ -576,7 +581,7 @@ var DialogComponent = function DialogComponent(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_SpeechBubbleComponent.default, {
     ref: bubbleRef,
     message: currentMessage
-  }))), /*#__PURE__*/_react.default.createElement(_HtmlPro.default, {
+  }))), /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.HtmlPro, {
     style: {
       width: '100vw',
       height: '100vh'
@@ -601,7 +606,7 @@ var DialogComponent = function DialogComponent(_ref) {
     onClick: nextLine
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "icon-next"
-  }))))) : null);
+  }))))) : null;
 };
 
 var _default = DialogComponent;

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

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.mockScene = exports.mockProps = void 0;
 
-var _bg001_street = _interopRequireDefault(require("components/arcade-render/mocks/scenes/bg001_street.json"));
+var _bg001_street = _interopRequireDefault(require("test/mocks/bg001_street.json"));
 
-var _characters = require("components/arcade-render/mocks/scenes/characters.json");
+var _characters = require("test/mocks/characters.json");
 
 var _mocker = require("helpers/mocker");
 

package/dist/components/index.js

@@ -5,12 +5,6 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "AnimateElement", {
-  enumerable: true,
-  get: function get() {
-    return _AnimateElement.default;
-  }
-});
 Object.defineProperty(exports, "AnimationComponent", {
   enumerable: true,
   get: function get() {
@@ -23,12 +17,6 @@ Object.defineProperty(exports, "AutoEvaluationComponent", {
     return _autoEvaluationComponent.default;
   }
 });
-Object.defineProperty(exports, "Background", {
-  enumerable: true,
-  get: function get() {
-    return _background.default;
-  }
-});
 Object.defineProperty(exports, "CardsSelectorPuzzleComponent", {
   enumerable: true,
   get: function get() {
@@ -47,12 +35,6 @@ Object.defineProperty(exports, "ChainedImageClickPuzzleComponent", {
     return _chainedImageClickPuzzleComponent.default;
   }
 });
-Object.defineProperty(exports, "ClickableArea", {
-  enumerable: true,
-  get: function get() {
-    return _ClickableArea.default;
-  }
-});
 Object.defineProperty(exports, "ComicComponent", {
   enumerable: true,
   get: function get() {
@@ -95,18 +77,6 @@ Object.defineProperty(exports, "DragItemPuzzleComponent", {
     return _dragItemPuzzleComponent.default;
   }
 });
-Object.defineProperty(exports, "Element", {
-  enumerable: true,
-  get: function get() {
-    return _element.default;
-  }
-});
-Object.defineProperty(exports, "ElementList", {
-  enumerable: true,
-  get: function get() {
-    return _elementsList.default;
-  }
-});
 Object.defineProperty(exports, "FrameImageClickComponent", {
   enumerable: true,
   get: function get() {
@@ -191,18 +161,6 @@ Object.defineProperty(exports, "PdfVisor", {
     return _pdfComponent.PdfVisor;
   }
 });
-Object.defineProperty(exports, "Poster", {
-  enumerable: true,
-  get: function get() {
-    return _Poster.default;
-  }
-});
-Object.defineProperty(exports, "Scene", {
-  enumerable: true,
-  get: function get() {
-    return _scene.default;
-  }
-});
 Object.defineProperty(exports, "SurveyComponent", {
   enumerable: true,
   get: function get() {
@@ -264,20 +222,6 @@ Object.defineProperty(exports, "ZoomTest", {
   }
 });
 
-var _scene = _interopRequireDefault(require("./arcade-render/scene"));
-
-var _elementsList = _interopRequireDefault(require("./arcade-render/elements-list"));
-
-var _ClickableArea = _interopRequireDefault(require("./arcade-render/elements-list/ClickableArea"));
-
-var _Poster = _interopRequireDefault(require("./arcade-render/elements-list/Poster"));
-
-var _background = _interopRequireDefault(require("./arcade-render/background"));
-
-var _element = _interopRequireDefault(require("./arcade-render/element"));
-
-var _AnimateElement = _interopRequireDefault(require("./arcade-render/element/AnimateElement"));
-
 var _noticeComponent = _interopRequireDefault(require("./notice-component"));
 
 var _inventoryItem = _interopRequireDefault(require("./inventory-item"));

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

@@ -9,18 +9,16 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _drei = require("@react-three/drei");
+
 var _fiber = require("@react-three/fiber");
 
-var _drei = require("@react-three/drei");
+var _arcadeThreeCore = require("@gamelearn/arcade-three-core");
 
 var _helpers = require("../../../helpers");
 
-var _element = _interopRequireDefault(require("../../arcade-render/element"));
-
 var _LightSet = _interopRequireDefault(require("../../../helpers/LightSet"));
 
-var _drawLOD = _interopRequireDefault(require("../../../helpers/drawLOD"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -44,7 +42,6 @@ var InventoryItem = function InventoryItem(_ref) {
       description = _ref.description,
       element = _ref.element,
       onFinish = _ref.onFinish,
-      lodSettings = _ref.lodSettings,
       soundActions = _ref.soundActions;
   var orbit = (0, _react.useRef)();
 
@@ -69,7 +66,6 @@ var InventoryItem = function InventoryItem(_ref) {
       camera.fov = 35;
       camera.updateProjectionMatrix();
       (0, _helpers.cameraFitAnyObject)(model, camera, null, orbit.current);
-      (0, _drawLOD.default)(scene, camera, lodSettings);
     }
   };
 
@@ -94,9 +90,9 @@ var InventoryItem = function InventoryItem(_ref) {
     mode: "concurrent",
     shadows: true,
     onCreated: handleOnCreate
-  }, /*#__PURE__*/_react.default.createElement(_LightSet.default, null), /*#__PURE__*/_react.default.createElement(_react.Suspense, {
-    fallback: null
-  }, element ? /*#__PURE__*/_react.default.createElement(_element.default, {
+  }, /*#__PURE__*/_react.default.createElement(_LightSet.default, null), /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.LodWrapper, {
+    lod: "divideby16"
+  }, /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.StaticResource, {
     key: "".concat(element.uid),
     url: element.url,
     position: [0, 0, 0],
@@ -105,7 +101,7 @@ var InventoryItem = function InventoryItem(_ref) {
     material: element.material || {},
     name: element.name,
     onLoad: onLoad
-  }) : null), /*#__PURE__*/_react.default.createElement(_drei.OrbitControls, {
+  })), /*#__PURE__*/_react.default.createElement(_drei.OrbitControls, {
     ref: orbit,
     enableKeys: false,
     enableZoom: false,

package/dist/components/inventory-item/mocks/mockForStory.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.mockProps = exports.default = void 0;
 
-var _mocker = require("helpers/mocker");
+var _characters = require("test/mocks/characters.json");
 
-var _mocks = require("../../arcade-render/mocks");
+var _mocker = require("helpers/mocker");
 
 var mockProps = {
   emitEvent: _mocker.emitEvent,
@@ -18,7 +18,7 @@ var mockProps = {
   name: 'Avocado',
   description: 'El que tengo aqui condimentado',
   element: {
-    url: _mocks.taxi,
+    url: _characters.elements[5].url,
     type: 'object',
     position: [0, -5, 0],
     rotation: [0, 0, 0],

package/dist/components/login-puzzle-component/components/LoginPuzzleComponent.js

@@ -90,13 +90,18 @@ var LoginPuzzleComponent = function LoginPuzzleComponent(_ref) {
       errorMessage = _useState14[0],
       setErrorMessage = _useState14[1];
 
+  var _useState15 = (0, _react.useState)(false),
+      _useState16 = _slicedToArray(_useState15, 2),
+      showCorrectSolution = _useState16[0],
+      setCorrectSolution = _useState16[1];
+
   var _soundActions = _slicedToArray(soundActions, 1),
       playSound = _soundActions[0];
 
-  var _useState15 = (0, _react.useState)([]),
-      _useState16 = _slicedToArray(_useState15, 2),
-      accRewards = _useState16[0],
-      setRewards = _useState16[1];
+  var _useState17 = (0, _react.useState)([]),
+      _useState18 = _slicedToArray(_useState17, 2),
+      accRewards = _useState18[0],
+      setRewards = _useState18[1];
 
   var imgURL = ((_image$img = image.img) === null || _image$img === void 0 ? void 0 : _image$img.url) || imagenPorDefecto;
 
@@ -149,14 +154,19 @@ var LoginPuzzleComponent = function LoginPuzzleComponent(_ref) {
   };
 
   (0, _react.useEffect)(function () {
+    var timeout;
     setResolveAction(function () {
       var rewardsData = [].concat(_toConsumableArray(accRewards), _toConsumableArray(info.resolve.rewards));
-      emitEvent({
-        type: 'hidePuzzleButtons',
-        payload: false
-      });
-      setShowPoints(rewardsData);
+      setCorrectSolution(true);
+      timeout = setTimeout(function () {
+        emitEvent({
+          type: 'hidePuzzleButtons',
+          payload: false
+        });
+        setShowPoints(rewardsData);
+      }, 2000);
     });
+    if (timeout) clearTimeout(timeout);
   }, [accRewards, info.resolve.rewards, emitEvent, setShowPoints, setResolveAction]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "puzzle--layer",
@@ -173,7 +183,14 @@ var LoginPuzzleComponent = function LoginPuzzleComponent(_ref) {
     className: "puzzle--login__label"
   }, translate('puzzle.user')), /*#__PURE__*/_react.default.createElement("div", {
     className: "puzzle--login__group"
-  }, /*#__PURE__*/_react.default.createElement("input", {
+  }, showCorrectSolution ? /*#__PURE__*/_react.default.createElement("input", {
+    disabled: finished,
+    "data-testid": "username",
+    className: "puzzle--login__input ".concat(successClass),
+    type: "text",
+    placeholder: user,
+    value: user
+  }) : /*#__PURE__*/_react.default.createElement("input", {
     disabled: finished,
     "data-testid": "username",
     className: "puzzle--login__input ".concat(successClass),
@@ -188,9 +205,16 @@ var LoginPuzzleComponent = function LoginPuzzleComponent(_ref) {
     className: "icon-circle-check"
   }, " "))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
     className: "puzzle--login__label"
-  }, /*#__PURE__*/_react.default.createElement("span", null, translate('puzzle.password'))), /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("span", null, translate('puzzle.password'), " ", password)), /*#__PURE__*/_react.default.createElement("div", {
     className: "puzzle--login__group"
-  }, /*#__PURE__*/_react.default.createElement("input", {
+  }, showCorrectSolution ? /*#__PURE__*/_react.default.createElement("input", {
+    disabled: finished,
+    "data-testid": "password",
+    className: "puzzle--login__input puzzle--login__input--fakepassword ".concat(successClass),
+    type: "text",
+    placeholder: password,
+    value: password
+  }) : /*#__PURE__*/_react.default.createElement("input", {
     disabled: finished,
     "data-testid": "password",
     className: "puzzle--login__input puzzle--login__input--fakepassword ".concat(successClass),
@@ -208,9 +232,9 @@ var LoginPuzzleComponent = function LoginPuzzleComponent(_ref) {
       setSuccessClass('');
       setErrorMessage(false);
     }
-  }), /*#__PURE__*/_react.default.createElement("div", {
+  }), !showCorrectSolution ? /*#__PURE__*/_react.default.createElement("div", {
     className: "login-fakepassword".concat(inputPasswordFocus ? ' login-fakepassword--focus' : '').concat(fakeHashes.length ? ' login-fakepassword--fill' : '', " ").concat(successClass || '')
-  }, inputPassword ? fakeHashes : translate('puzzle.password')), /*#__PURE__*/_react.default.createElement("span", {
+  }, inputPassword ? fakeHashes : translate('puzzle.password')) : null, /*#__PURE__*/_react.default.createElement("span", {
     className: "icon-circle-check"
   }, " ")))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("button", {
     type: "button",

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

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.mockProps = exports.default = void 0;
 
-var _bg001_street = _interopRequireDefault(require("../../arcade-render/mocks/scenes/bg001_street.json"));
+var _bg001_street = _interopRequireDefault(require("test/mocks/bg001_street.json"));
 
-var _characters = require("../../arcade-render/mocks/scenes/characters.json");
+var _characters = require("test/mocks/characters.json");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 

package/dist/test/testSceneWrapper.js

@@ -7,15 +7,11 @@ exports.mockScene = exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _scene = _interopRequireDefault(require("components/arcade-render/scene"));
+var _arcadeThreeCore = require("@gamelearn/arcade-three-core");
 
-var _background = _interopRequireDefault(require("components/arcade-render/background"));
+var _bg001_street = _interopRequireDefault(require("./mocks/bg001_street.json"));
 
-var _elementsList = _interopRequireDefault(require("components/arcade-render/elements-list"));
-
-var _bg001_street = _interopRequireDefault(require("components/arcade-render/mocks/scenes/bg001_street.json"));
-
-var _characters = require("components/arcade-render/mocks/scenes/characters.json");
+var _characters = require("./mocks/characters.json");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -23,21 +19,20 @@ var mockScene = {
   background: _bg001_street.default,
   elements: _characters.elements,
   scene: {
-    sceneChanged: true,
-    loadingText: 'Cargando... {percent}%',
-    hasControls: false
+    loadingText: 'Cargando... {percent}%'
   }
 };
 exports.mockScene = mockScene;
 
 var SceneWrapper = function SceneWrapper(_ref) {
   var children = _ref.children;
-  return /*#__PURE__*/_react.default.createElement(_scene.default, mockScene.scene, /*#__PURE__*/_react.default.createElement(_background.default, {
-    data: mockScene.background
-  }), /*#__PURE__*/_react.default.createElement(_elementsList.default, {
-    elements: mockScene.elements,
-    eventHandler: function eventHandler() {}
-  }), children);
+  return /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.Renderer, mockScene.scene, /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.Debugger, null), /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.LodWrapper, {
+    progressive: true
+  }, /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.BackgroundWrapper, {
+    objects: Object.values(mockScene.background)
+  }), /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.ElementsWrapper, {
+    elements: _characters.elements
+  }), children));
 };
 
 var _default = SceneWrapper;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@gamelearn/arcade-components",
   "license": "Gamelearn",
-  "version": "1.0.0",
+  "version": "1.0.3",
   "main": "dist/index.js",
   "files": [
     "dist",
@@ -12,9 +12,9 @@
     "url": "https://github.com/gamelearn/arcade-components"
   },
   "dependencies": {
-    "@react-three/drei": "^7.8.6",
-    "@react-three/fiber": "^7.0.7",
-    "@react-three/postprocessing": "^2.0.5",
+    "@gamelearn/arcade-three-core": "^0.2.6",
+    "@react-three/drei": "^7.20.0",
+    "@react-three/fiber": "^7.0.17",
     "@testing-library/jest-dom": "5.11.4",
     "@testing-library/react": "11.1.0",
     "@testing-library/user-event": "12.1.10",
@@ -29,7 +29,7 @@
     "react-pdf": "5.2.0",
     "react-promise-suspense": "0.3.3",
     "react-typist": "^2.0.5",
-    "three": "^0.132.2",
+    "three": "0.132.2",
     "web-vitals": "0.2.4"
   },
   "scripts": {
@@ -95,4 +95,4 @@
       "^react-konva-utils$": "react-pdf/dist/umd/entry.jest"
     }
   }
-}
+}

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

@@ -1,24 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _sceneElements = _interopRequireDefault(require("./scene-elements"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var Background = function Background(_ref) {
-  var _ref$data = _ref.data,
-      data = _ref$data === void 0 ? {} : _ref$data;
-  if (Object.keys(data).length === 0) return null;
-  return /*#__PURE__*/_react.default.createElement(_sceneElements.default, {
-    objects: Object.values(data)
-  });
-};
-
-var _default = Background;
-exports.default = _default;