@gamelearn/arcade-components 1.25.1 → 1.26.0

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.25.1",
+  "version": "1.26.0",
   "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",