@gamelearn/arcade-components 2.15.0 → 2.15.2
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/dialog-component/components/DialogComponent.js +22 -8
- package/dist/components/konva-components/Area/index.js +4 -1
- package/dist/components/login-puzzle-component/components/LoginPuzzleComponent.js +9 -6
- package/dist/components/pdf-component/components/PdfVisor.js +0 -1
- package/dist/components/test-component/components/Questions.js +13 -1
- package/package.json +2 -2
|
@@ -145,6 +145,7 @@ var DialogComponent = function DialogComponent(_ref) {
|
|
|
145
145
|
var lastLine = lines[line - 1];
|
|
146
146
|
var lastSet = (0, _react.useRef)(false);
|
|
147
147
|
var isBranched = !!edges;
|
|
148
|
+
var onZoomEnd = (0, _react.useRef)(function () {});
|
|
148
149
|
|
|
149
150
|
var _ref2 = currentLineData || {},
|
|
150
151
|
voiceOver = _ref2.voiceOver,
|
|
@@ -302,7 +303,10 @@ var DialogComponent = function DialogComponent(_ref) {
|
|
|
302
303
|
var resetCameraView = (0, _react.useCallback)(function () {
|
|
303
304
|
messagePosition.current.child = null;
|
|
304
305
|
messagePosition.current.parent = null;
|
|
305
|
-
|
|
306
|
+
|
|
307
|
+
if (zoomInActor) {
|
|
308
|
+
setAnimationRunning(true);
|
|
309
|
+
}
|
|
306
310
|
}, [zoomInActor]);
|
|
307
311
|
|
|
308
312
|
var resetTalkingAnimation = function resetTalkingAnimation() {
|
|
@@ -530,6 +534,7 @@ var DialogComponent = function DialogComponent(_ref) {
|
|
|
530
534
|
|
|
531
535
|
(0, _react.useEffect)(function () {
|
|
532
536
|
if (isDecision) {
|
|
537
|
+
zoomStarted.current = false;
|
|
533
538
|
resetCameraView();
|
|
534
539
|
} else if (isVoiceOver) {
|
|
535
540
|
resetCameraView();
|
|
@@ -592,11 +597,7 @@ var DialogComponent = function DialogComponent(_ref) {
|
|
|
592
597
|
var showArrowTop = talkingCharacter.text.length > maxCharacterToSwitch;
|
|
593
598
|
moveBubble(element, showArrowTop);
|
|
594
599
|
|
|
595
|
-
|
|
596
|
-
setAnimationRunning(true);
|
|
597
|
-
}
|
|
598
|
-
|
|
599
|
-
setTimeout(function () {
|
|
600
|
+
var setMessage = function setMessage() {
|
|
600
601
|
var _talkingCharacter$cha5;
|
|
601
602
|
|
|
602
603
|
setCurrentMessage({
|
|
@@ -607,7 +608,14 @@ var DialogComponent = function DialogComponent(_ref) {
|
|
|
607
608
|
avatar: getAvatarURL(talkingCharacter),
|
|
608
609
|
show: true
|
|
609
610
|
});
|
|
610
|
-
}
|
|
611
|
+
};
|
|
612
|
+
|
|
613
|
+
if (zoomInActor) {
|
|
614
|
+
onZoomEnd.current = setMessage;
|
|
615
|
+
setAnimationRunning(true);
|
|
616
|
+
} else {
|
|
617
|
+
setMessage();
|
|
618
|
+
}
|
|
611
619
|
}
|
|
612
620
|
});
|
|
613
621
|
} else {
|
|
@@ -697,7 +705,6 @@ var DialogComponent = function DialogComponent(_ref) {
|
|
|
697
705
|
}, [currentMessage, nextLine, start, stop, currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audioType, autoPlayCond, audio, voice, audioFailed]);
|
|
698
706
|
(0, _react.useEffect)(function () {
|
|
699
707
|
if (animationRunning && !zoomStarted.current) {
|
|
700
|
-
zoomStarted.current = true;
|
|
701
708
|
var cam = camera;
|
|
702
709
|
var targetPosition = messagePosition.current.child ? messagePosition.current.pos : defaultCamera.position.toArray();
|
|
703
710
|
animationTarget.current.position.fromArray(targetPosition);
|
|
@@ -717,7 +724,14 @@ var DialogComponent = function DialogComponent(_ref) {
|
|
|
717
724
|
_gsap.default.to(cam.position, {
|
|
718
725
|
duration: 1,
|
|
719
726
|
ease: 'power3.easeInOut',
|
|
727
|
+
onStart: function onStart() {
|
|
728
|
+
zoomStarted.current = true;
|
|
729
|
+
},
|
|
720
730
|
onComplete: function onComplete() {
|
|
731
|
+
onZoomEnd.current();
|
|
732
|
+
|
|
733
|
+
onZoomEnd.current = function () {};
|
|
734
|
+
|
|
721
735
|
zoomStarted.current = false;
|
|
722
736
|
setAnimationRunning(false);
|
|
723
737
|
raycast.set(cam.getWorldPosition(new _three.Vector3(0, 0, 0)), cam.getWorldDirection(new _three.Vector3()));
|
|
@@ -13,6 +13,8 @@ var _reactKonva = require("react-konva");
|
|
|
13
13
|
|
|
14
14
|
var _reactKonvaUtils = require("react-konva-utils");
|
|
15
15
|
|
|
16
|
+
var _deviceDetection = require("../../../helpers/deviceDetection");
|
|
17
|
+
|
|
16
18
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
17
19
|
|
|
18
20
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
@@ -53,6 +55,7 @@ var Area = function Area(_ref) {
|
|
|
53
55
|
|
|
54
56
|
var fillColor = isBad ? 'rgba(255, 99, 77, 0.32)' : 'rgba(75, 215, 169, 0.32)';
|
|
55
57
|
var strokeColor = isBad ? '#ff634d' : '#4bd7a9';
|
|
58
|
+
var isMobile = (0, _deviceDetection.DeviceDetection)();
|
|
56
59
|
|
|
57
60
|
var mouseEnterArea = function mouseEnterArea() {
|
|
58
61
|
if (hasHighlights && !completed && !isClicked) {
|
|
@@ -177,7 +180,7 @@ var Area = function Area(_ref) {
|
|
|
177
180
|
shape: "poly",
|
|
178
181
|
fill: finished ? '' : fillColor,
|
|
179
182
|
stroke: finished || isClicked ? strokeColor : '',
|
|
180
|
-
strokeWidth: 2,
|
|
183
|
+
strokeWidth: isMobile ? 10 : 2,
|
|
181
184
|
opacity: finished || isClicked ? 1 : 0,
|
|
182
185
|
closed: true
|
|
183
186
|
}));
|
|
@@ -198,10 +198,10 @@ var LoginPuzzleComponent = function LoginPuzzleComponent(_ref) {
|
|
|
198
198
|
backgroundImage: "url(\"".concat(imgURL, "\")")
|
|
199
199
|
}
|
|
200
200
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
201
|
-
className: "puzzle--login"
|
|
201
|
+
className: "puzzle--login ".concat(user ? 'puzzle--login--withuser' : '')
|
|
202
202
|
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
203
203
|
className: "icon-login-puzzle"
|
|
204
|
-
}, " "),
|
|
204
|
+
}, " "), /*#__PURE__*/_react.default.createElement("span", {
|
|
205
205
|
className: "puzzle--login__title"
|
|
206
206
|
}, translate('puzzle.initSession')), /*#__PURE__*/_react.default.createElement("div", null, login && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
|
|
207
207
|
dir: "auto",
|
|
@@ -213,7 +213,7 @@ var LoginPuzzleComponent = function LoginPuzzleComponent(_ref) {
|
|
|
213
213
|
dir: isRtl ? 'rtl' : 'auto',
|
|
214
214
|
disabled: finished,
|
|
215
215
|
"data-testid": "username",
|
|
216
|
-
className: "puzzle--login__input "
|
|
216
|
+
className: "puzzle--login__input success",
|
|
217
217
|
type: "text",
|
|
218
218
|
placeholder: user,
|
|
219
219
|
value: user
|
|
@@ -244,7 +244,10 @@ var LoginPuzzleComponent = function LoginPuzzleComponent(_ref) {
|
|
|
244
244
|
className: "puzzle--login__input puzzle--login__input--fakepassword success",
|
|
245
245
|
type: "text",
|
|
246
246
|
placeholder: password,
|
|
247
|
-
value: password
|
|
247
|
+
value: password,
|
|
248
|
+
style: {
|
|
249
|
+
opacity: 1
|
|
250
|
+
}
|
|
248
251
|
}) : /*#__PURE__*/_react.default.createElement("input", {
|
|
249
252
|
dir: isRtl ? 'rtl' : 'auto',
|
|
250
253
|
disabled: finished,
|
|
@@ -269,11 +272,11 @@ var LoginPuzzleComponent = function LoginPuzzleComponent(_ref) {
|
|
|
269
272
|
className: "login-fakepassword".concat(inputPasswordFocus ? ' login-fakepassword--focus' : '').concat(fakeHashes.length ? ' login-fakepassword--fill' : '', " ").concat(successClass || '')
|
|
270
273
|
}, inputPassword ? fakeHashes : translate('puzzle.password')) : null, /*#__PURE__*/_react.default.createElement("span", {
|
|
271
274
|
className: "icon-circle-check"
|
|
272
|
-
}, " ")))), /*#__PURE__*/_react.default.createElement("
|
|
275
|
+
}, " ")))), /*#__PURE__*/_react.default.createElement("button", {
|
|
273
276
|
type: "button",
|
|
274
277
|
className: "gat--btn gat--btn__primary ".concat(inputPassword.length !== 0 && !finished ? '' : 'disabled'),
|
|
275
278
|
onClick: checkInput
|
|
276
|
-
}, translate('puzzle.loginIn'))
|
|
279
|
+
}, translate('puzzle.loginIn')), !showCorrectSolution && errorMessage && info.solution.wrong.desc !== '' && /*#__PURE__*/_react.default.createElement("div", {
|
|
277
280
|
className: "puzzle--login__label--error"
|
|
278
281
|
}, info.solution.wrong.desc)));
|
|
279
282
|
};
|
|
@@ -44,6 +44,18 @@ var Questions = function Questions(_ref) {
|
|
|
44
44
|
return false;
|
|
45
45
|
};
|
|
46
46
|
|
|
47
|
+
var tooltipPosition = function tooltipPosition(answers, answerIndex) {
|
|
48
|
+
if (answerIndex === 0) {
|
|
49
|
+
return 'tooltip--right__top';
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
if (answerIndex === answers.length - 1) {
|
|
53
|
+
return 'tooltip--right__bottom';
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
return 'tooltip--center__right';
|
|
57
|
+
};
|
|
58
|
+
|
|
47
59
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
48
60
|
className: "test--questions__item"
|
|
49
61
|
}, /*#__PURE__*/_react.default.createElement("span", null, question.text)), filteredAnswers.map(function (answer, index) {
|
|
@@ -62,7 +74,7 @@ var Questions = function Questions(_ref) {
|
|
|
62
74
|
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
63
75
|
className: "icon-info2"
|
|
64
76
|
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
65
|
-
className: "tooltip
|
|
77
|
+
className: "tooltip ".concat(tooltipPosition(filteredAnswers, index))
|
|
66
78
|
}, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("b", null, /*#__PURE__*/_react.default.createElement("span", null, translate('test.feedback')))), /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement("span", null, answer.feedback)))) : null);
|
|
67
79
|
}));
|
|
68
80
|
};
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@gamelearn/arcade-components",
|
|
3
3
|
"author": "Gamelearn",
|
|
4
4
|
"license": "unlicense",
|
|
5
|
-
"version": "2.15.
|
|
5
|
+
"version": "2.15.2",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"files": [
|
|
8
8
|
"dist",
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
16
16
|
"@babel/runtime": "^7.18.6",
|
|
17
|
-
"@gamelearn/arcade-styles": "2.10.
|
|
17
|
+
"@gamelearn/arcade-styles": "2.10.8",
|
|
18
18
|
"@gamelearn/arcade-three-core": "1.17.2",
|
|
19
19
|
"@react-three/drei": "9.4.3",
|
|
20
20
|
"@react-three/fiber": "8.0.17",
|