@rpg-engine/long-bow 0.6.37 → 0.6.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.6.37",
+  "version": "0.6.39",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/Image/ZoomableImage.tsx

@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+
+export const ZoomableImage: React.FC<{ src: string; alt: string }> = ({
+  src,
+  alt,
+}) => {
+  const [isHovered, setIsHovered] = useState(false);
+  const [zoomPosition, setZoomPosition] = useState({ x: 50, y: 50 });
+
+  const handleMouseMove = (
+    e: React.MouseEvent<HTMLImageElement, MouseEvent>
+  ) => {
+    const {
+      left,
+      top,
+      width,
+      height,
+    } = e.currentTarget.getBoundingClientRect();
+    const x = ((e.clientX - left) / width) * 100;
+    const y = ((e.clientY - top) / height) * 100;
+    setZoomPosition({ x, y });
+  };
+
+  return (
+    <img
+      src={src}
+      alt={alt}
+      onMouseMove={handleMouseMove}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      style={{
+        width: '100%',
+        height: '100%',
+        objectFit: 'cover',
+        transform: isHovered ? 'scale(1.5)' : 'scale(1)',
+        transformOrigin: `${zoomPosition.x}% ${zoomPosition.y}%`,
+        transition: 'transform 0.3s ease',
+      }}
+    />
+  );
+};

package/src/components/Stepper.tsx

@@ -19,6 +19,9 @@ interface IStepperProps {
   };
   onError?: (message: string) => void;
   useSideArrows?: boolean; // New prop to control arrow position
+  styles?: {
+    stepperProgressColor?: string;
+  };
 }
 
 export const Stepper: React.FC<IStepperProps> = ({
@@ -26,6 +29,7 @@ export const Stepper: React.FC<IStepperProps> = ({
   finalCTAButton,
   onError,
   useSideArrows = false, // Default to false for backwards compatibility
+  styles,
 }) => {
   const [currentStep, setCurrentStep] = useState(0);
 
@@ -101,6 +105,7 @@ export const Stepper: React.FC<IStepperProps> = ({
           <ProgressIndicator
             key={i}
             isActive={i <= currentStep}
+            stepperProgressColor={styles?.stepperProgressColor}
             onClick={() => onStepChange(i)}
           />
         ))}
@@ -174,11 +179,14 @@ const StepperFooter = styled.div`
   align-items: center;
 `;
 
-const ProgressIndicator = styled.div<{ isActive: boolean }>`
+const ProgressIndicator = styled.div<{
+  isActive: boolean;
+  stepperProgressColor?: string;
+}>`
   width: 20px;
   height: 20px;
-  background-color: ${({ isActive }) =>
-    isActive ? uiColors.orange : uiColors.lightGray};
+  background-color: ${({ isActive, stepperProgressColor }) =>
+    isActive ? stepperProgressColor || uiColors.orange : uiColors.lightGray};
   margin: 0 5px;
   transition: background-color 0.3s;
   opacity: ${({ isActive }) => (isActive ? 1 : 0.25)};

package/src/components/Tutorial/TutorialStepper.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
 import styled, { CSSProperties } from 'styled-components';
 import { uiColors } from '../../constants/uiColors';
+import { ZoomableImage } from '../Image/ZoomableImage';
 import { Stepper } from '../Stepper';
 import { DynamicText } from '../typography/DynamicText';
 
@@ -27,27 +28,27 @@ export const TutorialStepper = React.memo(
             <LessonContainer key={index} className="lesson-container">
               <LessonTitle className="lesson-title">{lesson.title}</LessonTitle>
               {lesson.image && (
-                <LessonImage className="lesson-image" style={imageStyle}>
-                  {lesson.imageUrl ? (
-                    <a
-                      href={lesson.imageUrl}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      <img
+                <LessonImageWrapper className="lesson-image-wrapper">
+                  <LessonImage className="lesson-image" style={imageStyle}>
+                    {lesson.imageUrl ? (
+                      <a
+                        href={lesson.imageUrl}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        <ZoomableImage
+                          src={lesson.image}
+                          alt={lesson.title || 'Tutorial image'}
+                        />
+                      </a>
+                    ) : (
+                      <ZoomableImage
                         src={lesson.image}
                         alt={lesson.title || 'Tutorial image'}
-                        loading="lazy"
                       />
-                    </a>
-                  ) : (
-                    <img
-                      src={lesson.image}
-                      alt={lesson.title || 'Tutorial image'}
-                      loading="lazy"
-                    />
-                  )}
-                </LessonImage>
+                    )}
+                  </LessonImage>
+                </LessonImageWrapper>
               )}
               <LessonFooter className="lesson-footer">
                 {lesson.body && (
@@ -80,6 +81,35 @@ export const TutorialStepper = React.memo(
   }
 );
 
+const LessonImageWrapper = styled.div`
+  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);
+`;
+
+const LessonImage = styled.div`
+  width: 100%;
+  height: 100%;
+  position: relative;
+`;
+
+const LessonContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  min-height: 200px;
+  padding: 1rem;
+  padding-top: 0;
+
+  p {
+    font-size: 0.7rem !important;
+  }
+`;
+
 const LessonBody = styled.div``;
 
 const Container = styled.div`
@@ -95,31 +125,7 @@ const LessonFooter = styled.div`
   margin-top: 1rem;
 `;
 
-const LessonImage = styled.div`
-  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;
-  }
-`;
-
 const LessonTitle = styled.h1`
   color: ${uiColors.yellow} !important;
   font-size: 0.8rem !important;
 `;
-
-const LessonContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  min-height: 200px; /* Match with StepperBody for consistent height */
-`;