@rpg-engine/long-bow 0.5.49 → 0.5.50

package/dist/components/ImageCarousel/SimpleImageCarousel.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface ISimpleImageCarousel {
+    basePath: string;
+    imagesSrc: string[];
+    styles?: React.CSSProperties;
+    autoCycle?: boolean;
+    autoCycleDelay?: number;
+    stopAutoCyclingOnInteraction?: boolean;
+}
+export declare const SimpleImageCarousel: ({ basePath, imagesSrc, styles, autoCycle, autoCycleDelay, stopAutoCyclingOnInteraction, }: ISimpleImageCarousel) => JSX.Element;

package/dist/stories/SimpleImageCarousel.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { ISimpleImageCarousel } from '../components/ImageCarousel/SimpleImageCarousel';
+declare const meta: Meta;
+export default meta;
+export declare const SimpleImageCarouselStory: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, ISimpleImageCarousel>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.5.49",
+  "version": "0.5.50",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -83,7 +83,7 @@
   },
   "dependencies": {
     "@rollup/plugin-image": "^2.1.1",
-    "@rpg-engine/shared": "^0.9.19",
+    "@rpg-engine/shared": "^0.9.14",
     "dayjs": "^1.11.2",
     "font-awesome": "^4.7.0",
     "fs-extra": "^10.1.0",

package/src/components/ImageCarousel/SimpleImageCarousel.tsx

@@ -0,0 +1,132 @@
+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[];
+  styles?: React.CSSProperties;
+  autoCycle?: boolean;
+  autoCycleDelay?: number;
+  stopAutoCyclingOnInteraction?: boolean;
+}
+
+export const SimpleImageCarousel = ({
+  basePath,
+  imagesSrc,
+  styles,
+  autoCycle = false,
+  autoCycleDelay = 3000,
+  stopAutoCyclingOnInteraction = false,
+}: ISimpleImageCarousel) => {
+  const [currentImage, setCurrentImage] = useState(0);
+  const isInteracted = useRef<boolean>(false);
+
+  useEffect(() => {
+    let timer: NodeJS.Timeout | null = null;
+
+    if (autoCycle && !isInteracted.current) {
+      timer = setInterval(() => {
+        if (stopAutoCyclingOnInteraction && isInteracted.current) {
+          clearInterval(timer!);
+          return;
+        }
+
+        handleRightClick();
+      }, autoCycleDelay);
+    }
+
+    return () => {
+      if (timer) {
+        clearInterval(timer);
+      }
+    };
+  }, [autoCycle, autoCycleDelay]);
+
+  const handleLeftClick = () => {
+    isInteracted.current = true;
+    setCurrentImage(oldImage =>
+      oldImage === 0 ? imagesSrc.length - 1 : oldImage - 1
+    );
+  };
+
+  const handleRightClick = () => {
+    isInteracted.current = true;
+    setCurrentImage(oldImage =>
+      oldImage === imagesSrc.length - 1 ? 0 : oldImage + 1
+    );
+  };
+
+  const hasMoreThanOneImage = imagesSrc.length > 1;
+
+  return (
+    <ImageContainer style={styles}>
+      {hasMoreThanOneImage && (
+        <CustomLeftArrow direction="left" onPointerDown={handleLeftClick} />
+      )}
+      {hasMoreThanOneImage && (
+        <CustomRightArrow direction="right" onPointerDown={handleRightClick} />
+      )}
+      <Carousel>
+        <FadeInCarouselImg
+          key={currentImage}
+          src={`${basePath}/${imagesSrc[currentImage]}`}
+          alt={imagesSrc[currentImage]}
+        />
+      </Carousel>
+    </ImageContainer>
+  );
+};
+
+const ImageContainer = styled.div`
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  margin-right: 0.5rem;
+  max-width: 400px;
+  position: relative;
+`;
+
+const CustomLeftArrow = styled(SelectArrow)`
+  position: absolute;
+  left: -0.5rem;
+  top: 50%;
+  transform: translateY(-50%);
+`;
+
+const CustomRightArrow = styled(SelectArrow)`
+  position: absolute;
+  right: -2.5rem;
+  top: 50%;
+  transform: translateY(-50%);
+`;
+
+const Carousel = styled.div`
+  display: flex;
+`;
+
+const CarouselImg = styled.img`
+  flex: 0 0 auto;
+  width: 100%;
+  height: auto;
+  margin: 0 1rem;
+  border-radius: 5px;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
+  scroll-snap-align: start;
+  margin-right: 3rem;
+`;
+
+const fadeIn = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+
+const FadeInCarouselImg = styled(CarouselImg)`
+  animation: ${fadeIn} 0.5s;
+`;

package/src/stories/ImageCarousel.stories.tsx

@@ -9,7 +9,7 @@ import image from '../components/ImageCarousel/images/001.png';
 import { RPGUIRoot } from '../components/RPGUI/RPGUIRoot';
 
 const meta: Meta = {
-  title: 'Tutorial System/Image Carousel',
+  title: 'Images/Image Carousel',
   component: ImageCarousel,
 };
 

package/src/stories/SimpleImageCarousel.stories.tsx

@@ -0,0 +1,44 @@
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+
+import {
+  ISimpleImageCarousel,
+  SimpleImageCarousel,
+} from '../components/ImageCarousel/SimpleImageCarousel';
+
+import styled from 'styled-components';
+import { RPGUIRoot } from '../components/RPGUI/RPGUIRoot';
+
+const meta: Meta = {
+  title: 'Images/Simple Image Carousel',
+  component: SimpleImageCarousel,
+};
+
+export default meta;
+
+const Template: Story<ISimpleImageCarousel> = args => {
+  return (
+    <RPGUIRoot>
+      <CenteredContainer>
+        <SimpleImageCarousel {...args} />
+      </CenteredContainer>
+    </RPGUIRoot>
+  );
+};
+
+const CenteredContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+`;
+
+export const SimpleImageCarouselStory = Template.bind({});
+
+SimpleImageCarouselStory.args = {
+  imagesSrc: ['./images/backpack.png', './images/depot.png'],
+  basePath: 'http://localhost:6006',
+  autoCycle: true,
+  stopAutoCyclingOnInteraction: true,
+};