@gamelearn/arcade-components 2.15.2 → 2.15.4

package/dist/components/comic-component/components/ComicComponent.js

@@ -161,31 +161,46 @@ var ComicComponent = function ComicComponent(_ref) {
   if (!(slides !== null && slides !== void 0 && slides.length)) return null;
   return /*#__PURE__*/_react.default.createElement("div", {
     dir: (0, _LangIsRtl.default)() ? 'rtl' : 'auto',
-    className: "comic component growIn-animation"
+    className: "comic component growIn-animation",
+    role: "main",
+    "aria-label": "Comic"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "comic--slider"
+    className: "comic--slider",
+    role: "navigation",
+    "aria-label": "Slider"
   }, slides[slideCount] && /*#__PURE__*/_react.default.createElement(_Slide.default, {
     key: "comic page ".concat(slides[slideCount].slideOrder),
     slide: slides[slideCount],
     transition: slideTransition,
     soundActions: soundActions,
-    emitEvent: emitEvent
+    emitEvent: emitEvent,
+    role: "complementary",
+    "aria-hidden": "true"
   }), slideCount > 0 && /*#__PURE__*/_react.default.createElement("button", {
     type: "button",
     className: "comic-control comic-control--left gat--btn__round",
+    "data-testid": "btn-bck",
     onClick: handleManualBack,
-    "data-testid": "btn-bck"
+    "aria-label": "Back"
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _LangIsRtl.default)() ? 'icon-next' : 'icon-back'
+    className: (0, _LangIsRtl.default)() ? 'icon-next' : 'icon-back',
+    role: "img",
+    "aria-label": "Icon Navigation Back"
   })), slideCount + 1 < slides.length && /*#__PURE__*/_react.default.createElement("button", {
     type: "button",
     className: "comic-control comic-control--right gat--btn__round",
     "data-testid": "btn-nxt",
-    onClick: handleManualNext
+    onClick: handleManualNext,
+    "aria-label": "Next"
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _LangIsRtl.default)() ? 'icon-back' : 'icon-next'
+    className: (0, _LangIsRtl.default)() ? 'icon-back' : 'icon-next',
+    role: "img",
+    "aria-label": "Icon Navigation Next"
   })), slideCount + 1 >= slides.length && /*#__PURE__*/_react.default.createElement("div", {
-    className: "position--absolute top right"
+    className: "position--absolute top right",
+    role: "heading",
+    "aria-level": "1",
+    "aria-label": "heading"
   }, /*#__PURE__*/_react.default.createElement("button", {
     type: "button",
     className: "gat--btn__round gat--btn__close",
@@ -193,9 +208,12 @@ var ComicComponent = function ComicComponent(_ref) {
     onClick: function onClick() {
       play('click-ui');
       close();
-    }
+    },
+    "aria-label": "Close"
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "icon-close"
+    className: "icon-close",
+    role: "img",
+    "aria-label": "Icon Close"
   })))));
 };
 

package/dist/components/comic-component/components/Slide.js

@@ -16,12 +16,14 @@ var Slide = function Slide(_ref) {
       transition = _ref.transition;
   var slideTransition = slide.transitionEffects || transition;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "comic--slide__item ".concat(slideTransition)
+    className: "comic--slide__item ".concat(slideTransition),
+    "aria-label": "comic slide item"
   }, slide.vignettes.map(function (vignette) {
     return /*#__PURE__*/_react.default.createElement(_Vignette.default, {
       key: "Vignete ".concat(vignette.vignetteOrder),
       vignette: vignette,
-      alias: slide.alias
+      alias: slide.alias,
+      "aria-hidden": "true"
     });
   }));
 };

package/dist/components/comic-component/components/Vignette.js

@@ -48,17 +48,22 @@ var Vignette = function Vignette(_ref) {
     className: "comic--image"
   }, resolvedIdImg && /*#__PURE__*/_react.default.createElement("img", {
     src: resolvedIdImg,
-    alt: "comic pic"
+    alt: "comic pic",
+    "aria-label": "comic pic"
   })), vignette !== null && vignette !== void 0 && (_vignette$textData = vignette.textData) !== null && _vignette$textData !== void 0 && _vignette$textData.text ? /*#__PURE__*/_react.default.createElement("div", {
     className: "comic-collapsable ".concat(isCollapsed ? 'comic-collapsable--collapsed' : '')
   }, /*#__PURE__*/_react.default.createElement("button", {
     onClick: toggleText,
     type: "button",
-    className: "un-btn comic-collapsable__header comic-collapsable__toggle"
+    className: "un-btn comic-collapsable__header comic-collapsable__toggle",
+    "aria-label": "toogle text"
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "".concat(isCollapsed ? 'icon-up-arrow' : 'icon-down-arrow')
+    className: "".concat(isCollapsed ? 'icon-up-arrow' : 'icon-down-arrow'),
+    "aria-label": "toogle icon",
+    role: "img"
   })), /*#__PURE__*/_react.default.createElement("div", {
-    className: "comic-collapsable__text"
+    className: "comic-collapsable__text",
+    "aria-label": "vignette text"
   }, alias ? /*#__PURE__*/_react.default.createElement("b", null, alias, ": ") : null, vignette.textData.text)) : null);
 };
 

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

@@ -19,8 +19,6 @@ var _arcadeThreeCore = require("@gamelearn/arcade-three-core");
 
 var _gsap = _interopRequireDefault(require("gsap"));
 
-var _decisionComponent = _interopRequireDefault(require("../../decision-component"));
-
 var _helpers = require("../../../helpers");
 
 var _useTimeout2 = _interopRequireDefault(require("../../../helpers/useTimeout"));
@@ -31,14 +29,14 @@ var _LangIsRtl = _interopRequireDefault(require("../../../helpers/LangIsRtl"));
 
 var _BubbleWrapper = _interopRequireDefault(require("./BubbleWrapper"));
 
+var _DialogDecision = _interopRequireDefault(require("./DialogDecision"));
+
 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 _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -533,10 +531,7 @@ var DialogComponent = function DialogComponent(_ref) {
 
 
   (0, _react.useEffect)(function () {
-    if (isDecision) {
-      zoomStarted.current = false;
-      resetCameraView();
-    } else if (isVoiceOver) {
+    if (isVoiceOver) {
       resetCameraView();
       setCurrentMessage({
         text: currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.text,
@@ -548,36 +543,36 @@ var DialogComponent = function DialogComponent(_ref) {
         avatar: getAvatarURL(talkingCharacter),
         show: true
       });
-    } else if (!lastSet.current) {
-      var slottedCharacters = currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.slots.filter(function (slot) {
-        return slot.uid && !slot.talking;
-      });
-      var currentParticipants = [].concat(_toConsumableArray(slottedCharacters.map(function (slot) {
-        return slot.uid;
-      }) || []), [talkingCharacter === null || talkingCharacter === void 0 ? void 0 : talkingCharacter.uid]);
-      var notInvolvedParticipants = charactersInvolved.filter(function (charUid) {
-        return !currentParticipants.includes(charUid);
-      });
-      notInvolvedParticipants.forEach(function (uid) {
-        var element = getCurrentVisible(uid);
-
-        if (element) {
-          executeDefaultAnimation(element);
-        }
-      }); // Check not talking elements emotion
+    } else if (!lastSet.current && !isDecision) {
+      // Talking element logic
+      if (talkingCharacter) {
+        var slottedCharacters = currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.slots.filter(function (slot) {
+          return slot.uid && !slot.talking;
+        });
+        var currentParticipants = [].concat(_toConsumableArray(slottedCharacters.map(function (slot) {
+          return slot.uid;
+        }) || []), [talkingCharacter === null || talkingCharacter === void 0 ? void 0 : talkingCharacter.uid]);
+        var notInvolvedParticipants = charactersInvolved.filter(function (charUid) {
+          return !currentParticipants.includes(charUid);
+        });
+        notInvolvedParticipants.forEach(function (uid) {
+          var element = getCurrentVisible(uid);
 
-      slottedCharacters.forEach(function (slot) {
-        var element = getCurrentVisible(slot.uid);
+          if (element) {
+            executeDefaultAnimation(element);
+          }
+        }); // Check not talking elements emotion
 
-        if (element) {
-          loadEmotion(slot, element, function (_, action, defaultAction) {
-            var startAction = element.userData.lastEmotion ? element.userData.lastEmotion : defaultAction;
-            (0, _helpers.executeCrossFade)(startAction, action, crossFadeDuration);
-          });
-        }
-      }); // Talking element logic
+        slottedCharacters.forEach(function (slot) {
+          var element = getCurrentVisible(slot.uid);
 
-      if (talkingCharacter) {
+          if (element) {
+            loadEmotion(slot, element, function (_, action, defaultAction) {
+              var startAction = element.userData.lastEmotion ? element.userData.lastEmotion : defaultAction;
+              (0, _helpers.executeCrossFade)(startAction, action, crossFadeDuration);
+            });
+          }
+        });
         var element = getCurrentVisible(talkingCharacter.uid);
         var object = actors.find(function (a) {
           return a.uid === talkingCharacter.uid;
@@ -727,6 +722,14 @@ var DialogComponent = function DialogComponent(_ref) {
         onStart: function onStart() {
           zoomStarted.current = true;
         },
+        onUpdate: function onUpdate() {
+          if (changedMats.current.length) {
+            changedMats.current.forEach(function (o) {
+              var object = o.object;
+              object.material.visible = true;
+            });
+          }
+        },
         onComplete: function onComplete() {
           onZoomEnd.current();
 
@@ -755,33 +758,16 @@ var DialogComponent = function DialogComponent(_ref) {
         y: animationTarget.current.position.y,
         z: animationTarget.current.position.z
       });
-    } else {
+    } else if (zoomStarted.current) {
       zoomStarted.current = false;
     }
-  }, [animationRunning]); // Animate Camera
-  // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
-
-  (0, _fiber.useFrame)(function () {
-    if (animationRunning) {
-      if (changedMats.current.length) {
-        changedMats.current.forEach(function (o) {
-          var object = o.object;
-          object.material.visible = true;
-        });
-      }
-    }
-  });
-  var container = document.querySelector('.screens--container');
-  var cleanStyle = {
-    width: '100vw',
-    height: '100vh',
-    position: 'static'
-  };
+  }, [animationRunning]);
   var disableBackButton = (0, _react.useMemo)(function () {
     var disabled = line === 0 || previousLineWasDecision();
     return disabled;
   }, [line, previousLineWasDecision]);
   keyboardControl(isDecision || disableBackButton || animationRunning ? null : manualBackLine, isDecision || animationRunning ? null : manualNextLine);
+  var container = document.querySelector('.screens--container');
 
   if (isDecision) {
     var decisionPayload = _objectSpread(_objectSpread({}, currentLineData.payload), {}, {
@@ -795,22 +781,16 @@ var DialogComponent = function DialogComponent(_ref) {
       emitEvent: emitEvent,
       pause: pause,
       soundActions: soundActions,
-      keyboardControl: keyboardControl
+      keyboardControl: keyboardControl,
+      onMount: function onMount() {
+        resetCameraView();
+      },
+      onUnMount: function onUnMount() {
+        zoomStarted.current = false;
+      }
     });
 
-    return /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.HtmlPro, {
-      zIndexRange: [6, 6],
-      style: cleanStyle,
-      portal: container ? {
-        current: container
-      } : undefined,
-      onOcclude: function onOcclude() {},
-      calculatePosition: function calculatePosition() {
-        return [0, 0];
-      }
-    }, /*#__PURE__*/_react.default.createElement(_decisionComponent.default, _extends({
-      inScene: true
-    }, decisionPayload)));
+    return /*#__PURE__*/_react.default.createElement(_DialogDecision.default, decisionPayload);
   }
 
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, currentMessage.text ? /*#__PURE__*/_react.default.createElement(_BubbleWrapper.default, {

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

@@ -0,0 +1,54 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _arcadeThreeCore = require("@gamelearn/arcade-three-core");
+
+var _decisionComponent = _interopRequireDefault(require("../../decision-component"));
+
+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 _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var cleanStyle = {
+  width: '100vw',
+  height: '100vh',
+  position: 'static'
+};
+
+var DialogDecision = function DialogDecision(props) {
+  var container = document.querySelector('.screens--container');
+  (0, _react.useEffect)(function () {
+    if (props.onMount) props.onMount();
+    return function () {
+      if (props.onUnMount) props.onUnMount();
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.HtmlPro, {
+    zIndexRange: [6, 6],
+    style: cleanStyle,
+    portal: container ? {
+      current: container
+    } : undefined,
+    onOcclude: function onOcclude() {},
+    calculatePosition: function calculatePosition() {
+      return [0, 0];
+    }
+  }, /*#__PURE__*/_react.default.createElement(_decisionComponent.default, _extends({
+    inScene: true
+  }, props)));
+};
+
+var _default = DialogDecision;
+exports.default = _default;

package/dist/components/konva-components/Area/index.js

@@ -180,7 +180,7 @@ var Area = function Area(_ref) {
     shape: "poly",
     fill: finished ? '' : fillColor,
     stroke: finished || isClicked ? strokeColor : '',
-    strokeWidth: isMobile ? 10 : 2,
+    strokeWidth: isMobile ? 10 : 4,
     opacity: finished || isClicked ? 1 : 0,
     closed: true
   }));

package/dist/components/web-builder-puzzle-component/Popups/PopupImageComponent/index.js

@@ -46,45 +46,45 @@ var PopupImageComponent = function PopupImageComponent(_ref) {
 
   var disabled = !selected;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "puzzle--webBuilder__popup--layer"
+    className: "folder-popup"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "puzzle--webBuilder__folder"
+    className: "folder-popup__content"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "puzzle--webBuilder__folder--head"
+    className: "folder-popup__header"
+  }, /*#__PURE__*/_react.default.createElement("div", null), /*#__PURE__*/_react.default.createElement("div", {
+    className: "folder-popup__title"
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "puzzle--webBuilder__folder--head__icon"
+    className: "folder-popup__icon-header icon-fb-search"
+  }), /*#__PURE__*/_react.default.createElement("span", null, translate('webbuilder.imageSelect.title'))), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: closingAction,
+    className: "folder-popup__close",
+    type: "button"
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "icon-fb-search"
-  })), /*#__PURE__*/_react.default.createElement("span", {
-    className: "text"
-  }, translate('webbuilder.imageSelect.title')), /*#__PURE__*/_react.default.createElement("span", {
-    className: "puzzle--webBuilder__folder--close",
-    onClick: closingAction
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "icon-close"
+    className: "icon-close-fit"
   }))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "puzzle--webBuilder__folder--body"
+    className: "folder-popup__body"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "folder-popup__scroll"
   }, /*#__PURE__*/_react.default.createElement("ul", {
-    className: "puzzle--webBuilder__folder__list"
+    className: "folder-popup__list"
   }, images.map(function (image) {
     return /*#__PURE__*/_react.default.createElement("li", {
       key: image.src + Date.now(),
-      className: "puzzle--webBuilder__folder__list--item"
+      className: "folder-item-file"
     }, /*#__PURE__*/_react.default.createElement("div", {
-      title: image.src,
-      className: "puzzle--webBuilder__item",
+      className: "folder-item-file__imagewrap",
       onClick: function onClick() {
         return select(image);
       }
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: "puzzle--webBuilder__icon"
     }, /*#__PURE__*/_react.default.createElement("img", {
       alt: image.src,
-      title: image.src,
       src: _resourcePath.default + image.src
-    })), translate('image.name')));
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    className: "puzzle--webBuilder__buttons"
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "folder-item-file__title",
+      title: image.src
+    }, image.src));
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "folder-popup__buttons"
   }, /*#__PURE__*/_react.default.createElement("button", {
     type: "button",
     className: "gat--btn gat--btn__secondary",

package/package.json

@@ -2,7 +2,7 @@
   "name": "@gamelearn/arcade-components",
   "author": "Gamelearn",
   "license": "unlicense",
-  "version": "2.15.2",
+  "version": "2.15.4",
   "main": "dist/index.js",
   "files": [
     "dist",
@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@gamelearn/arcade-styles": "2.10.8",
+    "@gamelearn/arcade-styles": "2.10.9",
     "@gamelearn/arcade-three-core": "1.17.2",
     "@react-three/drei": "9.4.3",
     "@react-three/fiber": "8.0.17",