@rpg-engine/long-bow 0.1.79 → 0.1.82

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/shared/SpriteIcon.tsx

@@ -1,67 +1,67 @@
-import React from 'react';
-import styled from 'styled-components';
-import iconsAtlasJSON from '../../mocks/atlas/icons/icons.json';
-import iconsAtlasIMG from '../../mocks/atlas/icons/icons.png';
-import { SpriteFromAtlas } from './SpriteFromAtlas';
-
-interface IProps {
-  onClick?: () => void;
-  spriteKey: string;
-  baseSpriteKey?: string;
-  imgStyle?: any;
-}
-
-export const SpriteIcon: React.FC<IProps> = ({
-  onClick,
-  spriteKey,
-  baseSpriteKey,
-  imgStyle,
-}) => {
-  return (
-    <Container>
-      {baseSpriteKey && (
-        <Slot>
-          <SpriteFromAtlas
-            onClick={onClick}
-            atlasJSON={iconsAtlasJSON}
-            atlasIMG={iconsAtlasIMG}
-            spriteKey={baseSpriteKey}
-            width={32}
-            height={32}
-            containerStyle={{
-              zIndex: -1,
-            }}
-          />
-        </Slot>
-      )}
-      <Slot>
-        <SpriteFromAtlas
-          onClick={onClick}
-          atlasJSON={iconsAtlasJSON}
-          atlasIMG={iconsAtlasIMG}
-          spriteKey={spriteKey}
-          width={28}
-          height={28}
-          containerStyle={{
-            zIndex: 0,
-          }}
-          imgScale={baseSpriteKey ? 1.5 : 2}
-          imgStyle={imgStyle}
-        />
-      </Slot>
-    </Container>
-  );
-};
-
-const Container = styled.div`
-  position: relative;
-  width: 32px;
-  height: 32px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
-
-const Slot = styled.div`
-  position: absolute;
-`;
+import React from 'react';
+import styled from 'styled-components';
+import iconsAtlasJSON from '../../mocks/atlas/icons/icons.json';
+import iconsAtlasIMG from '../../mocks/atlas/icons/icons.png';
+import { SpriteFromAtlas } from './SpriteFromAtlas';
+
+interface IProps {
+  onClick?: () => void;
+  spriteKey: string;
+  baseSpriteKey?: string;
+  imgStyle?: any;
+}
+
+export const SpriteIcon: React.FC<IProps> = ({
+  onClick,
+  spriteKey,
+  baseSpriteKey,
+  imgStyle,
+}) => {
+  return (
+    <Container>
+      {baseSpriteKey && (
+        <Slot>
+          <SpriteFromAtlas
+            onClick={onClick}
+            atlasJSON={iconsAtlasJSON}
+            atlasIMG={iconsAtlasIMG}
+            spriteKey={baseSpriteKey}
+            width={32}
+            height={32}
+            containerStyle={{
+              zIndex: -1,
+            }}
+          />
+        </Slot>
+      )}
+      <Slot>
+        <SpriteFromAtlas
+          onClick={onClick}
+          atlasJSON={iconsAtlasJSON}
+          atlasIMG={iconsAtlasIMG}
+          spriteKey={spriteKey}
+          width={28}
+          height={28}
+          containerStyle={{
+            zIndex: 0,
+          }}
+          imgScale={baseSpriteKey ? 1.5 : 2}
+          imgStyle={imgStyle}
+        />
+      </Slot>
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  position: relative;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const Slot = styled.div`
+  position: absolute;
+`;