@rpg-engine/long-bow 0.8.8 → 0.8.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.8",
+  "version": "0.8.10",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

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

@@ -62,15 +62,6 @@ export interface IItemContainerProps {
   opacity?: number;
 }
 
-type onDragStart =
-  | ((
-      item: IItem,
-      slotIndex: number,
-      itemContainerType: ItemContainerType | null
-    ) => void)
-  | undefined;
-type onDragEnd = ((quantity?: number) => void) | undefined;
-
 const MIN_SLOTS_FOR_SCROLL = 20;
 
 export const ItemContainer: React.FC<IItemContainerProps> = React.memo(
@@ -154,7 +145,7 @@ export const ItemContainer: React.FC<IItemContainerProps> = React.memo(
       document.removeEventListener('pointermove', handleMouseMove);
     }, [handleMouseMove, stopScrolling]);
 
-    const onDragStartHandler: onDragStart = useCallback(
+    const onDragStartHandler = useCallback(
       (
         item: IItem,
         slotIndex: number,
@@ -169,7 +160,7 @@ export const ItemContainer: React.FC<IItemContainerProps> = React.memo(
       [onItemDragStart, onDragStartScrollingEvents]
     );
 
-    const onDragEndHandler: onDragEnd = useCallback(
+    const onDragEndHandler = useCallback(
       (quantity: number | undefined) => {
         if (onItemDragEnd) {
           onItemDragEnd(quantity);
@@ -179,16 +170,85 @@ export const ItemContainer: React.FC<IItemContainerProps> = React.memo(
       [onItemDragEnd, onDragEndScrollingEvents]
     );
 
-    // Memoize handleSetShortcut to prevent unnecessary re-renders
-    const memoizedHandleSetShortcut = useCallback(
-      (item: IItem, index: number) => {
-        handleSetShortcut(item, index);
+    const handleItemClick = useCallback(
+      (
+        itemType: IItem['type'],
+        containerType: ItemContainerType | null,
+        item: IItem
+      ) => {
+        if (settingShortcutIndex !== -1) {
+          setSettingShortcutIndex(-1);
+          handleSetShortcut(item, settingShortcutIndex);
+        } else if (onItemClick) {
+          onItemClick(item, itemType, containerType);
+        }
+      },
+      [settingShortcutIndex, handleSetShortcut, onItemClick]
+    );
+
+    const handlePlaceDrop = useCallback(
+      (
+        item: IItem | null,
+        slotIndex: number,
+        itemContainerType: ItemContainerType | null
+      ) => {
+        if (onItemPlaceDrop) {
+          onItemPlaceDrop(item, slotIndex, itemContainerType);
+        }
+        onDragEndScrollingEvents();
+      },
+      [onItemPlaceDrop, onDragEndScrollingEvents]
+    );
+
+    const handleOutsideDrop = useCallback(
+      (item: IItem, position: IPosition) => {
+        if (onOutsideDrop) {
+          onOutsideDrop(item, position);
+        }
+        onDragEndScrollingEvents();
       },
-      [handleSetShortcut]
+      [onOutsideDrop, onDragEndScrollingEvents]
     );
 
-    // Memoize onRenderSlots to prevent re-creating the slots array on every render
-    const onRenderSlots = useMemo(() => {
+    const handleQuantitySelect = useCallback(
+      (maxQuantity: number, callback: (quantity: number) => void) => {
+        setQuantitySelect({
+          isOpen: true,
+          maxQuantity,
+          callback,
+        });
+      },
+      []
+    );
+
+    // Memoize slot rendering configuration
+    const slotConfig = useMemo(
+      () => ({
+        type,
+        atlasIMG,
+        atlasJSON,
+        scale,
+        equipmentSet,
+        isDepotSystem,
+        isSelectingShortcut: settingShortcutIndex !== -1,
+        checkIfItemCanBeMoved,
+        checkIfItemShouldDragEnd,
+      }),
+      [
+        type,
+        atlasIMG,
+        atlasJSON,
+        scale,
+        equipmentSet,
+        isDepotSystem,
+        settingShortcutIndex,
+        checkIfItemCanBeMoved,
+        checkIfItemShouldDragEnd,
+      ]
+    );
+
+    // Memoize slots rendering
+    const renderSlots = useMemo(() => {
       const slots = [];
 
       for (let i = 0; i < itemContainer.slotQty; i++) {
@@ -199,62 +259,27 @@ export const ItemContainer: React.FC<IItemContainerProps> = React.memo(
             key={i}
             slotIndex={i}
             item={currentItem}
-            itemContainerType={type}
-            onMouseOver={
-              onMouseOver
-                ? (event, slotIndex, item) =>
-                    onMouseOver(event, slotIndex, item)
-                : undefined
-            }
-            onMouseOut={undefined} // Assuming you don't need onMouseOut here
-            onPointerDown={(itemType, containerType, item) => {
-              if (settingShortcutIndex !== -1) {
-                setSettingShortcutIndex(-1);
-                memoizedHandleSetShortcut(item, settingShortcutIndex);
-              } else if (onItemClick) {
-                onItemClick(item, itemType, containerType);
-              }
-            }}
+            itemContainerType={slotConfig.type}
+            onMouseOver={onMouseOver}
+            onPointerDown={handleItemClick}
             onDragStart={onDragStartHandler}
             onDragEnd={onDragEndHandler}
-            dragScale={scale}
-            checkIfItemCanBeMoved={checkIfItemCanBeMoved}
-            checkIfItemShouldDragEnd={checkIfItemShouldDragEnd}
-            openQuantitySelector={(maxQuantity, callback) => {
-              setQuantitySelect({
-                isOpen: true,
-                maxQuantity,
-                callback,
-              });
-            }}
-            onPlaceDrop={(item, slotIndex, itemContainerType) => {
-              if (onItemPlaceDrop) {
-                onItemPlaceDrop(item, slotIndex, itemContainerType);
-              }
-
-              console.log('PLACE DROP');
-
-              onDragEndScrollingEvents();
-            }}
-            onOutsideDrop={(item, position) => {
-              if (onOutsideDrop) {
-                onOutsideDrop(item, position);
-              }
-
-              console.log('OUTSIDE DROP');
-
-              onDragEndScrollingEvents();
-            }}
-            atlasIMG={atlasIMG}
-            atlasJSON={atlasJSON}
-            isSelectingShortcut={settingShortcutIndex !== -1}
-            equipmentSet={equipmentSet}
+            dragScale={slotConfig.scale}
+            checkIfItemCanBeMoved={slotConfig.checkIfItemCanBeMoved}
+            checkIfItemShouldDragEnd={slotConfig.checkIfItemShouldDragEnd}
+            openQuantitySelector={handleQuantitySelect}
+            onPlaceDrop={handlePlaceDrop}
+            onOutsideDrop={handleOutsideDrop}
+            atlasIMG={slotConfig.atlasIMG}
+            atlasJSON={slotConfig.atlasJSON}
+            isSelectingShortcut={slotConfig.isSelectingShortcut}
+            equipmentSet={slotConfig.equipmentSet}
             setItemShortcut={
               type === ItemContainerType.Inventory
-                ? memoizedHandleSetShortcut
+                ? handleSetShortcut
                 : undefined
             }
-            isDepotSystem={isDepotSystem}
+            isDepotSystem={slotConfig.isDepotSystem}
           />
         );
       }
@@ -262,23 +287,16 @@ export const ItemContainer: React.FC<IItemContainerProps> = React.memo(
     }, [
       itemContainer.slotQty,
       itemContainer.slots,
-      type,
+      slotConfig,
       onMouseOver,
-      settingShortcutIndex,
-      memoizedHandleSetShortcut,
-      onItemClick,
+      handleItemClick,
       onDragStartHandler,
       onDragEndHandler,
-      scale,
-      checkIfItemCanBeMoved,
-      checkIfItemShouldDragEnd,
-      onItemPlaceDrop,
-      onOutsideDrop,
-      atlasIMG,
-      atlasJSON,
-      equipmentSet,
-      isDepotSystem,
-      onDragEndScrollingEvents,
+      handleQuantitySelect,
+      handlePlaceDrop,
+      handleOutsideDrop,
+      handleSetShortcut,
+      type,
     ]);
 
     return (
@@ -317,7 +335,7 @@ export const ItemContainer: React.FC<IItemContainerProps> = React.memo(
               isScrollable={itemContainer.slotQty > MIN_SLOTS_FOR_SCROLL}
               isFullScreen={isFullScreen}
             >
-              {onRenderSlots}
+              {renderSlots}
             </ItemsContainer>
           </SlotsContainer>
           {quantitySelect.isOpen && (

package/src/components/shared/SpriteFromAtlas.tsx

@@ -37,42 +37,43 @@ export const SpriteFromAtlas: React.FC<IProps> = ({
   centered,
   borderRadius,
 }) => {
-        //! 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 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!
 
-        if (!spriteData) {
-          console.error(
-            `SpriteFromAtlas: Could not find sprite with key ${spriteKey} in atlasJSON.`
-          );
-          return null;
-        }
+  const spriteData =
+    atlasJSON?.frames?.[spriteKey] ||
+    atlasJSON?.frames?.['others/no-image.png'];
 
-        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}
-              centered={centered}
-              borderRadius={borderRadius}
-              tintColor={tintColor}
-            />
-          </Container>
-        );
-      };
+  if (!spriteData) {
+    console.error(
+      `SpriteFromAtlas: Could not find sprite with key ${spriteKey} in atlasJSON.`
+    );
+    return null;
+  }
+
+  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}
+        centered={centered}
+        borderRadius={borderRadius}
+        tintColor={tintColor}
+      />
+    </Container>
+  );
+};
 
 interface IImgSpriteProps {
   atlasIMG: any;
@@ -111,30 +112,23 @@ 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;
+  background-position: -${props => props.frame.x}px -${props => props.frame.y}px;
   transform: scale(${props => props.scale});
   position: relative;
   top: ${props => (props.centered ? '0' : '8px')};
   left: ${props => (props.centered ? '0' : '8px')};
-  ${props =>
-    props.tintColor &&
-    `
-    &::after {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: ${props.frame.w}px;
-      height: ${props.frame.h}px;
-      background-color: ${props.tintColor};
-      mask-image: url(${props.atlasIMG});
-      mask-position: -${props.frame.x}px -${props.frame.y}px;
-      -webkit-mask-image: url(${props.atlasIMG});
-      -webkit-mask-position: -${props.frame.x}px -${props.frame.y}px;
-      mix-blend-mode: color; 
-      ${props.grayScale ? 'filter: grayscale(100%);' : 'none'}
-      }
-    `}
+  filter: ${props => {
+    const filters = [];
+    if (props.grayScale) filters.push('grayscale(100%)');
+    if (props.tintColor)
+      filters.push(
+        `brightness(0.8) contrast(1.2) sepia(100%) hue-rotate(${
+          props.tintColor === '#FFD700' ? '40deg' : '210deg'
+        }) saturate(400%)`
+      );
+    return filters.length ? filters.join(' ') : 'none';
+  }};
   opacity: ${props => props.opacity};
-  `;
+  border-radius: ${props => props.borderRadius || '0'};
+  overflow: hidden;
+`;