@gamelearn/arcade-components 2.37.3 → 2.38.1

package/dist/components/keyboard-puzzle-component/components/KeyboardPuzzleComponent.js

@@ -20,9 +20,8 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-var defaultImage = 'https://min.gamelearn.io/css-resources/gamelearn/resources/keyboard.jpg';
 var KeyboardPuzzleComponent = function KeyboardPuzzleComponent(_ref) {
-  var _image$img;
+  var _image$img, _image$img2;
   var emitEvent = _ref.emitEvent,
     image = _ref.image,
     password = _ref.password,
@@ -32,35 +31,33 @@ var KeyboardPuzzleComponent = function KeyboardPuzzleComponent(_ref) {
     soundActions = _ref.soundActions,
     setResolveAction = _ref.setResolveAction,
     nodeId = _ref.nodeId,
-    keyboardControl = _ref.keyboardControl;
-  var _useState = (0, _react.useState)(false),
+    keyboardControl = _ref.keyboardControl,
+    _ref$styles = _ref.styles,
+    styles = _ref$styles === void 0 ? 'default-theme' : _ref$styles;
+  var _useState = (0, _react.useState)(''),
     _useState2 = _slicedToArray(_useState, 2),
-    finished = _useState2[0],
-    setFinished = _useState2[1];
+    passClass = _useState2[0],
+    setPassClass = _useState2[1];
   var _useState3 = (0, _react.useState)(''),
     _useState4 = _slicedToArray(_useState3, 2),
-    passClass = _useState4[0],
-    setPassClass = _useState4[1];
-  var _useState5 = (0, _react.useState)(''),
+    inputPassword = _useState4[0],
+    setInputPassword = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    inputPassword = _useState6[0],
-    setInputPassword = _useState6[1];
-  var _useState7 = (0, _react.useState)(false),
+    feedbackResult = _useState6[0],
+    setFeedbackResult = _useState6[1];
+  var _useState7 = (0, _react.useState)(''),
     _useState8 = _slicedToArray(_useState7, 2),
-    feedbackResult = _useState8[0],
-    setFeedbackResult = _useState8[1];
-  var _useState9 = (0, _react.useState)(''),
+    feedBackText = _useState8[0],
+    setFeedBackText = _useState8[1];
+  var _useState9 = (0, _react.useState)(false),
     _useState10 = _slicedToArray(_useState9, 2),
-    feedBackText = _useState10[0],
-    setFeedBackText = _useState10[1];
-  var _useState11 = (0, _react.useState)(false),
+    feedbackIsShown = _useState10[0],
+    setFeedbackIsShown = _useState10[1];
+  var _useState11 = (0, _react.useState)([]),
     _useState12 = _slicedToArray(_useState11, 2),
-    feedbackIsShown = _useState12[0],
-    setFeedbackIsShown = _useState12[1];
-  var _useState13 = (0, _react.useState)([]),
-    _useState14 = _slicedToArray(_useState13, 2),
-    accRewards = _useState14[0],
-    setRewards = _useState14[1];
+    accRewards = _useState12[0],
+    setRewards = _useState12[1];
   var translate = function translate(id) {
     return emitEvent({
       type: 'translate',
@@ -86,7 +83,6 @@ var KeyboardPuzzleComponent = function KeyboardPuzzleComponent(_ref) {
   }, [emitEvent]);
   var handleFeedbackFuncionOnClose = function handleFeedbackFuncionOnClose() {
     if (feedbackResult) {
-      setFinished(true);
       var rewards = info.solution.right.rewards;
       var rewardsData = [].concat(_toConsumableArray(accRewards), _toConsumableArray(rewards));
       playSound('score');
@@ -154,7 +150,6 @@ var KeyboardPuzzleComponent = function KeyboardPuzzleComponent(_ref) {
       setFeedbackResult(true);
       setFeedBackText(info.solution.right.desc);
       setInputPassword(password);
-      setFinished(true);
       var rewardsData = [].concat(_toConsumableArray(accRewards), _toConsumableArray(info.resolve.rewards));
       setTimeout(function () {
         setFeedbackResult(false);
@@ -189,49 +184,85 @@ var KeyboardPuzzleComponent = function KeyboardPuzzleComponent(_ref) {
     playSound('click-ui');
     setInputPassword(inputPassword.substring(0, inputPassword.length - 1));
   };
-  var imageURL = ((_image$img = image.img) === null || _image$img === void 0 ? void 0 : _image$img.url) || defaultImage;
+  var imageURL = ((_image$img = image.img) === null || _image$img === void 0 ? void 0 : _image$img.url) || '';
   var styleForBackground = {
-    backgroundSize: imageURL ? 'cover' : 'contain',
     backgroundImage: "url(\"".concat(imageURL, "\")"),
     backgroudPosition: 'center center'
   };
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "puzzle--keyboard",
-    style: styleForBackground
+    className: "puzzle-keyboard puzzle-keyboard--".concat(styles),
+    style: (_image$img2 = image.img) !== null && _image$img2 !== void 0 && _image$img2.url ? styleForBackground : null
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "puzzle--keyboard__header"
+    className: "puzzle-keyboard__header"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "puzzle--keyboard__result"
+    className: "puzzle-keyboard__digits"
   }, password.split('').map(function (e, ind) {
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: "puzzle--keyboard__result--item ".concat(passClass),
+      className: "puzzle-keyboard__digit ".concat(passClass),
       key: "".concat(e + ind)
     }, inputPassword.split('')[ind] ? inputPassword.split('')[ind] : '');
-  }), finished ? /*#__PURE__*/_react.default.createElement("span", {
-    className: "icon-circle-check"
-  }) : /*#__PURE__*/_react.default.createElement("button", {
+  }), passClass !== '' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, passClass === 'success' ? /*#__PURE__*/_react.default.createElement("span", {
+    className: "puzzle-keyboard__positionatedToDigits icon-mini-check-circle"
+  }) : /*#__PURE__*/_react.default.createElement("span", {
+    className: "puzzle-keyboard__positionatedToDigits icon-mini-error-circle"
+  })) : /*#__PURE__*/_react.default.createElement("button", {
     type: "button",
     onClick: handleRemoveChar,
-    className: "puzzle--keyboard__delete",
+    className: "puzzle-keyboard__positionatedToDigits  puzzle-keyboard__delete",
     "aria-label": translate('puzzles.keyboard-puzzle.deleteButton')
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "icon-delete-keyboard"
+    className: "icon-delete-key-2023"
   })))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "puzzle--keyboard__block"
+    className: "puzzle-keyboard__keypad"
+  }, styles === 'scifi-theme' && /*#__PURE__*/_react.default.createElement("div", {
+    "aria-hidden": true,
+    className: "puzzle-keyboard__scifi-notch"
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/_react.default.createElement("g", {
+    transform: "translate(3 3)"
+  }, /*#__PURE__*/_react.default.createElement("circle", {
+    fill: "#1E282F",
+    cx: "5",
+    cy: "5",
+    r: "5"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M1.48 8.55a5 5 0 1 0 7.008-7.133",
+    fillOpacity: ".096",
+    fill: "#1DDDD8"
+  }), /*#__PURE__*/_react.default.createElement("circle", {
+    fill: "#1DDDD8",
+    opacity: ".359",
+    cx: "3",
+    cy: "3",
+    r: "2"
+  })), /*#__PURE__*/_react.default.createElement("circle", {
+    stroke: "#1E282F",
+    cx: "8",
+    cy: "8",
+    r: "7.5"
+  }))))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "keyboard-keys keyboard-keys--".concat(styles)
   }, keyboard.map(function (row, rowNumb) {
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "puzzle--keyboard__row",
-      key: "row_".concat(0 + rowNumb)
-    }, (Array.isArray(row) ? row : Object.values(row)).map(function (col, colNumb) {
+    return (Array.isArray(row) ? row : Object.values(row)).map(function (col, colNumb) {
       return /*#__PURE__*/_react.default.createElement("button", {
-        className: "puzzle--keyboard__character",
+        className: "keyboard-key keyboard-key--".concat(styles, "  ").concat(col === '*' ? 'keyboard-key--star' : ''),
         type: "button",
         onClick: function onClick() {
           return handleNumbClick(rowNumb, colNumb);
         },
         key: col
-      }, col);
-    }));
+      }, /*#__PURE__*/_react.default.createElement("div", null, col));
+    });
+  })), styles === 'scifi-theme' && /*#__PURE__*/_react.default.createElement("hr", {
+    "aria-hidden": true,
+    className: "puzzle-keyboard__scifi-line"
   })), feedbackIsShown && /*#__PURE__*/_react.default.createElement(_FeedbackComponent.default, {
     translate: translate,
     text: feedBackText,

package/package.json

@@ -2,7 +2,7 @@
   "name": "@gamelearn/arcade-components",
   "author": "Gamelearn",
   "license": "unlicense",
-  "version": "2.37.3",
+  "version": "2.38.1",
   "main": "dist/index.js",
   "files": [
     "dist",
@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@gamelearn/arcade-styles": "2.20.3",
+    "@gamelearn/arcade-styles": "2.21.1",
     "@gamelearn/arcade-three-core": "1.24.3",
     "@react-three/a11y": "^3.0.0",
     "@react-three/drei": "9.4.3",