@gamelearn/arcade-components 1.25.1 → 1.26.1-hotfix-1-video

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

@@ -0,0 +1,58 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _arcadeThreeCore = require("@gamelearn/arcade-three-core");
+
+var _SpeechBubbleComponent = _interopRequireDefault(require("./SpeechBubbleComponent"));
+
+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); }
+
+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 group = (0, _react.useRef)();
+  var bubble = (0, _react.useRef)();
+
+  var onBubbleBuild = function onBubbleBuild() {
+    onLoad(group, bubble);
+  };
+
+  return /*#__PURE__*/_react.default.createElement("group", {
+    ref: group,
+    position: position
+  }, /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.HtmlPro, {
+    zIndexRange: [2, 2],
+    calculatePosition: currentMessage.inScene ? undefined : function () {
+      return [0, 0];
+    },
+    style: currentMessage.inScene ? {
+      position: 'static'
+    } : cleanStyle
+  }, /*#__PURE__*/_react.default.createElement(_SpeechBubbleComponent.default, {
+    ref: bubble,
+    onLoad: onBubbleBuild,
+    message: currentMessage
+  })));
+};
+
+var _default = BubbleWrapper;
+exports.default = _default;

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

@@ -19,8 +19,6 @@ var _arcadeThreeCore = require("@gamelearn/arcade-three-core");
 
 var _gsap = _interopRequireDefault(require("gsap"));
 
-var _SpeechBubbleComponent = _interopRequireDefault(require("./SpeechBubbleComponent"));
-
 var _decisionComponent = _interopRequireDefault(require("../../decision-component"));
 
 var _helpers = require("../../../helpers");
@@ -33,6 +31,8 @@ var _useEkho = _interopRequireDefault(require("../../../helpers/useEkho"));
 
 var _LangIsRtl = _interopRequireDefault(require("../../../helpers/LangIsRtl"));
 
+var _BubbleWrapper = _interopRequireDefault(require("./BubbleWrapper"));
+
 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); }
@@ -151,8 +151,6 @@ var DialogComponent = function DialogComponent(_ref) {
       animationRunning = _useState12[0],
       setAnimationRunning = _useState12[1];
 
-  var bubbleRef = (0, _react.useRef)();
-  var groupRef = (0, _react.useRef)();
   var animationTarget = (0, _react.useRef)(new _three.Object3D());
   var currentLine = lines[line];
   var lastLine = lines[line - 1];
@@ -571,16 +569,16 @@ var DialogComponent = function DialogComponent(_ref) {
     };
   }, [currentMessage, nextLine, start, stop, currentLine === null || currentLine === void 0 ? void 0 : currentLine.audioType, autoPlayCond, audio, voice, audioFailed]); // Positioning Bubble Message logic
 
-  var checkBubbleBounds = (0, _react.useCallback)(function () {
-    if (bubbleRef.current && currentLine !== null && currentLine !== void 0 && currentLine.slots) {
+  var checkBubbleBounds = (0, _react.useCallback)(function (group, bubble) {
+    if (currentLine !== null && currentLine !== void 0 && currentLine.slots && currentMessage.show) {
       var talkingCharacter = currentLine === null || currentLine === void 0 ? void 0 : currentLine.slots.find(function (slot) {
         return slot.talking;
       });
-      var bubbleRect = bubbleRef.current.getBoundingClientRect();
+      var bubbleRect = bubble.current.getBoundingClientRect();
       var x = bubbleRect.x + bubbleRect.width;
       var y = bubbleRect.y - bubbleRect.height;
 
-      if (!messagePosition.current.isLeft || (x < 0 || x > window.innerWidth) && currentMessage.inScene) {
+      if (!messagePosition.current.isLeft && zoomInActor || (x < 0 || x > window.innerWidth) && currentMessage.inScene) {
         var _messagePosition$curr = messagePosition.current,
             child = _messagePosition$curr.child,
             parent = _messagePosition$curr.parent;
@@ -589,17 +587,17 @@ var DialogComponent = function DialogComponent(_ref) {
           var target = new _three.Object3D();
           child.getWorldPosition(target.position);
           target.applyQuaternion(camera.quaternion);
-          groupRef.current.position.copy(target.position);
-          groupRef.current.updateMatrixWorld();
+          group.current.position.copy(target.position);
+          group.current.updateMatrixWorld();
           moveBubble(parent, target, false);
           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();
+          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) {
-            bubbleRef.current.parentNode.style.transform = '';
+            bubble.current.parentNode.style.transform = '';
             messagePosition.current.child = null;
             messagePosition.current.parent = null;
           }
@@ -615,13 +613,10 @@ var DialogComponent = function DialogComponent(_ref) {
           });
         }
       } else {
-        bubbleRef.current.parentNode.style.transform = '';
+        bubble.current.parentNode.style.transform = '';
       }
     }
   }, [camera.quaternion, currentLine === null || currentLine === void 0 ? void 0 : currentLine.slots, currentMessage.inScene, getAvatarURL]);
-  (0, _react.useEffect)(function () {
-    checkBubbleBounds();
-  }, [checkBubbleBounds]);
   (0, _react.useEffect)(function () {
     if (animationRunning) {
       var cam = camera;
@@ -716,21 +711,11 @@ var DialogComponent = function DialogComponent(_ref) {
   } // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
 
 
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, currentMessage.text ? /*#__PURE__*/_react.default.createElement("group", {
-    ref: groupRef,
-    position: messagePosition.current.pos
-  }, /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.HtmlPro, {
-    zIndexRange: [2, 2],
-    calculatePosition: currentMessage.inScene ? undefined : function () {
-      return [0, 0];
-    },
-    style: currentMessage.inScene ? {
-      position: 'static'
-    } : cleanStyle
-  }, /*#__PURE__*/_react.default.createElement(_SpeechBubbleComponent.default, {
-    ref: bubbleRef,
-    message: currentMessage
-  }))) : null, /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.HtmlPro, {
+  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
+  }) : null, /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.HtmlPro, {
     style: {
       width: '100vw',
       height: '100vh'

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

@@ -1,16 +1,38 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+
+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); }
+
+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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 SpeechBubbleComponent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
-  var message = _ref.message;
+  var message = _ref.message,
+      onLoad = _ref.onLoad;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      mounted = _useState2[0],
+      setMounted = _useState2[1];
 
   var getAvatar = function getAvatar() {
     var avatarUrl = message.avatar;
@@ -27,7 +49,13 @@ var SpeechBubbleComponent = /*#__PURE__*/_react.default.forwardRef(function (_re
     return avatarUrl;
   };
 
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+  (0, _react.useLayoutEffect)(function () {
+    if (!mounted) {
+      onLoad();
+      setMounted(true);
+    }
+  }, [onLoad, 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      ")
@@ -48,7 +76,7 @@ var SpeechBubbleComponent = /*#__PURE__*/_react.default.forwardRef(function (_re
     className: "speech-bubble__title"
   }, message.name)), message.text ? /*#__PURE__*/_react.default.createElement("div", {
     className: "speech-bubble__text"
-  }, message.text) : null)));
+  }, message.text) : null));
 });
 
 var _default = SpeechBubbleComponent;

package/dist/components/hanged-puzzle-component/components/HangedPuzzleComponent.js

@@ -50,6 +50,7 @@ var MAX_EXTRA_LETTERS = 8;
 
 var AnswerPanel = function AnswerPanel(_ref) {
   var answer = _ref.answer,
+      flickerPosition = _ref.flickerPosition,
       _ref$show = _ref.show,
       show = _ref$show === void 0 ? false : _ref$show;
   var words = [];
@@ -64,6 +65,8 @@ var AnswerPanel = function AnswerPanel(_ref) {
     if (a.char === ' ') {
       wordIndex += 1;
     }
+
+    a.positionInitial = a.index;
   });
   return words.map(function (word, index) {
     return /*#__PURE__*/_react.default.createElement("div", {
@@ -84,7 +87,7 @@ var AnswerPanel = function AnswerPanel(_ref) {
           fixed = _ref3.fixed;
       return /*#__PURE__*/_react.default.createElement("span", {
         key: "".concat(char + i),
-        className: "puzzle--hanged__letter ".concat(!fixed ? 'active' : '')
+        className: "puzzle--hanged__letter ".concat(!fixed ? 'active' : '', " ").concat(word[i].positionInitial === flickerPosition ? 'fakeFocus' : '')
       }, char);
     }));
   });
@@ -111,40 +114,50 @@ var HangedPuzzleComponent = function HangedPuzzleComponent(_ref4) {
 
   var imgURL = ((_image$img = image.img) === null || _image$img === void 0 ? void 0 : _image$img.url) || defaultImage;
 
-  var _useState = (0, _react.useState)([]),
+  var _useState = (0, _react.useState)(0),
       _useState2 = _slicedToArray(_useState, 2),
-      poolLetters = _useState2[0],
-      setPoolLetters = _useState2[1];
+      flickerPosition = _useState2[0],
+      setFlickerPosition = _useState2[1];
 
   var _useState3 = (0, _react.useState)(false),
       _useState4 = _slicedToArray(_useState3, 2),
-      mounted = _useState4[0],
-      setMounted = _useState4[1];
+      playerHasFailAtLeastOneTime = _useState4[0],
+      setPlayerHasFailAtLeastOneTime = _useState4[1];
 
   var _useState5 = (0, _react.useState)([]),
       _useState6 = _slicedToArray(_useState5, 2),
-      resolvedAnswer = _useState6[0],
-      setAnswer = _useState6[1];
+      poolLetters = _useState6[0],
+      setPoolLetters = _useState6[1];
 
-  var _useState7 = (0, _react.useState)(''),
+  var _useState7 = (0, _react.useState)(false),
       _useState8 = _slicedToArray(_useState7, 2),
-      resolvedClass = _useState8[0],
-      setResolveClass = _useState8[1];
+      mounted = _useState8[0],
+      setMounted = _useState8[1];
 
-  var _useState9 = (0, _react.useState)(false),
+  var _useState9 = (0, _react.useState)([]),
       _useState10 = _slicedToArray(_useState9, 2),
-      disabled = _useState10[0],
-      setDisable = _useState10[1];
+      resolvedAnswer = _useState10[0],
+      setAnswer = _useState10[1];
 
-  var _useState11 = (0, _react.useState)([]),
+  var _useState11 = (0, _react.useState)(''),
       _useState12 = _slicedToArray(_useState11, 2),
-      accRewards = _useState12[0],
-      setRewards = _useState12[1];
+      resolvedClass = _useState12[0],
+      setResolveClass = _useState12[1];
 
   var _useState13 = (0, _react.useState)(false),
       _useState14 = _slicedToArray(_useState13, 2),
-      showCorrectSolution = _useState14[0],
-      setCorrectSolution = _useState14[1];
+      disabled = _useState14[0],
+      setDisable = _useState14[1];
+
+  var _useState15 = (0, _react.useState)([]),
+      _useState16 = _slicedToArray(_useState15, 2),
+      accRewards = _useState16[0],
+      setRewards = _useState16[1];
+
+  var _useState17 = (0, _react.useState)(false),
+      _useState18 = _slicedToArray(_useState17, 2),
+      showCorrectSolution = _useState18[0],
+      setCorrectSolution = _useState18[1];
 
   var translatedAnswer = answer.toUpperCase().split('');
   var answerPanel = translatedAnswer.filter(function (char) {
@@ -258,6 +271,10 @@ var HangedPuzzleComponent = function HangedPuzzleComponent(_ref4) {
     });
     setPoolLetters(restoredPool);
     setAnswer(newAnswer);
+    var newCursorPosition = newAnswer.find(function (el) {
+      return el.char === '';
+    });
+    setFlickerPosition(newCursorPosition.index);
   };
 
   var addCharacter = function addCharacter(character, index) {
@@ -280,12 +297,36 @@ var HangedPuzzleComponent = function HangedPuzzleComponent(_ref4) {
     }).length;
     setPoolLetters(newPool);
     setAnswer(newAnswer);
+    getCursorPosition();
 
     if (responsedChar === resolvedAnswer.length) {
       resolvePuzzle(newAnswer, newPool);
     }
   };
 
+  var getCursorPosition = function getCursorPosition() {
+    if (!playerHasFailAtLeastOneTime) {
+      var _resolvedAnswer;
+
+      var cursorPosition = resolvedAnswer.find(function (el) {
+        return el.char === '';
+      });
+      setFlickerPosition(cursorPosition.index + 1);
+
+      if (((_resolvedAnswer = resolvedAnswer[cursorPosition.index + 1]) === null || _resolvedAnswer === void 0 ? void 0 : _resolvedAnswer.letter) === ' ') {
+        setFlickerPosition(cursorPosition.index + 2);
+      }
+    } else {
+      var _cursorPosition = resolvedAnswer.find(function (el) {
+        return el.index !== flickerPosition && el.letter !== ' ' && el.char === '' && el.poolIndex === false;
+      });
+
+      if (_cursorPosition) {
+        setFlickerPosition(_cursorPosition.index);
+      }
+    }
+  };
+
   var removeCharacter = function removeCharacter() {
     playSound('click-ui');
     var newCharacter = resolvedAnswer.map(function (letter, index) {
@@ -317,6 +358,7 @@ var HangedPuzzleComponent = function HangedPuzzleComponent(_ref4) {
       });
       setPoolLetters(newPool);
       setAnswer(newAnswer);
+      setFlickerPosition(newCharacter.index);
     }
   };
 
@@ -352,6 +394,7 @@ var HangedPuzzleComponent = function HangedPuzzleComponent(_ref4) {
     emitEvent({
       type: 'failPuzzle'
     });
+    setPlayerHasFailAtLeastOneTime(true);
   };
 
   var resolvePuzzle = function resolvePuzzle(newAnswer, newPool) {
@@ -403,6 +446,10 @@ var HangedPuzzleComponent = function HangedPuzzleComponent(_ref4) {
       handleClose();
     } else {
       handleFail();
+      var cursorPosition = resolvedAnswer.find(function (el) {
+        return el.char === '';
+      });
+      setFlickerPosition(cursorPosition.index);
     }
   };
 
@@ -460,6 +507,7 @@ var HangedPuzzleComponent = function HangedPuzzleComponent(_ref4) {
     answer: answer.split(''),
     show: true
   }) : /*#__PURE__*/_react.default.createElement(AnswerPanel, {
+    flickerPosition: flickerPosition,
     answer: resolvedAnswer
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "puzzle--hanged__keyboard"

package/dist/components/url-component/components/UrlComponent.js

@@ -74,7 +74,7 @@ var UrlComponent = function UrlComponent(_ref) {
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "icon-close"
   })) : null, /*#__PURE__*/_react.default.createElement("span", {
-    className: "popup--link__title popup--link__lineclamp"
+    className: "popup--link__title"
   }, name), /*#__PURE__*/_react.default.createElement("span", {
     className: "popup--link__desc"
   }, text), /*#__PURE__*/_react.default.createElement("a", {

package/dist/components/video-visor/components/VideoVisor.js

@@ -274,9 +274,7 @@ var VideoVisor = function VideoVisor(_ref) {
     onEnded: onEnded,
     onError: onError,
     onPlaying: onPlaying
-  }, videoProps), /*#__PURE__*/_react.default.createElement("track", {
-    kind: "captions"
-  })), loading ? /*#__PURE__*/_react.default.createElement("div", {
+  }, videoProps)), loading ? /*#__PURE__*/_react.default.createElement("div", {
     className: "video-loading-container",
     style: {
       top: 0,

package/package.json

@@ -2,7 +2,7 @@
   "name": "@gamelearn/arcade-components",
   "author": "Gamelearn",
   "license": "unlicense",
-  "version": "1.25.1",
+  "version": "1.26.1-hotfix-1-video",
   "main": "dist/index.js",
   "files": [
     "dist",
@@ -13,7 +13,7 @@
     "url": "https://github.com/gamelearn/arcade-components"
   },
   "dependencies": {
-    "@gamelearn/arcade-styles": "0.12.0",
+    "@gamelearn/arcade-styles": "0.13.0",
     "@gamelearn/arcade-three-core": "1.13.0",
     "@react-three/drei": "9.4.3",
     "@react-three/fiber": "8.0.10",