@rpg-engine/long-bow 0.2.95 → 0.2.97

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.2.95",
+  "version": "0.2.97",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -83,7 +83,7 @@
   },
   "dependencies": {
     "@rollup/plugin-image": "^2.1.1",
-    "@rpg-engine/shared": "^0.6.40",
+    "@rpg-engine/shared": "^0.6.49",
     "dayjs": "^1.11.2",
     "fs-extra": "^10.1.0",
     "is-mobile": "^3.1.1",

package/src/components/DraggableContainer.tsx

@@ -123,7 +123,7 @@ const CloseButton = styled.div`
   right: 0px;
   color: white;
   z-index: 22;
-  font-size: 0.8rem;
+  font-size: 1.1rem;
 `;
 
 const TitleContainer = styled.div`

package/src/components/Equipment/EquipmentSet.tsx

@@ -34,6 +34,7 @@ export interface IEquipmentSetProps {
   ) => void;
   onItemOutsideDrop?: (item: IItem, position: IPosition) => void;
   checkIfItemCanBeMoved: () => boolean;
+  checkIfItemShouldDragEnd?: () => boolean;
   onMouseOver?: (e: any, slotIndex: number, item: IItem | null) => void;
   onSelected?: (optionId: string) => void;
   initialPosition?: { x: number; y: number };
@@ -55,6 +56,7 @@ export const EquipmentSet: React.FC<IEquipmentSetProps> = ({
   onItemPlaceDrop,
   onItemOutsideDrop,
   checkIfItemCanBeMoved,
+  checkIfItemShouldDragEnd,
 }) => {
   const {
     neck,
@@ -133,6 +135,7 @@ export const EquipmentSet: React.FC<IEquipmentSetProps> = ({
             if (onItemDragEnd) onItemDragEnd(quantity);
           }}
           checkIfItemCanBeMoved={checkIfItemCanBeMoved}
+          checkIfItemShouldDragEnd={checkIfItemShouldDragEnd}
           onPlaceDrop={(item, slotIndex, itemContainerType) => {
             if (onItemPlaceDrop)
               onItemPlaceDrop(item, slotIndex, itemContainerType);

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

@@ -28,6 +28,7 @@ export interface IItemContainerProps {
     itemContainerType: ItemContainerType | null
   ) => void;
   checkIfItemCanBeMoved: () => boolean;
+  checkIfItemShouldDragEnd?: () => boolean;
   onMouseOver?: (e: any, slotIndex: number, item: IItem | null) => void;
   onSelected?: (optionId: string, item: IItem) => void;
   type: ItemContainerType;
@@ -53,6 +54,7 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
   onOutsideDrop,
   checkIfItemCanBeMoved,
   initialPosition,
+  checkIfItemShouldDragEnd,
 }) => {
   const [quantitySelect, setQuantitySelect] = useState({
     isOpen: false,
@@ -88,6 +90,7 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
             if (onItemDragEnd) onItemDragEnd(quantity);
           }}
           checkIfItemCanBeMoved={checkIfItemCanBeMoved}
+          checkIfItemShouldDragEnd={checkIfItemShouldDragEnd}
           openQuantitySelector={(maxQuantity, callback) => {
             setQuantitySelect({
               isOpen: true,

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

@@ -62,6 +62,7 @@ interface IProps {
   onDragEnd: (quantity?: number) => void;
   onOutsideDrop?: (item: IItem, position: IPosition) => void;
   checkIfItemCanBeMoved: () => boolean;
+  checkIfItemShouldDragEnd?: () => boolean;
   openQuantitySelector?: (maxQuantity: number, callback: () => void) => void;
   onPlaceDrop: (
     item: IItem | null,
@@ -92,6 +93,7 @@ export const ItemSlot: React.FC<IProps> = observer(
     onOutsideDrop: onDrop,
     checkIfItemCanBeMoved,
     openQuantitySelector,
+    checkIfItemShouldDragEnd,
   }) => {
     const [isTooltipVisible, setTooltipVisible] = useState(false);
 
@@ -109,6 +111,7 @@ export const ItemSlot: React.FC<IProps> = observer(
 
     useEffect(() => {
       setDragPosition({ x: 0, y: 0 });
+      setIsFocused(false);
 
       if (item) {
         setContextActions(generateContextMenu(item, containerType));
@@ -238,7 +241,6 @@ export const ItemSlot: React.FC<IProps> = observer(
 
     const resetItem = () => {
       setTooltipVisible(false);
-      setIsFocused(false);
       setWasDragged(false);
     };
 
@@ -305,6 +307,9 @@ export const ItemSlot: React.FC<IProps> = observer(
 
               setTimeout(() => {
                 if (checkIfItemCanBeMoved()) {
+                  if (checkIfItemShouldDragEnd && !checkIfItemShouldDragEnd())
+                    return;
+
                   if (
                     item.stackQty &&
                     item.stackQty !== 1 &&
@@ -314,6 +319,7 @@ export const ItemSlot: React.FC<IProps> = observer(
                   else onSuccesfulDrag(item.stackQty);
                 } else {
                   resetItem();
+                  setIsFocused(false);
                   setDragPosition({ x: 0, y: 0 });
                 }
               }, 100);
@@ -360,7 +366,9 @@ export const ItemSlot: React.FC<IProps> = observer(
           </ItemContainer>
         </Draggable>
 
-        {isTooltipVisible && item && <ItemTooltip label={item.name} />}
+        {isTooltipVisible && item && !isFocused && (
+          <ItemTooltip label={item.name} />
+        )}
 
         {!isContextMenuDisabled && isContextMenuVisible && contextActions && (
           <RelativeListMenu

package/src/components/SkillsContainer.tsx

@@ -67,7 +67,6 @@ export const SkillsContainer: React.FC<ISkillContainerProps> = ({
     for (const [key, value] of Object.entries(skillCategory.values)) {
       //@ts-ignore
       const skillDetails = (skill[key] as unknown) as ISkillDetails;
-   
 
       output.push(
         <SkillProgressBar
@@ -164,5 +163,5 @@ const CloseButton = styled.div`
   right: 2px;
   color: white;
   z-index: 22;
-  font-size: 0.7rem;
+  font-size: 1.1rem;
 `;

package/src/stories/ItemContainer.stories.tsx

@@ -81,8 +81,9 @@ const Template: Story<IItemContainerProps> = () => {
               newContainer.slots[dropSlot] = dragItem;
               newContainer.slots[dragSlot] = null;
             }
-
-            setItemContainer(newContainer);
+            setTimeout(() => {
+              setItemContainer(newContainer);
+            }, 100);
           }
 
           allowedToDrop = false;