@gamelearn/arcade-components 1.10.1 → 1.11.0

package/dist/components/comic-component/components/ComicComponent.js

@@ -9,6 +9,8 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _useTimeout2 = _interopRequireDefault(require("../../../helpers/useTimeout"));
+
 var _Slide = _interopRequireDefault(require("./Slide"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -29,48 +31,82 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+var characterMs = 250;
+
 var ComicComponent = function ComicComponent(_ref) {
   var slides = _ref.slides,
       emitEvent = _ref.emitEvent,
       _ref$soundActions = _ref.soundActions,
-      soundActions = _ref$soundActions === void 0 ? [function () {}, function () {}] : _ref$soundActions;
+      soundActions = _ref$soundActions === void 0 ? [function () {}, function () {}] : _ref$soundActions,
+      autoPlay = _ref.autoPlay;
 
-  var _useState = (0, _react.useState)(0),
+  var _useState = (0, _react.useState)(!!autoPlay),
       _useState2 = _slicedToArray(_useState, 2),
-      slideCount = _useState2[0],
-      setCount = _useState2[1];
+      automatic = _useState2[0],
+      setAutomatic = _useState2[1];
+
+  var _useTimeout = (0, _useTimeout2.default)(),
+      start = _useTimeout.start,
+      stop = _useTimeout.stop;
 
-  var _useState3 = (0, _react.useState)('slide-animation'),
+  var _useState3 = (0, _react.useState)(0),
       _useState4 = _slicedToArray(_useState3, 2),
-      slideTransition = _useState4[0],
-      setTransition = _useState4[1];
+      slideCount = _useState4[0],
+      setCount = _useState4[1];
+
+  var _useState5 = (0, _react.useState)('slide-animation'),
+      _useState6 = _slicedToArray(_useState5, 2),
+      slideTransition = _useState6[0],
+      setTransition = _useState6[1];
 
   var _soundActions = _slicedToArray(soundActions, 1),
       play = _soundActions[0];
 
-  var close = function close() {
+  var close = (0, _react.useCallback)(function () {
     emitEvent({
       type: 'success'
     });
-    play('click-ui');
-  };
-
-  var goToNextSlide = function goToNextSlide() {
+  }, [emitEvent]);
+  var goToNextSlide = (0, _react.useCallback)(function () {
     if (slideCount + 1 < slides.length) {
       setTransition('slide-animation');
       setCount(slideCount + 1);
-      play('click-ui');
+    } else {
+      close();
     }
-  };
-
-  var goToPreviousSlide = function goToPreviousSlide() {
+  }, [close, slideCount, slides.length]);
+  var goToPreviousSlide = (0, _react.useCallback)(function () {
     if (slideCount - 1 >= 0) {
       setTransition('slide-animation');
       setCount(slideCount - 1);
       play('click-ui');
     }
+  }, [play, slideCount]);
+
+  var handleManualNext = function handleManualNext() {
+    play('click-ui');
+    setAutomatic(false);
+    goToNextSlide();
+  };
+
+  var handleManualBack = function handleManualBack() {
+    play('click-ui');
+    setAutomatic(false);
+    goToPreviousSlide();
   };
 
+  (0, _react.useEffect)(function () {
+    if (automatic) {
+      var _slides$slideCount, _slides$slideCount$vi, _slides$slideCount$vi2;
+
+      var time = characterMs * (((_slides$slideCount = slides[slideCount]) === null || _slides$slideCount === void 0 ? void 0 : (_slides$slideCount$vi = _slides$slideCount.vignettes[0]) === null || _slides$slideCount$vi === void 0 ? void 0 : (_slides$slideCount$vi2 = _slides$slideCount$vi.textData) === null || _slides$slideCount$vi2 === void 0 ? void 0 : _slides$slideCount$vi2.text.length) || 0);
+      start(goToNextSlide, time);
+    }
+
+    return function () {
+      stop();
+    };
+  }, [automatic, goToNextSlide, slideCount, slides, start, stop]);
   if (!(slides !== null && slides !== void 0 && slides.length)) return null;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "comic component growIn-animation"
@@ -85,7 +121,7 @@ var ComicComponent = function ComicComponent(_ref) {
   }), slideCount > 0 && /*#__PURE__*/_react.default.createElement("button", {
     type: "button",
     className: "comic-control comic-control--left gat--btn__round",
-    onClick: goToPreviousSlide,
+    onClick: handleManualBack,
     "data-testid": "btn-bck"
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "icon-back"
@@ -93,7 +129,7 @@ var ComicComponent = function ComicComponent(_ref) {
     type: "button",
     className: "comic-control comic-control--right gat--btn__round",
     "data-testid": "btn-nxt",
-    onClick: goToNextSlide
+    onClick: handleManualNext
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "icon-next"
   })), slideCount + 1 >= slides.length && /*#__PURE__*/_react.default.createElement("div", {
@@ -102,7 +138,10 @@ var ComicComponent = function ComicComponent(_ref) {
     type: "button",
     className: "gat--btn__round",
     "data-testid": "btn-cls",
-    onClick: close
+    onClick: function onClick() {
+      play('click-ui');
+      close();
+    }
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "icon-close"
   })))));

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

@@ -17,6 +17,8 @@ var _decisionComponent = _interopRequireDefault(require("../../decision-componen
 
 var _useEkho = _interopRequireDefault(require("../../../helpers/useEkho"));
 
+var _useTimeout2 = _interopRequireDefault(require("../../../helpers/useTimeout"));
+
 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); }
@@ -41,6 +43,9 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+var characterMs = 75;
+var minMs = 1400;
+
 var ConversationProViewer = function ConversationProViewer(_ref) {
   var _background$img, _currentLineData$slot;
 
@@ -51,16 +56,26 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
       actors = _ref.actors,
       background = _ref.background,
       soundActions = _ref.soundActions,
-      lodSettings = _ref.lodSettings;
+      lodSettings = _ref.lodSettings,
+      autoPlay = _ref.autoPlay;
 
-  var _useState = (0, _react.useState)(0),
+  var _useState = (0, _react.useState)(!!autoPlay),
       _useState2 = _slicedToArray(_useState, 2),
-      currentLine = _useState2[0],
-      setCurrentLine = _useState2[1];
+      automatic = _useState2[0],
+      setAutomatic = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(0),
+      _useState4 = _slicedToArray(_useState3, 2),
+      currentLine = _useState4[0],
+      setCurrentLine = _useState4[1];
 
   var _soundActions = _slicedToArray(soundActions, 1),
       playSound = _soundActions[0];
 
+  var _useTimeout = (0, _useTimeout2.default)(),
+      start = _useTimeout.start,
+      stop = _useTimeout.stop;
+
   var backgroundImage = (background === null || background === void 0 ? void 0 : (_background$img = background.img) === null || _background$img === void 0 ? void 0 : _background$img.url) || null;
   var currentLineData = lines[currentLine];
   var voiceOverSlots = [];
@@ -202,8 +217,7 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
       finishConversation();
     }
   }, [currentLineData.id, edges, finishConversation, lines]);
-
-  var handleBranchDirection = function handleBranchDirection() {
+  var handleBranchDirection = (0, _react.useCallback)(function () {
     var forward = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
     var keys = forward ? ['fromId', 'toId'] : ['toId', 'fromId'];
     var foundEdge = edges.find(function (edge) {
@@ -223,11 +237,8 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
         finishConversation();
       }
     }
-  };
-
-  var handleClickNext = function handleClickNext(choice, reset) {
-    playSound('click-ui');
-
+  }, [currentLineData.id, edges, finishConversation, lines]);
+  var handleClickNext = (0, _react.useCallback)(function (choice, reset) {
     if (isBranched) {
       if (choice) {
         handleDecisionBranch(choice, reset);
@@ -244,11 +255,9 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
         finishConversation();
       }
     }
-  };
+  }, [currentLine, finishConversation, handleBranchDirection, handleDecisionBranch, isBranched, lines.length]);
 
   var handleClickBack = function handleClickBack() {
-    playSound('click-ui');
-
     if (isBranched) {
       handleBranchDirection(false);
     } else if (currentLine > 0) {
@@ -256,6 +265,18 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
     }
   };
 
+  var manualClickNext = function manualClickNext() {
+    playSound('click-ui');
+    setAutomatic(false);
+    handleClickNext();
+  };
+
+  var manualClickBack = function manualClickBack() {
+    playSound('click-ui');
+    setAutomatic(false);
+    handleClickBack();
+  };
+
   (0, _useEkho.default)({
     audioType: currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audioType,
     voice: currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.voice,
@@ -263,7 +284,20 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
     audio: currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audio,
     soundActions: soundActions,
     emitEvent: emitEvent
-  });
+  }); // Autoplay logic
+
+  (0, _react.useEffect)(function () {
+    if (automatic && !isDecision) {
+      var _currentMessage$text;
+
+      var time = characterMs * ((currentMessage === null || currentMessage === void 0 ? void 0 : (_currentMessage$text = currentMessage.text) === null || _currentMessage$text === void 0 ? void 0 : _currentMessage$text.length) || 0);
+      start(handleClickNext, time < minMs ? minMs : time);
+    }
+
+    return function () {
+      stop();
+    };
+  }, [currentMessage, automatic, isDecision, start, stop, handleClickNext]);
 
   var decisionPayload = _objectSpread(_objectSpread({}, currentLineData.payload), {}, {
     required: !isBranched,
@@ -301,15 +335,13 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
     className: "gat--btn__round ".concat(currentLine > 0 && (!lastLine.decision || isBranched) ? '' : 'disabled'),
     disabled: currentLine > 0 && (!lastLine.decision || isBranched) ? '' : true,
     type: "button",
-    onClick: handleClickBack
+    onClick: manualClickBack
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "icon-back"
   })), /*#__PURE__*/_react.default.createElement("button", {
     className: "gat--btn__round",
     type: "button",
-    onClick: function onClick() {
-      return handleClickNext();
-    }
+    onClick: manualClickNext
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "icon-next"
   }))))));

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

@@ -25,6 +25,8 @@ var _helpers = require("../../../helpers");
 
 var _deviceDetection = require("../../../helpers/deviceDetection");
 
+var _useTimeout2 = _interopRequireDefault(require("../../../helpers/useTimeout"));
+
 var _useEkho = _interopRequireDefault(require("../../../helpers/useEkho"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -54,15 +56,15 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var isMobile = (0, _deviceDetection.DeviceDetection)();
-var crossFadeDuration = 0.5; // Mobile always zoom in?
+var crossFadeDuration = 0.5;
+var characterMs = 75;
+var minMs = 1400; // Mobile always zoom in?
 
 var raycast = new _three.Raycaster();
 var maxCharacterToSwitch = 70;
 raycast.firstHitOnly = true;
 
 var DialogComponent = function DialogComponent(_ref) {
-  var _currentLine$audio;
-
   var emitEvent = _ref.emitEvent,
       lines = _ref.lines,
       actors = _ref.actors,
@@ -76,7 +78,7 @@ var DialogComponent = function DialogComponent(_ref) {
       line = _useState2[0],
       changeLine = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(true),
+  var _useState3 = (0, _react.useState)(!!autoPlay),
       _useState4 = _slicedToArray(_useState3, 2),
       automatic = _useState4[0],
       setAutomatic = _useState4[1];
@@ -104,6 +106,11 @@ var DialogComponent = function DialogComponent(_ref) {
       scene = _useThree2[1];
 
   var changedMats = (0, _react.useRef)([]);
+
+  var _useTimeout = (0, _useTimeout2.default)(),
+      start = _useTimeout.start,
+      stop = _useTimeout.stop;
+
   var loader = (0, _react.useMemo)(function () {
     return new _GLTFLoader.GLTFLoader();
   }, []);
@@ -285,7 +292,18 @@ var DialogComponent = function DialogComponent(_ref) {
     } else {
       finishConversation();
     }
-  }, [isBranched, line, lines.length, handleDecisionBranch, handleBranchDirection, finishConversation]); // Position bubble over talking character/and switch emotions
+  }, [isBranched, line, lines.length, handleDecisionBranch, handleBranchDirection, finishConversation]);
+
+  var manualBackLine = function manualBackLine() {
+    setAutomatic(false);
+    backLine();
+  };
+
+  var manualNextLine = function manualNextLine() {
+    setAutomatic(false);
+    nextLine();
+  }; // Position bubble over talking character/and switch emotions
+
 
   (0, _react.useEffect)(function () {
     if (isDecision) {
@@ -431,28 +449,17 @@ var DialogComponent = function DialogComponent(_ref) {
   }); // Autoplay logic
 
   (0, _react.useEffect)(function () {
-    var timeout;
-
-    if (autoPlay) {
-      if (line >= lines.length - 1 && automatic) {
-        setAutomatic(false);
-      } else if (automatic && currentMessage.show && !currentLine.decision) {
-        var time = 0;
-
-        if (currentMessage.text) {
-          time = 75 * (currentMessage === null || currentMessage === void 0 ? void 0 : currentMessage.text.length);
-        }
+    if (automatic && currentMessage.show && !currentLine.decision) {
+      var _currentMessage$text;
 
-        timeout = setTimeout(function () {
-          nextLine();
-        }, time < 1400 ? 1400 : time);
-      }
+      var time = characterMs * ((currentMessage === null || currentMessage === void 0 ? void 0 : (_currentMessage$text = currentMessage.text) === null || _currentMessage$text === void 0 ? void 0 : _currentMessage$text.length) || 0);
+      start(nextLine, time < minMs ? minMs : time);
     }
 
     return function () {
-      if (timeout) clearTimeout(timeout);
+      stop();
     };
-  }, [currentMessage, nextLine, autoPlay, lines.length, automatic, line, currentLine === null || currentLine === void 0 ? void 0 : currentLine.decision, currentLine === null || currentLine === void 0 ? void 0 : currentLine.audioType, currentLine === null || currentLine === void 0 ? void 0 : (_currentLine$audio = currentLine.audio) === null || _currentLine$audio === void 0 ? void 0 : _currentLine$audio.url]); // Positioning logic
+  }, [currentMessage, nextLine, automatic, currentLine.decision, start, stop]); // Positioning logic
 
   var checkBubblePosition = (0, _react.useCallback)(function () {
     if (bubbleRef.current && currentLine.slots) {
@@ -611,16 +618,14 @@ var DialogComponent = function DialogComponent(_ref) {
   }, /*#__PURE__*/_react.default.createElement("button", {
     disabled: line <= 0 || (lastLine === null || lastLine === void 0 ? void 0 : lastLine.decision) || isBranched,
     type: "button",
-    onClick: backLine,
+    onClick: manualBackLine,
     className: "gat--btn__round ".concat(line <= 0 || lastLine !== null && lastLine !== void 0 && lastLine.decision || isBranched ? 'disabled' : '')
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "icon-back"
   })), /*#__PURE__*/_react.default.createElement("button", {
     className: "gat--btn__round",
     type: "button",
-    onClick: function onClick() {
-      return nextLine();
-    }
+    onClick: manualNextLine
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "icon-next"
   })))) : null);

package/dist/helpers/useEkho.js

@@ -36,6 +36,8 @@ var useEkho = function useEkho(_ref) {
       playSound = _soundActions[0],
       stop = _soundActions[1];
 
+  var noAudio = !audio && !voice;
+
   var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
       isMounted = _useState2[0],
@@ -111,7 +113,7 @@ var useEkho = function useEkho(_ref) {
 
             case 3:
               url = _context.sent;
-              setCurrentPlaying(url, 'tts');
+              setCurrentPlaying(url);
 
             case 5:
             case "end":
@@ -126,12 +128,10 @@ var useEkho = function useEkho(_ref) {
     };
   }(), [emitEvent, setCurrentPlaying]);
   (0, _react.useEffect)(function () {
-    var noAudio = !audio && !voice;
-
     if (currentPlaying.current.url && noAudio) {
       stop(currentPlaying.current.cc);
     }
-  }, [stop, audio, voice]);
+  }, [noAudio, stop]);
   (0, _react.useEffect)(function () {
     if (isMounted) {
       if (audioType === 'voice' && voice !== null && voice !== void 0 && voice.id) {
@@ -144,7 +144,7 @@ var useEkho = function useEkho(_ref) {
         setCurrentPlaying(audio === null || audio === void 0 ? void 0 : audio.url);
       }
     }
-  }, [getVoice, playSpeech, isMounted, playSound, stop, voice, text, audioType, audio === null || audio === void 0 ? void 0 : audio.url, audio, setCurrentPlaying]);
+  }, [getVoice, playSpeech, isMounted, voice, text, audioType, audio === null || audio === void 0 ? void 0 : audio.url, audio, setCurrentPlaying]);
 };
 
 var _default = useEkho;

package/dist/helpers/useTimeout.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var useTimeout = function useTimeout() {
+  var timeout = (0, _react.useRef)();
+
+  var start = function start(fn, ms) {
+    timeout.current = setTimeout(fn, ms);
+  };
+
+  var stop = function stop() {
+    if (timeout.current) {
+      clearTimeout(timeout.current);
+    }
+  };
+
+  (0, _react.useEffect)(function () {
+    return function () {
+      if (timeout.current) {
+        clearTimeout(timeout.current);
+      }
+    };
+  }, []);
+  return {
+    start: start,
+    stop: stop,
+    running: !!timeout.current
+  };
+};
+
+var _default = useTimeout;
+exports.default = _default;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@gamelearn/arcade-components",
   "author": "Gamelearn",
   "license": "unlicense",
-  "version": "1.10.1",
+  "version": "1.11.0",
   "main": "dist/index.js",
   "files": [
     "dist",