@rpg-engine/long-bow 0.5.74 → 0.5.75

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.5.74",
+  "version": "0.5.75",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -82,7 +82,6 @@
     "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,74 +1,58 @@
-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 {
-  basePath: string;
-  imagesSrc: string[];
+  images: string[];
   styles?: React.CSSProperties;
   autoCycle?: boolean;
   autoCycleDelay?: number;
   stopAutoCyclingOnInteraction?: boolean;
 }
 
-const getTransformedBasePath = (basePath: string): string => {
-  if (Capacitor.isNativePlatform()) {
-    return Capacitor.convertFileSrc(basePath);
-  }
-  return basePath;
-};
-
-export const SimpleImageCarousel = ({
-  basePath,
-  imagesSrc,
+export const SimpleImageCarousel: React.FC<ISimpleImageCarousel> = ({
+  images,
   styles,
   autoCycle = false,
   autoCycleDelay = 3000,
   stopAutoCyclingOnInteraction = false,
-}: ISimpleImageCarousel) => {
+}) => {
   const [currentImage, setCurrentImage] = useState(0);
-  const isInteracted = useRef<boolean>(false);
+  const autoCycleId = useRef<NodeJS.Timeout | null>(null);
 
-  useEffect(() => {
-    let timer: NodeJS.Timeout | null = null;
+  const handleLeftClick = () => {
+    setCurrentImage(
+      prevImage => (prevImage - 1 + images?.length) % 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;
-        }
+  const handleRightClick = () => {
+    setCurrentImage(prevImage => (prevImage + 1) % images?.length);
+    if (stopAutoCyclingOnInteraction && autoCycleId.current) {
+      clearInterval(autoCycleId.current);
+      autoCycleId.current = null;
+    }
+  };
 
-        handleRightClick(true);
+  useEffect(() => {
+    if (autoCycle) {
+      autoCycleId.current = setInterval(() => {
+        setCurrentImage(prevImage => (prevImage + 1) % images?.length);
       }, autoCycleDelay);
     }
 
     return () => {
-      if (timer) {
-        clearInterval(timer);
+      if (autoCycleId.current) {
+        clearInterval(autoCycleId.current);
       }
     };
-  }, [autoCycle, autoCycleDelay]);
+  }, [autoCycle, autoCycleDelay, images?.length]);
 
-  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 = imagesSrc.length > 1;
+  const hasMoreThanOneImage = images?.length > 1;
 
   return (
     <ImageContainer style={styles}>
@@ -81,8 +65,8 @@ export const SimpleImageCarousel = ({
       <Carousel>
         <FadeInCarouselImg
           key={currentImage}
-          src={`${getTransformedBasePath(basePath)}/${imagesSrc[currentImage]}`}
-          alt={imagesSrc[currentImage]}
+          src={images?.[currentImage]}
+          alt={`Image ${currentImage}`}
         />
       </Carousel>
     </ImageContainer>
@@ -97,8 +81,8 @@ const ImageContainer = styled.div`
   height: 100%;
   margin-right: 0.5rem;
   max-width: 400px;
-  width: 400px;
   position: relative;
+  width: 400px;
 `;
 
 const CustomLeftArrow = styled(SelectArrow)`

package/src/stories/SimpleImageCarousel.stories.tsx

@@ -7,6 +7,8 @@ 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 = {
@@ -37,8 +39,7 @@ const CenteredContainer = styled.div`
 export const SimpleImageCarouselStory = Template.bind({});
 
 SimpleImageCarouselStory.args = {
-  imagesSrc: ['./images/backpack.png', './images/depot.png'],
-  basePath: 'http://localhost:6006',
+  images: [image1, image2],
   autoCycle: true,
   stopAutoCyclingOnInteraction: true,
 };