@rpg-engine/long-bow 0.3.69 → 0.3.71

package/src/components/itemSelector/ItemSelector.tsx

@@ -1,136 +1,136 @@
-import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
-import { Button, ButtonTypes } from '../Button';
-import { DraggableContainer } from '../DraggableContainer';
-import { RPGUIContainerTypes } from '../RPGUIContainer';
-import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
-
-export interface IOptionsItemSelectorProps {
-  name: string;
-  description?: string;
-  imageKey: string;
-}
-
-export interface IItemSelectorProps {
-  atlasJSON: any;
-  atlasIMG: any;
-  options: IOptionsItemSelectorProps[];
-  onClose: () => void;
-  onSelect: (value: string) => void;
-}
-
-export const ItemSelector: React.FC<IItemSelectorProps> = ({
-  atlasIMG,
-  atlasJSON,
-  options,
-  onClose,
-  onSelect,
-}) => {
-  const [selectedValue, setSelectedValue] = useState<string>();
-
-  const handleClick = () => {
-    let element = document.querySelector(
-      `input[name='test']:checked`
-    ) as HTMLInputElement;
-    const elementValue = element.value;
-    setSelectedValue(elementValue);
-  };
-
-  useEffect(() => {
-    if (selectedValue) {
-      onSelect(selectedValue);
-    }
-  }, [selectedValue]);
-  return (
-    <DraggableContainer
-      type={RPGUIContainerTypes.Framed}
-      width="500px"
-      cancelDrag=".equipment-container-body .arrow-selector"
-      onCloseButton={() => {
-        if (onClose) {
-          onClose();
-        }
-      }}
-    >
-      <div style={{ width: '100%' }}>
-        <Title>{'Harvesting instruments'}</Title>
-        <Subtitle>{'Use the tool, you need it'}</Subtitle>
-        <hr className="golden" />
-      </div>
-
-      <RadioInputScroller>
-        {options?.map((option, index) => (
-          <RadioOptionsWrapper key={index}>
-            <SpriteAtlasWrapper>
-              <SpriteFromAtlas
-                atlasIMG={atlasIMG}
-                atlasJSON={atlasJSON}
-                spriteKey={option.imageKey}
-                imgScale={3}
-              />
-            </SpriteAtlasWrapper>
-            <div>
-              <input
-                className="rpgui-radio"
-                type="radio"
-                value={option.name}
-                name="test"
-              />
-              <label
-                onPointerDown={handleClick}
-                style={{ display: 'flex', alignItems: 'center' }}
-              >
-                {option.name} <br />
-                {option.description}
-              </label>
-            </div>
-          </RadioOptionsWrapper>
-        ))}
-      </RadioInputScroller>
-      <ButtonWrapper>
-        <Button buttonType={ButtonTypes.RPGUIButton} onPointerDown={onClose}>
-          Cancel
-        </Button>
-        <Button buttonType={ButtonTypes.RPGUIButton}>Select</Button>
-      </ButtonWrapper>
-    </DraggableContainer>
-  );
-};
-
-const Title = styled.h1`
-  font-size: 0.6rem;
-  color: yellow !important;
-`;
-const Subtitle = styled.h1`
-  font-size: 0.4rem;
-  color: yellow !important;
-`;
-
-const RadioInputScroller = styled.div`
-  padding-left: 15px;
-  padding-top: 10px;
-  width: 100%;
-  margin-top: 1rem;
-  align-items: center;
-  margin-left: 20px;
-  align-items: flex-start;
-  overflow-y: scroll;
-  height: 360px;
-`;
-
-const SpriteAtlasWrapper = styled.div`
-  margin-right: 40px;
-`;
-
-const RadioOptionsWrapper = styled.div`
-  display: flex;
-  align-items: stretch;
-  margin-bottom: 40px;
-`;
-
-const ButtonWrapper = styled.div`
-  display: flex;
-  justify-content: space-around;
-  padding-top: 20px;
-  width: 100%;
-`;
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { Button, ButtonTypes } from '../Button';
+import { DraggableContainer } from '../DraggableContainer';
+import { RPGUIContainerTypes } from '../RPGUIContainer';
+import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
+
+export interface IOptionsItemSelectorProps {
+  name: string;
+  description?: string;
+  imageKey: string;
+}
+
+export interface IItemSelectorProps {
+  atlasJSON: any;
+  atlasIMG: any;
+  options: IOptionsItemSelectorProps[];
+  onClose: () => void;
+  onSelect: (value: string) => void;
+}
+
+export const ItemSelector: React.FC<IItemSelectorProps> = ({
+  atlasIMG,
+  atlasJSON,
+  options,
+  onClose,
+  onSelect,
+}) => {
+  const [selectedValue, setSelectedValue] = useState<string>();
+
+  const handleClick = () => {
+    let element = document.querySelector(
+      `input[name='test']:checked`
+    ) as HTMLInputElement;
+    const elementValue = element.value;
+    setSelectedValue(elementValue);
+  };
+
+  useEffect(() => {
+    if (selectedValue) {
+      onSelect(selectedValue);
+    }
+  }, [selectedValue]);
+  return (
+    <DraggableContainer
+      type={RPGUIContainerTypes.Framed}
+      width="500px"
+      cancelDrag=".equipment-container-body .arrow-selector"
+      onCloseButton={() => {
+        if (onClose) {
+          onClose();
+        }
+      }}
+    >
+      <div style={{ width: '100%' }}>
+        <Title>{'Harvesting instruments'}</Title>
+        <Subtitle>{'Use the tool, you need it'}</Subtitle>
+        <hr className="golden" />
+      </div>
+
+      <RadioInputScroller>
+        {options?.map((option, index) => (
+          <RadioOptionsWrapper key={index}>
+            <SpriteAtlasWrapper>
+              <SpriteFromAtlas
+                atlasIMG={atlasIMG}
+                atlasJSON={atlasJSON}
+                spriteKey={option.imageKey}
+                imgScale={3}
+              />
+            </SpriteAtlasWrapper>
+            <div>
+              <input
+                className="rpgui-radio"
+                type="radio"
+                value={option.name}
+                name="test"
+              />
+              <label
+                onPointerDown={handleClick}
+                style={{ display: 'flex', alignItems: 'center' }}
+              >
+                {option.name} <br />
+                {option.description}
+              </label>
+            </div>
+          </RadioOptionsWrapper>
+        ))}
+      </RadioInputScroller>
+      <ButtonWrapper>
+        <Button buttonType={ButtonTypes.RPGUIButton} onPointerDown={onClose}>
+          Cancel
+        </Button>
+        <Button buttonType={ButtonTypes.RPGUIButton}>Select</Button>
+      </ButtonWrapper>
+    </DraggableContainer>
+  );
+};
+
+const Title = styled.h1`
+  font-size: 0.6rem;
+  color: yellow !important;
+`;
+const Subtitle = styled.h1`
+  font-size: 0.4rem;
+  color: yellow !important;
+`;
+
+const RadioInputScroller = styled.div`
+  padding-left: 15px;
+  padding-top: 10px;
+  width: 100%;
+  margin-top: 1rem;
+  align-items: center;
+  margin-left: 20px;
+  align-items: flex-start;
+  overflow-y: scroll;
+  height: 360px;
+`;
+
+const SpriteAtlasWrapper = styled.div`
+  margin-right: 40px;
+`;
+
+const RadioOptionsWrapper = styled.div`
+  display: flex;
+  align-items: stretch;
+  margin-bottom: 40px;
+`;
+
+const ButtonWrapper = styled.div`
+  display: flex;
+  justify-content: space-around;
+  padding-top: 20px;
+  width: 100%;
+`;

package/src/components/shared/Column.tsx

@@ -1,16 +1,16 @@
-import styled from 'styled-components';
-
-interface IColumn {
-  flex?: number;
-  alignItems?: string;
-  justifyContent?: string;
-  flexWrap?: string;
-}
-
-export const Column = styled.div<IColumn>`
-  flex: ${props => props.flex || 'auto'};
-  display: flex;
-  flex-wrap: ${props => props.flexWrap || 'nowrap'};
-  align-items: ${props => props.alignItems || 'flex-start'};
-  justify-content: ${props => props.justifyContent || 'flex-start'};
-`;
+import styled from 'styled-components';
+
+interface IColumn {
+  flex?: number;
+  alignItems?: string;
+  justifyContent?: string;
+  flexWrap?: string;
+}
+
+export const Column = styled.div<IColumn>`
+  flex: ${props => props.flex || 'auto'};
+  display: flex;
+  flex-wrap: ${props => props.flexWrap || 'nowrap'};
+  align-items: ${props => props.alignItems || 'flex-start'};
+  justify-content: ${props => props.justifyContent || 'flex-start'};
+`;

package/src/components/shared/Ellipsis.tsx

@@ -1,65 +1,65 @@
-import React from 'react';
-import styled from 'styled-components';
-
-interface IProps {
-  children: React.ReactNode;
-  maxLines: 1 | 2 | 3;
-  maxWidth: string;
-  fontSize?: string;
-  center?: boolean;
-}
-
-export const Ellipsis = ({
-  children,
-  maxLines,
-  maxWidth,
-  fontSize,
-  center,
-}: IProps) => {
-  return (
-    <Container maxWidth={maxWidth} fontSize={fontSize} center={center}>
-      <div className={`ellipsis-${maxLines}-lines`}>{children}</div>
-    </Container>
-  );
-};
-
-interface IContainerProps {
-  maxWidth?: string;
-  fontSize?: string;
-  center?: boolean;
-}
-
-const Container = styled.div<IContainerProps>`
-  .ellipsis-1-lines {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    max-width: ${props => props.maxWidth};
-
-    ${props => props.center && `margin: 0 auto;`}
-  }
-  .ellipsis-2-lines {
-    display: -webkit-box;
-    max-width: ${props => props.maxWidth}px;
-
-    height: 25px;
-    margin: 0 auto;
-    line-height: 1;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
-  .ellipsis-3-lines {
-    display: -webkit-box;
-    max-width: ${props => props.maxWidth}px;
-
-    height: 43px;
-    margin: 0 auto;
-    line-height: 1;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
-`;
+import React from 'react';
+import styled from 'styled-components';
+
+interface IProps {
+  children: React.ReactNode;
+  maxLines: 1 | 2 | 3;
+  maxWidth: string;
+  fontSize?: string;
+  center?: boolean;
+}
+
+export const Ellipsis = ({
+  children,
+  maxLines,
+  maxWidth,
+  fontSize,
+  center,
+}: IProps) => {
+  return (
+    <Container maxWidth={maxWidth} fontSize={fontSize} center={center}>
+      <div className={`ellipsis-${maxLines}-lines`}>{children}</div>
+    </Container>
+  );
+};
+
+interface IContainerProps {
+  maxWidth?: string;
+  fontSize?: string;
+  center?: boolean;
+}
+
+const Container = styled.div<IContainerProps>`
+  .ellipsis-1-lines {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    max-width: ${props => props.maxWidth};
+
+    ${props => props.center && `margin: 0 auto;`}
+  }
+  .ellipsis-2-lines {
+    display: -webkit-box;
+    max-width: ${props => props.maxWidth}px;
+
+    height: 25px;
+    margin: 0 auto;
+    line-height: 1;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+  .ellipsis-3-lines {
+    display: -webkit-box;
+    max-width: ${props => props.maxWidth}px;
+
+    height: 43px;
+    margin: 0 auto;
+    line-height: 1;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+`;

package/src/components/shared/SpriteFromAtlas.tsx

@@ -1,102 +1,104 @@
-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;
-  onPointerDown?: () => 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,
-  onPointerDown,
-  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] || atlasJSON.frames['others/no-image.png'];
-
-  if (!spriteData) throw new Error(`Sprite ${spriteKey} not found in atlas!`);
-
-  return (
-    <Container
-      width={width}
-      height={height}
-      hasHover={grayScale}
-      onPointerDown={onPointerDown}
-      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;
+  onPointerDown?: () => void;
+  containerStyle?: any;
+  imgStyle?: any;
+  imgScale?: number;
+  imgClassname?: string;
+}
+
+export const SpriteFromAtlas: React.FC<IProps> = ({
+  atlasJSON,
+  atlasIMG,
+  spriteKey,
+  width = GRID_WIDTH,
+  height = GRID_HEIGHT,
+  imgScale = 2,
+  imgStyle,
+  onPointerDown,
+  containerStyle,
+  grayScale = false,
+  opacity = 1,
+  imgClassname,
+}) => {
+  //! 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] || atlasJSON.frames['others/no-image.png'];
+
+  if (!spriteData) throw new Error(`Sprite ${spriteKey} not found in atlas!`);
+
+  return (
+    <Container
+      width={width}
+      height={height}
+      hasHover={grayScale}
+      onPointerDown={onPointerDown}
+      style={containerStyle}
+    >
+      <ImgSprite
+        className={`sprite-from-atlas-img ${imgClassname || ''}`}
+        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};
+`;