@rpg-engine/long-bow 0.6.40 → 0.6.42

package/dist/long-bow.esm.js

@@ -33226,8 +33226,8 @@ var ZoomableImage = function ZoomableImage(_ref) {
   var src = _ref.src,
     alt = _ref.alt;
   var _useState = useState(false),
-    isHovered = _useState[0],
-    setIsHovered = _useState[1];
+    isZoomed = _useState[0],
+    setIsZoomed = _useState[1];
   var _useState2 = useState({
       x: 50,
       y: 50
@@ -33247,23 +33247,37 @@ var ZoomableImage = function ZoomableImage(_ref) {
       y: y
     });
   };
+  var handleTouchMove = function handleTouchMove(e) {
+    var _e$currentTarget$getB2 = e.currentTarget.getBoundingClientRect(),
+      left = _e$currentTarget$getB2.left,
+      top = _e$currentTarget$getB2.top,
+      width = _e$currentTarget$getB2.width,
+      height = _e$currentTarget$getB2.height;
+    var touch = e.touches[0];
+    var x = (touch.clientX - left) / width * 100;
+    var y = (touch.clientY - top) / height * 100;
+    setZoomPosition({
+      x: x,
+      y: y
+    });
+  };
+  var handleZoomToggle = function handleZoomToggle() {
+    setIsZoomed(!isZoomed);
+  };
   return React.createElement("img", {
     src: src,
     alt: alt,
     onMouseMove: handleMouseMove,
-    onMouseEnter: function onMouseEnter() {
-      return setIsHovered(true);
-    },
-    onMouseLeave: function onMouseLeave() {
-      return setIsHovered(false);
-    },
+    onTouchMove: handleTouchMove,
+    onClick: handleZoomToggle,
     style: {
       width: '100%',
       height: '100%',
       objectFit: 'cover',
-      transform: isHovered ? 'scale(1.5)' : 'scale(1)',
+      transform: isZoomed ? 'scale(1.5)' : 'scale(1)',
       transformOrigin: zoomPosition.x + "% " + zoomPosition.y + "%",
-      transition: 'transform 0.3s ease'
+      transition: 'transform 0.3s ease',
+      cursor: 'pointer'
     }
   });
 };
@@ -33321,7 +33335,7 @@ var TutorialStepper = /*#__PURE__*/React.memo(function (_ref) {
 var LessonImageWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "TutorialStepper__LessonImageWrapper",
   componentId: "sc-7tgzv2-0"
-})(["width:100%;max-width:500px;margin:1rem auto;aspect-ratio:16 / 9;overflow:hidden;border-radius:10px;box-shadow:0 4px 6px rgba(0,0,0,0.1);"]);
+})(["width:100%;max-width:500px;margin:1rem auto;aspect-ratio:auto;border-radius:10px;box-shadow:0 4px 6px rgba(0,0,0,0.1);"]);
 var LessonBody = /*#__PURE__*/styled.div.withConfig({
   displayName: "TutorialStepper__LessonBody",
   componentId: "sc-7tgzv2-1"
@@ -33337,7 +33351,7 @@ var LessonFooter = /*#__PURE__*/styled.div.withConfig({
 var LessonImage = /*#__PURE__*/styled.div.withConfig({
   displayName: "TutorialStepper__LessonImage",
   componentId: "sc-7tgzv2-4"
-})(["display:flex;justify-content:center;align-items:center;width:100%;height:auto;max-width:500px;margin:auto;img{max-width:100%;max-height:100%;object-fit:contain;border-radius:10px;}"]);
+})(["display:flex;justify-content:center;align-items:center;width:100%;max-width:500px;margin:auto;img{width:100%;height:auto;object-fit:contain;border-radius:10px;}"]);
 var LessonTitle = /*#__PURE__*/styled.h1.withConfig({
   displayName: "TutorialStepper__LessonTitle",
   componentId: "sc-7tgzv2-5"