@rpg-engine/long-bow 0.1.71 → 0.1.72

package/src/components/Item/Inventory/ItemContainer.tsx

@@ -96,8 +96,8 @@ export const ItemContainer: React.FC<IItemContainerProps> = observer(
         {uiStore.onHoverDetail?.visible ? (
           <ItemCard
             item={uiStore.onHoverDetail.item}
-            x={uiStore.onHoverDetail.posX}
-            y={uiStore.onHoverDetail.posY}
+            x={uiStore.onHoverDetail.posX - draggablePosition.x}
+            y={uiStore.onHoverDetail.posY - draggablePosition.y}
           />
         ) : null}
       </SlotsContainer>

package/src/components/Item/Inventory/ItemSlot.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import styled from 'styled-components';
 import atlasJSON from '../../../mocks/atlas/items/items.json';
 import atlasIMG from '../../../mocks/atlas/items/items.png';
-import { SpriteFromAtlas } from '../SpriteFromAtlas';
+import { SpriteFromAtlas } from '../../shared/SpriteFromAtlas';
 
 export enum SlotContainerType {
   INVENTORY = 'Inventory',
@@ -71,7 +71,7 @@ export const ItemSlot: React.FC<IProps> = ({
           atlasIMG={atlasIMG}
           atlasJSON={atlasJSON}
           spriteKey={itemToRender.texturePath}
-          scale={3}
+          imgScale={3}
         />
       );
     }
@@ -96,7 +96,7 @@ export const ItemSlot: React.FC<IProps> = ({
           atlasIMG={atlasIMG}
           atlasJSON={atlasJSON}
           spriteKey={itemToRender.texturePath}
-          scale={3}
+          imgScale={3}
         />
       );
     } else {
@@ -105,7 +105,7 @@ export const ItemSlot: React.FC<IProps> = ({
           atlasIMG={atlasIMG}
           atlasJSON={atlasJSON}
           spriteKey={EquipmentSlotSpriteByType[slotSpriteMask!]}
-          scale={3}
+          imgScale={3}
           grayScale={true}
           opacity={0.4}
         />

package/src/components/ListMenu.tsx

@@ -24,9 +24,9 @@ export const ListMenu: React.FC<IListMenuProps> = ({
   return (
     <Container x={x} y={y} fontSize={fontSize}>
       <ul className="rpgui-list-imp" style={{ overflow: 'hidden' }}>
-        {options.map(params => (
+        {options.map((params, index) => (
           <ListElement
-            key={params?.id}
+            key={params?.id || index}
             onClick={() => {
               onSelected(params?.id);
             }}

package/src/components/Multitab/TabsContainer.tsx

@@ -48,6 +48,8 @@ export const TabsContainer: React.FC<ITabsContainer> = ({
         return RPGUIContainerTypes.FramedGold;
       case 'gray':
         return RPGUIContainerTypes.Framed;
+      default:
+        return RPGUIContainerTypes.Framed;
     }
   };
 

package/src/components/SkillProgressBar.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import styled from 'styled-components';
 import atlasJSON from '../mocks/atlas/items/items.json';
 import atlasIMG from '../mocks/atlas/items/items.png';
-import { SpriteFromAtlas } from './Item/SpriteFromAtlas';
+import { SpriteFromAtlas } from './shared/SpriteFromAtlas';
 import { SimpleProgressBar } from './SimpleProgressBar';
 
 export interface ISkillProgressBarProps {
@@ -42,7 +42,7 @@ export const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({
                 atlasIMG={atlasIMG}
                 atlasJSON={atlasJSON}
                 spriteKey={texturePath}
-                scale={1}
+                imgScale={1}
                 grayScale
                 opacity={0.5}
               />

package/src/components/{Item → shared}/SpriteFromAtlas.tsx

@@ -8,9 +8,12 @@ interface IProps {
   spriteKey: string;
   width?: number;
   height?: number;
-  scale?: number;
   grayScale?: boolean;
   opacity?: number;
+  onClick?: () => void;
+  containerStyle?: any;
+  imgStyle?: any;
+  imgScale?: number;
 }
 
 export const SpriteFromAtlas: React.FC<IProps> = ({
@@ -19,7 +22,10 @@ export const SpriteFromAtlas: React.FC<IProps> = ({
   spriteKey,
   width = GRID_WIDTH,
   height = GRID_HEIGHT,
-  scale = 2,
+  imgScale = 2,
+  imgStyle,
+  onClick,
+  containerStyle,
   grayScale = false,
   opacity = 1,
 }) => {
@@ -29,14 +35,21 @@ export const SpriteFromAtlas: React.FC<IProps> = ({
   const spriteData = atlasJSON.frames[spriteKey];
 
   return (
-    <Container width={width} height={height} hasHover={grayScale}>
+    <Container
+      width={width}
+      height={height}
+      hasHover={grayScale}
+      onClick={onClick}
+      style={containerStyle}
+    >
       <ImgSprite
         className="sprite-from-atlas-img"
         atlasIMG={atlasIMG}
         frame={spriteData.frame}
-        scale={scale}
+        scale={imgScale}
         grayScale={grayScale}
         opacity={opacity}
+        style={imgStyle}
       />
     </Container>
   );

package/src/components/shared/SpriteIcon.tsx

@@ -0,0 +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;
+`;

package/src/index.tsx

@@ -3,10 +3,10 @@ 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/Item/SpriteFromAtlas';
 export * from './components/ListMenu';
 export * from './components/NPCDialog/NPCDialog';
 export * from './components/NPCDialog/QuestionDialog/QuestionDialog';
@@ -15,9 +15,10 @@ 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/TextArea';
 export * from './components/Truncate';
 export * from './components/typography/DynamicText';
-export * from './components/Equipment/EquipmentSet';
 export { useEventListener } from './hooks/useEventListener';

package/src/mocks/atlas/icons/icons.json

@@ -0,0 +1,303 @@
+{
+  "frames": {
+    "metamask-large.png": {
+      "frame": {
+        "x": 0,
+        "y": 0,
+        "w": 33,
+        "h": 30
+      },
+      "rotated": false,
+      "trimmed": false,
+      "spriteSourceSize": {
+        "x": 0,
+        "y": 0,
+        "w": 33,
+        "h": 30
+      },
+      "sourceSize": {
+        "w": 33,
+        "h": 30
+      },
+      "pivot": {
+        "x": 0.5,
+        "y": 0.5
+      }
+    },
+    "chat-large.png": {
+      "frame": {
+        "x": 0,
+        "y": 30,
+        "w": 31,
+        "h": 29
+      },
+      "rotated": false,
+      "trimmed": true,
+      "spriteSourceSize": {
+        "x": 1,
+        "y": 3,
+        "w": 31,
+        "h": 29
+      },
+      "sourceSize": {
+        "w": 32,
+        "h": 32
+      },
+      "pivot": {
+        "x": 0.5,
+        "y": 0.5
+      }
+    },
+    "equipment.png": {
+      "frame": {
+        "x": 33,
+        "y": 0,
+        "w": 17,
+        "h": 16
+      },
+      "rotated": false,
+      "trimmed": false,
+      "spriteSourceSize": {
+        "x": 0,
+        "y": 0,
+        "w": 17,
+        "h": 16
+      },
+      "sourceSize": {
+        "w": 17,
+        "h": 16
+      },
+      "pivot": {
+        "x": 0.5,
+        "y": 0.5
+      }
+    },
+    "inventory.png": {
+      "frame": {
+        "x": 33,
+        "y": 16,
+        "w": 17,
+        "h": 16
+      },
+      "rotated": false,
+      "trimmed": false,
+      "spriteSourceSize": {
+        "x": 0,
+        "y": 0,
+        "w": 17,
+        "h": 16
+      },
+      "sourceSize": {
+        "w": 17,
+        "h": 16
+      },
+      "pivot": {
+        "x": 0.5,
+        "y": 0.5
+      }
+    },
+    "icon-base-blue.png": {
+      "frame": {
+        "x": 31,
+        "y": 32,
+        "w": 16,
+        "h": 16
+      },
+      "rotated": false,
+      "trimmed": false,
+      "spriteSourceSize": {
+        "x": 0,
+        "y": 0,
+        "w": 16,
+        "h": 16
+      },
+      "sourceSize": {
+        "w": 16,
+        "h": 16
+      },
+      "pivot": {
+        "x": 0.5,
+        "y": 0.5
+      }
+    },
+    "icon-base-brown.png": {
+      "frame": {
+        "x": 50,
+        "y": 0,
+        "w": 16,
+        "h": 16
+      },
+      "rotated": false,
+      "trimmed": false,
+      "spriteSourceSize": {
+        "x": 0,
+        "y": 0,
+        "w": 16,
+        "h": 16
+      },
+      "sourceSize": {
+        "w": 16,
+        "h": 16
+      },
+      "pivot": {
+        "x": 0.5,
+        "y": 0.5
+      }
+    },
+    "chat-small.png": {
+      "frame": {
+        "x": 50,
+        "y": 16,
+        "w": 16,
+        "h": 16
+      },
+      "rotated": false,
+      "trimmed": true,
+      "spriteSourceSize": {
+        "x": 1,
+        "y": 0,
+        "w": 16,
+        "h": 16
+      },
+      "sourceSize": {
+        "w": 17,
+        "h": 16
+      },
+      "pivot": {
+        "x": 0.5,
+        "y": 0.5
+      }
+    },
+    "icon-base-gold.png": {
+      "frame": {
+        "x": 47,
+        "y": 32,
+        "w": 16,
+        "h": 16
+      },
+      "rotated": false,
+      "trimmed": false,
+      "spriteSourceSize": {
+        "x": 0,
+        "y": 0,
+        "w": 16,
+        "h": 16
+      },
+      "sourceSize": {
+        "w": 16,
+        "h": 16
+      },
+      "pivot": {
+        "x": 0.5,
+        "y": 0.5
+      }
+    },
+    "equipment-raw.png": {
+      "frame": {
+        "x": 0,
+        "y": 59,
+        "w": 15,
+        "h": 13
+      },
+      "rotated": false,
+      "trimmed": true,
+      "spriteSourceSize": {
+        "x": 0,
+        "y": 0,
+        "w": 15,
+        "h": 13
+      },
+      "sourceSize": {
+        "w": 16,
+        "h": 13
+      },
+      "pivot": {
+        "x": 0.5,
+        "y": 0.5
+      }
+    },
+    "metamask-small.png": {
+      "frame": {
+        "x": 31,
+        "y": 48,
+        "w": 15,
+        "h": 15
+      },
+      "rotated": false,
+      "trimmed": true,
+      "spriteSourceSize": {
+        "x": 1,
+        "y": 0,
+        "w": 15,
+        "h": 15
+      },
+      "sourceSize": {
+        "w": 16,
+        "h": 16
+      },
+      "pivot": {
+        "x": 0.5,
+        "y": 0.5
+      }
+    },
+    "settings.png": {
+      "frame": {
+        "x": 46,
+        "y": 48,
+        "w": 14,
+        "h": 14
+      },
+      "rotated": false,
+      "trimmed": true,
+      "spriteSourceSize": {
+        "x": 1,
+        "y": 1,
+        "w": 14,
+        "h": 14
+      },
+      "sourceSize": {
+        "w": 16,
+        "h": 16
+      },
+      "pivot": {
+        "x": 0.5,
+        "y": 0.5
+      }
+    },
+    "inventory-raw.png": {
+      "frame": {
+        "x": 15,
+        "y": 59,
+        "w": 13,
+        "h": 13
+      },
+      "rotated": false,
+      "trimmed": true,
+      "spriteSourceSize": {
+        "x": 1,
+        "y": 2,
+        "w": 13,
+        "h": 13
+      },
+      "sourceSize": {
+        "w": 16,
+        "h": 16
+      },
+      "pivot": {
+        "x": 0.5,
+        "y": 0.5
+      }
+    }
+  },
+  "meta": {
+    "app": "http://free-tex-packer.com",
+    "version": "0.6.7",
+    "image": "icons.png",
+    "format": "RGBA8888",
+    "size": {
+      "w": 66,
+      "h": 72
+    },
+    "scale": 1
+  }
+}