@rpg-engine/long-bow 0.5.71 → 0.5.73

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.5.71",
+  "version": "0.5.73",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -82,6 +82,7 @@
     "uuid": "^8.3.2"
   },
   "dependencies": {
+    "@capacitor/core": "^4.6.3",
     "@rollup/plugin-image": "^2.1.1",
     "@rpg-engine/shared": "^0.9.19",
     "dayjs": "^1.11.2",

package/src/components/ImageCarousel/SimpleImageCarousel.tsx

@@ -1,58 +1,74 @@
+import { Capacitor } from '@capacitor/core';
 import React, { useEffect, useRef, useState } from 'react';
 import styled, { keyframes } from 'styled-components';
 import SelectArrow from '../Arrow/SelectArrow';
 
 export interface ISimpleImageCarousel {
-  images: string[];
+  basePath: string;
+  imagesSrc: string[];
   styles?: React.CSSProperties;
   autoCycle?: boolean;
   autoCycleDelay?: number;
   stopAutoCyclingOnInteraction?: boolean;
 }
 
-export const SimpleImageCarousel: React.FC<ISimpleImageCarousel> = ({
-  images,
+const getTransformedBasePath = (basePath: string): string => {
+  if (Capacitor.isNativePlatform()) {
+    return Capacitor.convertFileSrc(basePath);
+  }
+  return basePath;
+};
+
+export const SimpleImageCarousel = ({
+  basePath,
+  imagesSrc,
   styles,
   autoCycle = false,
   autoCycleDelay = 3000,
   stopAutoCyclingOnInteraction = false,
-}) => {
+}: ISimpleImageCarousel) => {
   const [currentImage, setCurrentImage] = useState(0);
-  const autoCycleId = useRef<NodeJS.Timeout | null>(null);
+  const isInteracted = useRef<boolean>(false);
 
-  const handleLeftClick = () => {
-    setCurrentImage(
-      prevImage => (prevImage - 1 + images?.length) % images?.length
-    );
-    if (stopAutoCyclingOnInteraction && autoCycleId.current) {
-      clearInterval(autoCycleId.current);
-      autoCycleId.current = null;
-    }
-  };
+  useEffect(() => {
+    let timer: NodeJS.Timeout | null = null;
 
-  const handleRightClick = () => {
-    setCurrentImage(prevImage => (prevImage + 1) % images?.length);
-    if (stopAutoCyclingOnInteraction && autoCycleId.current) {
-      clearInterval(autoCycleId.current);
-      autoCycleId.current = null;
-    }
-  };
+    if (autoCycle && !isInteracted.current) {
+      timer = setInterval(() => {
+        if (stopAutoCyclingOnInteraction && isInteracted.current) {
+          clearInterval(timer!);
+          return;
+        }
 
-  useEffect(() => {
-    if (autoCycle) {
-      autoCycleId.current = setInterval(() => {
-        setCurrentImage(prevImage => (prevImage + 1) % images?.length);
+        handleRightClick(true);
       }, autoCycleDelay);
     }
 
     return () => {
-      if (autoCycleId.current) {
-        clearInterval(autoCycleId.current);
+      if (timer) {
+        clearInterval(timer);
       }
     };
-  }, [autoCycle, autoCycleDelay, images?.length]);
+  }, [autoCycle, autoCycleDelay]);
+
+  const handleLeftClick = () => {
+    isInteracted.current = true;
+    setCurrentImage(oldImage =>
+      oldImage === 0 ? imagesSrc.length - 1 : oldImage - 1
+    );
+  };
+
+  const handleRightClick = (isAutomatedClick: boolean = false) => {
+    if (!isAutomatedClick) {
+      isInteracted.current = true;
+    }
+
+    setCurrentImage(oldImage =>
+      oldImage === imagesSrc.length - 1 ? 0 : oldImage + 1
+    );
+  };
 
-  const hasMoreThanOneImage = images?.length > 1;
+  const hasMoreThanOneImage = imagesSrc.length > 1;
 
   return (
     <ImageContainer style={styles}>
@@ -65,8 +81,8 @@ export const SimpleImageCarousel: React.FC<ISimpleImageCarousel> = ({
       <Carousel>
         <FadeInCarouselImg
           key={currentImage}
-          src={images?.[currentImage]}
-          alt={`Image ${currentImage}`}
+          src={`${getTransformedBasePath(basePath)}/${imagesSrc[currentImage]}`}
+          alt={imagesSrc[currentImage]}
         />
       </Carousel>
     </ImageContainer>
@@ -82,7 +98,6 @@ const ImageContainer = styled.div`
   margin-right: 0.5rem;
   max-width: 400px;
   position: relative;
-  width: 400px;
 `;
 
 const CustomLeftArrow = styled(SelectArrow)`

package/src/stories/SimpleImageCarousel.stories.tsx

@@ -7,8 +7,6 @@ import {
 } from '../components/ImageCarousel/SimpleImageCarousel';
 
 import styled from 'styled-components';
-import image1 from '../assets/images/backpack.png';
-import image2 from '../assets/images/depot.png';
 import { RPGUIRoot } from '../components/RPGUI/RPGUIRoot';
 
 const meta: Meta = {
@@ -39,7 +37,8 @@ const CenteredContainer = styled.div`
 export const SimpleImageCarouselStory = Template.bind({});
 
 SimpleImageCarouselStory.args = {
-  images: [image1, image2],
+  imagesSrc: ['./images/backpack.png', './images/depot.png'],
+  basePath: 'http://localhost:6006',
   autoCycle: true,
   stopAutoCyclingOnInteraction: true,
 };