@gamelearn/arcade-components 1.0.0 → 1.0.5

package/dist/components/animation-component/components/AnimationComponent.js

@@ -51,7 +51,7 @@ var AnimationComponent = function AnimationComponent(_ref) {
     if (!mounted) {
       var object;
       scene.traverseVisible(function (node) {
-        if (node.uid === resource.uid && !object) {
+        if (resource.uid && node.uid === resource.uid && !object) {
           object = node;
         }
       });

package/dist/components/animation-component/mocks/mockForStory.js

@@ -5,12 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.mockProps = exports.default = void 0;
 
-var _bg001_street = _interopRequireDefault(require("../../arcade-render/mocks/scenes/bg001_street.json"));
-
-var _characters = require("../../arcade-render/mocks/scenes/characters.json");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /* eslint-disable no-console */
 
 /* eslint-disable max-len */
@@ -19,15 +13,9 @@ var emitEvent = function emitEvent() {
 };
 
 var mockProps = {
-  background: _bg001_street.default,
-  elements: _characters.elements,
-  scene: {
-    sceneChanged: true,
-    loadingText: 'Cargando... {percent}%',
-    hasControls: false
-  },
   resource: {
-    elementUid: 'snHJhg'
+    elementUid: 'snHJhg',
+    uid: 'snHJhg'
   },
   loopTimes: 1,
   animation: {

package/dist/components/conversational-pro-component/components/scene/Panel.js

@@ -13,16 +13,14 @@ var _fiber = require("@react-three/fiber");
 
 var _drei = require("@react-three/drei");
 
-var _three = require("three");
+var _arcadeThreeCore = require("@gamelearn/arcade-three-core");
 
-var _element = _interopRequireDefault(require("../../../arcade-render/element"));
+var _three = require("three");
 
 var _helpers = require("../../../../helpers");
 
 var _LightSet = _interopRequireDefault(require("../../../../helpers/LightSet"));
 
-var _drawLOD = _interopRequireDefault(require("../../../../helpers/drawLOD"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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); }
@@ -35,8 +33,7 @@ function Panel(_ref) {
   var _character$resource4, _character$resource5;
 
   var character = _ref.character,
-      active = _ref.active,
-      lodSettings = _ref.lodSettings;
+      active = _ref.active;
   var cameraRef = (0, _react.useRef)(null);
   var sceneRef = (0, _react.useRef)(null);
   var isCharacter = character.type === 'character';
@@ -73,9 +70,8 @@ function Panel(_ref) {
       }
 
       cameraRef.current.updateProjectionMatrix();
-      (0, _drawLOD.default)(sceneRef.current, cameraRef.current, lodSettings);
     }
-  }, [character, lodSettings]);
+  }, [character]);
   (0, _fiber.useFrame)(function (_ref2) {
     var gl = _ref2.gl;
 
@@ -105,16 +101,17 @@ function Panel(_ref) {
   }, 100);
   return character.type === 'image' ? null : /*#__PURE__*/_react.default.createElement("scene", {
     ref: sceneRef
-  }, /*#__PURE__*/_react.default.createElement(_react.Suspense, {
-    fallback: null
-  }, (_character$resource5 = character.resource) !== null && _character$resource5 !== void 0 && _character$resource5.url ? /*#__PURE__*/_react.default.createElement(_element.default, {
+  }, (_character$resource5 = character.resource) !== null && _character$resource5 !== void 0 && _character$resource5.url ? /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.LodWrapper, {
+    progressive: true,
+    individualProgress: true
+  }, /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.TriggerWrapper, {
     name: "char_".concat(character.uid),
     url: character.resource.url,
     animationUrl: emotion.url,
     type: character.type,
     position: [0, 0, 0],
     onLoad: onLoadElement
-  }) : null), /*#__PURE__*/_react.default.createElement(_drei.PerspectiveCamera, {
+  })) : null, /*#__PURE__*/_react.default.createElement(_drei.PerspectiveCamera, {
     name: "camera_".concat(character.uid),
     fov: 35,
     focus: 10,

package/dist/components/conversational-pro-component/components/scene/index.js

@@ -11,6 +11,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _fiber = require("@react-three/fiber");
 
+var _arcadeThreeCore = require("@gamelearn/arcade-three-core");
+
 var _drei = require("@react-three/drei");
 
 var _Panels = _interopRequireDefault(require("./Panels"));
@@ -33,15 +35,14 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-function Renderer(_ref) {
+var PanelsWrapper = function PanelsWrapper(_ref) {
   var characters = _ref.characters,
       slots = _ref.slots,
       slotRefs = _ref.slotRefs,
       flex = _ref.flex,
-      currentMessage = _ref.currentMessage,
-      lodSettings = _ref.lodSettings;
+      currentMessage = _ref.currentMessage;
 
-  var _useState = (0, _react.useState)(),
+  var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
       built = _useState2[0],
       finishBuild = _useState2[1];
@@ -51,8 +52,9 @@ function Renderer(_ref) {
     gl.setScissorTest(false);
     gl.clear(true, true);
     gl.setScissorTest(true);
-  }, 100);
+  });
   (0, _react.useEffect)(function () {
+    // let useFrame execute at least once
     finishBuild(true);
   }, []);
   return built ? /*#__PURE__*/_react.default.createElement(_Panels.default, {
@@ -60,32 +62,29 @@ function Renderer(_ref) {
     slots: slots,
     slotRefs: slotRefs,
     flex: flex,
-    activeIndex: currentMessage.position,
-    lodSettings: lodSettings
+    activeIndex: currentMessage.position
   }) : null;
-}
+};
 
 var Scene = function Scene(props) {
-  return /*#__PURE__*/_react.default.createElement(_fiber.Canvas, {
-    resize: {
-      scroll: false
-    },
+  return /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.Renderer, {
+    fullscreen: false,
     className: "conversation--canvas",
     style: {
       position: 'absolute',
       width: '100%',
       height: '100%'
     },
-    flat: true,
-    mode: "concurrent",
     onCreated: function onCreated(_ref3) {
       var gl = _ref3.gl;
       gl.setClearColor('white', 0);
       gl.physicallyCorrectLights = true;
     }
-  }, /*#__PURE__*/_react.default.createElement(Renderer, props), /*#__PURE__*/_react.default.createElement(_drei.Preload, {
+  }, /*#__PURE__*/_react.default.createElement(_react.Suspense, {
+    fallback: null
+  }, /*#__PURE__*/_react.default.createElement(PanelsWrapper, props), /*#__PURE__*/_react.default.createElement(_drei.Preload, {
     all: true
-  }));
+  })));
 };
 
 var _default = Scene;

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

@@ -15,14 +15,14 @@ var _three = require("three");
 
 var _GLTFLoader = require("three/examples/jsm/loaders/GLTFLoader");
 
+var _arcadeThreeCore = require("@gamelearn/arcade-three-core");
+
 var _SpeechBubbleComponent = _interopRequireDefault(require("./SpeechBubbleComponent"));
 
 var _decisionComponent = _interopRequireDefault(require("../../decision-component"));
 
 var _helpers = require("../../../helpers");
 
-var _HtmlPro = _interopRequireDefault(require("../../../helpers/HtmlPro"));
-
 var _deviceDetection = require("../../../helpers/deviceDetection");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -554,18 +554,23 @@ var DialogComponent = function DialogComponent(_ref) {
     height: '100vh',
     position: 'static'
   };
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, currentLine.decision ? /*#__PURE__*/_react.default.createElement(_HtmlPro.default, {
-    zIndexRange: [3, 3],
-    style: cleanStyle,
-    calculatePosition: function calculatePosition() {
-      return [0, 0];
-    }
-  }, /*#__PURE__*/_react.default.createElement(_decisionComponent.default, _extends({
-    inScene: true
-  }, decisionPayload))) : null, currentMessage.text ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("group", {
+
+  if (currentLine.decision) {
+    return /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.HtmlPro, {
+      zIndexRange: [3, 3],
+      style: cleanStyle,
+      calculatePosition: function calculatePosition() {
+        return [0, 0];
+      }
+    }, /*#__PURE__*/_react.default.createElement(_decisionComponent.default, _extends({
+      inScene: true
+    }, decisionPayload)));
+  }
+
+  return currentMessage.text ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("group", {
     ref: groupRef,
     position: messagePosition.current.pos
-  }, /*#__PURE__*/_react.default.createElement(_HtmlPro.default, {
+  }, /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.HtmlPro, {
     zIndexRange: [2, 2],
     calculatePosition: currentMessage.inScene ? undefined : function () {
       return [0, 0];
@@ -576,7 +581,7 @@ var DialogComponent = function DialogComponent(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_SpeechBubbleComponent.default, {
     ref: bubbleRef,
     message: currentMessage
-  }))), /*#__PURE__*/_react.default.createElement(_HtmlPro.default, {
+  }))), /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.HtmlPro, {
     style: {
       width: '100vw',
       height: '100vh'
@@ -601,7 +606,7 @@ var DialogComponent = function DialogComponent(_ref) {
     onClick: nextLine
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "icon-next"
-  }))))) : null);
+  }))))) : null;
 };
 
 var _default = DialogComponent;

package/dist/components/dialog-component/mocks/mockForStory.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.mockScene = exports.mockProps = void 0;
 
-var _bg001_street = _interopRequireDefault(require("components/arcade-render/mocks/scenes/bg001_street.json"));
+var _bg001_street = _interopRequireDefault(require("test/mocks/bg001_street.json"));
 
-var _characters = require("components/arcade-render/mocks/scenes/characters.json");
+var _characters = require("test/mocks/characters.json");
 
 var _mocker = require("helpers/mocker");
 

package/dist/components/hanged-puzzle-component/components/HangedPuzzleComponent.js

@@ -49,7 +49,9 @@ var MAX_POOL_LETTERS = 26;
 var MAX_EXTRA_LETTERS = 8;
 
 var AnswerPanel = function AnswerPanel(_ref) {
-  var answer = _ref.answer;
+  var answer = _ref.answer,
+      _ref$show = _ref.show,
+      show = _ref$show === void 0 ? false : _ref$show;
   var words = [];
   var wordIndex = 0;
   answer.forEach(function (a) {
@@ -68,7 +70,12 @@ var AnswerPanel = function AnswerPanel(_ref) {
       key: "".concat(word + index),
       className: "puzzle--hanged__word",
       "data-testid": "result-".concat(index)
-    }, word.filter(function (_ref2) {
+    }, show ? word.map(function (char, i) {
+      return /*#__PURE__*/_react.default.createElement("span", {
+        key: "".concat(char + i),
+        className: "puzzle--hanged__letter active"
+      }, char);
+    }) : word.filter(function (_ref2) {
       var char = _ref2.char;
       return char !== ' ';
     }).map(function (_ref3, i) {
@@ -133,6 +140,11 @@ var HangedPuzzleComponent = function HangedPuzzleComponent(_ref4) {
       accRewards = _useState12[0],
       setRewards = _useState12[1];
 
+  var _useState13 = (0, _react.useState)(false),
+      _useState14 = _slicedToArray(_useState13, 2),
+      showCorrectSolution = _useState14[0],
+      setCorrectSolution = _useState14[1];
+
   var translatedAnswer = answer.toUpperCase().split('');
   var answerPanel = translatedAnswer.filter(function (char) {
     return (0, _utils.restrictCharacters)(char, 'and');
@@ -388,12 +400,15 @@ var HangedPuzzleComponent = function HangedPuzzleComponent(_ref4) {
     }
 
     setResolveAction(function () {
-      var rewardsData = [].concat(_toConsumableArray(accRewards), _toConsumableArray(info.resolve.rewards));
-      emitEvent({
-        type: 'hidePuzzleButtons',
-        payload: false
-      });
-      setShowPoints(rewardsData);
+      setCorrectSolution(true);
+      setTimeout(function () {
+        var rewardsData = [].concat(_toConsumableArray(accRewards), _toConsumableArray(info.resolve.rewards));
+        emitEvent({
+          type: 'hidePuzzleButtons',
+          payload: false
+        });
+        setShowPoints(rewardsData);
+      }, 2000);
     });
   }, [setHiddenAnswer, mounted, answer, setResolveAction, emitEvent, accRewards, info.resolve.rewards, setShowPoints]);
   return /*#__PURE__*/_react.default.createElement("div", {
@@ -416,7 +431,10 @@ var HangedPuzzleComponent = function HangedPuzzleComponent(_ref4) {
   }, question), /*#__PURE__*/_react.default.createElement("div", {
     className: "puzzle--hanged__solution ".concat(resolvedClass),
     "data-testid": "".concat(resolvedClass)
-  }, /*#__PURE__*/_react.default.createElement(AnswerPanel, {
+  }, showCorrectSolution ? /*#__PURE__*/_react.default.createElement(AnswerPanel, {
+    answer: answer.split(''),
+    show: true
+  }) : /*#__PURE__*/_react.default.createElement(AnswerPanel, {
     answer: resolvedAnswer
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "puzzle--hanged__keyboard"

package/dist/components/index.js

@@ -5,12 +5,6 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "AnimateElement", {
-  enumerable: true,
-  get: function get() {
-    return _AnimateElement.default;
-  }
-});
 Object.defineProperty(exports, "AnimationComponent", {
   enumerable: true,
   get: function get() {
@@ -23,12 +17,6 @@ Object.defineProperty(exports, "AutoEvaluationComponent", {
     return _autoEvaluationComponent.default;
   }
 });
-Object.defineProperty(exports, "Background", {
-  enumerable: true,
-  get: function get() {
-    return _background.default;
-  }
-});
 Object.defineProperty(exports, "CardsSelectorPuzzleComponent", {
   enumerable: true,
   get: function get() {
@@ -47,12 +35,6 @@ Object.defineProperty(exports, "ChainedImageClickPuzzleComponent", {
     return _chainedImageClickPuzzleComponent.default;
   }
 });
-Object.defineProperty(exports, "ClickableArea", {
-  enumerable: true,
-  get: function get() {
-    return _ClickableArea.default;
-  }
-});
 Object.defineProperty(exports, "ComicComponent", {
   enumerable: true,
   get: function get() {
@@ -95,18 +77,6 @@ Object.defineProperty(exports, "DragItemPuzzleComponent", {
     return _dragItemPuzzleComponent.default;
   }
 });
-Object.defineProperty(exports, "Element", {
-  enumerable: true,
-  get: function get() {
-    return _element.default;
-  }
-});
-Object.defineProperty(exports, "ElementList", {
-  enumerable: true,
-  get: function get() {
-    return _elementsList.default;
-  }
-});
 Object.defineProperty(exports, "FrameImageClickComponent", {
   enumerable: true,
   get: function get() {
@@ -191,18 +161,6 @@ Object.defineProperty(exports, "PdfVisor", {
     return _pdfComponent.PdfVisor;
   }
 });
-Object.defineProperty(exports, "Poster", {
-  enumerable: true,
-  get: function get() {
-    return _Poster.default;
-  }
-});
-Object.defineProperty(exports, "Scene", {
-  enumerable: true,
-  get: function get() {
-    return _scene.default;
-  }
-});
 Object.defineProperty(exports, "SurveyComponent", {
   enumerable: true,
   get: function get() {
@@ -264,20 +222,6 @@ Object.defineProperty(exports, "ZoomTest", {
   }
 });
 
-var _scene = _interopRequireDefault(require("./arcade-render/scene"));
-
-var _elementsList = _interopRequireDefault(require("./arcade-render/elements-list"));
-
-var _ClickableArea = _interopRequireDefault(require("./arcade-render/elements-list/ClickableArea"));
-
-var _Poster = _interopRequireDefault(require("./arcade-render/elements-list/Poster"));
-
-var _background = _interopRequireDefault(require("./arcade-render/background"));
-
-var _element = _interopRequireDefault(require("./arcade-render/element"));
-
-var _AnimateElement = _interopRequireDefault(require("./arcade-render/element/AnimateElement"));
-
 var _noticeComponent = _interopRequireDefault(require("./notice-component"));
 
 var _inventoryItem = _interopRequireDefault(require("./inventory-item"));

package/dist/components/inventory-item/components/InventoryItem.js

@@ -9,18 +9,16 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _drei = require("@react-three/drei");
+
 var _fiber = require("@react-three/fiber");
 
-var _drei = require("@react-three/drei");
+var _arcadeThreeCore = require("@gamelearn/arcade-three-core");
 
 var _helpers = require("../../../helpers");
 
-var _element = _interopRequireDefault(require("../../arcade-render/element"));
-
 var _LightSet = _interopRequireDefault(require("../../../helpers/LightSet"));
 
-var _drawLOD = _interopRequireDefault(require("../../../helpers/drawLOD"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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); }
@@ -44,7 +42,6 @@ var InventoryItem = function InventoryItem(_ref) {
       description = _ref.description,
       element = _ref.element,
       onFinish = _ref.onFinish,
-      lodSettings = _ref.lodSettings,
       soundActions = _ref.soundActions;
   var orbit = (0, _react.useRef)();
 
@@ -69,7 +66,6 @@ var InventoryItem = function InventoryItem(_ref) {
       camera.fov = 35;
       camera.updateProjectionMatrix();
       (0, _helpers.cameraFitAnyObject)(model, camera, null, orbit.current);
-      (0, _drawLOD.default)(scene, camera, lodSettings);
     }
   };
 
@@ -94,9 +90,9 @@ var InventoryItem = function InventoryItem(_ref) {
     mode: "concurrent",
     shadows: true,
     onCreated: handleOnCreate
-  }, /*#__PURE__*/_react.default.createElement(_LightSet.default, null), /*#__PURE__*/_react.default.createElement(_react.Suspense, {
-    fallback: null
-  }, element ? /*#__PURE__*/_react.default.createElement(_element.default, {
+  }, /*#__PURE__*/_react.default.createElement(_LightSet.default, null), /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.LodWrapper, {
+    lod: "divideby16"
+  }, /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.StaticResource, {
     key: "".concat(element.uid),
     url: element.url,
     position: [0, 0, 0],
@@ -105,7 +101,7 @@ var InventoryItem = function InventoryItem(_ref) {
     material: element.material || {},
     name: element.name,
     onLoad: onLoad
-  }) : null), /*#__PURE__*/_react.default.createElement(_drei.OrbitControls, {
+  })), /*#__PURE__*/_react.default.createElement(_drei.OrbitControls, {
     ref: orbit,
     enableKeys: false,
     enableZoom: false,

package/dist/components/inventory-item/mocks/mockForStory.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.mockProps = exports.default = void 0;
 
-var _mocker = require("helpers/mocker");
+var _characters = require("test/mocks/characters.json");
 
-var _mocks = require("../../arcade-render/mocks");
+var _mocker = require("helpers/mocker");
 
 var mockProps = {
   emitEvent: _mocker.emitEvent,
@@ -18,7 +18,7 @@ var mockProps = {
   name: 'Avocado',
   description: 'El que tengo aqui condimentado',
   element: {
-    url: _mocks.taxi,
+    url: _characters.elements[5].url,
     type: 'object',
     position: [0, -5, 0],
     rotation: [0, 0, 0],

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

@@ -177,13 +177,14 @@ var KeyboardPuzzleComponent = function KeyboardPuzzleComponent(_ref) {
       setPassClass('success');
       setFeedbackResult(true);
       setFeedBackText(info.solution.right.desc);
+      setInputPassword(password);
       setFinished(true);
       var rewardsData = [].concat(_toConsumableArray(accRewards), _toConsumableArray(info.resolve.rewards));
       setTimeout(function () {
         closeFeedbackAndShowPoints(rewardsData);
       }, 2000);
     });
-  }, [setResolveAction, disableExit, info.solution.right.desc, playSound, info.resolve.rewards, accRewards, closeFeedbackAndShowPoints]);
+  }, [setResolveAction, disableExit, info.solution.right.desc, playSound, info.resolve.rewards, accRewards, closeFeedbackAndShowPoints, password]);
 
   var handleNumbClick = function handleNumbClick(row, col) {
     var char = keyboard[row][col];

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

@@ -90,13 +90,18 @@ var LoginPuzzleComponent = function LoginPuzzleComponent(_ref) {
       errorMessage = _useState14[0],
       setErrorMessage = _useState14[1];
 
+  var _useState15 = (0, _react.useState)(false),
+      _useState16 = _slicedToArray(_useState15, 2),
+      showCorrectSolution = _useState16[0],
+      setCorrectSolution = _useState16[1];
+
   var _soundActions = _slicedToArray(soundActions, 1),
       playSound = _soundActions[0];
 
-  var _useState15 = (0, _react.useState)([]),
-      _useState16 = _slicedToArray(_useState15, 2),
-      accRewards = _useState16[0],
-      setRewards = _useState16[1];
+  var _useState17 = (0, _react.useState)([]),
+      _useState18 = _slicedToArray(_useState17, 2),
+      accRewards = _useState18[0],
+      setRewards = _useState18[1];
 
   var imgURL = ((_image$img = image.img) === null || _image$img === void 0 ? void 0 : _image$img.url) || imagenPorDefecto;
 
@@ -151,11 +156,14 @@ var LoginPuzzleComponent = function LoginPuzzleComponent(_ref) {
   (0, _react.useEffect)(function () {
     setResolveAction(function () {
       var rewardsData = [].concat(_toConsumableArray(accRewards), _toConsumableArray(info.resolve.rewards));
-      emitEvent({
-        type: 'hidePuzzleButtons',
-        payload: false
-      });
-      setShowPoints(rewardsData);
+      setCorrectSolution(true);
+      setTimeout(function () {
+        emitEvent({
+          type: 'hidePuzzleButtons',
+          payload: false
+        });
+        setShowPoints(rewardsData);
+      }, 2000);
     });
   }, [accRewards, info.resolve.rewards, emitEvent, setShowPoints, setResolveAction]);
   return /*#__PURE__*/_react.default.createElement("div", {
@@ -173,7 +181,14 @@ var LoginPuzzleComponent = function LoginPuzzleComponent(_ref) {
     className: "puzzle--login__label"
   }, translate('puzzle.user')), /*#__PURE__*/_react.default.createElement("div", {
     className: "puzzle--login__group"
-  }, /*#__PURE__*/_react.default.createElement("input", {
+  }, showCorrectSolution ? /*#__PURE__*/_react.default.createElement("input", {
+    disabled: finished,
+    "data-testid": "username",
+    className: "puzzle--login__input ".concat(successClass),
+    type: "text",
+    placeholder: user,
+    value: user
+  }) : /*#__PURE__*/_react.default.createElement("input", {
     disabled: finished,
     "data-testid": "username",
     className: "puzzle--login__input ".concat(successClass),
@@ -188,9 +203,16 @@ var LoginPuzzleComponent = function LoginPuzzleComponent(_ref) {
     className: "icon-circle-check"
   }, " "))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
     className: "puzzle--login__label"
-  }, /*#__PURE__*/_react.default.createElement("span", null, translate('puzzle.password'))), /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("span", null, translate('puzzle.password'), " ", password)), /*#__PURE__*/_react.default.createElement("div", {
     className: "puzzle--login__group"
-  }, /*#__PURE__*/_react.default.createElement("input", {
+  }, showCorrectSolution ? /*#__PURE__*/_react.default.createElement("input", {
+    disabled: finished,
+    "data-testid": "password",
+    className: "puzzle--login__input puzzle--login__input--fakepassword ".concat(successClass),
+    type: "text",
+    placeholder: password,
+    value: password
+  }) : /*#__PURE__*/_react.default.createElement("input", {
     disabled: finished,
     "data-testid": "password",
     className: "puzzle--login__input puzzle--login__input--fakepassword ".concat(successClass),
@@ -208,9 +230,9 @@ var LoginPuzzleComponent = function LoginPuzzleComponent(_ref) {
       setSuccessClass('');
       setErrorMessage(false);
     }
-  }), /*#__PURE__*/_react.default.createElement("div", {
+  }), !showCorrectSolution ? /*#__PURE__*/_react.default.createElement("div", {
     className: "login-fakepassword".concat(inputPasswordFocus ? ' login-fakepassword--focus' : '').concat(fakeHashes.length ? ' login-fakepassword--fill' : '', " ").concat(successClass || '')
-  }, inputPassword ? fakeHashes : translate('puzzle.password')), /*#__PURE__*/_react.default.createElement("span", {
+  }, inputPassword ? fakeHashes : translate('puzzle.password')) : null, /*#__PURE__*/_react.default.createElement("span", {
     className: "icon-circle-check"
   }, " ")))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("button", {
     type: "button",

package/dist/components/zoom-test/mocks/mockForStory.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.mockProps = exports.default = void 0;
 
-var _bg001_street = _interopRequireDefault(require("../../arcade-render/mocks/scenes/bg001_street.json"));
+var _bg001_street = _interopRequireDefault(require("test/mocks/bg001_street.json"));
 
-var _characters = require("../../arcade-render/mocks/scenes/characters.json");
+var _characters = require("test/mocks/characters.json");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }