@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.
- package/dist/components/cards-selector-puzzle-component/components/CardsSelectorPuzzleComponent.js +56 -21
- package/dist/components/cards-selector-puzzle-component/mocks/mockForStory.js +192 -3
- package/dist/components/chained-image-click-puzzle-component/mocks/mockForStory.js +2 -2
- package/dist/components/cracker-puzzle-component/components/CrackerPuzzleComponent.js +1 -1
- package/dist/components/cracker-puzzle-component/mocks/mockForStory.js +65 -3
- package/dist/components/drag-item-puzzle-component/components/DragItemPuzzleComponent.js +56 -34
- package/dist/components/drag-item-puzzle-component/components/Messages.js +3 -37
- package/dist/components/feedback-component/components/FeedbackComponent.js +46 -14
- package/dist/components/feedback-component/mocks/mockForStory.js +25 -5
- package/dist/components/frame-click-puzzle-component/components/CurrentFramePuzzle.js +4 -3
- package/dist/components/frame-click-puzzle-component/components/FrameClickPuzzleComponent.js +10 -1
- package/dist/components/frame-click-puzzle-component/mocks/mockForStory.js +2 -2
- package/dist/components/hacker-puzzle-component/mocks/mockForStory.js +7 -1
- package/dist/components/hanged-puzzle-component/components/HangedPuzzleComponent.js +71 -18
- package/dist/components/hanged-puzzle-component/mocks/mockForStory.js +7 -1
- package/dist/components/image-click-puzzle-component/mocks/mockForStory.js +7 -1
- package/dist/components/image-click-wrapper-component/components/ImageClickWrapperComponent.js +51 -64
- package/dist/components/image-click-wrapper-component/mocks/mockForStory.js +8 -2
- package/dist/components/image-component/mocks/mockForStory.js +7 -1
- package/dist/components/index.js +8 -0
- package/dist/components/keyboard-puzzle-component/components/KeyboardPuzzleComponent.js +10 -2
- package/dist/components/keyboard-puzzle-component/mocks/mockForStory.js +7 -1
- package/dist/components/konva-components/KonvaMapper.js +4 -4
- package/dist/components/survey-component/components/SurveyComponent.js +1 -1
- package/dist/components/terminal-puzzle-component/components/FilesGroup/index.js +6 -6
- package/dist/components/terminal-puzzle-component/components/Visor/index.js +5 -28
- package/dist/components/terminal-puzzle-component/mocks/mockForStory.js +7 -2
- package/package.json +3 -3
package/dist/components/cards-selector-puzzle-component/components/CardsSelectorPuzzleComponent.js
CHANGED
|
@@ -11,7 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
11
11
|
|
|
12
12
|
var _Board = _interopRequireDefault(require("./Board"));
|
|
13
13
|
|
|
14
|
-
var
|
|
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
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
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
|
-
}
|
|
126
|
+
} else {
|
|
127
|
+
setFeedbackResult(false);
|
|
128
|
+
disableExit(false);
|
|
129
|
+
setFeedbackIsShown(false);
|
|
130
|
+
}
|
|
102
131
|
};
|
|
103
132
|
|
|
104
133
|
var _handleError = function handleError() {
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
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
|
-
|
|
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(
|
|
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)(
|
|
63
|
+
var _useState = (0, _react.useState)(''),
|
|
62
64
|
_useState2 = _slicedToArray(_useState, 2),
|
|
63
|
-
|
|
64
|
-
|
|
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
|
-
|
|
69
|
-
|
|
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
|
-
|
|
74
|
-
|
|
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
|
|
82
|
-
|
|
83
|
-
currentImage =
|
|
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 (
|
|
93
|
+
if (resolvedClass !== "") {
|
|
97
94
|
disableExit(true);
|
|
98
95
|
}
|
|
99
|
-
}, [
|
|
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
|
-
|
|
184
|
-
setSucess(true);
|
|
195
|
+
setResolveClass('success');
|
|
185
196
|
emitEvent({
|
|
186
197
|
type: 'closeUI',
|
|
187
198
|
ui: 'inventory'
|
|
188
199
|
});
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
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
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
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
|
-
}
|
|
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
|
-
}),
|
|
320
|
-
|
|
321
|
-
|
|
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
|
-
|
|
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 =
|
|
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
|
|
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", {
|