@gamelearn/arcade-components 1.4.30-fix1 → 1.4.30

package/dist/components/cards-selector-puzzle-component/components/Board/index.js

@@ -34,13 +34,11 @@ var Board = function Board(_ref) {
       currentOrder = _ref.currentOrder,
       setCurrentOrder = _ref.setCurrentOrder,
       handleError = _ref.handleError,
-      endPuzzle = _ref.endPuzzle,
       feedbackIsShown = _ref.feedbackIsShown,
       resolvePuzzle = _ref.resolvePuzzle,
       soundActions = _ref.soundActions,
-      handleSuccess = _ref.handleSuccess,
-      setForceFlipCard = _ref.setForceFlipCard,
-      forceFlipCard = _ref.forceFlipCard;
+      onFinish = _ref.onFinish,
+      handleSuccess = _ref.handleSuccess;
 
   var _useState = (0, _react.useState)(Array(cards.length).fill(false)),
       _useState2 = _slicedToArray(_useState, 2),
@@ -57,6 +55,11 @@ var Board = function Board(_ref) {
       correctCards = _useState6[0],
       setCorrectCards = _useState6[1];
 
+  var _useState7 = (0, _react.useState)(false),
+      _useState8 = _slicedToArray(_useState7, 2),
+      finished = _useState8[0],
+      setFinished = _useState8[1];
+
   var _soundActions = _slicedToArray(soundActions, 1),
       play = _soundActions[0];
 
@@ -66,14 +69,6 @@ var Board = function Board(_ref) {
   var isOrderBased = cards.filter(function (card) {
     return card.order;
   }).length > 0;
-  var flipTimer;
-  (0, _react.useEffect)(function () {
-    if (forceFlipCard) {
-      setForceFlipCard(false);
-      reset();
-      clearTimeout(flipTimer);
-    }
-  }, [flipTimer, forceFlipCard, reset, setForceFlipCard]);
   var reset = (0, _react.useCallback)(function () {
     setFlipped(Array(cards.length).fill(false)); // reset it to the original length
 
@@ -83,9 +78,9 @@ var Board = function Board(_ref) {
   }, [cards.length, setCurrentOrder]);
 
   var timedReset = function timedReset() {
-    flipTimer = setTimeout(function () {
+    setTimeout(function () {
       reset();
-    }, 3000);
+    }, 1000);
   };
 
   function flipACard(index) {
@@ -94,12 +89,6 @@ var Board = function Board(_ref) {
     setFlipped(tempFlipped);
   }
 
-  var timedFlipped = function timedFlipped(index) {
-    setTimeout(function () {
-      flipACard(index);
-    }, 3000);
-  };
-
   var flipAllCorrect = (0, _react.useCallback)(function () {
     var arrayToFlip = [];
     cards.forEach(function (card, index) {
@@ -116,10 +105,11 @@ var Board = function Board(_ref) {
   }, [flipAllCorrect, resolvePuzzle]);
   (0, _react.useEffect)(function () {
     if (correctCards === numberOfCorrectCards && numberOfCorrectCards > 0) {
-      endPuzzle();
+      onFinish();
+      setFinished(true);
       setCorrectCards(0);
     }
-  }, [correctCards, endPuzzle, numberOfCorrectCards]);
+  }, [correctCards, onFinish, numberOfCorrectCards]);
 
   var handleCorrect = function handleCorrect(index) {
     flipACard(index);
@@ -128,6 +118,8 @@ var Board = function Board(_ref) {
   };
 
   var _handleClick = function handleClick(index) {
+    if (finished) return;
+
     if (!feedbackIsShown) {
       play('click-ui');
 
@@ -156,8 +148,8 @@ var Board = function Board(_ref) {
 
         // fails and resets
         handleError(((_cards$index2 = cards[index]) === null || _cards$index2 === void 0 ? void 0 : _cards$index2.id) || null);
+        timedReset();
         flipACard(index);
-        timedFlipped();
       }
     }
   };
@@ -182,15 +174,13 @@ var Board = function Board(_ref) {
 Board.defaultProps = {
   setCurrentOrder: function setCurrentOrder() {},
   handleError: function handleError() {},
-  endPuzzle: function endPuzzle() {},
+  onFinish: function onFinish() {},
   handleSuccess: function handleSuccess() {},
-  setForceFlipCard: function setForceFlipCard() {},
   documentsDict: {},
   cards: [],
   currentOrder: 1,
   resolvePuzzle: false,
-  feedbackIsShown: false,
-  forceFlipCard: false
+  feedbackIsShown: false
 };
 var _default = Board;
 exports.default = _default;

package/dist/components/cards-selector-puzzle-component/components/CardsSelectorPuzzleComponent.js

@@ -40,6 +40,8 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var CardsSelectorPuzzleComponent = function CardsSelectorPuzzleComponent(_ref) {
+  var _info$solution2;
+
   var emitEvent = _ref.emitEvent,
       info = _ref.info,
       cards = _ref.cards,
@@ -92,11 +94,6 @@ var CardsSelectorPuzzleComponent = function CardsSelectorPuzzleComponent(_ref) {
   var _soundActions = _slicedToArray(soundActions, 1),
       playSound = _soundActions[0];
 
-  var _useState17 = (0, _react.useState)(false),
-      _useState18 = _slicedToArray(_useState17, 2),
-      forceFlipCard = _useState18[0],
-      setForceFlipCard = _useState18[1];
-
   var translate = function translate(id) {
     return emitEvent({
       type: 'translate',
@@ -118,24 +115,14 @@ var CardsSelectorPuzzleComponent = function CardsSelectorPuzzleComponent(_ref) {
       payload: rewardsData
     });
   }, [emitEvent]);
-
-  var endPuzzle = function endPuzzle() {
+  var endPuzzle = (0, _react.useCallback)(function () {
     var _info$solution, _specificFeedbacks$co;
 
     emitEvent({
       type: 'hidePuzzleButtons',
       payload: true
     });
-
-    if (info.solution.right.desc) {
-      setFeedBackText(info.solution.right.desc);
-      setFeedbackResult(true);
-      setFeedbackIsShown(true);
-    } else {
-      setFeedbackResult(true);
-      setFeedbackIsShown(true);
-      setFinished(true);
-    }
+    setFeedbackResult(true);
 
     var _info$solution$right = info === null || info === void 0 ? void 0 : (_info$solution = info.solution) === null || _info$solution === void 0 ? void 0 : _info$solution.right,
         rewards = _info$solution$right.rewards;
@@ -144,16 +131,16 @@ var CardsSelectorPuzzleComponent = function CardsSelectorPuzzleComponent(_ref) {
       return spReward.rewards;
     }).flat()) || [];
     var rewardsData = [].concat(_toConsumableArray(accRewards), _toConsumableArray(rewards), _toConsumableArray(specificRewards));
-    setTimeout(function () {
-      playSound('score');
-      closeFeedbackAndShowPoints(rewardsData);
-    }, 3000);
+    playSound('score');
+    closeFeedbackAndShowPoints(rewardsData);
+  }, [accRewards, closeFeedbackAndShowPoints, emitEvent, info === null || info === void 0 ? void 0 : (_info$solution2 = info.solution) === null || _info$solution2 === void 0 ? void 0 : _info$solution2.right, playSound, specificFeedbacks === null || specificFeedbacks === void 0 ? void 0 : specificFeedbacks.correctFeedbacks]);
+
+  var onFinish = function onFinish() {
+    setFinished(true);
   };
 
   var handleFeedbackFuncionOnClose = function handleFeedbackFuncionOnClose() {
-    var isCorrect = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-
-    if (feedbackResult) {
+    if (feedbackResult || finished) {
       endPuzzle();
     } else {
       setFeedbackResult(false);
@@ -166,10 +153,6 @@ var CardsSelectorPuzzleComponent = function CardsSelectorPuzzleComponent(_ref) {
     }
 
     setFeedBackText('');
-
-    if (!feedbackResult && !isCorrect) {
-      setForceFlipCard(true);
-    }
   };
 
   var handleSuccessPick = function handleSuccessPick(cardId) {
@@ -182,23 +165,17 @@ var CardsSelectorPuzzleComponent = function CardsSelectorPuzzleComponent(_ref) {
 
       if (pickedCard !== null && pickedCard !== void 0 && pickedCard.desc) {
         setFeedBackText(pickedCard.desc);
-      } else {
-        setTimeout(function () {
-          playSound('score');
-          handleFeedbackFuncionOnClose(true);
-          emitEvent({
-            type: 'hidePuzzleButtons',
-            payload: false
-          });
-        }, 2000);
       }
-
-      setFeedbackIsShown(true);
-      emitEvent({
-        type: 'hidePuzzleButtons',
-        payload: true
-      });
+    } else if (info.solution.right.desc) {
+      setFeedBackText(info.solution.right.desc);
     }
+
+    playSound('score');
+    setFeedbackIsShown(true);
+    emitEvent({
+      type: 'hidePuzzleButtons',
+      payload: true
+    });
   };
 
   var handleError = function handleError(cardId) {
@@ -283,17 +260,16 @@ var CardsSelectorPuzzleComponent = function CardsSelectorPuzzleComponent(_ref) {
     setCurrentOrder: setCurrentOrder,
     currentOrder: currentOrder,
     cards: cards,
-    endPuzzle: endPuzzle,
+    onFinish: onFinish,
     handleError: handleError,
     feedbackIsShown: feedbackIsShown,
     resolvePuzzle: resolvePuzzle,
     soundActions: soundActions,
-    handleSuccess: handleSuccessPick,
-    forceFlipCard: forceFlipCard,
-    setForceFlipCard: setForceFlipCard
+    handleSuccess: handleSuccessPick
   })), feedbackIsShown && /*#__PURE__*/_react.default.createElement(_feedbackComponent.default, {
     success: feedbackResult || rightPick,
     text: feedBackText,
+    hasTimeout: !feedBackText,
     translate: translate,
     functionOnClose: handleFeedbackFuncionOnClose
   }));

package/dist/components/drag-item-puzzle-component/components/DragItemPuzzleComponent.js

@@ -264,21 +264,19 @@ var DragItemPuzzleComponent = function DragItemPuzzleComponent(_ref) {
     currentImage.src = imageUrl;
 
     currentImage.onload = function () {
-      if (canvas.current) {
-        layerConfig.current = {
-          x: canvas.current.clientWidth / 2,
-          y: canvas.current.clientHeight / 2,
-          width: currentImage.width,
-          height: currentImage.height,
-          offsetX: currentImage.width / 2,
-          offsetY: currentImage.height / 2,
-          scale: {
-            x: Math.min(canvas.current.clientWidth / currentImage.width, canvas.current.clientHeight / currentImage.height),
-            y: Math.min(canvas.current.clientWidth / currentImage.width, canvas.current.clientHeight / currentImage.height)
-          }
-        };
-        setImageLoaded(true);
-      }
+      layerConfig.current = {
+        x: canvas.current.clientWidth / 2,
+        y: canvas.current.clientHeight / 2,
+        width: currentImage.width,
+        height: currentImage.height,
+        offsetX: currentImage.width / 2,
+        offsetY: currentImage.height / 2,
+        scale: {
+          x: Math.min(canvas.current.clientWidth / currentImage.width, canvas.current.clientHeight / currentImage.height),
+          y: Math.min(canvas.current.clientWidth / currentImage.width, canvas.current.clientHeight / currentImage.height)
+        }
+      };
+      setImageLoaded(true);
     };
 
     setShowTooltip(true);

package/dist/components/pattern-component/components/PatternComponent.js

@@ -42,42 +42,31 @@ var PatternComponent = function PatternComponent(_ref) {
     emitEvent({
       type: 'emitSavePattern',
       payload: {
-        imgId: img.resourceId,
+        imgId: img.imgId,
         name: name,
-        viewed: true,
-        url: imgUrl,
-        type: 'pattern'
+        viewed: true
       }
     });
   };
 
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: viewed ? 'notes--results' : 'readings--container pattern-wrap--overlay'
+    className: viewed ? 'notes--results' : 'readings--container'
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: viewed ? 'notes--results__text' : 'pattern-wrap'
-  }, !viewed ? /*#__PURE__*/_react.default.createElement("div", {
-    className: "pattern"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "pattern__header"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "pattern__title"
-  }, "Modelo"), /*#__PURE__*/_react.default.createElement("button", {
+    className: viewed ? 'notes--results__text' : 'readings readings--image'
+  }, imgUrl && /*#__PURE__*/_react.default.createElement("img", {
+    src: imgUrl,
+    alt: "pattern"
+  }), !viewed ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "position--absolute top right"
+  }, /*#__PURE__*/_react.default.createElement("button", {
     type: "button",
-    className: "pattern__close gat--btn__round",
+    className: "gat--btn__round",
     onClick: function onClick() {
       return close();
     }
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "icon-close"
-  }))), /*#__PURE__*/_react.default.createElement("figure", {
-    className: "pattern__figure"
-  }, imgUrl && /*#__PURE__*/_react.default.createElement("img", {
-    src: imgUrl,
-    alt: "pattern"
-  }))) : /*#__PURE__*/_react.default.createElement("div", null, imgUrl && /*#__PURE__*/_react.default.createElement("img", {
-    src: imgUrl,
-    alt: "pattern"
-  }))));
+  }))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null)));
 };
 
 var _default = PatternComponent;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@gamelearn/arcade-components",
   "author": "Gamelearn",
   "license": "unlicense",
-  "version": "1.4.30-fix1",
+  "version": "1.4.30",
   "main": "dist/index.js",
   "files": [
     "dist",
@@ -64,7 +64,7 @@
     "@babel/eslint-parser": "^7.15.8",
     "@babel/preset-env": "7.12.11",
     "@babel/preset-react": "7.12.10",
-    "@gamelearn/arcade-styles": "0.5.11",
+    "@gamelearn/arcade-styles": "0.5.10",
     "@gamelearn/version": "^1.3.1",
     "@react-three/test-renderer": "6.0.6",
     "@storybook/addon-actions": "6.1.11",