@rpg-engine/long-bow 0.5.29 → 0.5.31

package/dist/stories/ItemContainer.stories.d.ts

@@ -8,5 +8,4 @@ interface ITemplateProps {
     scale?: number;
 }
 export declare const Inventory: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, IItemContainerProps & ITemplateProps>;
-export declare const InventoryScaledDown: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, IItemContainerProps & ITemplateProps>;
 export declare const Depot: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, IItemContainerProps & ITemplateProps>;

package/package.json

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

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

@@ -12,6 +12,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import Draggable, { DraggableEventHandler } from 'react-draggable';
 import styled from 'styled-components';
 import { IPosition } from '../../../types/eventTypes';
+import { rarityColor } from './ItemSlotRarity';
 import { ItemSlotRenderer } from './ItemSlotRenderer';
 import { ItemSlotToolTips } from './ItemSlotTooltips';
 import { useDragging } from './context/DraggingContext';
@@ -116,7 +117,7 @@ export const ItemSlot: React.FC<IProps> = observer(
     const [dropPosition, setDropPosition] = useState<IPosition | null>(null);
     const dragContainer = useRef<HTMLDivElement>(null);
 
-    const { setDraggingItem } = useDragging();
+    const { item: draggingItem, setDraggingItem } = useDragging();
 
     const [contextActions, setContextActions] = useState<IContextMenuItem[]>(
       []
@@ -240,8 +241,6 @@ export const ItemSlot: React.FC<IProps> = observer(
       }
 
       if (onDragStart && containerType) {
-        setDraggingItem(item);
-
         onDragStart(item, slotIndex, containerType);
       }
     };
@@ -254,10 +253,15 @@ export const ItemSlot: React.FC<IProps> = observer(
         setWasDragged(true);
         setIsFocused(true);
       }
+
+      if (!draggingItem) {
+        setDraggingItem(item);
+      }
     };
 
     return (
       <Container
+        isDraggingItem={!!draggingItem}
         item={item}
         className="rpgui-icon empty-slot"
         onMouseUp={() => {
@@ -362,17 +366,30 @@ interface ContainerTypes {
   item: IItem | null;
   containerType?: ItemContainerType | null;
   isSelectingShortcut?: boolean;
+  isDraggingItem?: boolean;
 }
 
 const Container = styled.div<ContainerTypes>`
   margin: 0.1rem;
 
   .react-draggable-dragging {
-    opacity: 0;
+    // if is dragging item, set opacity to 0
+    opacity: ${({ isDraggingItem }) => (isDraggingItem ? 0 : 1)};
   }
 
   position: relative;
 
+  .sprite-from-atlas-img--item {
+    position: relative;
+    top: 1.5rem;
+    left: 1.5rem;
+    border-color: ${({ item }) => rarityColor(item)};
+    box-shadow: ${({ item }) => `0 0 5px 2px ${rarityColor(item)}`} inset, ${({
+  item,
+}) => `0 0 4px 3px ${rarityColor(item)}`};
+    //background-color: ${({ item }) => rarityColor(item)};
+  }
+
   &::before {
     content: '';
     position: absolute;

package/src/components/Item/Inventory/ItemSlotRarity.ts

@@ -0,0 +1,17 @@
+import { IItem, ItemRarities } from '@rpg-engine/shared';
+
+
+export const rarityColor = (item: IItem | null) => {
+  switch (item?.rarity) {
+    case ItemRarities.Uncommon:
+      return 'rgba(13, 193, 13, 0.6)';
+    case ItemRarities.Rare:
+      return 'rgba(8, 104, 187, 0.6)';
+    case ItemRarities.Epic:
+      return 'rgba(191, 0, 255, 0.6)';
+    case ItemRarities.Legendary:
+      return 'rgba(255, 191, 0,0.6)';
+    default:
+      return null;
+  }
+};

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

@@ -10,7 +10,6 @@ import { SpriteFromAtlas } from '../../shared/SpriteFromAtlas';
 import { ErrorBoundary } from './ErrorBoundary';
 import { EquipmentSlotSpriteByType } from './ItemSlot';
 import { onRenderStackInfo } from './ItemSlotQty/ItemSlotQty';
-import { ItemSlotRarity } from './ItemSlotRarity';
 
 interface IProps {
   containerType: ItemContainerType | null | undefined;
@@ -34,24 +33,22 @@ export const ItemSlotRenderer: React.FC<IProps> = ({
 
     return (
       <ErrorBoundary key={item._id}>
-        <ItemSlotRarity item={item}>
-          <SpriteFromAtlas
-            atlasIMG={atlasIMG}
-            atlasJSON={atlasJSON}
-            spriteKey={getItemTextureKeyPath(
-              {
-                key: item.texturePath,
-                texturePath: item.texturePath,
-                stackQty: item.stackQty || 1,
-                isStackable: item.isStackable,
-              },
-              atlasJSON
-            )}
-            imgScale={3}
-            imgClassname="sprite-from-atlas-img--item"
-          />
-          {onRenderStackInfo(item._id, item.stackQty ?? 0)}
-        </ItemSlotRarity>
+        <SpriteFromAtlas
+          atlasIMG={atlasIMG}
+          atlasJSON={atlasJSON}
+          spriteKey={getItemTextureKeyPath(
+            {
+              key: item.texturePath,
+              texturePath: item.texturePath,
+              stackQty: item.stackQty || 1,
+              isStackable: item.isStackable,
+            },
+            atlasJSON
+          )}
+          imgScale={3}
+          imgClassname="sprite-from-atlas-img--item"
+        />
+        {onRenderStackInfo(item._id, item.stackQty ?? 0)}
       </ErrorBoundary>
     );
   };

package/src/stories/ItemContainer.stories.tsx

@@ -161,12 +161,6 @@ Inventory.args = {
   type: ItemContainerType.Inventory,
 };
 
-export const InventoryScaledDown = Template.bind({});
-InventoryScaledDown.args = {
-  type: ItemContainerType.Inventory,
-  scale: 0.8,
-};
-
 export const Depot = Template.bind({});
 Depot.args = {
   type: ItemContainerType.Depot,

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

@@ -1,46 +0,0 @@
-import { IItem, ItemRarities } from '@rpg-engine/shared';
-import React from 'react';
-import styled from 'styled-components';
-
-interface IProps {
-  item: IItem | null;
-  children: React.ReactNode;
-}
-
-export const ItemSlotRarity = ({ children, item }: IProps) => {
-  if (!item) return <>{children}</>;
-
-  return <Container item={item}>{children}</Container>;
-};
-
-interface IContainer {
-  item: IItem | null;
-}
-
-export const rarityColor = (item: IItem | null) => {
-  switch (item?.rarity) {
-    case ItemRarities.Uncommon:
-      return 'rgba(13, 193, 13, 0.6)';
-    case ItemRarities.Rare:
-      return 'rgba(8, 104, 187, 0.6)';
-    case ItemRarities.Epic:
-      return 'rgba(191, 0, 255, 0.6)';
-    case ItemRarities.Legendary:
-      return 'rgba(255, 191, 0,0.6)';
-    default:
-      return null;
-  }
-};
-const Container = styled.div<IContainer>`
-  .sprite-from-atlas-img--item {
-    position: relative;
-    top: 1.5rem;
-    left: 1.5rem;
-    border-color: ${({ item }) => rarityColor(item)};
-    box-shadow: ${({ item }) => `0 0 5px 2px ${rarityColor(item)}`} inset, ${({
-  item,
-}) => `0 0 4px 3px ${rarityColor(item)}`};
-    //background-color: ${({ item }) => rarityColor(item)};
-  }
-
-`;