@gamelearn/arcade-components 2.38.3 → 2.39.0

package/dist/components/cartel-component/components/CartelComponent.js

@@ -27,7 +27,9 @@ var CartelComponent = function CartelComponent(_ref) {
     soundActions = _ref.soundActions,
     audioVolume = _ref.audioVolume,
     pause = _ref.pause,
-    keyboardControl = _ref.keyboardControl;
+    keyboardControl = _ref.keyboardControl,
+    _ref$backgroundImageC = _ref.backgroundImageCover,
+    backgroundImageCover = _ref$backgroundImageC === void 0 ? false : _ref$backgroundImageC;
   var translate = function translate(id) {
     return emitEvent({
       type: 'translate',
@@ -65,7 +67,7 @@ var CartelComponent = function CartelComponent(_ref) {
     return valueMobile;
   };
   var calculateTextPosition = (0, _react.useCallback)(function () {
-    if (text && picture.current) {
+    if (backgroundImageCover !== true && text && picture.current) {
       var imageRatio = picture.current.naturalWidth / picture.current.naturalHeight;
       var dinamicImageWidth = picture.current.height * imageRatio;
       var dinamicImageHeight = picture.current.height;
@@ -81,7 +83,7 @@ var CartelComponent = function CartelComponent(_ref) {
         textBox.current.style.bottom = "".concat(calculateBottom, "px");
       }
     }
-  }, [text]);
+  }, [backgroundImageCover, text]);
   (0, _react.useEffect)(function () {
     if (picture.current) {
       var resizeObserver = new ResizeObserver(function () {
@@ -91,7 +93,7 @@ var CartelComponent = function CartelComponent(_ref) {
     }
   });
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "cartel"
+    className: "cartel ".concat(backgroundImageCover ? 'cartel--cover' : '')
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "cartel__imagewrap"
   }, /*#__PURE__*/_react.default.createElement("img", {

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

@@ -30,7 +30,9 @@ var ComicComponent = function ComicComponent(_ref) {
     autoEnd = _ref.autoEnd,
     pause = _ref.pause,
     progress = _ref.progress,
-    keyboardControl = _ref.keyboardControl;
+    keyboardControl = _ref.keyboardControl,
+    _ref$backgroundImageC = _ref.backgroundImageCover,
+    backgroundImageCover = _ref$backgroundImageC === void 0 ? false : _ref$backgroundImageC;
   var defaultSlide = (progress === null || progress === void 0 ? void 0 : progress.slide) || 0;
   var translate = function translate(id) {
     return emitEvent({
@@ -157,7 +159,7 @@ var ComicComponent = function ComicComponent(_ref) {
     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, {
@@ -168,7 +170,8 @@ var ComicComponent = function ComicComponent(_ref) {
     emitEvent: emitEvent,
     role: "complementary",
     "aria-hidden": "true",
-    translate: translate
+    translate: translate,
+    backgroundImageCover: backgroundImageCover
   }), slideCount > 0 && /*#__PURE__*/_react.default.createElement("button", {
     type: "button",
     className: "comic-control comic-control--left gat--btn__round",

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

@@ -10,10 +10,11 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var Slide = function Slide(_ref) {
   var slide = _ref.slide,
     transition = _ref.transition,
-    translate = _ref.translate;
+    translate = _ref.translate,
+    backgroundImageCover = _ref.backgroundImageCover;
   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, {
@@ -21,7 +22,8 @@ var Slide = function Slide(_ref) {
       vignette: vignette,
       alias: slide.alias,
       "aria-hidden": "true",
-      translate: translate
+      translate: translate,
+      backgroundImageCover: backgroundImageCover
     });
   }));
 };

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

@@ -18,7 +18,8 @@ var Vignette = function Vignette(_ref) {
   var _vignette$textData;
   var vignette = _ref.vignette,
     alias = _ref.alias,
-    translate = _ref.translate;
+    translate = _ref.translate,
+    backgroundImageCover = _ref.backgroundImageCover;
   var resource = vignette.img || {
     url: 'https://min.gamelearn.io/css-resources/gamelearn/resources/conversation.jpg'
   };
@@ -33,7 +34,7 @@ var Vignette = function Vignette(_ref) {
     setIsOpened(!isOpened);
   };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "comic--image"
+    className: "comic-image ".concat(backgroundImageCover ? 'comic-image--cover' : '')
   }, resolvedIdImg && /*#__PURE__*/_react.default.createElement("img", {
     src: resolvedIdImg,
     alt: "comic pic"

package/package.json

@@ -2,7 +2,7 @@
   "name": "@gamelearn/arcade-components",
   "author": "Gamelearn",
   "license": "unlicense",
-  "version": "2.38.3",
+  "version": "2.39.0",
   "main": "dist/index.js",
   "files": [
     "dist",
@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@gamelearn/arcade-styles": "2.21.3",
+    "@gamelearn/arcade-styles": "2.22.0",
     "@gamelearn/arcade-three-core": "1.24.3",
     "@react-three/a11y": "^3.0.0",
     "@react-three/drei": "9.4.3",