@rpg-engine/long-bow 0.1.794 → 0.2.2

package/src/components/shared/SpriteFromAtlas.tsx

@@ -1,99 +1,99 @@
-import { GRID_HEIGHT, GRID_WIDTH } from '@rpg-engine/shared';
-import React from 'react';
-import styled from 'styled-components';
-
-interface IProps {
-  atlasJSON: any;
-  atlasIMG: any;
-  spriteKey: string;
-  width?: number;
-  height?: number;
-  grayScale?: boolean;
-  opacity?: number;
-  onClick?: () => void;
-  containerStyle?: any;
-  imgStyle?: any;
-  imgScale?: number;
-}
-
-export const SpriteFromAtlas: React.FC<IProps> = ({
-  atlasJSON,
-  atlasIMG,
-  spriteKey,
-  width = GRID_WIDTH,
-  height = GRID_HEIGHT,
-  imgScale = 2,
-  imgStyle,
-  onClick,
-  containerStyle,
-  grayScale = false,
-  opacity = 1,
-}) => {
-  //! If an item is not showing, remember that you MUST run yarn atlas:copy everytime you add a new item to the atlas (it will sync our public folder atlas with src/atlas).
-  //!Due to React's limitations, we cannot import it from the public folder directly!
-
-  const spriteData = atlasJSON.frames[spriteKey];
-
-  return (
-    <Container
-      width={width}
-      height={height}
-      hasHover={grayScale}
-      onClick={onClick}
-      style={containerStyle}
-    >
-      <ImgSprite
-        className="sprite-from-atlas-img"
-        atlasIMG={atlasIMG}
-        frame={spriteData.frame}
-        scale={imgScale}
-        grayScale={grayScale}
-        opacity={opacity}
-        style={imgStyle}
-      />
-    </Container>
-  );
-};
-
-interface IImgSpriteProps {
-  atlasIMG: any;
-  frame: {
-    x: number;
-    y: number;
-    w: number;
-    h: number;
-  };
-  scale: number;
-  grayScale: boolean;
-  opacity: number;
-}
-
-interface IContainerProps {
-  width: number;
-  height: number;
-  hasHover: boolean;
-}
-
-const Container = styled.div`
-  width: ${(props: IContainerProps) => props.width}px;
-  height: ${(props: IContainerProps) => props.height}px;
-  ${(props: IContainerProps) =>
-    !props.hasHover
-      ? `&:hover {
-    filter: sepia(100%) saturate(300%) brightness(70%) hue-rotate(180deg);
-  }`
-      : ``}
-`;
-
-const ImgSprite = styled.div<IImgSpriteProps>`
-  width: ${props => props.frame.w}px;
-  height: ${props => props.frame.h}px;
-  background-image: url(${props => props.atlasIMG});
-  background-position: -${props => props.frame.x}px -${props => props.frame.y}px;
-  transform: scale(${props => props.scale});
-  position: relative;
-  top: 8px;
-  left: 8px;
-  filter: ${props => (props.grayScale ? 'grayscale(100%)' : 'none')};
-  opacity: ${props => props.opacity};
-`;
+import { GRID_HEIGHT, GRID_WIDTH } from '@rpg-engine/shared';
+import React from 'react';
+import styled from 'styled-components';
+
+interface IProps {
+  atlasJSON: any;
+  atlasIMG: any;
+  spriteKey: string;
+  width?: number;
+  height?: number;
+  grayScale?: boolean;
+  opacity?: number;
+  onClick?: () => void;
+  containerStyle?: any;
+  imgStyle?: any;
+  imgScale?: number;
+}
+
+export const SpriteFromAtlas: React.FC<IProps> = ({
+  atlasJSON,
+  atlasIMG,
+  spriteKey,
+  width = GRID_WIDTH,
+  height = GRID_HEIGHT,
+  imgScale = 2,
+  imgStyle,
+  onClick,
+  containerStyle,
+  grayScale = false,
+  opacity = 1,
+}) => {
+  //! If an item is not showing, remember that you MUST run yarn atlas:copy everytime you add a new item to the atlas (it will sync our public folder atlas with src/atlas).
+  //!Due to React's limitations, we cannot import it from the public folder directly!
+
+  const spriteData = atlasJSON.frames[spriteKey];
+
+  return (
+    <Container
+      width={width}
+      height={height}
+      hasHover={grayScale}
+      onClick={onClick}
+      style={containerStyle}
+    >
+      <ImgSprite
+        className="sprite-from-atlas-img"
+        atlasIMG={atlasIMG}
+        frame={spriteData.frame}
+        scale={imgScale}
+        grayScale={grayScale}
+        opacity={opacity}
+        style={imgStyle}
+      />
+    </Container>
+  );
+};
+
+interface IImgSpriteProps {
+  atlasIMG: any;
+  frame: {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+  };
+  scale: number;
+  grayScale: boolean;
+  opacity: number;
+}
+
+interface IContainerProps {
+  width: number;
+  height: number;
+  hasHover: boolean;
+}
+
+const Container = styled.div`
+  width: ${(props: IContainerProps) => props.width}px;
+  height: ${(props: IContainerProps) => props.height}px;
+  ${(props: IContainerProps) =>
+    !props.hasHover
+      ? `&:hover {
+    filter: sepia(100%) saturate(300%) brightness(70%) hue-rotate(180deg);
+  }`
+      : ``}
+`;
+
+const ImgSprite = styled.div<IImgSpriteProps>`
+  width: ${props => props.frame.w}px;
+  height: ${props => props.frame.h}px;
+  background-image: url(${props => props.atlasIMG});
+  background-position: -${props => props.frame.x}px -${props => props.frame.y}px;
+  transform: scale(${props => props.scale});
+  position: relative;
+  top: 8px;
+  left: 8px;
+  filter: ${props => (props.grayScale ? 'grayscale(100%)' : 'none')};
+  opacity: ${props => props.opacity};
+`;

package/src/components/typography/DynamicText.tsx

@@ -1,49 +1,49 @@
-import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
-
-interface IProps {
-  text: string;
-  onFinish?: () => void;
-  onStart?: () => void;
-}
-
-export const DynamicText: React.FC<IProps> = ({ text, onFinish, onStart }) => {
-  const [textState, setTextState] = useState<string>('');
-
-  useEffect(() => {
-    let i = 0;
-    const interval = setInterval(() => {
-      // on every interval, show one more character
-
-      if (i === 0) {
-        if (onStart) {
-          onStart();
-        }
-      }
-
-      if (i < text.length) {
-        setTextState(text.substring(0, i + 1));
-        i++;
-      } else {
-        clearInterval(interval);
-        if (onFinish) {
-          onFinish();
-        }
-      }
-    }, 50);
-
-    return () => {
-      clearInterval(interval);
-    };
-  }, [text]);
-
-  return <TextContainer>{textState}</TextContainer>;
-};
-
-const TextContainer = styled.p`
-  font-size: 0.7rem !important;
-  color: white;
-  text-shadow: 1px 1px 0px #000000;
-  letter-spacing: 1.2px;
-  word-break: normal;
-`;
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+
+interface IProps {
+  text: string;
+  onFinish?: () => void;
+  onStart?: () => void;
+}
+
+export const DynamicText: React.FC<IProps> = ({ text, onFinish, onStart }) => {
+  const [textState, setTextState] = useState<string>('');
+
+  useEffect(() => {
+    let i = 0;
+    const interval = setInterval(() => {
+      // on every interval, show one more character
+
+      if (i === 0) {
+        if (onStart) {
+          onStart();
+        }
+      }
+
+      if (i < text.length) {
+        setTextState(text.substring(0, i + 1));
+        i++;
+      } else {
+        clearInterval(interval);
+        if (onFinish) {
+          onFinish();
+        }
+      }
+    }, 50);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [text]);
+
+  return <TextContainer>{textState}</TextContainer>;
+};
+
+const TextContainer = styled.p`
+  font-size: 0.7rem !important;
+  color: white;
+  text-shadow: 1px 1px 0px #000000;
+  letter-spacing: 1.2px;
+  word-break: normal;
+`;

package/src/constants/uiColors.ts

@@ -1,10 +1,10 @@
-export const colors = {
-  darkGrey: '#3e3e3e',
-  darkYellow: '#FFC857',
-  orange: '#E9724C',
-  cardinal: '#C5283D',
-  raisinBlack: '#191923',
-  navyBlue: '#0E79B2',
-  purple: '#8C3D8C',
-  blue: '#3772FF',
-};
+export const colors = {
+  darkGrey: '#3e3e3e',
+  darkYellow: '#FFC857',
+  orange: '#E9724C',
+  cardinal: '#C5283D',
+  raisinBlack: '#191923',
+  navyBlue: '#0E79B2',
+  purple: '#8C3D8C',
+  blue: '#3772FF',
+};

package/src/hooks/useEventListener.ts

@@ -1,21 +1,21 @@
-import React from 'react';
-
-//@ts-ignore
-export const useEventListener = (type, handler, el = window) => {
-  const savedHandler = React.useRef();
-
-  React.useEffect(() => {
-    savedHandler.current = handler;
-  }, [handler]);
-
-  React.useEffect(() => {
-    //@ts-ignore
-    const listener = e => savedHandler.current(e);
-
-    el.addEventListener(type, listener);
-
-    return () => {
-      el.removeEventListener(type, listener);
-    };
-  }, [type, el]);
-};
+import React from 'react';
+
+//@ts-ignore
+export const useEventListener = (type, handler, el = window) => {
+  const savedHandler = React.useRef();
+
+  React.useEffect(() => {
+    savedHandler.current = handler;
+  }, [handler]);
+
+  React.useEffect(() => {
+    //@ts-ignore
+    const listener = e => savedHandler.current(e);
+
+    el.addEventListener(type, listener);
+
+    return () => {
+      el.removeEventListener(type, listener);
+    };
+  }, [type, el]);
+};

package/src/hooks/useOutsideAlerter.ts

@@ -1,25 +1,25 @@
-import { useEffect } from 'react';
-
-export function useOutsideClick(ref: any, id: string) {
-  useEffect(() => {
-    /**
-     * Alert if clicked on outside of element
-     */
-    function handleClickOutside(event: any) {
-      if (ref.current && !ref.current.contains(event.target)) {
-        const event = new CustomEvent('clickOutside', {
-          detail: {
-            id,
-          },
-        });
-        document.dispatchEvent(event);
-      }
-    }
-    // Bind the event listener
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      // Unbind the event listener on clean up
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [ref]);
-}
+import { useEffect } from 'react';
+
+export function useOutsideClick(ref: any, id: string) {
+  useEffect(() => {
+    /**
+     * Alert if clicked on outside of element
+     */
+    function handleClickOutside(event: any) {
+      if (ref.current && !ref.current.contains(event.target)) {
+        const event = new CustomEvent('clickOutside', {
+          detail: {
+            id,
+          },
+        });
+        document.dispatchEvent(event);
+      }
+    }
+    // Bind the event listener
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      // Unbind the event listener on clean up
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [ref]);
+}

package/src/index.tsx

@@ -1,25 +1,25 @@
-export * from './components/Button';
-export * from './components/Chat/Chat';
-export * from './components/CheckButton';
-export * from './components/DraggableContainer';
-export * from './components/Dropdown';
-export * from './components/Equipment/EquipmentSet';
-export * from './components/Input';
-export * from './components/Item/Inventory/ItemContainer';
-export * from './components/Item/Inventory/ItemSlot';
-export * from './components/ListMenu';
-export * from './components/NPCDialog/NPCDialog';
-export * from './components/NPCDialog/QuestionDialog/QuestionDialog';
-export * from './components/ProgressBar';
-export * from './components/RadioButton';
-export * from './components/RangeSlider';
-export * from './components/RPGUIContainer';
-export * from './components/RPGUIRoot';
-export * from './components/shared/SpriteFromAtlas';
-export * from './components/shared/SpriteIcon';
-export * from './components/SkillProgressBar';
-export * from './components/SkillsContainer';
-export * from './components/TextArea';
-export * from './components/Truncate';
-export * from './components/typography/DynamicText';
-export { useEventListener } from './hooks/useEventListener';
+export * from './components/Button';
+export * from './components/Chat/Chat';
+export * from './components/CheckButton';
+export * from './components/DraggableContainer';
+export * from './components/Dropdown';
+export * from './components/Equipment/EquipmentSet';
+export * from './components/Input';
+export * from './components/Item/Inventory/ItemContainer';
+export * from './components/Item/Inventory/ItemSlot';
+export * from './components/ListMenu';
+export * from './components/NPCDialog/NPCDialog';
+export * from './components/NPCDialog/QuestionDialog/QuestionDialog';
+export * from './components/ProgressBar';
+export * from './components/PropertySelect/PropertySelect';
+export * from './components/RadioButton';
+export * from './components/RangeSlider';
+export * from './components/RPGUIContainer';
+export * from './components/RPGUIRoot';
+export * from './components/shared/SpriteFromAtlas';
+export * from './components/SkillProgressBar';
+export * from './components/SkillsContainer';
+export * from './components/TextArea';
+export * from './components/Truncate';
+export * from './components/typography/DynamicText';
+export { useEventListener } from './hooks/useEventListener';

package/src/libs/StringHelpers.ts

@@ -1,3 +1,3 @@
-export const chunkString = (str: string, length: number) => {
-  return str.match(new RegExp('.{1,' + length + '}', 'g'));
-};
+export const chunkString = (str: string, length: number) => {
+  return str.match(new RegExp('.{1,' + length + '}', 'g'));
+};