@gamelearn/arcade-components 1.24.4 → 1.26.0

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

@@ -64,6 +64,7 @@ var CurrentImageClickPuzzle = function CurrentImageClickPuzzle(_ref) {
       index = _useState2[0],
       setIndex = _useState2[1];
 
+  var resolvedItems = (0, _react.useRef)({});
   var puzzleId = "chained-image-click-puzzle_".concat(index, "_").concat(nodeId);
 
   var _soundActions = _slicedToArray(soundActions, 1),
@@ -152,7 +153,8 @@ var CurrentImageClickPuzzle = function CurrentImageClickPuzzle(_ref) {
       action: 'resolve',
       payload: {
         element: puzzleId,
-        rewards: info.resolve.rewards
+        rewards: info.resolve.rewards,
+        finish: index + 1 >= list.length
       }
     });
   };
@@ -163,8 +165,9 @@ var CurrentImageClickPuzzle = function CurrentImageClickPuzzle(_ref) {
     }));
   }, [info, setInfo, puzzleId]);
   (0, _react.useEffect)(function () {
-    if (currentPuzzleStatus) {
+    if (currentPuzzleStatus && !resolvedItems.current[puzzleId]) {
       onComplete([], true, true);
+      resolvedItems.current[puzzleId] = true;
     }
   }, [onComplete, puzzleId, currentPuzzleStatus]);
   return /*#__PURE__*/_react.default.createElement(_imageClickWrapperComponent.default, _extends({

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

@@ -382,7 +382,36 @@ var DialogComponent = function DialogComponent(_ref) {
         }
       }
     }
-  }, [edges, isBranched, lines, mounted]); // Position bubble over talking character/and switch emotions
+  }, [edges, isBranched, lines, mounted]);
+
+  var moveBubble = function moveBubble(element, target, showArrowTop) {
+    element.updateMatrix();
+    element.updateMatrixWorld();
+    var head = element.getObjectByName('Head_M');
+    head.updateMatrix();
+    head.updateMatrixWorld();
+    head.getWorldPosition(target.position);
+    target.applyQuaternion(camera.quaternion);
+    var distance = camera.position.distanceTo(target.position);
+    var staticDisplay = distance > 70 && !zoomInActor && !showArrowTop;
+    target.translateY(staticDisplay || showArrowTop ? 0 : 2); // Detectar posicion de personaje a izq o derecha de pantalla
+
+    var vector = new _three.Vector3();
+    vector.setFromMatrixPosition(head.matrixWorld);
+    var p = vector.project(defaultCamera);
+    target.translateX(headSize);
+    var isLeft = p.x < 0;
+    messagePosition.current = {
+      pos: target.position.toArray(),
+      child: head,
+      parent: element,
+      isLeft: isLeft
+    };
+    return {
+      distance: distance
+    };
+  }; // Position bubble over talking character/and switch emotions
+
 
   (0, _react.useEffect)(function () {
     if (isDecision) {
@@ -450,29 +479,8 @@ var DialogComponent = function DialogComponent(_ref) {
             setTimeout(function () {
               if (talkingCharacter.uid === element.uid) {
                 var showArrowTop = talkingCharacter.text.length > maxCharacterToSwitch;
-                element.updateMatrix();
-                element.updateMatrixWorld();
-                var head = element.getObjectByName('Head_M');
                 var target = new _three.Object3D();
-                head.updateMatrix();
-                head.updateMatrixWorld();
-                head.getWorldPosition(target.position);
-                target.applyQuaternion(camera.quaternion);
-                var distance = camera.position.distanceTo(target.position);
-                var staticDisplay = distance > 70 && !zoomInActor && !showArrowTop;
-                target.translateY(staticDisplay || showArrowTop ? 0 : 3); // Detectar posicion de personaje a izq o derecha de pantalla
-
-                var vector = new _three.Vector3();
-                vector.setFromMatrixPosition(head.matrixWorld);
-                var p = vector.project(defaultCamera);
-                target.translateX(headSize);
-                var isLeft = p.x < 0;
-                messagePosition.current = {
-                  pos: target.position.toArray(),
-                  child: head,
-                  parent: element,
-                  isLeft: isLeft
-                };
+                moveBubble(element, target, showArrowTop);
 
                 if (zoomInActor) {
                   setAnimationRunning(true);
@@ -482,7 +490,9 @@ var DialogComponent = function DialogComponent(_ref) {
                 setTimeout(function () {
                   var _talkingCharacter$cha;
 
-                  distance = camera.position.distanceTo(target.position);
+                  var _moveBubble = moveBubble(element, target, showArrowTop),
+                      distance = _moveBubble.distance;
+
                   setCurrentMessage({
                     text: talkingCharacter.text,
                     name: talkingCharacter.alias || ((_talkingCharacter$cha = talkingCharacter.character) === null || _talkingCharacter$cha === void 0 ? void 0 : _talkingCharacter$cha.name),
@@ -571,7 +581,9 @@ var DialogComponent = function DialogComponent(_ref) {
       var y = bubbleRect.y - bubbleRect.height;
 
       if (!messagePosition.current.isLeft || (x < 0 || x > window.innerWidth) && currentMessage.inScene) {
-        var child = messagePosition.current.child;
+        var _messagePosition$curr = messagePosition.current,
+            child = _messagePosition$curr.child,
+            parent = _messagePosition$curr.parent;
 
         if (child) {
           var target = new _three.Object3D();
@@ -579,6 +591,7 @@ var DialogComponent = function DialogComponent(_ref) {
           target.applyQuaternion(camera.quaternion);
           groupRef.current.position.copy(target.position);
           groupRef.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)");

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/package.json

@@ -2,7 +2,7 @@
   "name": "@gamelearn/arcade-components",
   "author": "Gamelearn",
   "license": "unlicense",
-  "version": "1.24.4",
+  "version": "1.26.0",
   "main": "dist/index.js",
   "files": [
     "dist",
@@ -13,8 +13,8 @@
     "url": "https://github.com/gamelearn/arcade-components"
   },
   "dependencies": {
-    "@gamelearn/arcade-styles": "0.12.0",
-    "@gamelearn/arcade-three-core": "1.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",
     "@testing-library/jest-dom": "^5.16.4",