@gamelearn/arcade-components 0.23.0 → 0.23.2

package/dist/components/conversational-pro-component/components/ConversationalProComponent.js

@@ -66,6 +66,13 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
       decision = currentLineData.decision;
   var isFlex = currentLineData.flex;
 
+  var translate = function translate(id) {
+    return emitEvent({
+      type: 'translate',
+      payload: id
+    });
+  };
+
   var getCurrentMessage = function getCurrentMessage() {
     if (voiceOver) {
       return currentLineData;
@@ -220,8 +227,8 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
     className: "conversation--body"
   }, currentMessage ? /*#__PURE__*/_react.default.createElement(_Message.default, {
     current: currentMessage,
-    voiceOver: voiceOver
-  }) : /*#__PURE__*/_react.default.createElement("div", null), /*#__PURE__*/_react.default.createElement("div", {
+    translate: translate
+  }) : null, /*#__PURE__*/_react.default.createElement("div", {
     className: "conversation--controls arcade-conversation--controls"
   }, /*#__PURE__*/_react.default.createElement("button", {
     className: "gat--btn__round ".concat(currentLine > 0 && !lastLine.decision ? '' : 'visibility--hidden'),

package/dist/components/conversational-pro-component/components/Message.js

@@ -7,31 +7,34 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var Message = function Message(_ref) {
   var current = _ref.current,
-      voiceOver = _ref.voiceOver;
+      translate = _ref.translate;
   var currentText = current.text;
+
+  var VoiceOver = function VoiceOver() {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "conversation--voice__over"
+    }, /*#__PURE__*/_react.default.createElement("span", null, current.name ? current.name : 'Voice-Over'));
+  };
+
+  var ThinkFul = function ThinkFul() {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "conversation--voice__over"
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "icon-bubble-thinkful-black"
+    }), /*#__PURE__*/_react.default.createElement("span", null, "[", translate('emotion.thinking'), "]"));
+  };
+
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "conversation--message ".concat(voiceOver ? 'voice--over' : '')
-  }, voiceOver ? /*#__PURE__*/_react.default.createElement("div", {
-    className: "conversation--voice__over"
-  }, /*#__PURE__*/_react.default.createElement("span", null, current.name ? current.name : 'Voice-Over')) : /*#__PURE__*/_react.default.createElement("div", null), /*#__PURE__*/_react.default.createElement("span", {
+    className: "conversation--message ".concat(current.voiceOver ? 'voice--over' : '')
+  }, current.voiceOver ? /*#__PURE__*/_react.default.createElement(VoiceOver, null) : null, current.emotion === 'thinkful' ? /*#__PURE__*/_react.default.createElement(ThinkFul, null) : null, /*#__PURE__*/_react.default.createElement("span", {
     className: "conversation--main__text"
   }, currentText));
 };
 
-Message.propTypes = {
-  current: _propTypes.default.shape({
-    text: _propTypes.default.string,
-    text_labelId: _propTypes.default.string,
-    name: _propTypes.default.string
-  }),
-  voiceOver: _propTypes.default.bool
-};
 Message.defaultProps = {
   current: {},
   voiceOver: false

package/dist/components/conversational-pro-component/components/scene/Panel.js

@@ -32,7 +32,7 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 var defaultCamPos = [0, 14.63, 16];
 
 function Panel(_ref) {
-  var _character$resource, _character$resource$a;
+  var _character$resource4;
 
   var character = _ref.character,
       active = _ref.active,
@@ -40,7 +40,23 @@ function Panel(_ref) {
   var cameraRef = (0, _react.useRef)(null);
   var sceneRef = (0, _react.useRef)(null);
   var isCharacter = character.type === 'character';
-  var emotion = isCharacter ? (character === null || character === void 0 ? void 0 : (_character$resource = character.resource) === null || _character$resource === void 0 ? void 0 : (_character$resource$a = _character$resource.animations) === null || _character$resource$a === void 0 ? void 0 : _character$resource$a[character.emotion || 'neutral']) || {} : {};
+  var emotion = (0, _react.useMemo)(function () {
+    if (isCharacter) {
+      var _character$resource, _character$resource$a;
+
+      if (character !== null && character !== void 0 && (_character$resource = character.resource) !== null && _character$resource !== void 0 && (_character$resource$a = _character$resource.animations) !== null && _character$resource$a !== void 0 && _character$resource$a[character.emotion]) {
+        var _character$resource2, _character$resource2$;
+
+        return character === null || character === void 0 ? void 0 : (_character$resource2 = character.resource) === null || _character$resource2 === void 0 ? void 0 : (_character$resource2$ = _character$resource2.animations) === null || _character$resource2$ === void 0 ? void 0 : _character$resource2$[character.emotion];
+      } else {
+        var _character$resource3, _character$resource3$;
+
+        return character === null || character === void 0 ? void 0 : (_character$resource3 = character.resource) === null || _character$resource3 === void 0 ? void 0 : (_character$resource3$ = _character$resource3.animations) === null || _character$resource3$ === void 0 ? void 0 : _character$resource3$['neutral'];
+      }
+    }
+
+    return {};
+  }, [character.emotion, character === null || character === void 0 ? void 0 : (_character$resource4 = character.resource) === null || _character$resource4 === void 0 ? void 0 : _character$resource4.animations, isCharacter]);
   var onLoadElement = (0, _react.useCallback)(function (model) {
     if (cameraRef.current) {
       var boundingBox = new _three.Box3();

package/dist/components/image-click-wrapper-component/components/ImageClickWrapperComponent.js

@@ -301,7 +301,7 @@ var ImageClickWrapperComponent = function ImageClickWrapperComponent(props) {
   }) : null, /*#__PURE__*/_react.default.createElement(_KonvaMapper.default, {
     completed: completed,
     imageUrl: imageUrl,
-    areas: areasList,
+    areas: hasClickOnce && clickedZones.length ? [clickedZones[0]] : areasList,
     badAreas: badAreasList,
     clickedZones: clickedZones,
     onClick: handleCorrectAreaClick,

package/dist/components/image-click-wrapper-component/mocks/mockForStory.js

@@ -8,7 +8,7 @@ exports.mockPropsOnce = exports.mockProps4 = exports.mockProps3 = exports.mockPr
 var emitEvent = function emitEvent(_ref) {
   var type = _ref.type,
       payload = _ref.payload;
-  console.log('Emit event called', type);
+  console.log('Emit event called', type, payload);
 
   if (type === 'translate') {
     return payload;
@@ -417,6 +417,28 @@ var mockPropsOnce = {
     closed: true
   }],
   badAreas: [],
+  specificFeedbacks: {
+    correctFeedbacks: [{
+      id: '1601910616179',
+      desc: 'specificFeedbacks 1 correcto',
+      rewards: [{
+        id: 'k2koxnkq',
+        name: 'Power',
+        points: 10,
+        type: 'score'
+      }]
+    }, {
+      id: '1601910626254',
+      desc: 'specificFeedbacks 2 correcto',
+      rewards: [{
+        id: 'k2koxnkq',
+        name: 'Ranger',
+        points: 10,
+        type: 'score'
+      }]
+    }],
+    wrongFeedbacks: []
+  },
   hasClickOrder: false,
   hasClickOnce: true,
   hasHighlights: true

package/dist/components/konva-components/Area/index.js

@@ -30,9 +30,11 @@ var Area = function Area(_ref) {
 
   var mouseEnterArea = function mouseEnterArea() {
     if (hasHighlights && !completed && !isClicked) {
-      areaRef.current.setAttr('fill', 'rgba(130, 134, 142, 0.4)');
-      areaRef.current.setAttr('stroke', 'rgba(255, 255, 255, 0.3)');
-      areaRef.current.to({
+      var _areaRef$current, _areaRef$current2, _areaRef$current3;
+
+      (_areaRef$current = areaRef.current) === null || _areaRef$current === void 0 ? void 0 : _areaRef$current.setAttr('fill', 'rgba(130, 134, 142, 0.4)');
+      (_areaRef$current2 = areaRef.current) === null || _areaRef$current2 === void 0 ? void 0 : _areaRef$current2.setAttr('stroke', 'rgba(255, 255, 255, 0.3)');
+      (_areaRef$current3 = areaRef.current) === null || _areaRef$current3 === void 0 ? void 0 : _areaRef$current3.to({
         duration: 0.25,
         opacity: 1
       });
@@ -41,7 +43,9 @@ var Area = function Area(_ref) {
 
   var mouseLeaveArea = function mouseLeaveArea() {
     if (hasHighlights && !completed && !isClicked) {
-      areaRef.current.to({
+      var _areaRef$current4;
+
+      (_areaRef$current4 = areaRef.current) === null || _areaRef$current4 === void 0 ? void 0 : _areaRef$current4.to({
         duration: 0.25,
         opacity: 0
       });
@@ -51,13 +55,17 @@ var Area = function Area(_ref) {
   (0, _react.useEffect)(function () {
     if (completed && !finished) {
       if (!isBad) {
-        areaRef.current.to({
+        var _areaRef$current5, _areaRef$current6;
+
+        (_areaRef$current5 = areaRef.current) === null || _areaRef$current5 === void 0 ? void 0 : _areaRef$current5.to({
           duration: 0.25,
           opacity: 1
         });
-        areaRef.current.globalCompositeOperation('destination-out');
+        (_areaRef$current6 = areaRef.current) === null || _areaRef$current6 === void 0 ? void 0 : _areaRef$current6.globalCompositeOperation('destination-out');
       } else {
-        areaRef.current.to({
+        var _areaRef$current7;
+
+        (_areaRef$current7 = areaRef.current) === null || _areaRef$current7 === void 0 ? void 0 : _areaRef$current7.to({
           duration: 0.25,
           opacity: 0
         });
@@ -67,14 +75,16 @@ var Area = function Area(_ref) {
 
   var clickArea = function clickArea() {
     if (!completed) {
+      var _areaRef$current8, _areaRef$current9;
+
       if (isBad) {
         onClickOutside(area);
       } else {
         onClick(area);
       }
 
-      areaRef.current.setAttr('fill', fillColor);
-      areaRef.current.setAttr('stroke', strokeColor);
+      (_areaRef$current8 = areaRef.current) === null || _areaRef$current8 === void 0 ? void 0 : _areaRef$current8.setAttr('fill', fillColor);
+      (_areaRef$current9 = areaRef.current) === null || _areaRef$current9 === void 0 ? void 0 : _areaRef$current9.setAttr('stroke', strokeColor);
     }
   };
 

package/dist/components/text-click-puzzle-component/mocks/mockForStory.js

@@ -13,7 +13,7 @@ var emitEvent = function emitEvent(_ref) {
     return payload;
   }
 
-  console.log('Emit event called');
+  console.log('Emit event called:', type, 'payload:', payload);
 };
 
 var messages = {
@@ -260,7 +260,9 @@ exports.mockProps = mockProps;
 var mockPropsOnce = {
   emitEvent: emitEvent,
   setResolveAction: function setResolveAction() {},
-  setShowPoints: function setShowPoints() {},
+  setShowPoints: function setShowPoints(points) {
+    console.log('points', points);
+  },
   showFrames: true,
   soundActions: [function () {}, function () {}],
   styles: 'chalkboard',
@@ -323,7 +325,7 @@ var mockPropsOnce = {
         rewards: [{
           id: 'k2koxnkq',
           name: 'Power',
-          points: 10,
+          points: 5,
           type: 'score'
         }]
       }],

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@gamelearn/arcade-components",
   "license": "Gamelearn",
-  "version": "0.23.0",
+  "version": "0.23.2",
   "main": "dist/index.js",
   "files": [
     "dist",
@@ -55,7 +55,7 @@
     "@babel/cli": "7.12.10",
     "@babel/preset-env": "7.12.11",
     "@babel/preset-react": "7.12.10",
-    "@gamelearn/ui-components-core": "5.42.0",
+    "@gamelearn/ui-components-core": "5.49.0",
     "@react-three/test-renderer": "6.0.6",
     "@storybook/addon-actions": "6.1.11",
     "@storybook/addon-essentials": "6.1.11",