@gamelearn/arcade-components 0.16.3 → 0.17.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/dist/components/cards-selector-puzzle-component/components/CardsSelectorPuzzleComponent.js +56 -21
  2. package/dist/components/cards-selector-puzzle-component/mocks/mockForStory.js +192 -3
  3. package/dist/components/chained-image-click-puzzle-component/mocks/mockForStory.js +2 -2
  4. package/dist/components/cracker-puzzle-component/components/CrackerPuzzleComponent.js +1 -1
  5. package/dist/components/cracker-puzzle-component/mocks/mockForStory.js +65 -3
  6. package/dist/components/drag-item-puzzle-component/components/DragItemPuzzleComponent.js +56 -34
  7. package/dist/components/drag-item-puzzle-component/components/Messages.js +3 -37
  8. package/dist/components/feedback-component/components/FeedbackComponent.js +46 -14
  9. package/dist/components/feedback-component/mocks/mockForStory.js +25 -5
  10. package/dist/components/frame-click-puzzle-component/components/CurrentFramePuzzle.js +4 -3
  11. package/dist/components/frame-click-puzzle-component/components/FrameClickPuzzleComponent.js +10 -1
  12. package/dist/components/frame-click-puzzle-component/mocks/mockForStory.js +2 -2
  13. package/dist/components/hacker-puzzle-component/mocks/mockForStory.js +7 -1
  14. package/dist/components/hanged-puzzle-component/components/HangedPuzzleComponent.js +71 -18
  15. package/dist/components/hanged-puzzle-component/mocks/mockForStory.js +7 -1
  16. package/dist/components/image-click-puzzle-component/mocks/mockForStory.js +7 -1
  17. package/dist/components/image-click-wrapper-component/components/ImageClickWrapperComponent.js +51 -64
  18. package/dist/components/image-click-wrapper-component/mocks/mockForStory.js +8 -2
  19. package/dist/components/image-component/mocks/mockForStory.js +7 -1
  20. package/dist/components/index.js +8 -0
  21. package/dist/components/keyboard-puzzle-component/components/KeyboardPuzzleComponent.js +10 -2
  22. package/dist/components/keyboard-puzzle-component/mocks/mockForStory.js +7 -1
  23. package/dist/components/konva-components/KonvaMapper.js +4 -4
  24. package/dist/components/survey-component/components/SurveyComponent.js +1 -1
  25. package/dist/components/terminal-puzzle-component/components/FilesGroup/index.js +6 -6
  26. package/dist/components/terminal-puzzle-component/components/Visor/index.js +5 -28
  27. package/dist/components/terminal-puzzle-component/mocks/mockForStory.js +7 -2
  28. package/package.json +3 -3
@@ -11,7 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
11
11
 
12
12
  var _Board = _interopRequireDefault(require("./Board"));
13
13
 
14
- var _FeedbackComponent = _interopRequireDefault(require("../../feedback-component/components/FeedbackComponent"));
14
+ var _feedbackComponent = _interopRequireDefault(require("../../feedback-component"));
15
15
 
16
16
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
17
 
@@ -85,34 +85,67 @@ var CardsSelectorPuzzleComponent = function CardsSelectorPuzzleComponent(_ref) {
85
85
  var _soundActions = _slicedToArray(soundActions, 1),
86
86
  playSound = _soundActions[0];
87
87
 
88
+ var translate = function translate(id) {
89
+ return emitEvent({
90
+ type: 'translate',
91
+ payload: id
92
+ });
93
+ };
94
+
88
95
  var _endPuzzle = function endPuzzle() {
89
- setFeedbackResult(true);
90
- setFeedBackText(info.solution.right.desc);
91
- setFeedbackIsShown(true);
92
- setFinished(true);
93
- var rewards = info.solution.right.rewards;
94
- var rewardsData = [].concat(_toConsumableArray(accRewards), _toConsumableArray(rewards));
95
- setTimeout(function () {
96
+ if (info.solution.right.desc) {
97
+ setFeedBackText(info.solution.right.desc);
98
+ setFeedbackResult(true);
99
+ setFeedbackIsShown(true);
100
+ } else {
101
+ setFeedbackResult(true);
102
+ setFeedbackIsShown(true);
103
+ setFinished(true);
104
+ var rewards = info.solution.right.rewards;
105
+ var rewardsData = [].concat(_toConsumableArray(accRewards), _toConsumableArray(rewards));
106
+ setTimeout(function () {
107
+ playSound('score');
108
+ emitEvent({
109
+ type: 'addPoints',
110
+ payload: _toConsumableArray(rewardsData)
111
+ });
112
+ }, 3000);
113
+ }
114
+ };
115
+
116
+ var handleFeedbackFuncionOnClose = function handleFeedbackFuncionOnClose() {
117
+ if (feedbackResult) {
118
+ setFinished(true);
119
+ var rewards = info.solution.right.rewards;
120
+ var rewardsData = [].concat(_toConsumableArray(accRewards), _toConsumableArray(rewards));
96
121
  playSound('score');
97
122
  emitEvent({
98
123
  type: 'addPoints',
99
124
  payload: _toConsumableArray(rewardsData)
100
125
  });
101
- }, 3000);
126
+ } else {
127
+ setFeedbackResult(false);
128
+ disableExit(false);
129
+ setFeedbackIsShown(false);
130
+ }
102
131
  };
103
132
 
104
133
  var _handleError = function handleError() {
105
- setFeedbackResult(false);
106
- setFeedBackText(info.solution.wrong.desc);
107
- setFeedbackIsShown(true);
134
+ // si hay feedback definido
135
+ if (info.solution.wrong.desc) {
136
+ setFeedBackText(info.solution.wrong.desc);
137
+ setFeedbackIsShown(true);
138
+ } // si no hay feedback definido, se muestra feedback por defecto
139
+ else {
140
+ setFeedbackIsShown(true);
141
+ setTimeout(function () {
142
+ handleFeedbackFuncionOnClose();
143
+ }, 3000);
144
+ }
145
+
108
146
  disableExit(true);
109
147
  setRewards([].concat(_toConsumableArray(accRewards), _toConsumableArray(info.solution.wrong.rewards)));
110
- setTimeout(function () {
111
- playSound('fail');
112
- setFeedbackResult(false);
113
- disableExit(false);
114
- setFeedbackIsShown(false);
115
- }, 3000);
148
+ playSound('fail');
116
149
  };
117
150
 
118
151
  (0, _react.useEffect)(function () {
@@ -131,7 +164,6 @@ var CardsSelectorPuzzleComponent = function CardsSelectorPuzzleComponent(_ref) {
131
164
  });
132
165
  }, 4000);
133
166
  });
134
- disableExit(true);
135
167
  }, [setResolveAction, disableExit, accRewards, info.resolve.rewards, emitEvent]);
136
168
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
137
169
  className: "cards-selector"
@@ -147,9 +179,12 @@ var CardsSelectorPuzzleComponent = function CardsSelectorPuzzleComponent(_ref) {
147
179
  },
148
180
  feedbackIsShown: feedbackIsShown,
149
181
  resolvePuzzle: resolvePuzzle
150
- })), feedbackIsShown && /*#__PURE__*/_react.default.createElement(_FeedbackComponent.default, {
182
+ })), feedbackIsShown && /*#__PURE__*/_react.default.createElement(_feedbackComponent.default, {
183
+ playSound: playSound,
151
184
  success: feedbackResult,
152
- text: feedBackText
185
+ text: feedBackText,
186
+ translate: translate,
187
+ functionOnClose: handleFeedbackFuncionOnClose
153
188
  }));
154
189
  };
155
190
 
@@ -3,10 +3,16 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.mockProps2 = exports.mockProps = void 0;
6
+ exports.mockProps4 = exports.mockProps3 = exports.mockProps2 = exports.mockProps = void 0;
7
7
 
8
- var emitEvent = function emitEvent() {
8
+ var emitEvent = function emitEvent(_ref) {
9
+ var type = _ref.type,
10
+ payload = _ref.payload;
9
11
  console.log('Emit event called');
12
+
13
+ if (type === "translate") {
14
+ return payload;
15
+ }
10
16
  };
11
17
 
12
18
  var mockProps = {
@@ -87,6 +93,7 @@ var mockProps = {
87
93
  exports.mockProps = mockProps;
88
94
  var mockProps2 = {
89
95
  emitEvent: emitEvent,
96
+ soundActions: [function () {}, function () {}],
90
97
  disableExit: function disableExit() {},
91
98
  setResolveAction: function setResolveAction() {},
92
99
  cards: [{
@@ -95,6 +102,7 @@ var mockProps2 = {
95
102
  imgId: '5df20e1ad3c6ce0015c2933b',
96
103
  correct: true,
97
104
  img: {
105
+ order: 1,
98
106
  url: 'https://min.int.gamelearn.io/cooked.gl-lms-storage/clients/58dccfba26561500117caf53/image/6092b996901f3e00124638fb/star_wars_correllian_scout_ship_by_jonnygray_dbtiwhh-fullview-removebg-preview.png',
99
107
  imgName: 'corelian.png',
100
108
  resourceId: '6007f80eac41ad001120f135'
@@ -115,6 +123,7 @@ var mockProps2 = {
115
123
  imgId: '5df20e1ad3c6ce0015c2933b',
116
124
  correct: true,
117
125
  img: {
126
+ order: 2,
118
127
  url: 'https://min.int.gamelearn.io/cooked.gl-lms-storage/clients/58dccfba26561500117caf53/image/6092c1d4901f3e00124647b5/Zeta-class_shuttle_ROUVG-removebg-preview.png',
119
128
  imgName: 'transport.png',
120
129
  resourceId: '6007f80eac41ad001120f135'
@@ -157,4 +166,184 @@ var mockProps2 = {
157
166
  }
158
167
  }
159
168
  };
160
- exports.mockProps2 = mockProps2;
169
+ exports.mockProps2 = mockProps2;
170
+ var mockProps3 = {
171
+ emitEvent: emitEvent,
172
+ soundActions: [function () {}, function () {}],
173
+ disableExit: function disableExit() {},
174
+ setResolveAction: function setResolveAction() {},
175
+ cards: [{
176
+ text: 'Corellian',
177
+ imgName: 'puerta.png',
178
+ imgId: '5df20e1ad3c6ce0015c2933b',
179
+ correct: true,
180
+ img: {
181
+ url: 'https://min.int.gamelearn.io/cooked.gl-lms-storage/clients/58dccfba26561500117caf53/image/6092b996901f3e00124638fb/star_wars_correllian_scout_ship_by_jonnygray_dbtiwhh-fullview-removebg-preview.png',
182
+ imgName: 'corelian.png',
183
+ resourceId: '6007f80eac41ad001120f135'
184
+ }
185
+ }, {
186
+ text: 'Cruiser',
187
+ imgName: 'cruiser.png',
188
+ imgId: '5df20e1ad3c6ce0015c2933b',
189
+ correct: false,
190
+ img: {
191
+ url: 'https://min.int.gamelearn.io/cooked.gl-lms-storage/clients/58dccfba26561500117caf53/image/6092b941901f3e00124638f0/c7409fc0de568a410e83ac35737b4859-removebg-preview.png',
192
+ imgName: 'cruiser.png',
193
+ resourceId: '6007f80eac41ad001120f135'
194
+ }
195
+ }, {
196
+ text: 'Transport',
197
+ imgName: 'Transport.png',
198
+ imgId: '5df20e1ad3c6ce0015c2933b',
199
+ correct: true,
200
+ img: {
201
+ url: 'https://min.int.gamelearn.io/cooked.gl-lms-storage/clients/58dccfba26561500117caf53/image/6092c1d4901f3e00124647b5/Zeta-class_shuttle_ROUVG-removebg-preview.png',
202
+ imgName: 'transport.png',
203
+ resourceId: '6007f80eac41ad001120f135'
204
+ }
205
+ }, {
206
+ text: 'Corellian',
207
+ imgName: 'puerta.png',
208
+ imgId: '5df20e1ad3c6ce0015c2933b',
209
+ correct: true,
210
+ img: {
211
+ url: 'https://min.int.gamelearn.io/cooked.gl-lms-storage/clients/58dccfba26561500117caf53/image/6092b996901f3e00124638fb/star_wars_correllian_scout_ship_by_jonnygray_dbtiwhh-fullview-removebg-preview.png',
212
+ imgName: 'corelian.png',
213
+ resourceId: '6007f80eac41ad001120f135'
214
+ }
215
+ }, {
216
+ text: 'Cruiser',
217
+ imgName: 'cruiser.png',
218
+ imgId: '5df20e1ad3c6ce0015c2933b',
219
+ correct: false,
220
+ img: {
221
+ url: 'https://min.int.gamelearn.io/cooked.gl-lms-storage/clients/58dccfba26561500117caf53/image/6092b941901f3e00124638f0/c7409fc0de568a410e83ac35737b4859-removebg-preview.png',
222
+ imgName: 'cruiser.png',
223
+ resourceId: '6007f80eac41ad001120f135'
224
+ }
225
+ }, {
226
+ text: 'Transport',
227
+ imgName: 'Transport.png',
228
+ imgId: '5df20e1ad3c6ce0015c2933b',
229
+ correct: true,
230
+ img: {
231
+ url: 'https://min.int.gamelearn.io/cooked.gl-lms-storage/clients/58dccfba26561500117caf53/image/6092c1d4901f3e00124647b5/Zeta-class_shuttle_ROUVG-removebg-preview.png',
232
+ imgName: 'transport.png',
233
+ resourceId: '6007f80eac41ad001120f135'
234
+ }
235
+ }],
236
+ info: {
237
+ hint: {
238
+ active: true,
239
+ desc: 'asdfas'
240
+ },
241
+ instructions: 'Instructions for doing this Puzzle',
242
+ description: 'This is a puzzle about select cards',
243
+ solution: {
244
+ right: {
245
+ desc: 'correctSolution',
246
+ rewards: [{
247
+ id: 'k2koxnkq',
248
+ name: 'Power',
249
+ points: 22,
250
+ type: 'score'
251
+ }]
252
+ },
253
+ wrong: {
254
+ desc: 'wrongSolution',
255
+ rewards: [{
256
+ id: 'k2koxnkq',
257
+ name: 'Power',
258
+ points: -33,
259
+ type: 'score'
260
+ }]
261
+ }
262
+ },
263
+ resolve: {
264
+ rewards: [{
265
+ id: 'k2koxnkq',
266
+ name: 'Power',
267
+ points: -103,
268
+ type: 'score'
269
+ }]
270
+ }
271
+ }
272
+ };
273
+ exports.mockProps3 = mockProps3;
274
+ var mockProps4 = {
275
+ emitEvent: emitEvent,
276
+ soundActions: [function () {}, function () {}],
277
+ disableExit: function disableExit() {},
278
+ setResolveAction: function setResolveAction() {},
279
+ cards: [{
280
+ text: 'Corellian',
281
+ imgName: 'puerta.png',
282
+ imgId: '5df20e1ad3c6ce0015c2933b',
283
+ correct: true,
284
+ img: {
285
+ order: 1,
286
+ url: 'https://min.int.gamelearn.io/cooked.gl-lms-storage/clients/58dccfba26561500117caf53/image/6092b996901f3e00124638fb/star_wars_correllian_scout_ship_by_jonnygray_dbtiwhh-fullview-removebg-preview.png',
287
+ imgName: 'corelian.png',
288
+ resourceId: '6007f80eac41ad001120f135'
289
+ }
290
+ }, {
291
+ text: 'Cruiser',
292
+ imgName: 'cruiser.png',
293
+ imgId: '5df20e1ad3c6ce0015c2933b',
294
+ correct: false,
295
+ img: {
296
+ url: 'https://min.int.gamelearn.io/cooked.gl-lms-storage/clients/58dccfba26561500117caf53/image/6092b941901f3e00124638f0/c7409fc0de568a410e83ac35737b4859-removebg-preview.png',
297
+ imgName: 'cruiser.png',
298
+ resourceId: '6007f80eac41ad001120f135'
299
+ }
300
+ }, {
301
+ text: 'Transport',
302
+ imgName: 'Transport.png',
303
+ imgId: '5df20e1ad3c6ce0015c2933b',
304
+ correct: true,
305
+ img: {
306
+ order: 2,
307
+ url: 'https://min.int.gamelearn.io/cooked.gl-lms-storage/clients/58dccfba26561500117caf53/image/6092c1d4901f3e00124647b5/Zeta-class_shuttle_ROUVG-removebg-preview.png',
308
+ imgName: 'transport.png',
309
+ resourceId: '6007f80eac41ad001120f135'
310
+ }
311
+ }],
312
+ info: {
313
+ hint: {
314
+ active: true,
315
+ desc: 'asdfas'
316
+ },
317
+ instructions: 'Instructions for doing this Puzzle',
318
+ description: 'This is a puzzle about select cards',
319
+ solution: {
320
+ right: {
321
+ desc: '',
322
+ rewards: [{
323
+ id: 'k2koxnkq',
324
+ name: 'Power',
325
+ points: 22,
326
+ type: 'score'
327
+ }]
328
+ },
329
+ wrong: {
330
+ desc: '',
331
+ rewards: [{
332
+ id: 'k2koxnkq',
333
+ name: 'Power',
334
+ points: -33,
335
+ type: 'score'
336
+ }]
337
+ }
338
+ },
339
+ resolve: {
340
+ rewards: [{
341
+ id: 'k2koxnkq',
342
+ name: 'Power',
343
+ points: -103,
344
+ type: 'score'
345
+ }]
346
+ }
347
+ }
348
+ };
349
+ exports.mockProps4 = mockProps4;
@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.mockProps = void 0;
7
7
 
8
- var emitEvent = function emitEvent() {
9
- console.log('Emit event called');
8
+ var emitEvent = function emitEvent(type) {
9
+ console.log('Emit event called', type);
10
10
  };
11
11
 
12
12
  var soundActions = [function (sound) {
@@ -279,7 +279,7 @@ var CrackerPuzzleComponent = function CrackerPuzzleComponent(_ref) {
279
279
  grid: finished ? [[]] : grid,
280
280
  cursorPosition: cursorPosition,
281
281
  setCursorPosition: setCursorPosition
282
- }), finished && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactTypist.default, {
282
+ }), finished && crackedPasswordMsg && congratulationsMsg && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactTypist.default, {
283
283
  avgTypingDelay: 110,
284
284
  cursor: {
285
285
  hideWhenDone: true
@@ -3,10 +3,16 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.mockProps4 = exports.mockProps3 = exports.mockProps2 = exports.mockProps = void 0;
6
+ exports.mockProps5 = exports.mockProps4 = exports.mockProps3 = exports.mockProps2 = exports.mockProps = void 0;
7
7
 
8
- var emitEvent = function emitEvent() {
8
+ var emitEvent = function emitEvent(_ref) {
9
+ var type = _ref.type,
10
+ payload = _ref.payload;
9
11
  console.log('Emit event called');
12
+
13
+ if (type === 'translate') {
14
+ return payload;
15
+ }
10
16
  };
11
17
 
12
18
  var mockProps = {
@@ -66,6 +72,7 @@ var mockProps2 = {
66
72
  emitEvent: emitEvent,
67
73
  disableExit: function disableExit() {},
68
74
  setResolveAction: function setResolveAction() {},
75
+ soundActions: [function () {}, function () {}],
69
76
  velocity: 'fast',
70
77
  difficulty: 'medium',
71
78
  nodeTitle: 'gfhfgh',
@@ -118,6 +125,7 @@ var mockProps3 = {
118
125
  emitEvent: emitEvent,
119
126
  disableExit: function disableExit() {},
120
127
  setResolveAction: function setResolveAction() {},
128
+ soundActions: [function () {}, function () {}],
121
129
  velocity: 'fastest',
122
130
  difficulty: 'hard',
123
131
  nodeTitle: 'gfhfgh',
@@ -170,6 +178,7 @@ var mockProps4 = {
170
178
  emitEvent: emitEvent,
171
179
  disableExit: function disableExit() {},
172
180
  setResolveAction: function setResolveAction() {},
181
+ soundActions: [function () {}, function () {}],
173
182
  velocity: 'fastest',
174
183
  difficulty: 'hard',
175
184
  nodeTitle: 'gfhfgh',
@@ -217,4 +226,57 @@ var mockProps4 = {
217
226
  description: 'description'
218
227
  }
219
228
  };
220
- exports.mockProps4 = mockProps4;
229
+ exports.mockProps4 = mockProps4;
230
+ var mockProps5 = {
231
+ emitEvent: emitEvent,
232
+ disableExit: function disableExit() {},
233
+ setResolveAction: function setResolveAction() {},
234
+ soundActions: [function () {}, function () {}],
235
+ velocity: 'slow',
236
+ difficulty: 'easy',
237
+ nodeTitle: 'gfhfgh',
238
+ password: 'a',
239
+ info: {
240
+ solution: {
241
+ right: {
242
+ desc: 'cghc',
243
+ rewards: [{
244
+ id: 'k49zf40n',
245
+ name: 'asd',
246
+ points: 4,
247
+ type: 'score'
248
+ }]
249
+ },
250
+ wrong: {
251
+ desc: 'cghcgh',
252
+ rewards: [{
253
+ id: 'k49zf40n',
254
+ name: 'asd',
255
+ points: 44,
256
+ type: 'score'
257
+ }]
258
+ }
259
+ },
260
+ hint: {
261
+ active: true,
262
+ desc: 'asdfas',
263
+ rewards: [{
264
+ id: 'k49zf40n',
265
+ name: 'asd',
266
+ points: 22,
267
+ type: 'score'
268
+ }]
269
+ },
270
+ resolve: {
271
+ rewards: [{
272
+ id: 'k49zf40n',
273
+ name: 'asd',
274
+ points: 55,
275
+ type: 'score'
276
+ }]
277
+ },
278
+ instructions: 'cghgfdhgch',
279
+ description: 'description'
280
+ }
281
+ };
282
+ exports.mockProps5 = mockProps5;
@@ -15,6 +15,8 @@ var _reactKonva = require("react-konva");
15
15
 
16
16
  var _Messages = require("./Messages");
17
17
 
18
+ var _feedbackComponent = _interopRequireDefault(require("../../feedback-component"));
19
+
18
20
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19
21
 
20
22
  function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
@@ -58,29 +60,24 @@ var DragItemPuzzleComponent = function DragItemPuzzleComponent(_ref) {
58
60
  var canvas = (0, _react.useRef)();
59
61
  var layerConfig = (0, _react.useRef)({});
60
62
 
61
- var _useState = (0, _react.useState)(false),
63
+ var _useState = (0, _react.useState)(''),
62
64
  _useState2 = _slicedToArray(_useState, 2),
63
- success = _useState2[0],
64
- setSucess = _useState2[1];
65
+ resolvedClass = _useState2[0],
66
+ setResolveClass = _useState2[1];
65
67
 
66
68
  var _useState3 = (0, _react.useState)(false),
67
69
  _useState4 = _slicedToArray(_useState3, 2),
68
- failed = _useState4[0],
69
- setFailed = _useState4[1];
70
+ showTooltip = _useState4[0],
71
+ setShowTooltip = _useState4[1];
70
72
 
71
73
  var _useState5 = (0, _react.useState)(false),
72
74
  _useState6 = _slicedToArray(_useState5, 2),
73
- showTooltip = _useState6[0],
74
- setShowTooltip = _useState6[1];
75
-
76
- var _useState7 = (0, _react.useState)(false),
77
- _useState8 = _slicedToArray(_useState7, 2),
78
- imageLoaded = _useState8[0],
79
- setImageLoaded = _useState8[1];
75
+ imageLoaded = _useState6[0],
76
+ setImageLoaded = _useState6[1];
80
77
 
81
- var _useState9 = (0, _react.useState)(new window.Image()),
82
- _useState10 = _slicedToArray(_useState9, 1),
83
- currentImage = _useState10[0];
78
+ var _useState7 = (0, _react.useState)(new window.Image()),
79
+ _useState8 = _slicedToArray(_useState7, 1),
80
+ currentImage = _useState8[0];
84
81
 
85
82
  var _soundActions = _slicedToArray(soundActions, 1),
86
83
  playSound = _soundActions[0];
@@ -93,10 +90,10 @@ var DragItemPuzzleComponent = function DragItemPuzzleComponent(_ref) {
93
90
  };
94
91
 
95
92
  (0, _react.useEffect)(function () {
96
- if (success) {
93
+ if (resolvedClass !== "") {
97
94
  disableExit(true);
98
95
  }
99
- }, [success, disableExit]);
96
+ }, [resolvedClass, disableExit]);
100
97
 
101
98
  var intersectRect = function intersectRect(a, b) {
102
99
  return (a.x + a.width > b.x && a.x + a.width <= b.x + b.width || b.x + b.width > a.x && b.x + b.width <= a.x + a.width) && (a.y + a.height > b.y && a.y + a.height <= b.y + b.height || b.y + b.height > a.y && b.y + b.height <= a.y + a.height);
@@ -173,6 +170,21 @@ var DragItemPuzzleComponent = function DragItemPuzzleComponent(_ref) {
173
170
  ui: 'inventory'
174
171
  });
175
172
  }, [consume, emitEvent, resolveObject.name, resolveObject.uid, solution.right]);
173
+ var handleClose = (0, _react.useCallback)(function () {
174
+ playSound('score');
175
+ setResolveClass('success');
176
+ setTimeout(function () {
177
+ handleFinish();
178
+ }, 2000);
179
+ }, [handleFinish, playSound]);
180
+ var handleFail = (0, _react.useCallback)(function () {
181
+ emitEvent({
182
+ type: 'closeUI',
183
+ ui: 'inventory'
184
+ });
185
+ playSound('fail');
186
+ setResolveClass('');
187
+ }, [emitEvent, playSound]);
176
188
  var handleDrop = (0, _react.useCallback)(function (e) {
177
189
  e.dragEvent.stopPropagation();
178
190
  e.dragEvent.preventDefault();
@@ -180,27 +192,38 @@ var DragItemPuzzleComponent = function DragItemPuzzleComponent(_ref) {
180
192
  var object = e.relatedTarget.getAttribute('data-item');
181
193
 
182
194
  if (over && checkCorrectObject(object)) {
183
- playSound('score');
184
- setSucess(true);
195
+ setResolveClass('success');
185
196
  emitEvent({
186
197
  type: 'closeUI',
187
198
  ui: 'inventory'
188
199
  });
189
- setTimeout(function () {
190
- handleFinish();
191
- }, 4000);
200
+
201
+ if (info.solution.right.desc === '') {
202
+ handleClose();
203
+ }
192
204
  } else {
193
205
  emitEvent({
194
206
  type: 'closeUI',
195
207
  ui: 'inventory'
196
208
  });
197
- playSound('fail');
198
- setFailed(true);
199
- setTimeout(function () {
200
- setFailed(false);
201
- }, 4000);
209
+ setResolveClass('failed');
210
+
211
+ if (info.solution.wrong.desc === '') {
212
+ setTimeout(function () {
213
+ handleFail();
214
+ }, 2000);
215
+ }
216
+ }
217
+ }, [calculateOverArea, checkCorrectObject, emitEvent, handleClose, handleFail, info.solution.right.desc, info.solution.wrong.desc]);
218
+
219
+ var handleFeedbackFuncionOnClose = function handleFeedbackFuncionOnClose() {
220
+ if (resolvedClass === 'success') {
221
+ handleClose();
222
+ } else {
223
+ handleFail();
202
224
  }
203
- }, [calculateOverArea, checkCorrectObject, emitEvent, handleFinish, playSound]);
225
+ };
226
+
204
227
  (0, _react.useEffect)(function () {
205
228
  var imageUrl = image.img.url || '';
206
229
  currentImage.src = imageUrl;
@@ -316,13 +339,12 @@ var DragItemPuzzleComponent = function DragItemPuzzleComponent(_ref) {
316
339
  opacity: 0
317
340
  }))) : null)), showTooltip && /*#__PURE__*/_react.default.createElement(_Messages.TooltipHint, {
318
341
  translate: translate
319
- }), success && /*#__PURE__*/_react.default.createElement(_Messages.SuccessMessage, {
320
- translate: translate,
321
- desc: solution.right.desc
322
- }), failed && /*#__PURE__*/_react.default.createElement(_Messages.FailedMessage, {
342
+ }), resolvedClass !== "" ? /*#__PURE__*/_react.default.createElement(_feedbackComponent.default, {
343
+ text: info.solution[resolvedClass === 'success' ? 'right' : 'wrong'].desc,
344
+ success: resolvedClass === 'success',
323
345
  translate: translate,
324
- desc: solution.wrong.desc
325
- }));
346
+ functionOnClose: handleFeedbackFuncionOnClose
347
+ }) : null);
326
348
  };
327
349
 
328
350
  var _default = DragItemPuzzleComponent;
@@ -3,48 +3,14 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.TooltipHint = exports.FailedMessage = exports.SuccessMessage = void 0;
6
+ exports.TooltipHint = void 0;
7
7
 
8
8
  var _react = _interopRequireDefault(require("react"));
9
9
 
10
10
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
11
 
12
- var SuccessMessage = function SuccessMessage(_ref) {
13
- var translate = _ref.translate,
14
- desc = _ref.desc;
15
- return /*#__PURE__*/_react.default.createElement("div", {
16
- className: "puzzle--image__result bottom success",
17
- style: {
18
- zIndex: 11
19
- }
20
- }, /*#__PURE__*/_react.default.createElement("span", {
21
- className: "title"
22
- }, translate('tooltip.correct')), /*#__PURE__*/_react.default.createElement("span", {
23
- className: "description"
24
- }, desc ? desc : null));
25
- };
26
-
27
- exports.SuccessMessage = SuccessMessage;
28
-
29
- var FailedMessage = function FailedMessage(_ref2) {
30
- var translate = _ref2.translate,
31
- desc = _ref2.desc;
32
- return /*#__PURE__*/_react.default.createElement("div", {
33
- className: "puzzle--image__result bottom failed",
34
- style: {
35
- zIndex: 11
36
- }
37
- }, /*#__PURE__*/_react.default.createElement("span", {
38
- className: "title"
39
- }, translate('tooltip.incorrect')), /*#__PURE__*/_react.default.createElement("span", {
40
- className: "description"
41
- }, desc ? desc : null));
42
- };
43
-
44
- exports.FailedMessage = FailedMessage;
45
-
46
- var TooltipHint = function TooltipHint(_ref3) {
47
- var translate = _ref3.translate;
12
+ var TooltipHint = function TooltipHint(_ref) {
13
+ var translate = _ref.translate;
48
14
  return /*#__PURE__*/_react.default.createElement("div", {
49
15
  className: "tooltip tooltip--bottom__right puzzle--drag__mask--tooltip"
50
16
  }, /*#__PURE__*/_react.default.createElement("i", {