@gamelearn/arcade-components 0.26.0 → 0.26.2

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

@@ -23,6 +23,8 @@ 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 }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
@@ -37,6 +39,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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 asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
 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."); }
@@ -49,9 +55,12 @@ function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "und
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-var crossFadeDuration = 0.5;
+var isMobile = (0, _deviceDetection.DeviceDetection)();
+var crossFadeDuration = 0.5; // Mobile always zoom in?
 
 var DialogComponent = function DialogComponent(_ref) {
+  var _currentLine$audio3, _currentLine$audio4;
+
   var emitEvent = _ref.emitEvent,
       lines = _ref.lines,
       actors = _ref.actors,
@@ -82,6 +91,8 @@ var DialogComponent = function DialogComponent(_ref) {
       currentMessage = _useState6[0],
       setCurrentMessage = _useState6[1];
 
+  var emitRef = (0, _react.useRef)(emitEvent);
+
   var _useThree = (0, _fiber.useThree)(function (state) {
     return [state.camera, state.scene];
   }),
@@ -93,6 +104,11 @@ var DialogComponent = function DialogComponent(_ref) {
     return new _GLTFLoader.GLTFLoader();
   }, []);
   var defaultCamera = (0, _react.useRef)(camera.clone());
+
+  var _soundActions = _slicedToArray(soundActions, 2),
+      playSound = _soundActions[0],
+      stop = _soundActions[1];
+
   var messagePosition = (0, _react.useRef)({
     pos: [0, 0, 0],
     child: null
@@ -105,11 +121,66 @@ var DialogComponent = function DialogComponent(_ref) {
   var lastLine = lines[line - 1];
   var lastSet = (0, _react.useRef)(false);
   var translate = (0, _react.useCallback)(function (id) {
-    return emitEvent({
+    return emitRef.current({
       type: 'translate',
       payload: id
     });
-  }, [emitEvent]);
+  }, []);
+  var getVoice = (0, _react.useCallback)(function (_ref2) {
+    var id = _ref2.id,
+        _ref2$type = _ref2.type,
+        type = _ref2$type === void 0 ? 'base' : _ref2$type;
+    var usedVoices = translate('usedVoices');
+    var gameChars = translate('gameCharacters');
+
+    if (type === 'base') {
+      return usedVoices === null || usedVoices === void 0 ? void 0 : usedVoices[id];
+    } else if (type === 'character') {
+      var _gameChars$id;
+
+      return gameChars === null || gameChars === void 0 ? void 0 : (_gameChars$id = gameChars[id]) === null || _gameChars$id === void 0 ? void 0 : _gameChars$id.voiceId;
+    }
+
+    return null;
+  }, [translate]);
+  var playSpeech = (0, _react.useCallback)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    var payload, speechUrl;
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            if (!currentLine.voice.id) {
+              _context.next = 7;
+              break;
+            }
+
+            payload = {
+              voiceId: getVoice(currentLine.voice),
+              text: currentMessage.text
+            };
+
+            if (!(payload.voiceId && payload.text)) {
+              _context.next = 7;
+              break;
+            }
+
+            _context.next = 5;
+            return emitRef.current({
+              type: 'playSpeech',
+              payload: payload
+            });
+
+          case 5:
+            speechUrl = _context.sent;
+            playSound(speechUrl);
+
+          case 7:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })), [currentLine.voice, getVoice, currentMessage.text, playSound]);
   var getCurrentVisible = (0, _react.useCallback)(function (uid) {
     var object;
     scene.traverseVisible(function (node) {
@@ -201,11 +272,13 @@ var DialogComponent = function DialogComponent(_ref) {
   }, [zoomInActor]);
   var backLine = (0, _react.useCallback)(function () {
     if (lastLine && !lastLine.decision) {
+      setCurrentMessage({});
       changeLine(line - 1);
     }
   }, [lastLine, line]);
   var nextLine = (0, _react.useCallback)(function () {
     if (line < lines.length - 1) {
+      setCurrentMessage({});
       changeLine(line + 1);
     } else {
       resetAnims(true);
@@ -222,8 +295,6 @@ var DialogComponent = function DialogComponent(_ref) {
   }, [camera, currentLine.decision, emitEvent, line, lines.length, resetAnims, resetCameraView]); // Position bubble over talking character/and switch emotions
 
   (0, _react.useEffect)(function () {
-    setCurrentMessage({});
-
     if (currentLine.decision) {
       resetCameraView();
       return;
@@ -275,38 +346,42 @@ var DialogComponent = function DialogComponent(_ref) {
             if (startAction !== action) {
               mixer.stopAllAction();
               (0, _helpers.executeCrossFade)(startAction, action, crossFadeDuration);
-            }
-
-            if (talkingCharacter.uid === element.uid) {
-              var head = element.getObjectByName('Head_M');
-              var box = new _three.Box3().setFromObject(element);
-              var bodySize = box.getSize(new _three.Vector3());
-              var headPos = head.getWorldPosition(new _three.Vector3());
-              headPos.add((0, _helpers.vectorTranslateX)(bodySize.x / 8, camera));
-              headPos.add((0, _helpers.vectorTranslateY)(bodySize.y / 6, camera));
-              messagePosition.current = {
-                pos: headPos.toArray(),
-                child: head,
-                parent: element
-              };
-
-              if (zoomInActor) {
-                animationStart.current = true;
+            } // Ugly timeout to wait an animation transition
+
+
+            setTimeout(function () {
+              if (talkingCharacter.uid === element.uid) {
+                var head = element.getObjectByName('Head_M');
+                var target = new _three.Object3D();
+                head.getWorldPosition(target.position);
+                target.applyQuaternion(camera.quaternion);
+                target.translateX(1.25);
+                target.translateY(3);
+                messagePosition.current = {
+                  pos: target.position.toArray(),
+                  child: head,
+                  parent: element
+                };
+
+                if (zoomInActor) {
+                  animationStart.current = true;
+                } // Ugly timeout to wait for zoom in ( maybe use tween (?))
+
+
+                setTimeout(function () {
+                  var _talkingCharacter$cha;
+
+                  setCurrentMessage({
+                    text: talkingCharacter.text,
+                    name: talkingCharacter.alias || ((_talkingCharacter$cha = talkingCharacter.character) === null || _talkingCharacter$cha === void 0 ? void 0 : _talkingCharacter$cha.name),
+                    left: true,
+                    inScene: true,
+                    thinkful: talkingCharacter.emotion === 'thinkful',
+                    avatar: ''
+                  });
+                }, zoomInActor ? 1200 : 0);
               }
-
-              setTimeout(function () {
-                var _talkingCharacter$cha;
-
-                setCurrentMessage({
-                  text: talkingCharacter.text,
-                  name: talkingCharacter.alias || ((_talkingCharacter$cha = talkingCharacter.character) === null || _talkingCharacter$cha === void 0 ? void 0 : _talkingCharacter$cha.name),
-                  left: true,
-                  inScene: true,
-                  thinkful: talkingCharacter.emotion === 'thinkful',
-                  avatar: ''
-                });
-              }, zoomInActor ? 700 : 0);
-            }
+            }, 1000 * crossFadeDuration);
           });
         } else {
           var _talkingCharacter$cha2;
@@ -323,7 +398,23 @@ var DialogComponent = function DialogComponent(_ref) {
         }
       }
     }
-  }, [actors, camera, currentLine, zoomInActor, getCurrentVisible, translate, getAvatarURL, loadEmotion, resetAnims, resetCameraView]); // Autoplay logic
+  }, [actors, camera, currentLine, zoomInActor, getCurrentVisible, translate, getAvatarURL, loadEmotion, resetAnims, resetCameraView]); // Sound logic
+
+  (0, _react.useEffect)(function () {
+    var _currentLine$audio;
+
+    if ((currentLine === null || currentLine === void 0 ? void 0 : currentLine.audioType) === 'voice' && !lastSet.current) {
+      playSpeech();
+    } else if (currentLine !== null && currentLine !== void 0 && (_currentLine$audio = currentLine.audio) !== null && _currentLine$audio !== void 0 && _currentLine$audio.url) {
+      var _currentLine$audio2;
+
+      playSound(currentLine === null || currentLine === void 0 ? void 0 : (_currentLine$audio2 = currentLine.audio) === null || _currentLine$audio2 === void 0 ? void 0 : _currentLine$audio2.url);
+    }
+
+    return function () {
+      stop();
+    };
+  }, [currentLine === null || currentLine === void 0 ? void 0 : (_currentLine$audio3 = currentLine.audio) === null || _currentLine$audio3 === void 0 ? void 0 : _currentLine$audio3.url, currentLine === null || currentLine === void 0 ? void 0 : currentLine.audioType, currentMessage, lines, playSound, playSpeech, stop]); // Autoplay logic
 
   (0, _react.useEffect)(function () {
     var timeout;
@@ -332,35 +423,41 @@ var DialogComponent = function DialogComponent(_ref) {
       if (line >= lines.length - 1 && automatic) {
         setAutomatic(false);
       } else if (automatic && currentMessage.text && !currentLine.decision) {
+        var time = 70 * (currentMessage === null || currentMessage === void 0 ? void 0 : currentMessage.text.length);
         timeout = setTimeout(function () {
           nextLine();
-        }, 70 * currentMessage.text.length);
+        }, time < 1400 ? 1400 : time);
       }
     }
 
     return function () {
       if (timeout) clearTimeout(timeout);
     };
-  }, [currentMessage, nextLine, autoPlay, lines.length, automatic, line, currentLine.decision]); //Positioning logic
+  }, [currentMessage, nextLine, autoPlay, lines.length, automatic, line, currentLine.decision, currentLine === null || currentLine === void 0 ? void 0 : currentLine.audioType, currentLine === null || currentLine === void 0 ? void 0 : (_currentLine$audio4 = currentLine.audio) === null || _currentLine$audio4 === void 0 ? void 0 : _currentLine$audio4.url]); //Positioning logic
 
-  (0, _react.useEffect)(function () {
+  var checkBubblePosition = (0, _react.useCallback)(function () {
     if (bubbleRef.current && currentLine.slots) {
       var talkingCharacter = currentLine.slots.find(function (slot) {
         return slot.talking;
       });
       var bubbleRect = bubbleRef.current.getBoundingClientRect();
-      var x = bubbleRect.x + bubbleRect.width / 2;
-      var y = bubbleRect.y - bubbleRect.height / 2;
+      var x = bubbleRect.x + bubbleRect.width - 75;
+      var y = bubbleRect.y - bubbleRect.height;
 
-      if ((x < 0 || x > window.innerWidth || y < 0 || y > window.innerHeight) && currentMessage.inScene) {
+      if ((x < 0 || x > window.innerWidth) && currentMessage.inScene) {
         var child = messagePosition.current.child;
 
         if (child) {
-          groupRef.current.position.fromArray(messagePosition.current.pos);
-          var completeOutside = x > window.innerWidth + bubbleRect.width || y < -bubbleRect.height || y > window.innerHeight || x < -bubbleRect.width;
-          var distanceX = bubbleRect.width + bubbleRect.width / 4;
-          bubbleRef.current.parentNode.style.transform = "translate3d(-".concat(distanceX, "px, -").concat(bubbleRect.height / 2, "px, 0px)");
+          var target = new _three.Object3D();
+          child.getWorldPosition(target.position);
+          target.applyQuaternion(camera.quaternion);
+          groupRef.current.position.copy(target.position);
           groupRef.current.updateMatrixWorld();
+          var divider = isMobile ? 10 : 6;
+          var distanceX = bubbleRect.width + bubbleRect.width / divider;
+          bubbleRef.current.parentNode.style.transform = "translate3d(-".concat(distanceX, "px, -").concat(bubbleRect.height, "px, 0px)");
+          bubbleRect = bubbleRef.current.getBoundingClientRect();
+          var completeOutside = x > window.innerWidth + bubbleRect.width || y < -bubbleRect.height || y > window.innerHeight || x < -bubbleRect.width;
 
           if (completeOutside) {
             bubbleRef.current.parentNode.style.transform = '';
@@ -380,10 +477,13 @@ var DialogComponent = function DialogComponent(_ref) {
         bubbleRef.current.parentNode.style.transform = '';
       }
     }
-  }, [currentMessage.text, camera, currentLine.slots, getAvatarURL, currentMessage.inScene]); // Animate Camera
+  }, [camera.quaternion, currentLine.slots, currentMessage.inScene, getAvatarURL]);
+  (0, _react.useEffect)(function () {
+    checkBubblePosition();
+  }, [checkBubblePosition]); // Animate Camera
 
-  (0, _fiber.useFrame)(function (_ref2, delta) {
-    var camera = _ref2.camera;
+  (0, _fiber.useFrame)(function (_ref4, delta) {
+    var camera = _ref4.camera;
 
     if (animationStart.current) {
       var targetPosition = messagePosition.current.child ? messagePosition.current.pos : defaultCamera.current.position.toArray();
@@ -394,7 +494,7 @@ var DialogComponent = function DialogComponent(_ref) {
           animationTarget.current.applyQuaternion(camera.quaternion);
         }
 
-        animationTarget.current.translateX(12);
+        animationTarget.current.translateX(13);
         animationTarget.current.translateY(-5);
         animationTarget.current.translateZ(30);
       }
@@ -405,6 +505,8 @@ var DialogComponent = function DialogComponent(_ref) {
         if (lastSet.current || !messagePosition.current.child) {
           camera.copy(defaultCamera.current);
         }
+
+        checkBubblePosition();
       } else {
         camera.position.lerp(animationTarget.current.position, delta * 2.5);
       }
@@ -417,7 +519,7 @@ var DialogComponent = function DialogComponent(_ref) {
       disableBackground: true
     },
     onFinish: nextLine,
-    emitEvent: emitEvent,
+    emitEvent: emitRef.current,
     soundActions: soundActions
   });
 

package/dist/components/writer-puzzle-component/components/WriterPuzzleComponent.js

@@ -121,25 +121,20 @@ var WriterPuzzleComponent = function WriterPuzzleComponent(_ref) {
       feedbackScreen = _useState19[0],
       setFeedbackScreen = _useState19[1];
 
-  var _useState20 = (0, _react.useState)(false),
+  var _useState20 = (0, _react.useState)(true),
       _useState21 = _slicedToArray(_useState20, 2),
-      feedbackScreenDone = _useState21[0],
-      setFeedbackScreenDone = _useState21[1];
+      isActive = _useState21[0],
+      setIsActive = _useState21[1];
 
-  var _useState22 = (0, _react.useState)(true),
+  var _useState22 = (0, _react.useState)([]),
       _useState23 = _slicedToArray(_useState22, 2),
-      isActive = _useState23[0],
-      setIsActive = _useState23[1];
+      rewardsStack = _useState23[0],
+      setRewardsStack = _useState23[1];
 
-  var _useState24 = (0, _react.useState)([]),
+  var _useState24 = (0, _react.useState)(true),
       _useState25 = _slicedToArray(_useState24, 2),
-      rewardsStack = _useState25[0],
-      setRewardsStack = _useState25[1];
-
-  var _useState26 = (0, _react.useState)(true),
-      _useState27 = _slicedToArray(_useState26, 2),
-      disableExit = _useState27[0],
-      setDisableExit = _useState27[1];
+      disableExit = _useState25[0],
+      setDisableExit = _useState25[1];
 
   var _soundActions = _slicedToArray(soundActions, 1),
       playSound = _soundActions[0];
@@ -231,7 +226,7 @@ var WriterPuzzleComponent = function WriterPuzzleComponent(_ref) {
   var checkFeedbackScreen = function checkFeedbackScreen() {
     return decisionsList.find(function (decision) {
       var feedback = texts[decision.currenTextParagraph].electionTexts[decision.index].feedback;
-      return feedback.body !== null || feedback.rewards && feedback.rewards.length > 0;
+      return feedback.body || feedback.rewards && feedback.rewards.length > 0;
     });
   };
 
@@ -301,7 +296,6 @@ var WriterPuzzleComponent = function WriterPuzzleComponent(_ref) {
     } else if (checkAllDecisionsRightWrong()) {
       // if all Decisions are right or wrong we just skip to end
       setReviewDone(true);
-      setFeedbackScreenDone(true);
       endGame();
     }
 
@@ -312,22 +306,15 @@ var WriterPuzzleComponent = function WriterPuzzleComponent(_ref) {
       if (checkFeedbackScreen()) {
         // CHECK IF THERE IS NEED OF FEEDBACK SCREEN
         setFeedbackScreen(true);
-      } else {
-        setFeedbackScreenDone(true);
       }
-    }
-
-    if (reviewDone && !feedbackScreenDone) {
+    } else {
       setIsActive(false); // Second EXECUTION  shows Feedback Screen
 
-      if (feedbackScreen) {
+      if (feedbackScreen && !showFeedback) {
         setShowFeedback(true);
+      } else if (showFeedback || !feedbackScreen && !showFeedback) {
+        endGame();
       }
-    } // Third EXECUTION  Give Points
-
-
-    if (feedbackScreenDone) {
-      endGame();
     }
   };
 
@@ -468,12 +455,7 @@ var WriterPuzzleComponent = function WriterPuzzleComponent(_ref) {
       return _setFailed(true);
     },
     decisionsList: decisionsList,
-    closingAction: function closingAction() {
-      return setShowFeedback(false);
-    },
-    feedbackIsDone: function feedbackIsDone() {
-      return setFeedbackScreenDone(true);
-    },
+    closingAction: handleFinish,
     retry: retry,
     skip: skip,
     checkCorrect: checkAllDecisionsAreCorrect,

package/package.json

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