@gamelearn/arcade-components 1.1.4 → 1.2.0

package/dist/components/arcade-render/scene/ConfigController.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _fiber = require("@react-three/fiber");
+
+var _useCameraPan = _interopRequireDefault(require("./useCameraPan"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+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 = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var ConfigController = function ConfigController(_ref) {
+  var current = _ref.current;
+
+  var _useThree = (0, _fiber.useThree)(function (state) {
+    return [state.gl, state.scene, state.invalidate];
+  }),
+      _useThree2 = _slicedToArray(_useThree, 3),
+      stateGl = _useThree2[0],
+      stateScene = _useThree2[1],
+      invalidate = _useThree2[2];
+
+  (0, _useCameraPan.default)(current.lookingSide);
+  (0, _fiber.useFrame)(function (_ref2) {
+    var gl = _ref2.gl,
+        scene = _ref2.scene,
+        camera = _ref2.camera;
+    gl.render(scene, camera);
+
+    if (!current.animate) {
+      invalidate();
+    }
+  }, 1); // settings
+
+  (0, _react.useEffect)(function () {
+    stateGl.shadowMap.enabled = current.shadows;
+    stateGl.shadowMap.needsUpdate = true;
+    stateScene.traverse(function (node) {
+      if (node.isMesh) {
+        node.material.needsUpdate = true;
+      }
+    });
+
+    if (!current.animate) {
+      invalidate();
+    }
+  }, [stateGl, stateScene, current, invalidate]);
+  return null;
+};
+
+var _default = ConfigController;
+exports.default = _default;

package/dist/components/arcade-render/scene/index.js

@@ -0,0 +1,129 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _fiber = require("@react-three/fiber");
+
+var _drei = require("@react-three/drei");
+
+var _loading = _interopRequireDefault(require("../loading"));
+
+var _ConfigController = _interopRequireDefault(require("./ConfigController"));
+
+var _LoadingLogic = require("../loading/LoadingLogic");
+
+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); }
+
+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; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+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 = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var Scene = function Scene(_ref) {
+  var _ref$sceneChanged = _ref.sceneChanged,
+      sceneChanged = _ref$sceneChanged === void 0 ? false : _ref$sceneChanged,
+      _ref$hasControls = _ref.hasControls,
+      hasControls = _ref$hasControls === void 0 ? false : _ref$hasControls,
+      _ref$has3Stats = _ref.has3Stats,
+      has3Stats = _ref$has3Stats === void 0 ? false : _ref$has3Stats,
+      _ref$loadingText = _ref.loadingText,
+      loadingText = _ref$loadingText === void 0 ? '' : _ref$loadingText,
+      _ref$toggleShadows = _ref.toggleShadows,
+      toggleShadows = _ref$toggleShadows === void 0 ? true : _ref$toggleShadows,
+      _ref$lodSettings = _ref.lodSettings,
+      lodSettings = _ref$lodSettings === void 0 ? {} : _ref$lodSettings,
+      _ref$onLoadFinish = _ref.onLoadFinish,
+      onLoadFinish = _ref$onLoadFinish === void 0 ? function () {} : _ref$onLoadFinish,
+      _ref$stopAnimate = _ref.stopAnimate,
+      stopAnimate = _ref$stopAnimate === void 0 ? false : _ref$stopAnimate,
+      lookingSide = _ref.lookingSide,
+      children = _ref.children;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      showLoad = _useState2[0],
+      setShowLoad = _useState2[1];
+
+  var orbit = (0, _react.useRef)();
+
+  var handleOnCreate = function handleOnCreate(_ref2) {
+    var gl = _ref2.gl,
+        raycaster = _ref2.raycaster,
+        camera = _ref2.camera;
+    raycaster.layers.set(1);
+    gl.outputEncoding = 3001;
+    gl.gammaFactor = 2.2;
+    gl.setClearColor(0xcccccc);
+    gl.setPixelRatio(window.devicePixelRatio);
+    gl.setSize(window.innerWidth, window.innerHeight);
+    gl.physicallyCorrectLights = true;
+    camera.layers.enableAll();
+  };
+
+  var onFinish = function onFinish() {
+    onLoadFinish();
+    setShowLoad(false);
+  };
+
+  (0, _react.useEffect)(function () {
+    if (sceneChanged) {
+      setShowLoad(true);
+    }
+  }, [sceneChanged]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_fiber.Canvas, {
+    className: "main-canvas",
+    style: {
+      width: '100%',
+      height: '100vh'
+    },
+    resize: {
+      scroll: false
+    },
+    mode: "concurrent",
+    flat: true,
+    shadows: toggleShadows,
+    frameloop: "demand",
+    onCreated: handleOnCreate,
+    tabIndex: 0
+  }, /*#__PURE__*/_react.default.createElement(_ConfigController.default, {
+    current: {
+      shadows: toggleShadows,
+      animate: stopAnimate,
+      lookingSide: lookingSide
+    }
+  }), /*#__PURE__*/_react.default.createElement(_react.Suspense, {
+    fallback: /*#__PURE__*/_react.default.createElement(_loading.default, {
+      text: loadingText
+    })
+  }, showLoad && /*#__PURE__*/_react.default.createElement(_LoadingLogic.LoadingLogic, {
+    onFinish: onFinish,
+    lodSettings: lodSettings
+  }), children, /*#__PURE__*/_react.default.createElement(_drei.Preload, {
+    all: true
+  })), has3Stats && /*#__PURE__*/_react.default.createElement(_drei.Stats, null), hasControls && /*#__PURE__*/_react.default.createElement(_drei.OrbitControls, {
+    ref: orbit
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    id: "elements-projection"
+  }));
+};
+
+var _default = Scene;
+exports.default = _default;

package/dist/components/arcade-render/scene/useCameraPan.js

@@ -0,0 +1,115 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _fiber = require("@react-three/fiber");
+
+var _react = require("react");
+
+var _three = require("three");
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+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 = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var STD_RESOLUTION = 16 / 9;
+var MOTION_LIMITER = 3.5;
+var SPEED = 50;
+var quad = new _three.Quaternion();
+var yAxis = new _three.Vector3(0, 1, 0);
+
+var rotateQuatY = function rotateQuatY(current, amount) {
+  var result = current.clone();
+  quad.setFromAxisAngle(yAxis, amount);
+  return result.multiply(quad);
+};
+
+var useCameraPan = function useCameraPan(lookingSide) {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      cameraLoaded = _useState2[0],
+      setCameraLoaded = _useState2[1];
+
+  var movingCamera = (0, _react.useRef)(false);
+
+  var _useThree = (0, _fiber.useThree)(function (state) {
+    return [state.camera, state.viewport];
+  }),
+      _useThree2 = _slicedToArray(_useThree, 2),
+      camera = _useThree2[0],
+      viewport = _useThree2[1];
+
+  var cameraRotation = (0, _react.useRef)({
+    left: camera.quaternion,
+    center: camera.quaternion,
+    right: camera.quaternion
+  });
+  var setCameraRotationView = (0, _react.useCallback)(function () {
+    if (viewport.aspect >= STD_RESOLUTION) {
+      cameraRotation.current = {
+        left: camera.quaternion,
+        center: camera.quaternion,
+        right: camera.quaternion
+      };
+      return;
+    }
+
+    var threshold = (STD_RESOLUTION - viewport.aspect) / MOTION_LIMITER;
+
+    if (camera.rotation) {
+      cameraRotation.current = {
+        center: camera.quaternion.clone(),
+        left: rotateQuatY(camera.quaternion, threshold),
+        right: rotateQuatY(camera.quaternion, -threshold)
+      };
+      movingCamera.current = true;
+    }
+  }, [camera, viewport.aspect]);
+  var moveCamera = (0, _react.useCallback)(function (delta) {
+    var goal = cameraRotation.current[lookingSide];
+
+    if (camera.quaternion && goal) {
+      if (!camera.quaternion.equals(goal)) {
+        camera.quaternion.rotateTowards(goal, delta * SPEED);
+      } else {
+        movingCamera.current = false;
+      }
+    }
+  }, [camera, lookingSide]);
+  (0, _fiber.useFrame)(function (_ref) {
+    var clock = _ref.clock;
+
+    if (movingCamera.current) {
+      moveCamera(clock.getDelta());
+    }
+  }, 1);
+  (0, _react.useEffect)(function () {
+    if (camera.defaultCamera) {
+      setCameraLoaded(true);
+    }
+  }, [camera]);
+  (0, _react.useEffect)(function () {
+    if (cameraLoaded) {
+      movingCamera.current = true;
+    }
+  }, [lookingSide, cameraLoaded]);
+  (0, _react.useEffect)(function () {
+    if (cameraLoaded) {
+      setCameraRotationView();
+    }
+  }, [viewport, cameraLoaded, setCameraRotationView]);
+};
+
+var _default = useCameraPan;
+exports.default = _default;

package/dist/components/conversational-pro-component/components/ConversationalProComponent.js

@@ -68,7 +68,6 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
       finished = _useState4[0],
       setFinished = _useState4[1];
 
-  var emitEventRef = (0, _react.useRef)(emitEvent);
   var backgroundImage = (background === null || background === void 0 ? void 0 : (_background$img = background.img) === null || _background$img === void 0 ? void 0 : _background$img.url) || null;
   var currentLineData = lines[currentLine];
   var voiceOverSlots = [];
@@ -76,11 +75,11 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
       decision = currentLineData.decision;
   var isFlex = currentLineData.flex;
   var translate = (0, _react.useCallback)(function (id) {
-    return emitEventRef.current({
+    return emitEvent({
       type: 'translate',
       payload: id
     });
-  }, []);
+  }, [emitEvent]);
   var getCurrentMessage = (0, _react.useCallback)(function () {
     if (voiceOver) {
       return currentLineData;
@@ -122,13 +121,13 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
     return !decision ? getCurrentMessage() : {};
   }, [getCurrentMessage, decision]);
   var playSpeech = (0, _react.useCallback)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-    var payload, speechUrl;
+    var payload;
     return regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) {
         switch (_context.prev = _context.next) {
           case 0:
             if (!(currentLineData.voice.id && currentMessage)) {
-              _context.next = 7;
+              _context.next = 5;
               break;
             }
 
@@ -138,27 +137,23 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
             };
 
             if (!(payload.voiceId && payload.text)) {
-              _context.next = 7;
+              _context.next = 5;
               break;
             }
 
             _context.next = 5;
-            return emitEventRef.current({
+            return emitEvent({
               type: 'playSpeech',
               payload: payload
             });
 
           case 5:
-            speechUrl = _context.sent;
-            playSound(speechUrl);
-
-          case 7:
           case "end":
             return _context.stop();
         }
       }
     }, _callee);
-  })), [currentLineData.voice, currentMessage, getVoice, playSound]); // Recupera la antigua linea de la conversacion para conservar los personajes en voice-over
+  })), [currentLineData.voice, currentMessage, emitEvent, getVoice]); // Recupera la antigua linea de la conversacion para conservar los personajes en voice-over
 
   var leftWithSlots = lines.slice(0, currentLine + 1).reverse().find(function (line) {
     return line.slots;
@@ -244,7 +239,7 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
       setCurrentLine(line + 1);
     } else {
       setFinished(true);
-      emitEventRef.current({
+      emitEvent({
         type: 'success'
       });
     }

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

@@ -94,8 +94,6 @@ var DialogComponent = function DialogComponent(_ref) {
       currentMessage = _useState6[0],
       setCurrentMessage = _useState6[1];
 
-  var emitRef = (0, _react.useRef)(emitEvent);
-
   var _useThree = (0, _fiber.useThree)(function (state) {
     return [state.camera, state.scene];
   }),
@@ -125,11 +123,11 @@ var DialogComponent = function DialogComponent(_ref) {
   var lastLine = lines[line - 1];
   var lastSet = (0, _react.useRef)(false);
   var translate = (0, _react.useCallback)(function (id) {
-    return emitRef.current({
+    return emitEvent({
       type: 'translate',
       payload: id
     });
-  }, []);
+  }, [emitEvent]);
   var getVoice = (0, _react.useCallback)(function (_ref2) {
     var id = _ref2.id,
         _ref2$type = _ref2.type,
@@ -150,13 +148,13 @@ var DialogComponent = function DialogComponent(_ref) {
     return null;
   }, [translate]);
   var playSpeech = (0, _react.useCallback)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-    var payload, speechUrl;
+    var payload;
     return regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) {
         switch (_context.prev = _context.next) {
           case 0:
             if (!currentLine.voice.id) {
-              _context.next = 7;
+              _context.next = 5;
               break;
             }
 
@@ -166,27 +164,23 @@ var DialogComponent = function DialogComponent(_ref) {
             };
 
             if (!(payload.voiceId && payload.text)) {
-              _context.next = 7;
+              _context.next = 5;
               break;
             }
 
             _context.next = 5;
-            return emitRef.current({
+            return emitEvent({
               type: 'playSpeech',
               payload: payload
             });
 
           case 5:
-            speechUrl = _context.sent;
-            playSound(speechUrl);
-
-          case 7:
           case "end":
             return _context.stop();
         }
       }
     }, _callee);
-  })), [currentLine.voice, getVoice, currentMessage.text, playSound]);
+  })), [currentLine.voice, getVoice, currentMessage.text, emitEvent]);
   var getCurrentVisible = (0, _react.useCallback)(function (uid) {
     var object;
     scene.traverseVisible(function (node) {
@@ -363,7 +357,7 @@ var DialogComponent = function DialogComponent(_ref) {
                 head.getWorldPosition(target.position);
                 target.applyQuaternion(camera.quaternion);
                 target.translateX(1.25);
-                target.translateY(3);
+                target.translateY(2);
                 messagePosition.current = {
                   pos: target.position.toArray(),
                   child: head,
@@ -501,7 +495,7 @@ var DialogComponent = function DialogComponent(_ref) {
           animationTarget.current.applyQuaternion(cam.quaternion);
         }
 
-        animationTarget.current.translateX(12);
+        animationTarget.current.translateX(10);
         animationTarget.current.translateY(-5);
         animationTarget.current.translateZ(30);
       }
@@ -545,7 +539,7 @@ var DialogComponent = function DialogComponent(_ref) {
       disableBackground: true
     },
     onFinish: nextLine,
-    emitEvent: emitRef.current,
+    emitEvent: emitEvent,
     soundActions: soundActions
   });
 

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,6 +5,12 @@ 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() {
@@ -17,6 +23,12 @@ 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() {
@@ -35,6 +47,12 @@ 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() {
@@ -77,6 +95,18 @@ 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() {
@@ -161,6 +191,18 @@ 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() {
@@ -222,6 +264,20 @@ 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/login-puzzle-component/components/LoginPuzzleComponent.js

@@ -154,11 +154,10 @@ var LoginPuzzleComponent = function LoginPuzzleComponent(_ref) {
   };
 
   (0, _react.useEffect)(function () {
-    var timeout;
     setResolveAction(function () {
       var rewardsData = [].concat(_toConsumableArray(accRewards), _toConsumableArray(info.resolve.rewards));
       setCorrectSolution(true);
-      timeout = setTimeout(function () {
+      setTimeout(function () {
         emitEvent({
           type: 'hidePuzzleButtons',
           payload: false
@@ -166,7 +165,6 @@ var LoginPuzzleComponent = function LoginPuzzleComponent(_ref) {
         setShowPoints(rewardsData);
       }, 2000);
     });
-    if (timeout) clearTimeout(timeout);
   }, [accRewards, info.resolve.rewards, emitEvent, setShowPoints, setResolveAction]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "puzzle--layer",

package/dist/components/video-visor/components/VideoVisor.js

@@ -258,7 +258,6 @@ var VideoVisor = function VideoVisor(_ref) {
     },
     onClick: function onClick() {
       handleHideControls();
-      playSound('click-ui');
     },
     onCanPlayThrough: onCanPlay,
     onWaiting: onWaiting,