@gamelearn/arcade-components 0.27.1 → 0.27.3

package/dist/components/dialog-component/components/DialogComponent.js

@@ -58,6 +58,9 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var isMobile = (0, _deviceDetection.DeviceDetection)();
 var crossFadeDuration = 0.5; // Mobile always zoom in?
 
+var raycast = new _three.Raycaster();
+raycast.firstHitOnly = true;
+
 var DialogComponent = function DialogComponent(_ref) {
   var _currentLine$audio3, _currentLine$audio4;
 
@@ -100,6 +103,7 @@ var DialogComponent = function DialogComponent(_ref) {
       camera = _useThree2[0],
       scene = _useThree2[1];
 
+  var changedMats = (0, _react.useRef)([]);
   var loader = (0, _react.useMemo)(function () {
     return new _GLTFLoader.GLTFLoader();
   }, []);
@@ -207,10 +211,10 @@ var DialogComponent = function DialogComponent(_ref) {
 
     var onLoadAnim = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function () {};
     var animation = (_slot$character2 = slot.character) === null || _slot$character2 === void 0 ? void 0 : _slot$character2.resource.animations[slot.emotion];
+    var mixer = element.userData.mixer;
 
-    if (animation) {
-      var mixer = element.userData.mixer;
-      loader.load(animation === null || animation === void 0 ? void 0 : animation.url, function (anim) {
+    if (animation && animation.url) {
+      loader.load(animation.url, function (anim) {
         var emotionClip = anim.animations[0];
         var defaultClip = element.userData.defaultAnim;
         var emotionAction = mixer.clipAction(emotionClip, element);
@@ -223,6 +227,8 @@ var DialogComponent = function DialogComponent(_ref) {
         element.userData.currentEmotion = emotionAction;
         onLoadAnim(mixer, emotionAction, defaultAction);
       });
+    } else {
+      onLoadAnim();
     }
   }, [loader]); // Reset currentEmotion to defaultAnim
 
@@ -325,7 +331,7 @@ var DialogComponent = function DialogComponent(_ref) {
           loadEmotion(slot, element, function (mixer, action, defaultAction) {
             var startAction = element.userData.lastEmotion ? element.userData.lastEmotion : defaultAction;
 
-            if (startAction !== action) {
+            if (startAction && action && startAction !== action) {
               mixer.stopAllAction();
               (0, _helpers.executeCrossFade)(startAction, action, crossFadeDuration);
             }
@@ -343,7 +349,7 @@ var DialogComponent = function DialogComponent(_ref) {
           loadEmotion(talkingCharacter, element, function (mixer, action, defaultAction) {
             var startAction = element.userData.lastEmotion ? element.userData.lastEmotion : defaultAction;
 
-            if (startAction !== action) {
+            if (startAction && action && startAction !== action) {
               mixer.stopAllAction();
               (0, _helpers.executeCrossFade)(startAction, action, crossFadeDuration);
             } // Ugly timeout to wait an animation transition
@@ -423,7 +429,7 @@ var DialogComponent = function DialogComponent(_ref) {
       if (line >= lines.length - 1 && automatic) {
         setAutomatic(false);
       } else if (automatic && currentMessage.text && !currentLine.decision) {
-        var time = 70 * (currentMessage === null || currentMessage === void 0 ? void 0 : currentMessage.text.length);
+        var time = 75 * (currentMessage === null || currentMessage === void 0 ? void 0 : currentMessage.text.length);
         timeout = setTimeout(function () {
           nextLine();
         }, time < 1400 ? 1400 : time);
@@ -494,13 +500,25 @@ var DialogComponent = function DialogComponent(_ref) {
           animationTarget.current.applyQuaternion(camera.quaternion);
         }
 
-        animationTarget.current.translateX(13);
+        animationTarget.current.translateX(12);
         animationTarget.current.translateY(-5);
         animationTarget.current.translateZ(30);
       }
 
       if (animationTarget.current.position.distanceTo(camera.position) < 1) {
         animationStart.current = false;
+        raycast.set(camera.getWorldPosition(new _three.Vector3(0, 0, 0)), camera.getWorldDirection(new _three.Vector3()));
+        var objects = raycast.intersectObjects(scene.children, true);
+        changedMats.current = objects.filter(function (o) {
+          return o.distance < 10;
+        });
+
+        if (changedMats.current.length) {
+          changedMats.current.forEach(function (o) {
+            var object = o.object;
+            object.material.visible = false;
+          });
+        }
 
         if (lastSet.current || !messagePosition.current.child) {
           camera.copy(defaultCamera.current);
@@ -508,6 +526,13 @@ var DialogComponent = function DialogComponent(_ref) {
 
         checkBubblePosition();
       } else {
+        if (changedMats.current.length) {
+          changedMats.current.forEach(function (o) {
+            var object = o.object;
+            object.material.visible = true;
+          });
+        }
+
         camera.position.lerp(animationTarget.current.position, delta * 2.5);
       }
     }

package/dist/components/login-puzzle-component/components/LoginPuzzleComponent.js

@@ -65,28 +65,38 @@ var LoginPuzzleComponent = function LoginPuzzleComponent(_ref) {
       inputPassword = _useState4[0],
       setPassword = _useState4[1];
 
-  var _useState5 = (0, _react.useState)(''),
+  var _useState5 = (0, _react.useState)(false),
       _useState6 = _slicedToArray(_useState5, 2),
-      successClass = _useState6[0],
-      setSuccessClass = _useState6[1];
+      inputPasswordFocus = _useState6[0],
+      setInputPasswordFocus = _useState6[1];
 
-  var _useState7 = (0, _react.useState)(false),
+  var _useState7 = (0, _react.useState)(''),
       _useState8 = _slicedToArray(_useState7, 2),
-      finished = _useState8[0],
-      setFinished = _useState8[1];
+      fakeHashes = _useState8[0],
+      setFakeHashes = _useState8[1];
 
-  var _useState9 = (0, _react.useState)(false),
+  var _useState9 = (0, _react.useState)(''),
       _useState10 = _slicedToArray(_useState9, 2),
-      errorMessage = _useState10[0],
-      setErrorMessage = _useState10[1];
+      successClass = _useState10[0],
+      setSuccessClass = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(false),
+      _useState12 = _slicedToArray(_useState11, 2),
+      finished = _useState12[0],
+      setFinished = _useState12[1];
+
+  var _useState13 = (0, _react.useState)(false),
+      _useState14 = _slicedToArray(_useState13, 2),
+      errorMessage = _useState14[0],
+      setErrorMessage = _useState14[1];
 
   var _soundActions = _slicedToArray(soundActions, 1),
       playSound = _soundActions[0];
 
-  var _useState11 = (0, _react.useState)([]),
-      _useState12 = _slicedToArray(_useState11, 2),
-      accRewards = _useState12[0],
-      setRewards = _useState12[1];
+  var _useState15 = (0, _react.useState)([]),
+      _useState16 = _slicedToArray(_useState15, 2),
+      accRewards = _useState16[0],
+      setRewards = _useState16[1];
 
   var imgURL = ((_image$img = image.img) === null || _image$img === void 0 ? void 0 : _image$img.url) || imagenPorDefecto;
 
@@ -126,6 +136,18 @@ var LoginPuzzleComponent = function LoginPuzzleComponent(_ref) {
     }
   };
 
+  var changeCharactersByHashes = function changeCharactersByHashes(e) {
+    var fakePassword = '';
+
+    if (e.length >= 0) {
+      for (var i = 0; i < e.length; i++) {
+        fakePassword += '•';
+      }
+
+      setFakeHashes(fakePassword);
+    }
+  };
+
   (0, _react.useEffect)(function () {
     setResolveAction(function () {
       var rewardsData = [].concat(_toConsumableArray(accRewards), _toConsumableArray(info.resolve.rewards));
@@ -152,7 +174,6 @@ var LoginPuzzleComponent = function LoginPuzzleComponent(_ref) {
   }, translate('puzzle.user')), /*#__PURE__*/_react.default.createElement("div", {
     className: "puzzle--login__group"
   }, /*#__PURE__*/_react.default.createElement("input", {
-    autoComplete: "off",
     disabled: finished,
     "data-testid": "username",
     className: "puzzle--login__input ".concat(successClass),
@@ -170,18 +191,26 @@ var LoginPuzzleComponent = function LoginPuzzleComponent(_ref) {
   }, /*#__PURE__*/_react.default.createElement("span", null, translate('puzzle.password'))), /*#__PURE__*/_react.default.createElement("div", {
     className: "puzzle--login__group"
   }, /*#__PURE__*/_react.default.createElement("input", {
-    autoComplete: "off",
     disabled: finished,
     "data-testid": "password",
-    className: "puzzle--login__input ".concat(successClass),
-    type: "password",
+    className: "puzzle--login__input puzzle--login__input--fakepassword ".concat(successClass),
+    type: "text",
     placeholder: translate('puzzle.password'),
+    onFocus: function onFocus(e) {
+      setInputPasswordFocus(true);
+    },
+    onBlur: function onBlur(e) {
+      setInputPasswordFocus(false);
+    },
     onChange: function onChange(e) {
       setPassword(e.target.value);
+      changeCharactersByHashes(e.target.value);
       setSuccessClass('');
       setErrorMessage(false);
     }
-  }), /*#__PURE__*/_react.default.createElement("span", {
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "login-fakepassword" + (inputPasswordFocus ? " login-fakepassword--focus" : "") + (fakeHashes.length ? " login-fakepassword--fill" : "") + " ".concat(successClass ? successClass : '')
+  }, inputPassword ? fakeHashes : translate('puzzle.password')), /*#__PURE__*/_react.default.createElement("span", {
     className: "icon-circle-check"
   }, " ")))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("button", {
     type: "button",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@gamelearn/arcade-components",
   "license": "Gamelearn",
-  "version": "0.27.1",
+  "version": "0.27.3",
   "main": "dist/index.js",
   "files": [
     "dist",
@@ -59,7 +59,7 @@
     "@babel/cli": "7.12.10",
     "@babel/preset-env": "7.12.11",
     "@babel/preset-react": "7.12.10",
-    "@gamelearn/arcade-styles": "0.2.4",
+    "@gamelearn/arcade-styles": "0.4.1",
     "@react-three/test-renderer": "6.0.6",
     "@storybook/addon-actions": "6.1.11",
     "@storybook/addon-essentials": "6.1.11",