@gamelearn/arcade-components 1.1.4 → 1.2.1

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

@@ -88,14 +88,13 @@ var DialogComponent = function DialogComponent(_ref) {
     inScene: false,
     thinkful: false,
     voiceOver: false,
-    avatar: ''
+    avatar: '',
+    show: false
   }),
       _useState6 = _slicedToArray(_useState5, 2),
       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 +124,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 +149,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 +165,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) {
@@ -314,7 +309,8 @@ var DialogComponent = function DialogComponent(_ref) {
         inScene: false,
         voiceOver: true,
         thinkful: false,
-        avatar: ''
+        avatar: '',
+        show: true
       });
     } else if (!lastSet.current) {
       var talkingCharacter = currentLine.slots.find(function (slot) {
@@ -363,7 +359,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,
@@ -384,7 +380,8 @@ var DialogComponent = function DialogComponent(_ref) {
                     left: true,
                     inScene: true,
                     thinkful: talkingCharacter.emotion === 'thinkful',
-                    avatar: ''
+                    avatar: '',
+                    show: true
                   });
                 }, zoomInActor ? 1200 : 0);
               }
@@ -400,9 +397,15 @@ var DialogComponent = function DialogComponent(_ref) {
             left: false,
             inScene: false,
             thinkful: talkingCharacter.emotion === 'thinkful',
-            avatar: getAvatarURL(talkingCharacter)
+            avatar: getAvatarURL(talkingCharacter),
+            show: true
           });
         }
+      } else {
+        resetCameraView();
+        setCurrentMessage({
+          show: true
+        });
       }
     }
   }, [actors, camera, currentLine, zoomInActor, getCurrentVisible, translate, getAvatarURL, loadEmotion, resetAnims, resetCameraView]); // Sound logic
@@ -476,7 +479,8 @@ var DialogComponent = function DialogComponent(_ref) {
             return _objectSpread(_objectSpread({}, old), {}, {
               left: false,
               inScene: !completeOutside,
-              avatar: getAvatarURL(talkingCharacter)
+              avatar: getAvatarURL(talkingCharacter),
+              show: true
             });
           });
         }
@@ -501,7 +505,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 +549,7 @@ var DialogComponent = function DialogComponent(_ref) {
       disableBackground: true
     },
     onFinish: nextLine,
-    emitEvent: emitRef.current,
+    emitEvent: emitEvent,
     soundActions: soundActions
   });
 
@@ -567,7 +571,7 @@ var DialogComponent = function DialogComponent(_ref) {
     }, decisionPayload)));
   }
 
-  return currentMessage.text ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("group", {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, currentMessage.text ? /*#__PURE__*/_react.default.createElement("group", {
     ref: groupRef,
     position: messagePosition.current.pos
   }, /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.HtmlPro, {
@@ -581,7 +585,7 @@ var DialogComponent = function DialogComponent(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_SpeechBubbleComponent.default, {
     ref: bubbleRef,
     message: currentMessage
-  }))), /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.HtmlPro, {
+  }))) : null, currentMessage.show ? /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.HtmlPro, {
     style: {
       width: '100vw',
       height: '100vh'
@@ -606,7 +610,7 @@ var DialogComponent = function DialogComponent(_ref) {
     onClick: nextLine
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "icon-next"
-  }))))) : null;
+  })))) : null);
 };
 
 var _default = DialogComponent;

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"