@gamelearn/arcade-components 0.25.2 → 0.25.4

package/README.md

@@ -57,13 +57,15 @@ Cómo solución alternativa podemos instalar `yalc` que permite publicar el paqu
 ```bash
 yarn global add yalc
 ```
+Si teneis problemas instalándolo en global :
+yarn global add yalc --prefix /usr/local
 
 Para generar el paquete en el store local:
 
 ```bash
 yarn
 yarn compile
-yalc publish
+yalc publish o yarn yalc publish
 ```
 
 Después, en el repositorio de `arcade` tendremos que linkar el paquete generado de la siguiente forma:

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

@@ -82,7 +82,10 @@ var SceneElements = function SceneElements(_ref) {
       return /*#__PURE__*/_react.default.createElement(_drei.PerspectiveCamera, _extends({
         makeDefault: object.defaultCamera
       }, object, {
-        key: object.name
+        key: object.name,
+        onUpdate: function onUpdate(self) {
+          self.layers.enableAll();
+        }
       }));
     } //lights
 

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

@@ -1,13 +1,11 @@
 "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 _react = _interopRequireDefault(require("react"));
 
 var _element = _interopRequireDefault(require("../element"));
 
@@ -15,14 +13,8 @@ var _Poster = _interopRequireDefault(require("./Poster"));
 
 var _ClickableArea = _interopRequireDefault(require("./ClickableArea"));
 
-var _fiber = require("@react-three/fiber");
-
 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 _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; }
@@ -63,12 +55,6 @@ var ElementsList = function ElementsList(_ref) {
     });
   };
 
-  var camera = (0, _fiber.useThree)(function (state) {
-    return state.camera;
-  });
-  (0, _react.useLayoutEffect)(function () {
-    camera.layers.enableAll();
-  }, [camera]);
   return /*#__PURE__*/_react.default.createElement("group", {
     name: "CLICKABLE_ELEMENTS"
   }, elements === null || elements === void 0 ? void 0 : elements.map(function (_ref3) {

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

@@ -62,9 +62,12 @@ var Scene = function Scene(_ref) {
       showLoad = _useState2[0],
       setShowLoad = _useState2[1];
 
+  var orbit = (0, _react.useRef)();
+
   var handleOnCreate = function handleOnCreate(_ref2) {
     var gl = _ref2.gl,
-        raycaster = _ref2.raycaster;
+        raycaster = _ref2.raycaster,
+        camera = _ref2.camera;
     raycaster.layers.set(1);
     gl.outputEncoding = 3001;
     gl.gammaFactor = 2.2;
@@ -72,6 +75,7 @@ var Scene = function Scene(_ref) {
     gl.setPixelRatio(window.devicePixelRatio);
     gl.setSize(window.innerWidth, window.innerHeight);
     gl.physicallyCorrectLights = true;
+    camera.layers.enableAll();
   };
 
   var onFinish = function onFinish() {
@@ -114,7 +118,9 @@ var Scene = function Scene(_ref) {
     lodSettings: lodSettings
   }), 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", {
+  })), has3Stats && /*#__PURE__*/_react.default.createElement(_drei.Stats, null), hasControls && /*#__PURE__*/_react.default.createElement(_drei.OrbitControls, {
+    ref: orbit
+  })), /*#__PURE__*/_react.default.createElement("div", {
     id: "elements-projection"
   }));
 };

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

@@ -17,10 +17,20 @@ var _three = require("three");
 
 var _GLTFLoader = require("three/examples/jsm/loaders/GLTFLoader");
 
+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 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."); }
@@ -37,6 +47,7 @@ var DialogComponent = function DialogComponent(_ref) {
   var emitEvent = _ref.emitEvent,
       lines = _ref.lines,
       actors = _ref.actors,
+      soundActions = _ref.soundActions,
       enableZoom = _ref.enableZoom;
 
   var _useState = (0, _react.useState)(0),
@@ -68,10 +79,12 @@ var DialogComponent = function DialogComponent(_ref) {
   var currentLine = lines[line];
   var lastLine = lines[line - 1];
   var resetAnims = (0, _react.useCallback)(function (end) {
-    var slottedCharacters = currentLine.slots.filter(function (slot) {
+    var _currentLine$slots, _lastLine$slots;
+
+    var slottedCharacters = (_currentLine$slots = currentLine.slots) === null || _currentLine$slots === void 0 ? void 0 : _currentLine$slots.filter(function (slot) {
       return slot.uid;
     });
-    var lastSlotterCharacters = lastLine === null || lastLine === void 0 ? void 0 : lastLine.slots.filter(function (slot) {
+    var lastSlotterCharacters = lastLine === null || lastLine === void 0 ? void 0 : (_lastLine$slots = lastLine.slots) === null || _lastLine$slots === void 0 ? void 0 : _lastLine$slots.filter(function (slot) {
       return slot.uid;
     });
 
@@ -99,28 +112,35 @@ var DialogComponent = function DialogComponent(_ref) {
       }
     });
   }, [lastLine === null || lastLine === void 0 ? void 0 : lastLine.slots, currentLine, scene]);
+  var nextLine = (0, _react.useCallback)(function () {
+    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);
+    }
+  }, [camera, emitEvent, line, lines.length, resetAnims]);
   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);
-      }
+      nextLine();
     }
-  }, [line, lines, camera, resetAnims, emitEvent]);
+  }, [nextLine]);
   (0, _react.useEffect)(function () {
+    setCurrentMessage({
+      text: ''
+    });
+    if (currentLine.decision) return;
     var talkingCharacter = currentLine.slots.find(function (slot) {
       return slot.talking;
     });
@@ -178,7 +198,22 @@ var DialogComponent = function DialogComponent(_ref) {
       }
     }
   });
-  return currentMessage.text ? /*#__PURE__*/_react.default.createElement(_drei.Html, {
+
+  var decisionPayload = _objectSpread(_objectSpread({}, currentLine.payload), {}, {
+    onFinish: nextLine,
+    emitEvent: emitEvent,
+    soundActions: soundActions
+  });
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, currentLine.decision ? /*#__PURE__*/_react.default.createElement(_drei.Html, {
+    style: {
+      width: '100vw',
+      height: '100vh'
+    },
+    calculatePosition: function calculatePosition() {
+      return [0, 0];
+    }
+  }, /*#__PURE__*/_react.default.createElement(_decisionComponent.default, decisionPayload)) : null, currentMessage.text ? /*#__PURE__*/_react.default.createElement(_drei.Html, {
     position: messagePosition.current,
     zIndexRange: [3, 0],
     sprite: true
@@ -203,7 +238,7 @@ var DialogComponent = function DialogComponent(_ref) {
       wordWrap: 'break-word',
       overflow: 'auto'
     }
-  }, currentMessage.text))) : null;
+  }, currentMessage.text))) : null);
 };
 
 var _default = DialogComponent;

package/dist/components/index.js

@@ -23,6 +23,18 @@ Object.defineProperty(exports, "Background", {
     return _background.default;
   }
 });
+Object.defineProperty(exports, "Element", {
+  enumerable: true,
+  get: function get() {
+    return _element.default;
+  }
+});
+Object.defineProperty(exports, "AnimateElement", {
+  enumerable: true,
+  get: function get() {
+    return _AnimateElement.default;
+  }
+});
 Object.defineProperty(exports, "NoticeComponent", {
   enumerable: true,
   get: function get() {
@@ -240,6 +252,10 @@ var _elementsList = _interopRequireDefault(require("./arcade-render/elements-lis
 
 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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@gamelearn/arcade-components",
   "license": "Gamelearn",
-  "version": "0.25.2",
+  "version": "0.25.4",
   "main": "dist/index.js",
   "files": [
     "dist",
@@ -14,9 +14,11 @@
   "dependencies": {
     "@react-three/drei": "^7.8.0",
     "@react-three/fiber": "^7.0.2",
+    "@react-three/postprocessing": "^2.0.5",
     "@testing-library/jest-dom": "5.11.4",
     "@testing-library/react": "11.1.0",
     "@testing-library/user-event": "12.1.10",
+    "global": "^4.4.0",
     "hls.js": "0.12.4",
     "html-react-parser": "^0.10.2",
     "interactjs": "^1.10.11",