@gamelearn/arcade-components 2.2.13 → 2.3.0

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

@@ -19,41 +19,30 @@ 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; }
 
-var cleanStyle = {
-  width: '100vw',
-  height: '100vh',
-  position: 'static'
-};
-
 var BubbleWrapper = function BubbleWrapper(_ref) {
-  var onLoad = _ref.onLoad,
-      position = _ref.position,
-      currentMessage = _ref.currentMessage;
+  var currentMessage = _ref.currentMessage,
+      translate = _ref.translate;
   var group = (0, _react.useRef)();
   var bubble = (0, _react.useRef)();
-
-  var onBubbleBuild = function onBubbleBuild() {
-    onLoad(group, bubble);
-  };
-
   var container = document.querySelector('.screens--container');
   return /*#__PURE__*/_react.default.createElement("group", {
-    ref: group,
-    position: position
+    ref: group
   }, /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.HtmlPro, {
     zIndexRange: [5, 5],
-    calculatePosition: currentMessage.inScene ? undefined : function () {
-      return [0, 0];
-    },
     portal: container ? {
       current: container
     } : undefined,
-    style: currentMessage.inScene ? {
+    style: {
+      width: '100vw',
+      height: '100vh',
       position: 'static'
-    } : cleanStyle
+    },
+    calculatePosition: function calculatePosition() {
+      return [0, 0];
+    }
   }, /*#__PURE__*/_react.default.createElement(_SpeechBubbleComponent.default, {
+    translate: translate,
     ref: bubble,
-    onLoad: onBubbleBuild,
     message: currentMessage
   })));
 };

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

@@ -23,8 +23,6 @@ var _decisionComponent = _interopRequireDefault(require("../../decision-componen
 
 var _helpers = require("../../../helpers");
 
-var _deviceDetection = require("../../../helpers/deviceDetection");
-
 var _useTimeout2 = _interopRequireDefault(require("../../../helpers/useTimeout"));
 
 var _useEkho = _interopRequireDefault(require("../../../helpers/useEkho"));
@@ -67,8 +65,9 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+// import { DeviceDetection } from '../../../helpers/deviceDetection';
 // Global
-var isMobile = (0, _deviceDetection.DeviceDetection)();
+// const isMobile = DeviceDetection();
 var crossFadeDuration = 0.2;
 var characterMs = 75;
 var minMs = 1400;
@@ -128,8 +127,6 @@ var DialogComponent = function DialogComponent(_ref) {
       start = _useTimeout.start,
       stop = _useTimeout.stop;
 
-  var bubbleRef = (0, _react.useRef)();
-  var groupRef = (0, _react.useRef)();
   var loader = (0, _react.useMemo)(function () {
     return new _GLTFLoader.GLTFLoader();
   }, []);
@@ -168,8 +165,6 @@ var DialogComponent = function DialogComponent(_ref) {
   var _useState13 = (0, _react.useState)({
     text: '',
     name: '',
-    left: false,
-    top: false,
     inScene: false,
     thinkful: false,
     voiceOver: false,
@@ -244,13 +239,13 @@ var DialogComponent = function DialogComponent(_ref) {
     var _slot$character, _slot$character$resou;
 
     var object = actors.find(function (element) {
-      if (element.uid === slot.uid) {
+      if ((element === null || element === void 0 ? void 0 : element.uid) === (slot === null || slot === void 0 ? void 0 : slot.uid)) {
         return element;
       }
 
       return '';
     });
-    return ((_slot$character = slot.character) === null || _slot$character === void 0 ? void 0 : (_slot$character$resou = _slot$character.resource) === null || _slot$character$resou === void 0 ? void 0 : _slot$character$resou.url) || (object === null || object === void 0 ? void 0 : object.completeUrl) || '';
+    return (slot === null || slot === void 0 ? void 0 : (_slot$character = slot.character) === null || _slot$character === void 0 ? void 0 : (_slot$character$resou = _slot$character.resource) === null || _slot$character$resou === void 0 ? void 0 : _slot$character$resou.url) || (object === null || object === void 0 ? void 0 : object.completeUrl) || '';
   }, [actors]); // Move to three core?
 
   var loadEmotion = (0, _react.useCallback)(function (slot, element) {
@@ -527,12 +522,11 @@ var DialogComponent = function DialogComponent(_ref) {
       setCurrentMessage({
         text: currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.text,
         name: (currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.alias) || (currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.name) || "[ ".concat(translate('storylines.misc.voiceOver'), " ]"),
-        left: false,
         inScene: false,
         voiceOver: true,
         thinkful: false,
         top: false,
-        avatar: '',
+        avatar: getAvatarURL(talkingCharacter),
         show: true
       });
     } else if (!lastSet.current) {
@@ -591,17 +585,12 @@ var DialogComponent = function DialogComponent(_ref) {
               setTimeout(function () {
                 var _talkingCharacter$cha5;
 
-                var _moveBubble = moveBubble(element, showArrowTop),
-                    distance = _moveBubble.distance;
-
                 setCurrentMessage({
                   text: talkingCharacter.text,
                   name: talkingCharacter.alias || ((_talkingCharacter$cha5 = talkingCharacter.character) === null || _talkingCharacter$cha5 === void 0 ? void 0 : _talkingCharacter$cha5.name),
-                  left: true,
-                  top: showArrowTop || distance > 70,
                   inScene: true,
                   thinkful: talkingCharacter.emotion === 'thinkful',
-                  avatar: '',
+                  avatar: getAvatarURL(talkingCharacter),
                   show: true
                 });
               }, zoomInActor ? 1200 : 0);
@@ -691,53 +680,7 @@ var DialogComponent = function DialogComponent(_ref) {
     return function () {
       stop();
     };
-  }, [currentMessage, nextLine, start, stop, currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audioType, autoPlayCond, audio, voice, audioFailed]); // Positioning Bubble Message logic
-
-  var checkBubbleBounds = (0, _react.useCallback)(function (group, bubble) {
-    groupRef.current = group === null || group === void 0 ? void 0 : group.current;
-    bubbleRef.current = bubble === null || bubble === void 0 ? void 0 : bubble.current;
-
-    if (currentLineData !== null && currentLineData !== void 0 && currentLineData.slots && currentMessage.show && bubble !== null && bubble !== void 0 && bubble.current) {
-      var bubbleRect = bubble.current.getBoundingClientRect();
-      var x = bubbleRect.x + bubbleRect.width;
-      var y = bubbleRect.y - bubbleRect.height;
-
-      if (!messagePosition.current.isLeft && zoomInActor || (x < 0 || x > window.innerWidth) && currentMessage.inScene) {
-        var child = messagePosition.current.child;
-
-        if (child) {
-          var target = new _three.Object3D();
-          child.getWorldPosition(target.position);
-          group.current.position.copy(target.position);
-          group.current.updateMatrixWorld();
-          var dividerWidth = bubbleRect.width > 250 ? 4 : 2.75;
-          var divider = isMobile ? 10 : dividerWidth;
-          var distanceX = bubbleRect.width + bubbleRect.width / divider;
-          bubble.current.parentNode.style.transform = "translate3d(-".concat(distanceX, "px, -").concat(bubbleRect.height, "px, 0px)");
-          bubbleRect = bubble.current.getBoundingClientRect();
-          var completeOutside = x > window.innerWidth + bubbleRect.width || y < -bubbleRect.height || y > window.innerHeight || x < -bubbleRect.width || bubbleRect.x < 10;
-
-          if (completeOutside) {
-            bubble.current.parentNode.style.transform = '';
-            messagePosition.current.child = null;
-            messagePosition.current.parent = null;
-          }
-
-          setCurrentMessage(function (old) {
-            return _objectSpread(_objectSpread({}, old), {}, {
-              left: false,
-              top: false,
-              inScene: !completeOutside,
-              avatar: getAvatarURL(talkingCharacter),
-              show: true
-            });
-          });
-        }
-      } else {
-        bubble.current.parentNode.style.transform = '';
-      }
-    }
-  }, [camera.quaternion, currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.slots, currentMessage.inScene, getAvatarURL]);
+  }, [currentMessage, nextLine, start, stop, currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audioType, autoPlayCond, audio, voice, audioFailed]);
   (0, _react.useEffect)(function () {
     if (animationRunning) {
       var cam = camera;
@@ -750,9 +693,7 @@ var DialogComponent = function DialogComponent(_ref) {
         }
 
         var mult = messagePosition.current.isLeft ? -1 : 1;
-        var headSpace = headSize * mult; // move bubble
-
-        messagePosition.current.pos[0] -= headSpace;
+        var headSpace = headSize * mult;
         animationTarget.current.translateX(-10 * mult + headSpace);
         animationTarget.current.translateY(-2);
         animationTarget.current.translateZ(30);
@@ -796,10 +737,6 @@ var DialogComponent = function DialogComponent(_ref) {
           object.material.visible = true;
         });
       }
-
-      if (bubbleRef.current && groupRef.current) {
-        checkBubbleBounds(groupRef, bubbleRef);
-      }
     }
   });
   var container = document.querySelector('.screens--container');
@@ -843,9 +780,8 @@ var DialogComponent = function DialogComponent(_ref) {
   }
 
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, currentMessage.text ? /*#__PURE__*/_react.default.createElement(_BubbleWrapper.default, {
-    position: messagePosition.current.pos,
-    currentMessage: currentMessage,
-    onLoad: checkBubbleBounds
+    translate: translate,
+    currentMessage: currentMessage
   }) : null, /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.HtmlPro, {
     style: {
       width: '100vw',

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

@@ -27,7 +27,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var SpeechBubbleComponent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var message = _ref.message,
-      onLoad = _ref.onLoad;
+      translate = _ref.translate;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -51,32 +51,33 @@ var SpeechBubbleComponent = /*#__PURE__*/_react.default.forwardRef(function (_re
 
   (0, _react.useLayoutEffect)(function () {
     if (!mounted) {
-      onLoad();
       setMounted(true);
     }
-  }, [onLoad, mounted]);
+  }, [mounted]);
   return /*#__PURE__*/_react.default.createElement("div", {
     dir: "auto",
     ref: ref,
-    className: "\n          speech-bubble\n          ".concat(message.left && message.inScene ? 'speech-bubble--arrow-left' : '', "\n          ").concat(!message.left && message.inScene ? 'speech-bubble--arrow-right' : '', "\n          ").concat(message.top && message.inScene ? 'arrow-top' : '', "\n          ").concat(message.thinkful || message.voiceOver ? 'speech-bubble--italic' : '', "\n      ")
+    className: "\n          speech-bubble\n          ".concat(!message.inScene || message.voiceOver ? 'speech-bubble--outOfScene' : '', "\n          ").concat(message.thinkful ? 'speech-bubble--italic' : '', "\n      ")
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "speech-bubble__content"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "speech-bubble__header"
+    className: "speech-bubble__header ".concat(message.thinkful ? 'speech-bubble__header--thinking' : '')
   }, message.thinkful ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "thinking-icon-wrap"
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: "icon-bubble-thinkful-black"
-  }) : null, message.voiceOver ? /*#__PURE__*/_react.default.createElement("div", {
-    className: "icon-narrator"
-  }) : null, !message.inScene && message.avatar ? /*#__PURE__*/_react.default.createElement("div", {
+  })) : null, message.avatar ? /*#__PURE__*/_react.default.createElement("div", {
     className: "speech-bubble__avatar"
   }, /*#__PURE__*/_react.default.createElement("img", {
     src: getAvatar(),
     alt: message.name
+  })) : null, message.voiceOver ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "speech-bubble__avatar"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "icon-narrator"
   })) : null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "speech-bubble__title"
-  }, message.name)), message.text ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "speech-bubble__name"
+  }, /*#__PURE__*/_react.default.createElement("span", null, message.name), message.thinkful ? /*#__PURE__*/_react.default.createElement("span", null, "[ ", translate('emotion.thinking'), " ]") : null)), message.text ? /*#__PURE__*/_react.default.createElement("div", {
     className: "speech-bubble__text"
-  }, message.text) : null));
+  }, message.text) : null);
 });
 
 var _default = SpeechBubbleComponent;

package/package.json

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