@gamelearn/arcade-components 2.1.0 → 2.2.0

package/dist/components/chained-image-click-puzzle-component/components/CurrentImagePuzzle.js

@@ -57,7 +57,8 @@ var CurrentImageClickPuzzle = function CurrentImageClickPuzzle(_ref) {
       setResolveAction = _ref.setResolveAction,
       soundActions = _ref.soundActions,
       setSelected = _ref.setSelected,
-      selected = _ref.selected;
+      selected = _ref.selected,
+      pause = _ref.pause;
   var accRewards = (0, _react.useRef)([]);
   var correctClicked = (0, _react.useRef)(0);
   var currentSelected = (0, _react.useRef)(0);
@@ -202,7 +203,8 @@ var CurrentImageClickPuzzle = function CurrentImageClickPuzzle(_ref) {
     emitEvent: emitEvent,
     disableExit: disableExit,
     soundActions: soundActions,
-    setResolveAction: setResolveAction
+    setResolveAction: setResolveAction,
+    pause: pause
   }));
 };
 

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

@@ -62,6 +62,7 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
   var _background$img, _currentLineData$slot3, _currentMessage$text;
 
   var emitEvent = _ref.emitEvent,
+      pause = _ref.pause,
       lines = _ref.lines,
       edges = _ref.edges,
       characters = _ref.characters,
@@ -182,7 +183,8 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
     actors: actors,
     currentMessage: currentMessage || {},
     slots: !isVoiceOver ? currentLineData.slots : voiceOverSlots,
-    flex: isFlex
+    flex: isFlex,
+    pause: pause
   }; // Recupera la antigua linea de la conversacion para conservar los personajes en voice-over
 
   var leftWithSlots = lines.slice(0, currentLine + 1).reverse().find(function (line) {
@@ -382,7 +384,7 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
     handleClickBack();
   };
 
-  var autoplayCond = automatic && !isDecision;
+  var autoplayCond = automatic && !isDecision && !pause;
   var disableBackButton = currentLine === 0 || previousLineWasDecision();
   (0, _useEkho.default)({
     audioType: currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audioType,
@@ -393,6 +395,7 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
     audio: currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audio,
     soundActions: soundActions,
     emitEvent: emitEvent,
+    pause: pause,
     onStart: function onStart() {
       var _currentMessage$emoti;
 

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

@@ -29,7 +29,8 @@ var SlotList = function SlotList(_ref) {
       currentMessage = _ref.currentMessage,
       flex = _ref.flex,
       slots = _ref.slots,
-      children = _ref.children;
+      children = _ref.children,
+      pause = _ref.pause;
 
   var characterProps = function characterProps(_ref2) {
     var character = _ref2.character,
@@ -144,7 +145,8 @@ var SlotList = function SlotList(_ref) {
     flex: flex,
     currentMessage: currentMessage,
     lodSettings: lodSettings,
-    ttsStarted: ttsStarted
+    ttsStarted: ttsStarted,
+    pause: pause
   }), children || /*#__PURE__*/_react.default.createElement(Slots, null));
 };
 

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

@@ -29,6 +29,18 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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 == null ? null : 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 isMobile = (0, _deviceDetection.DeviceDetection)();
 var defaultCamPos = [0, 14.63, 16];
 
@@ -41,6 +53,12 @@ function Panel(_ref) {
   var cameraRef = (0, _react.useRef)(null);
   var sceneRef = (0, _react.useRef)(null);
   var isCharacter = character.type === 'character';
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      talking = _useState2[0],
+      setTalking = _useState2[1];
+
   var model = (0, _react.useRef)();
   var defaultClip = (0, _react.useRef)();
   var emotion = (0, _react.useMemo)(function () {
@@ -58,27 +76,36 @@ function Panel(_ref) {
 
     return {};
   }, [character.emotion, character === null || character === void 0 ? void 0 : (_character$resource4 = character.resource) === null || _character$resource4 === void 0 ? void 0 : _character$resource4.animations, isCharacter]);
+  var resetAnimation = (0, _react.useCallback)(function () {
+    var _model$current$userDa = model.current.userData,
+        mixer = _model$current$userDa.mixer,
+        defaultAnim = _model$current$userDa.defaultAnim,
+        emotionClip = _model$current$userDa.emotionClip;
+
+    if (defaultAnim && emotionClip) {
+      var emotionAction = mixer.clipAction(emotionClip, model.current);
+      var defaultAction = mixer.clipAction(defaultAnim, model.current);
+      mixer.stopAllAction();
+      (0, _helpers.executeCrossFade)(emotionAction, defaultAction);
+      setTalking(false);
+    }
+  }, []);
   (0, _react.useEffect)(function () {
-    if (model.current && active) {
-      if (ttsStarted) {
-        var _character$resource5, _character$resource5$, _character$resource5$2;
-
-        (0, _helpers.executeTalkingAnimation)(model.current, character === null || character === void 0 ? void 0 : (_character$resource5 = character.resource) === null || _character$resource5 === void 0 ? void 0 : (_character$resource5$ = _character$resource5.animations) === null || _character$resource5$ === void 0 ? void 0 : (_character$resource5$2 = _character$resource5$.talking) === null || _character$resource5$2 === void 0 ? void 0 : _character$resource5$2.url);
-      } else {
-        var _model$current$userDa = model.current.userData,
-            mixer = _model$current$userDa.mixer,
-            defaultAnim = _model$current$userDa.defaultAnim,
-            emotionClip = _model$current$userDa.emotionClip;
-
-        if (defaultAnim && emotionClip) {
-          var emotionAction = mixer.clipAction(emotionClip, model.current);
-          var defaultAction = mixer.clipAction(defaultAnim, model.current);
-          mixer.stopAllAction();
-          (0, _helpers.executeCrossFade)(emotionAction, defaultAction);
+    if (model.current) {
+      if (active) {
+        if (ttsStarted) {
+          var _character$resource5, _character$resource5$, _character$resource5$2;
+
+          (0, _helpers.executeTalkingAnimation)(model.current, character === null || character === void 0 ? void 0 : (_character$resource5 = character.resource) === null || _character$resource5 === void 0 ? void 0 : (_character$resource5$ = _character$resource5.animations) === null || _character$resource5$ === void 0 ? void 0 : (_character$resource5$2 = _character$resource5$.talking) === null || _character$resource5$2 === void 0 ? void 0 : _character$resource5$2.url);
+          setTalking(true);
+        } else {
+          resetAnimation();
         }
+      } else if (talking) {
+        resetAnimation();
       }
     }
-  }, [character === null || character === void 0 ? void 0 : (_character$resource6 = character.resource) === null || _character$resource6 === void 0 ? void 0 : (_character$resource6$ = _character$resource6.animations) === null || _character$resource6$ === void 0 ? void 0 : (_character$resource6$2 = _character$resource6$.talking) === null || _character$resource6$2 === void 0 ? void 0 : _character$resource6$2.url, ttsStarted, active]);
+  }, [character === null || character === void 0 ? void 0 : (_character$resource6 = character.resource) === null || _character$resource6 === void 0 ? void 0 : (_character$resource6$ = _character$resource6.animations) === null || _character$resource6$ === void 0 ? void 0 : (_character$resource6$2 = _character$resource6$.talking) === null || _character$resource6$2 === void 0 ? void 0 : _character$resource6$2.url, ttsStarted, active, resetAnimation, talking]);
   var onLoadElement = (0, _react.useCallback)(function (object) {
     if (cameraRef.current) {
       var boundingBox = new _three.Box3();

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

@@ -79,8 +79,13 @@ var Scene = function Scene(props) {
       var gl = _ref3.gl;
       gl.setClearColor('white', 0);
       gl.physicallyCorrectLights = true;
+    },
+    frameloop: "demand"
+  }, /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.SettingsController, {
+    current: {
+      animate: props.pause
     }
-  }, /*#__PURE__*/_react.default.createElement(_react.Suspense, {
+  }), /*#__PURE__*/_react.default.createElement(_react.Suspense, {
     fallback: null
   }, /*#__PURE__*/_react.default.createElement(PanelsWrapper, props)));
 };

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

@@ -87,7 +87,8 @@ var DialogComponent = function DialogComponent(_ref) {
       edges = _ref.edges,
       soundActions = _ref.soundActions,
       zoomInActor = _ref.zoomInActor,
-      autoPlay = _ref.autoPlay;
+      autoPlay = _ref.autoPlay,
+      pause = _ref.pause;
 
   var _useState = (0, _react.useState)(0),
       _useState2 = _slicedToArray(_useState, 2),
@@ -639,6 +640,7 @@ var DialogComponent = function DialogComponent(_ref) {
     audio: currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audio,
     soundActions: soundActions,
     emitEvent: emitEvent,
+    pause: pause,
     onStart: function onStart() {
       var _talkingCharacter$emo;
 
@@ -651,7 +653,7 @@ var DialogComponent = function DialogComponent(_ref) {
     onFinish: function onFinish() {
       startTalking(false);
 
-      if (autoPlayCond) {
+      if (autoPlayCond && !pause) {
         nextLine();
       }
     }
@@ -675,7 +677,7 @@ var DialogComponent = function DialogComponent(_ref) {
   }, [audioFailed, currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audioType, talkingCharacter === null || talkingCharacter === void 0 ? void 0 : talkingCharacter.emotion, currentMessage]); // Autoplay logic
 
   (0, _react.useEffect)(function () {
-    if (autoPlayCond && currentMessage.show && ((currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audioType) === 'none' || audioFailed)) {
+    if (autoPlayCond && currentMessage.show && ((currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audioType) === 'none' || audioFailed) && !pause) {
       var _currentMessage$text2;
 
       var time = characterMs * ((currentMessage === null || currentMessage === void 0 ? void 0 : (_currentMessage$text2 = currentMessage.text) === null || _currentMessage$text2 === void 0 ? void 0 : _currentMessage$text2.length) || 0); // if it's not last node
@@ -817,6 +819,7 @@ var DialogComponent = function DialogComponent(_ref) {
       branched: isBranched,
       onFinish: nextLine,
       emitEvent: emitEvent,
+      pause: pause,
       soundActions: soundActions
     });
 

package/dist/components/frame-click-puzzle-component/components/CurrentFramePuzzle.js

@@ -61,7 +61,8 @@ var CurrentFramePuzzle = function CurrentFramePuzzle(_ref) {
       firstTryForFrame = _ref.firstTryForFrame,
       setPuzzlesAutoCompleted = _ref.setPuzzlesAutoCompleted,
       puzzlesAutoCompleted = _ref.puzzlesAutoCompleted,
-      emitOpenPopupCounterInfo = _ref.emitOpenPopupCounterInfo;
+      emitOpenPopupCounterInfo = _ref.emitOpenPopupCounterInfo,
+      pause = _ref.pause;
 
   var _soundActions = _slicedToArray(soundActions, 1),
       playSound = _soundActions[0];
@@ -194,7 +195,8 @@ var CurrentFramePuzzle = function CurrentFramePuzzle(_ref) {
     emitResetPuzzle: handleResetPuzzle,
     firstTryForFrame: firstTryForFrame,
     puzzlesAutoCompleted: puzzlesAutoCompleted,
-    emitOpenPopupCounterInfo: emitOpenPopupCounterInfo
+    emitOpenPopupCounterInfo: emitOpenPopupCounterInfo,
+    pause: pause
   }));
 };
 

package/dist/components/frame-click-puzzle-component/components/FrameClickPuzzleComponent.js

@@ -48,7 +48,8 @@ var FrameImageClickComponent = function FrameImageClickComponent(_ref) {
       soundActions = _ref.soundActions,
       disableExit = _ref.disableExit,
       setResolveAction = _ref.setResolveAction,
-      setInfo = _ref.setInfo;
+      setInfo = _ref.setInfo,
+      pause = _ref.pause;
 
   var _useState = (0, _react.useState)({}),
       _useState2 = _slicedToArray(_useState, 2),
@@ -161,7 +162,8 @@ var FrameImageClickComponent = function FrameImageClickComponent(_ref) {
     emitResetPuzzle: resetPuzzle,
     setPuzzlesAutoCompleted: setPuzzlesAutoCompleted,
     puzzlesAutoCompleted: puzzlesAutoCompleted,
-    emitOpenPopupCounterInfo: onInitPuzzle
+    emitOpenPopupCounterInfo: onInitPuzzle,
+    pause: pause
   };
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "puzzle-frame"

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

@@ -88,7 +88,8 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
       emitResetPuzzle = props.emitResetPuzzle,
       firstTryForFrame = props.firstTryForFrame,
       puzzlesAutoCompleted = props.puzzlesAutoCompleted,
-      emitOpenPopupCounterInfo = props.emitOpenPopupCounterInfo;
+      emitOpenPopupCounterInfo = props.emitOpenPopupCounterInfo,
+      pause = props.pause;
 
   var _useState = (0, _react.useState)([]),
       _useState2 = _slicedToArray(_useState, 2),
@@ -167,6 +168,13 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
       shape: 'poly'
     }, area);
   });
+  (0, _react.useEffect)(function () {
+    if (pause) {
+      clearInterval(intervalForCountDown.current);
+    } else {
+      startCountDown();
+    }
+  }, [pause, startCountDown]);
   var startCountDown = (0, _react.useCallback)(function () {
     var timeout = setInterval(function () {
       setCountDownTime(function (t) {

package/dist/components/test-component/components/Container.js

@@ -47,7 +47,8 @@ var Container = function Container(_ref) {
       updateForm = _ref.updateForm,
       disabled = _ref.disabled,
       translate = _ref.translate,
-      soundActions = _ref.soundActions;
+      soundActions = _ref.soundActions,
+      paused = _ref.paused;
 
   var _useState = (0, _react.useState)(0),
       _useState2 = _slicedToArray(_useState, 2),
@@ -65,7 +66,7 @@ var Container = function Container(_ref) {
       play = _soundActions[0];
 
   (0, _react.useEffect)(function () {
-    if (time >= 0 && !disabled) {
+    if (time >= 0 && !disabled && !paused) {
       var timeout = setInterval(function () {
         if (!feedback) {
           setTime(function (t) {
@@ -80,7 +81,7 @@ var Container = function Container(_ref) {
     }
 
     return undefined;
-  }, [disabled, feedback, saveInterval, setTime, time]);
+  }, [disabled, feedback, paused, saveInterval, setTime, time]);
 
   var nextPage = function nextPage() {
     play('click-ui');

package/dist/components/test-component/components/TestComponent.js

@@ -52,7 +52,8 @@ var TestComponent = function TestComponent(_ref) {
       emitEvent = _ref.emitEvent,
       soundActions = _ref.soundActions,
       audio = _ref.audio,
-      required = _ref.required;
+      required = _ref.required,
+      pause = _ref.pause;
   var questions = test.questions;
   var indicators = emitEvent({
     type: 'loadIndicators'
@@ -255,6 +256,7 @@ var TestComponent = function TestComponent(_ref) {
     tries: tries,
     answerPage: answerPage,
     setTime: setTime,
+    paused: pause,
     saveInterval: saveInterval,
     disabled: view !== 'test',
     answered: answeredPage || view !== 'test',

package/dist/helpers/index.js

@@ -30,7 +30,7 @@ exports.yAxis = yAxis;
 var zAxis = new _three.Vector3(0, 0, 1);
 exports.zAxis = zAxis;
 var crossFadeDuration = 0.2;
-var bones = ['Jaw_M', 'Head_M', 'L_lip_jnt', 'R_lip_jnt', 'joint4', 'transform1', 'lowerTeeths', 'upperTeeths'];
+var bones = ['Jaw_M', 'Head_M', 'L_lip_jnt', 'HeadEnd_M', 'Neck_M', 'R_lip_jnt', 'joint4', 'transform1', 'lowerTeeths', 'upperTeeths'];
 var loader = new _GLTFLoader.GLTFLoader();
 
 var formatMessage = function formatMessage(text) {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@gamelearn/arcade-components",
   "author": "Gamelearn",
   "license": "unlicense",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "main": "dist/index.js",
   "files": [
     "dist",
@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@gamelearn/arcade-styles": "2.1.0",
+    "@gamelearn/arcade-styles": "2.1.1",
     "@gamelearn/arcade-three-core": "1.17.1",
     "@react-three/drei": "9.4.3",
     "@react-three/fiber": "8.0.17",