@rpg-engine/long-bow 0.5.21 → 0.5.23

package/package.json

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

package/src/components/Abstractions/SlotsContainer.tsx

@@ -13,6 +13,7 @@ interface IProps {
   onOutsideClick?: () => void;
   initialPosition?: IPosition;
   scale?: number;
+  width?: string;
 }
 
 export const SlotsContainer: React.FC<IProps> = ({
@@ -25,6 +26,7 @@ export const SlotsContainer: React.FC<IProps> = ({
   onOutsideClick,
   initialPosition,
   scale,
+  width,
 }) => {
   return (
     <DraggableContainer
@@ -35,7 +37,7 @@ export const SlotsContainer: React.FC<IProps> = ({
           onClose();
         }
       }}
-      width="450px"
+      width={width ?? '415px'}
       cancelDrag=".item-container-body, #shortcuts_list"
       onPositionChange={({ x, y }) => {
         if (onPositionChange) {

package/src/components/Equipment/EquipmentSet.tsx

@@ -10,7 +10,9 @@ import React from 'react';
 import styled from 'styled-components';
 import { IPosition } from '../../types/eventTypes';
 import { DraggableContainer } from '../DraggableContainer';
+import DraggedItem from '../Item/Inventory/DraggedItem';
 import { ItemSlot } from '../Item/Inventory/ItemSlot';
+import { DraggingProvider } from '../Item/Inventory/context/DraggingContext';
 import { RPGUIContainerTypes } from '../RPGUIContainer';
 
 export interface IEquipmentSetProps {
@@ -159,25 +161,28 @@ export const EquipmentSet: React.FC<IEquipmentSetProps> = ({
   };
 
   return (
-    <DraggableContainer
-      title={'Equipments'}
-      type={RPGUIContainerTypes.Framed}
-      onCloseButton={() => {
-        if (onClose) onClose();
-      }}
-      width="330px"
-      cancelDrag=".equipment-container-body"
-      scale={scale}
-      initialPosition={initialPosition}
-      onPositionChangeEnd={onPositionChangeEnd}
-      onPositionChangeStart={onPositionChangeStart}
-    >
-      <EquipmentSetContainer className="equipment-container-body">
-        <EquipmentColumn>{onRenderEquipmentSlotRange(0, 3)}</EquipmentColumn>
-        <EquipmentColumn>{onRenderEquipmentSlotRange(3, 7)}</EquipmentColumn>
-        <EquipmentColumn>{onRenderEquipmentSlotRange(7, 10)}</EquipmentColumn>
-      </EquipmentSetContainer>
-    </DraggableContainer>
+    <DraggingProvider>
+      <DraggedItem atlasIMG={atlasIMG} atlasJSON={atlasJSON} />
+      <DraggableContainer
+        title={'Equipments'}
+        type={RPGUIContainerTypes.Framed}
+        onCloseButton={() => {
+          if (onClose) onClose();
+        }}
+        width="330px"
+        cancelDrag=".equipment-container-body"
+        scale={scale}
+        initialPosition={initialPosition}
+        onPositionChangeEnd={onPositionChangeEnd}
+        onPositionChangeStart={onPositionChangeStart}
+      >
+        <EquipmentSetContainer className="equipment-container-body">
+          <EquipmentColumn>{onRenderEquipmentSlotRange(0, 3)}</EquipmentColumn>
+          <EquipmentColumn>{onRenderEquipmentSlotRange(3, 7)}</EquipmentColumn>
+          <EquipmentColumn>{onRenderEquipmentSlotRange(7, 10)}</EquipmentColumn>
+        </EquipmentSetContainer>
+      </DraggableContainer>
+    </DraggingProvider>
   );
 };
 

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

@@ -0,0 +1,107 @@
+import { getItemTextureKeyPath } from '@rpg-engine/shared';
+import React from 'react';
+import styled from 'styled-components';
+import { useCursorPosition } from '../../../hooks/useMousePosition';
+import { SpriteFromAtlas } from '../../shared/SpriteFromAtlas';
+import { onRenderStackInfo } from './ItemSlotQty/ItemSlotQty';
+import { useDragging } from './context/DraggingContext';
+
+const CONTAINER_SIZE = 32;
+const OFFSET = CONTAINER_SIZE / 2;
+
+interface IProps {
+  atlasJSON: any;
+  atlasIMG: any;
+}
+
+export const DraggedItem = ({
+  atlasJSON,
+  atlasIMG,
+}: IProps): JSX.Element | null => {
+  const { item } = useDragging();
+  const { x, y } = useCursorPosition();
+
+  if (!item) {
+    return null;
+  }
+
+  const centeredX = x - OFFSET;
+  const centeredY = y - OFFSET;
+
+  const stackInfo = onRenderStackInfo(item?._id ?? '', item?.stackQty ?? 0);
+
+  return (
+    <Container>
+      <SpriteContainer x={centeredX} y={centeredY}>
+        <SpriteFromAtlas
+          key={item._id}
+          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"
+        />
+        {stackInfo}
+      </SpriteContainer>
+    </Container>
+  );
+};
+
+interface IContainer {
+  x: number;
+  y: number;
+}
+
+const pulse = `
+  @keyframes pulse {
+    0%, 100% {
+      transform: scale(1) rotate(-3deg);
+    }
+    50% {
+      transform: scale(0.95) rotate(-3deg);
+    }
+  }
+`;
+
+const Container = styled.div`
+  position: relative;
+`;
+
+const SpriteContainer = styled.div.attrs<IContainer>(props => ({
+  style: {
+    left: `${props.x}px`,
+    top: `${props.y}px`,
+  },
+}))<IContainer>`
+  ${pulse}
+
+  position: absolute;
+  z-index: 100;
+  pointer-events: none;
+
+  width: ${CONTAINER_SIZE}px;
+  height: ${CONTAINER_SIZE}px;
+
+  transform: rotate(-3deg);
+
+  filter: grayscale(100%);
+  opacity: 0.35;
+
+  animation: pulse 2s infinite;
+
+  .item-slot-qty {
+    position: absolute;
+    bottom: 0;
+    margin-left: 0.8rem;
+  }
+`;
+
+export default DraggedItem;

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

@@ -9,12 +9,13 @@ import {
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { SlotsContainer } from '../../Abstractions/SlotsContainer';
-import { ItemQuantitySelector } from './ItemQuantitySelector';
 
 import { IPosition } from '../../../types/eventTypes';
-import ModalPortal from '../../Abstractions/ModalPortal';
 import { ShortcutsSetter } from '../../Shortcuts/ShortcutsSetter';
+import { DraggedItem } from './DraggedItem';
+import { ItemQuantitySelectorModal } from './ItemQuantitySelectorModal';
 import { ItemSlot } from './ItemSlot';
+import { DraggingProvider } from './context/DraggingContext';
 
 export interface IItemContainerProps {
   itemContainer: IItemContainer;
@@ -157,7 +158,8 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
   };
 
   return (
-    <>
+    <DraggingProvider>
+      <DraggedItem atlasIMG={atlasIMG} atlasJSON={atlasJSON} />
       <SlotsContainer
         title={itemContainer.name || 'Container'}
         onClose={onClose}
@@ -183,31 +185,12 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
         </ItemsContainer>
       </SlotsContainer>
       {quantitySelect.isOpen && (
-        <ModalPortal>
-          <QuantitySelectorContainer>
-            <ItemQuantitySelector
-              quantity={quantitySelect.maxQuantity}
-              onConfirm={quantity => {
-                quantitySelect.callback(quantity);
-                setQuantitySelect({
-                  isOpen: false,
-                  maxQuantity: 1,
-                  callback: () => {},
-                });
-              }}
-              onClose={() => {
-                quantitySelect.callback(-1);
-                setQuantitySelect({
-                  isOpen: false,
-                  maxQuantity: 1,
-                  callback: () => {},
-                });
-              }}
-            />
-          </QuantitySelectorContainer>
-        </ModalPortal>
+        <ItemQuantitySelectorModal
+          quantitySelect={quantitySelect}
+          setQuantitySelect={setQuantitySelect}
+        />
       )}
-    </>
+    </DraggingProvider>
   );
 };
 
@@ -218,18 +201,5 @@ const ItemsContainer = styled.div`
   max-height: 270px;
   overflow-y: auto;
   overflow-x: hidden;
-  width: 450px;
-`;
-
-const QuantitySelectorContainer = styled.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  z-index: 100;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: rgba(0, 0, 0, 0.5);
+  width: 415px;
 `;

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

@@ -0,0 +1,59 @@
+import React from 'react';
+import styled from 'styled-components';
+import ModalPortal from '../../Abstractions/ModalPortal';
+import { ItemQuantitySelector } from './ItemQuantitySelector';
+
+export interface IQuantitySelect {
+  isOpen: boolean;
+  maxQuantity: number;
+  callback: (_quantity: number) => void;
+}
+
+interface IProps {
+  quantitySelect: IQuantitySelect;
+  setQuantitySelect: React.Dispatch<React.SetStateAction<IQuantitySelect>>;
+}
+
+export const ItemQuantitySelectorModal = ({
+  quantitySelect,
+  setQuantitySelect,
+}: IProps) => {
+  return (
+    <ModalPortal>
+      <QuantitySelectorContainer>
+        <ItemQuantitySelector
+          quantity={quantitySelect.maxQuantity}
+          onConfirm={quantity => {
+            quantitySelect.callback(quantity);
+            setQuantitySelect({
+              isOpen: false,
+              maxQuantity: 1,
+              callback: () => {},
+            });
+          }}
+          onClose={() => {
+            quantitySelect.callback(-1);
+            setQuantitySelect({
+              isOpen: false,
+              maxQuantity: 1,
+              callback: () => {},
+            });
+          }}
+        />
+      </QuantitySelectorContainer>
+    </ModalPortal>
+  );
+};
+
+const QuantitySelectorContainer = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 100;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.5);
+`;

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

@@ -1,5 +1,4 @@
 import {
-  getItemTextureKeyPath,
   IEquipmentSet,
   IItem,
   IItemContainer,
@@ -13,16 +12,11 @@ import { observer } from 'mobx-react-lite';
 import React, { useEffect, useRef, useState } from 'react';
 import Draggable from 'react-draggable';
 import styled from 'styled-components';
-import { v4 as uuidv4 } from 'uuid';
-import { uiFonts } from '../../../constants/uiFonts';
 import { IPosition } from '../../../types/eventTypes';
-import { RelativeListMenu } from '../../RelativeListMenu';
-import { Ellipsis } from '../../shared/Ellipsis';
-import { SpriteFromAtlas } from '../../shared/SpriteFromAtlas';
-import { ItemTooltip } from '../Cards/ItemTooltip';
-import { MobileItemTooltip } from '../Cards/MobileItemTooltip';
-import { ErrorBoundary } from './ErrorBoundary';
-import { generateContextMenu, IContextMenuItem } from './itemContainerHelper';
+import { ItemSlotRenderer } from './ItemSlotRenderer';
+import { ItemSlotToolTips } from './ItemSlotTooltips';
+import { useDragging } from './context/DraggingContext';
+import { IContextMenuItem, generateContextMenu } from './itemContainerHelper';
 
 export const EquipmentSlotSpriteByType: any = {
   Neck: 'accessories/corruption-necklace.png',
@@ -123,6 +117,8 @@ export const ItemSlot: React.FC<IProps> = observer(
     const [dropPosition, setDropPosition] = useState<IPosition | null>(null);
     const dragContainer = useRef<HTMLDivElement>(null);
 
+    const { setDraggingItem } = useDragging();
+
     const [contextActions, setContextActions] = useState<IContextMenuItem[]>(
       []
     );
@@ -144,134 +140,12 @@ export const ItemSlot: React.FC<IProps> = observer(
       }
     }, [dropPosition]);
 
-    const getStackInfo = (itemId: string, stackQty: number) => {
-      const isFractionalStackQty = stackQty % 1 !== 0;
-      const isLargerThan999 = stackQty > 999;
-
-      let qtyClassName = 'regular';
-      if (isLargerThan999) qtyClassName = 'small';
-      if (isFractionalStackQty) qtyClassName = 'xsmall';
-
-      if (stackQty > 1) {
-        return (
-          <ItemQtyContainer key={`qty-${itemId}`}>
-            <Ellipsis maxLines={1} maxWidth="48px">
-              <ItemQty className={qtyClassName}>
-                {Math.round(stackQty * 100) / 100}{' '}
-              </ItemQty>
-            </Ellipsis>
-          </ItemQtyContainer>
-        );
-      }
-      return undefined;
-    };
-
-    const renderItem = (itemToRender: IItem | null) => {
-      const element = [];
-
-      if (itemToRender?.texturePath) {
-        element.push(
-          <ErrorBoundary key={itemToRender._id}>
-            <SpriteFromAtlas
-              key={itemToRender._id}
-              atlasIMG={atlasIMG}
-              atlasJSON={atlasJSON}
-              spriteKey={getItemTextureKeyPath(
-                {
-                  key: itemToRender.texturePath,
-                  texturePath: itemToRender.texturePath,
-                  stackQty: itemToRender.stackQty || 1,
-                  isStackable: itemToRender.isStackable,
-                },
-                atlasJSON
-              )}
-              imgScale={3}
-              imgClassname="sprite-from-atlas-img--item"
-            />
-          </ErrorBoundary>
-        );
-      }
-      const stackInfo = getStackInfo(
-        itemToRender?._id ?? '',
-        itemToRender?.stackQty ?? 0
-      );
-      if (stackInfo) {
-        element.push(stackInfo);
-      }
-
-      return element;
-    };
-
-    const renderEquipment = (itemToRender: IItem | null) => {
-      if (
-        itemToRender?.texturePath &&
-        itemToRender.allowedEquipSlotType?.includes(slotSpriteMask!)
-      ) {
-        const element = [];
-
-        element.push(
-          <ErrorBoundary key={itemToRender._id}>
-            <SpriteFromAtlas
-              key={itemToRender._id}
-              atlasIMG={atlasIMG}
-              atlasJSON={atlasJSON}
-              spriteKey={getItemTextureKeyPath(
-                {
-                  key: itemToRender.texturePath,
-                  texturePath: itemToRender.texturePath,
-                  stackQty: itemToRender.stackQty || 1,
-                  isStackable: itemToRender.isStackable,
-                },
-                atlasJSON
-              )}
-              imgScale={3}
-              imgClassname="sprite-from-atlas-img--item"
-            />
-          </ErrorBoundary>
-        );
-        const stackInfo = getStackInfo(
-          itemToRender?._id ?? '',
-          itemToRender?.stackQty ?? 0
-        );
-        if (stackInfo) {
-          element.push(stackInfo);
-        }
-        return element;
-      } else {
-        return (
-          <ErrorBoundary key={uuidv4()}>
-            <SpriteFromAtlas
-              key={uuidv4()}
-              atlasIMG={atlasIMG}
-              atlasJSON={atlasJSON}
-              spriteKey={EquipmentSlotSpriteByType[slotSpriteMask!]}
-              imgScale={3}
-              grayScale={true}
-              opacity={0.4}
-              imgClassname="sprite-from-atlas-img--item"
-            />
-          </ErrorBoundary>
-        );
-      }
-    };
-
-    const onRenderSlot = (itemToRender: IItem | null) => {
-      switch (containerType) {
-        case ItemContainerType.Equipment:
-          return renderEquipment(itemToRender);
-        case ItemContainerType.Inventory:
-          return renderItem(itemToRender);
-        default:
-          return renderItem(itemToRender);
-      }
-    };
-
     const resetItem = () => {
       setTooltipVisible(false);
       setWasDragged(false);
     };
 
-    const onSuccesfulDrag = (quantity?: number) => {
+    const onSuccessfulDrag = (quantity?: number) => {
       resetItem();
 
       if (quantity === -1) {
@@ -321,6 +195,8 @@ export const ItemSlot: React.FC<IProps> = observer(
           scale={dragScale}
           disabled={onDragStart === undefined || onDragEnd === undefined}
           onStop={(e, data) => {
+            setDraggingItem(null);
+
             const target = e.target as HTMLElement;
             if (
               target?.id.includes('shortcutSetter') &&
@@ -371,14 +247,14 @@ export const ItemSlot: React.FC<IProps> = observer(
                     item.stackQty !== 1 &&
                     openQuantitySelector
                   )
-                    openQuantitySelector(item.stackQty, onSuccesfulDrag);
-                  else onSuccesfulDrag(item.stackQty);
+                    openQuantitySelector(item.stackQty, onSuccessfulDrag);
+                  else onSuccessfulDrag(item.stackQty);
                 } else {
                   resetItem();
                   setIsFocused(false);
                   setDragPosition({ x: 0, y: 0 });
                 }
-              }, 100);
+              }, 50);
             } else if (item) {
               let isTouch = false;
               if (
@@ -410,6 +286,8 @@ export const ItemSlot: React.FC<IProps> = observer(
               return;
             }
 
+            setDraggingItem(item);
+
             if (onDragStart && containerType) {
               onDragStart(item, slotIndex, containerType);
             }
@@ -448,54 +326,37 @@ export const ItemSlot: React.FC<IProps> = observer(
               setTooltipVisible(false);
             }}
           >
-            {onRenderSlot(item)}
+            <ItemSlotRenderer
+              item={item}
+              slotSpriteMask={slotSpriteMask}
+              atlasIMG={atlasIMG}
+              atlasJSON={atlasJSON}
+              containerType={containerType}
+            />
           </ItemContainer>
         </Draggable>
 
-        {isTooltipVisible && item && !isFocused && (
-          <ItemTooltip
-            item={item}
-            atlasIMG={atlasIMG}
-            atlasJSON={atlasJSON}
-            equipmentSet={equipmentSet}
-          />
-        )}
-
-        {isTooltipMobileVisible && item && (
-          <MobileItemTooltip
-            item={item}
-            atlasIMG={atlasIMG}
-            atlasJSON={atlasJSON}
-            equipmentSet={equipmentSet}
-            closeTooltip={() => {
-              setIsTooltipMobileVisible(false);
-            }}
-            scale={dragScale}
-            options={contextActions}
-            onSelected={(optionId: string) => {
-              setIsContextMenuVisible(false);
-              if (item) {
-                onSelected?.(optionId, item);
-              }
-            }}
-          />
-        )}
-
-        {!isContextMenuDisabled && isContextMenuVisible && contextActions && (
-          <RelativeListMenu
-            options={contextActions}
-            onSelected={(optionId: string) => {
-              setIsContextMenuVisible(false);
-              if (item) {
-                onSelected?.(optionId, item);
-              }
-            }}
-            onOutsideClick={() => {
-              setIsContextMenuVisible(false);
-            }}
-            pos={contextMenuPosition}
-          />
-        )}
+        <ItemSlotToolTips
+          isTooltipVisible={isTooltipVisible}
+          isTooltipMobileVisible={isTooltipMobileVisible}
+          setIsTooltipMobileVisible={setIsTooltipMobileVisible}
+          isFocused={isFocused}
+          isContextMenuVisible={isContextMenuVisible}
+          isContextMenuDisabled={isContextMenuDisabled}
+          item={item}
+          contextActions={contextActions}
+          contextMenuPosition={contextMenuPosition}
+          dragScale={dragScale}
+          setIsContextMenuVisible={setIsContextMenuVisible}
+          onSelected={(optionId: string, item: IItem) => {
+            setIsContextMenuVisible(false);
+            if (onSelected) onSelected(optionId, item);
+          }}
+          atlasIMG={atlasIMG}
+          atlasJSON={atlasJSON}
+          equipmentSet={equipmentSet}
+          setIsTooltipVisible={setTooltipVisible}
+        />
       </Container>
     );
   }
@@ -518,6 +379,7 @@ export const rarityColor = (item: IItem | null) => {
 
 interface ContainerTypes {
   item: IItem | null;
+  containerType?: ItemContainerType | null;
   isSelectingShortcut?: boolean;
 }
 
@@ -525,9 +387,10 @@ const Container = styled.div<ContainerTypes>`
   margin: 0.1rem;
 
   .react-draggable-dragging {
-    opacity: 0.5;
+    display: none; 
   }
-
+  
+  
   .sprite-from-atlas-img--item {
     position: relative;
     top: 1.5rem;
@@ -568,33 +431,9 @@ const Container = styled.div<ContainerTypes>`
 `;
 
 const ItemContainer = styled.div<{ isFocused?: boolean }>`
-  width: 100%;
-  height: 100%;
+  width: 64px;
+  height: 64px;
+  // This fixes an issue where if you drag an item inside of a scrollable container (overflow), its cut out
   position: relative;
-
-  ${props => props.isFocused && 'z-index: 100; pointer-events: none;'}
-`;
-
-const ItemQtyContainer = styled.div`
-  position: relative;
-  width: 85%;
-  height: 16px;
-  top: 25px;
-  left: 2px;
-  pointer-events: none;
-
-  display: flex;
-  justify-content: flex-end;
-`;
-
-const ItemQty = styled.span`
-  &.regular {
-    font-size: ${uiFonts.size.small};
-  }
-  &.small {
-    font-size: ${uiFonts.size.xsmall};
-  }
-  &.xsmall {
-    font-size: ${uiFonts.size.xxsmall};
-  }
+  ${props => props.isFocused && 'z-index: 100; pointer-events: none;'};
 `;