@rpg-engine/long-bow 0.3.50 → 0.3.52

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

@@ -1,465 +1,502 @@
-import {
-  getItemTextureKeyPath,
-  IItem,
-  IItemContainer,
-  ItemContainerType,
-  ItemRarities,
-  ItemSlotType,
-  ItemType,
-} from '@rpg-engine/shared';
-
-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 { ErrorBoundary } from './ErrorBoundary';
-import { generateContextMenu, IContextMenuItem } from './itemContainerHelper';
-
-const EquipmentSlotSpriteByType: any = {
-  Neck: 'accessories/corruption-necklace.png',
-  LeftHand: 'swords/broad-sword.png',
-  Ring: 'rings/iron-ring.png',
-  Head: 'helmets/viking-helmet.png',
-  Torso: 'armors/iron-armor.png',
-  Legs: 'legs/studded-legs.png',
-  Feet: 'boots/iron-boots.png',
-  Inventory: 'containers/bag.png',
-  RightHand: 'shields/plate-shield.png',
-  Accessory: 'ranged-weapons/arrow.png',
-};
-
-interface IProps {
-  slotIndex: number;
-  item: IItem | null;
-  itemContainer?: IItemContainer | null;
-  itemContainerType: ItemContainerType | null;
-  slotSpriteMask?: ItemSlotType | null;
-  onSelected: (selectedOption: string, item: IItem) => void;
-  onMouseOver: (
-    event: any,
-    slotIndex: number,
-    item: IItem | null,
-    x: number,
-    y: number
-  ) => void;
-  onMouseOut?: () => void;
-  onClick: (
-    ItemType: ItemType,
-    itemContainerType: ItemContainerType | null,
-    item: IItem
-  ) => void;
-  onDragStart: (
-    item: IItem,
-    slotIndex: number,
-    itemContainerType: ItemContainerType | null
-  ) => void;
-  onDragEnd: (quantity?: number) => void;
-  onOutsideDrop?: (item: IItem, position: IPosition) => void;
-  dragScale?: number;
-  checkIfItemCanBeMoved: () => boolean;
-  checkIfItemShouldDragEnd?: () => boolean;
-  openQuantitySelector?: (maxQuantity: number, callback: () => void) => void;
-  onPlaceDrop: (
-    item: IItem | null,
-    slotIndex: number,
-    itemContainerType: ItemContainerType | null
-  ) => void;
-  atlasJSON: any;
-  atlasIMG: any;
-  isContextMenuDisabled?: boolean;
-}
-
-export const ItemSlot: React.FC<IProps> = observer(
-  ({
-    slotIndex,
-    item,
-    itemContainerType: containerType,
-    slotSpriteMask,
-    onMouseOver,
-    onMouseOut,
-    onClick,
-    onSelected,
-    atlasJSON,
-    atlasIMG,
-    isContextMenuDisabled = false,
-    onDragEnd,
-    onDragStart,
-    onPlaceDrop,
-    onOutsideDrop: onDrop,
-    checkIfItemCanBeMoved,
-    openQuantitySelector,
-    checkIfItemShouldDragEnd,
-    dragScale,
-  }) => {
-    const [isTooltipVisible, setTooltipVisible] = useState(false);
-
-    const [isContextMenuVisible, setIsContextMenuVisible] = useState(false);
-
-    const [isFocused, setIsFocused] = useState(false);
-    const [wasDragged, setWasDragged] = useState(false);
-    const [dragPosition, setDragPosition] = useState<IPosition>({ x: 0, y: 0 });
-    const [dropPosition, setDropPosition] = useState<IPosition | null>(null);
-    const dragContainer = useRef<HTMLDivElement>(null);
-
-    const [contextActions, setContextActions] = useState<IContextMenuItem[]>(
-      []
-    );
-
-    useEffect(() => {
-      setDragPosition({ x: 0, y: 0 });
-      setIsFocused(false);
-
-      if (item) {
-        setContextActions(generateContextMenu(item, containerType));
-      }
-    }, [item]);
-
-    useEffect(() => {
-      if (onDrop && item && dropPosition) {
-        onDrop(item, dropPosition);
-      }
-    }, [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}> {stackQty} </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,
-                },
-                atlasJSON
-              )}
-              imgScale={3}
-            />
-          </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,
-                },
-                atlasJSON
-              )}
-              imgScale={3}
-            />
-          </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}
-            />
-          </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);
-      setIsFocused(false);
-    };
-
-    const onSuccesfulDrag = (quantity?: number) => {
-      resetItem();
-
-      if (quantity === -1) setDragPosition({ x: 0, y: 0 });
-      else if (item) {
-        onDragEnd(quantity);
-      }
-    };
-
-    return (
-      <Container
-        item={item}
-        className="rpgui-icon empty-slot"
-        onMouseUp={() => {
-          const data = item ? item : null;
-          if (onPlaceDrop) onPlaceDrop(data, slotIndex, containerType);
-        }}
-        onTouchEnd={e => {
-          const { clientX, clientY } = e.changedTouches[0];
-          const simulatedEvent = new MouseEvent('mouseup', {
-            clientX,
-            clientY,
-            bubbles: true,
-          });
-
-          document
-            .elementFromPoint(clientX, clientY)
-            ?.dispatchEvent(simulatedEvent);
-        }}
-      >
-        <Draggable
-          defaultClassName={item ? 'draggable' : 'empty-slot'}
-          scale={dragScale}
-          onStop={(e, data) => {
-            if (wasDragged && item) {
-              //@ts-ignore
-              const classes: string[] = Array.from(e.target?.classList);
-
-              const isOutsideDrop =
-                classes.some(elm => {
-                  return elm.includes('rpgui-content');
-                }) || classes.length === 0;
-
-              if (isOutsideDrop) {
-                setDropPosition({
-                  x: data.x,
-                  y: data.y,
-                });
-              }
-
-              setWasDragged(false);
-
-              const target = dragContainer.current;
-              if (!target || !wasDragged) return;
-
-              const style = window.getComputedStyle(target);
-              const matrix = new DOMMatrixReadOnly(style.transform);
-              const x = matrix.m41;
-              const y = matrix.m42;
-
-              setDragPosition({ x, y });
-
-              setTimeout(() => {
-                if (checkIfItemCanBeMoved()) {
-                  if (checkIfItemShouldDragEnd && !checkIfItemShouldDragEnd())
-                    return;
-
-                  if (
-                    item.stackQty &&
-                    item.stackQty !== 1 &&
-                    openQuantitySelector
-                  )
-                    openQuantitySelector(item.stackQty, onSuccesfulDrag);
-                  else onSuccesfulDrag(item.stackQty);
-                } else {
-                  resetItem();
-                  setDragPosition({ x: 0, y: 0 });
-                }
-              }, 100);
-            } else if (item) {
-              if (!isContextMenuDisabled)
-                setIsContextMenuVisible(!isContextMenuVisible);
-
-              onClick(item.type, containerType, item);
-            }
-          }}
-          onStart={() => {
-            if (!item) {
-              return;
-            }
-
-            if (onDragStart) {
-              onDragStart(item, slotIndex, containerType);
-            }
-          }}
-          onDrag={(_e, data) => {
-            if (
-              Math.abs(data.x - dragPosition.x) > 5 ||
-              Math.abs(data.y - dragPosition.y) > 5
-            ) {
-              setWasDragged(true);
-              setIsFocused(true);
-            }
-          }}
-          position={dragPosition}
-          cancel=".empty-slot"
-        >
-          <ItemContainer
-            ref={dragContainer}
-            isFocused={isFocused}
-            onMouseOver={event => {
-              onMouseOver(event, slotIndex, item, event.clientX, event.clientY);
-            }}
-            onMouseOut={() => {
-              if (onMouseOut) onMouseOut();
-            }}
-            onMouseEnter={() => {
-              setTooltipVisible(true);
-            }}
-            onMouseLeave={() => {
-              setTooltipVisible(false);
-            }}
-          >
-            {onRenderSlot(item)}
-          </ItemContainer>
-        </Draggable>
-
-        {isTooltipVisible && item && !isFocused && (
-          <ItemTooltip label={item.name} />
-        )}
-
-        {!isContextMenuDisabled && isContextMenuVisible && contextActions && (
-          <RelativeListMenu
-            options={contextActions}
-            onSelected={(optionId: string) => {
-              setIsContextMenuVisible(false);
-              if (item) {
-                onSelected(optionId, item);
-              }
-            }}
-            onOutsideClick={() => {
-              setIsContextMenuVisible(false);
-            }}
-          />
-        )}
-      </Container>
-    );
-  }
-);
-
-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 'unset';
-  }
-};
-
-interface ContainerTypes {
-  item: IItem | null;
-}
-
-const Container = styled.div<ContainerTypes>`
-  margin: 0.1rem;
-  .sprite-from-atlas-img {
-    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)};
-  }
-  position: relative;
-`;
-
-const ItemContainer = styled.div<{ isFocused?: boolean }>`
-  width: 100%;
-  height: 100%;
-  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};
-  }
-`;
+import {
+  getItemTextureKeyPath,
+  IItem,
+  IItemContainer,
+  ItemContainerType,
+  ItemRarities,
+  ItemSlotType,
+  ItemType,
+} from '@rpg-engine/shared';
+
+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 { ErrorBoundary } from './ErrorBoundary';
+import { generateContextMenu, IContextMenuItem } from './itemContainerHelper';
+
+const EquipmentSlotSpriteByType: any = {
+  Neck: 'accessories/corruption-necklace.png',
+  LeftHand: 'swords/broad-sword.png',
+  Ring: 'rings/iron-ring.png',
+  Head: 'helmets/viking-helmet.png',
+  Torso: 'armors/iron-armor.png',
+  Legs: 'legs/studded-legs.png',
+  Feet: 'boots/iron-boots.png',
+  Inventory: 'containers/bag.png',
+  RightHand: 'shields/plate-shield.png',
+  Accessory: 'ranged-weapons/arrow.png',
+};
+
+interface IProps {
+  slotIndex: number;
+  item: IItem | null;
+  itemContainer?: IItemContainer | null;
+  itemContainerType: ItemContainerType | null;
+  slotSpriteMask?: ItemSlotType | null;
+  onSelected: (selectedOption: string, item: IItem) => void;
+  onMouseOver: (
+    event: any,
+    slotIndex: number,
+    item: IItem | null,
+    x: number,
+    y: number
+  ) => void;
+  onMouseOut?: () => void;
+  onClick: (
+    ItemType: ItemType,
+    itemContainerType: ItemContainerType | null,
+    item: IItem
+  ) => void;
+  onDragStart: (
+    item: IItem,
+    slotIndex: number,
+    itemContainerType: ItemContainerType | null
+  ) => void;
+  onDragEnd: (quantity?: number) => void;
+  onOutsideDrop?: (item: IItem, position: IPosition) => void;
+  dragScale?: number;
+  checkIfItemCanBeMoved: () => boolean;
+  checkIfItemShouldDragEnd?: () => boolean;
+  openQuantitySelector?: (maxQuantity: number, callback: () => void) => void;
+  onPlaceDrop: (
+    item: IItem | null,
+    slotIndex: number,
+    itemContainerType: ItemContainerType | null
+  ) => void;
+  atlasJSON: any;
+  atlasIMG: any;
+  isContextMenuDisabled?: boolean;
+  isSelectingShortcut?: boolean;
+}
+
+export const ItemSlot: React.FC<IProps> = observer(
+  ({
+    slotIndex,
+    item,
+    itemContainerType: containerType,
+    slotSpriteMask,
+    onMouseOver,
+    onMouseOut,
+    onClick,
+    onSelected,
+    atlasJSON,
+    atlasIMG,
+    isContextMenuDisabled = false,
+    onDragEnd,
+    onDragStart,
+    onPlaceDrop,
+    onOutsideDrop: onDrop,
+    checkIfItemCanBeMoved,
+    openQuantitySelector,
+    checkIfItemShouldDragEnd,
+    dragScale,
+    isSelectingShortcut,
+  }) => {
+    const [isTooltipVisible, setTooltipVisible] = useState(false);
+
+    const [isContextMenuVisible, setIsContextMenuVisible] = useState(false);
+
+    const [isFocused, setIsFocused] = useState(false);
+    const [wasDragged, setWasDragged] = useState(false);
+    const [dragPosition, setDragPosition] = useState<IPosition>({ x: 0, y: 0 });
+    const [dropPosition, setDropPosition] = useState<IPosition | null>(null);
+    const dragContainer = useRef<HTMLDivElement>(null);
+
+    const [contextActions, setContextActions] = useState<IContextMenuItem[]>(
+      []
+    );
+
+    useEffect(() => {
+      setDragPosition({ x: 0, y: 0 });
+      setIsFocused(false);
+
+      if (item) {
+        console.log(item);
+        setContextActions(generateContextMenu(item, containerType));
+      }
+    }, [item]);
+
+    useEffect(() => {
+      if (onDrop && item && dropPosition) {
+        onDrop(item, dropPosition);
+      }
+    }, [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}> {stackQty} </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,
+                },
+                atlasJSON
+              )}
+              imgScale={3}
+            />
+          </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,
+                },
+                atlasJSON
+              )}
+              imgScale={3}
+            />
+          </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}
+            />
+          </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) => {
+      resetItem();
+
+      if (quantity === -1) {
+        setDragPosition({ x: 0, y: 0 });
+        setIsFocused(false);
+      } else if (item) {
+        onDragEnd(quantity);
+      }
+    };
+
+    return (
+      <Container
+        item={item}
+        className="rpgui-icon empty-slot"
+        onMouseUp={() => {
+          const data = item ? item : null;
+          if (onPlaceDrop) onPlaceDrop(data, slotIndex, containerType);
+        }}
+        onTouchEnd={e => {
+          const { clientX, clientY } = e.changedTouches[0];
+          const simulatedEvent = new MouseEvent('mouseup', {
+            clientX,
+            clientY,
+            bubbles: true,
+          });
+
+          document
+            .elementFromPoint(clientX, clientY)
+            ?.dispatchEvent(simulatedEvent);
+        }}
+        isSelectingShortcut={
+          isSelectingShortcut &&
+          (item?.type === ItemType.Consumable || item?.type === ItemType.Tool)
+        }
+      >
+        <Draggable
+          axis={isSelectingShortcut ? 'none' : 'both'}
+          defaultClassName={item ? 'draggable' : 'empty-slot'}
+          scale={dragScale}
+          onStop={(e, data) => {
+            if (wasDragged && item && !isSelectingShortcut) {
+              //@ts-ignore
+              const classes: string[] = Array.from(e.target?.classList);
+
+              const isOutsideDrop =
+                classes.some(elm => {
+                  return elm.includes('rpgui-content');
+                }) || classes.length === 0;
+
+              if (isOutsideDrop) {
+                setDropPosition({
+                  x: data.x,
+                  y: data.y,
+                });
+              }
+
+              setWasDragged(false);
+
+              const target = dragContainer.current;
+              if (!target || !wasDragged) return;
+
+              const style = window.getComputedStyle(target);
+              const matrix = new DOMMatrixReadOnly(style.transform);
+              const x = matrix.m41;
+              const y = matrix.m42;
+
+              setDragPosition({ x, y });
+
+              setTimeout(() => {
+                if (checkIfItemCanBeMoved()) {
+                  if (checkIfItemShouldDragEnd && !checkIfItemShouldDragEnd())
+                    return;
+
+                  if (
+                    item.stackQty &&
+                    item.stackQty !== 1 &&
+                    openQuantitySelector
+                  )
+                    openQuantitySelector(item.stackQty, onSuccesfulDrag);
+                  else onSuccesfulDrag(item.stackQty);
+                } else {
+                  resetItem();
+                  setIsFocused(false);
+                  setDragPosition({ x: 0, y: 0 });
+                }
+              }, 100);
+            } else if (item) {
+              if (!isContextMenuDisabled && !isSelectingShortcut)
+                setIsContextMenuVisible(!isContextMenuVisible);
+
+              onClick(item.type, containerType, item);
+            }
+          }}
+          onStart={() => {
+            if (!item || isSelectingShortcut) {
+              return;
+            }
+
+            if (onDragStart) {
+              onDragStart(item, slotIndex, containerType);
+            }
+          }}
+          onDrag={(_e, data) => {
+            if (
+              Math.abs(data.x - dragPosition.x) > 5 ||
+              Math.abs(data.y - dragPosition.y) > 5
+            ) {
+              setWasDragged(true);
+              setIsFocused(true);
+            }
+          }}
+          position={dragPosition}
+          cancel=".empty-slot"
+        >
+          <ItemContainer
+            ref={dragContainer}
+            isFocused={isFocused}
+            onMouseOver={event => {
+              onMouseOver(event, slotIndex, item, event.clientX, event.clientY);
+            }}
+            onMouseOut={() => {
+              if (onMouseOut) onMouseOut();
+            }}
+            onMouseEnter={() => {
+              setTooltipVisible(true);
+            }}
+            onMouseLeave={() => {
+              setTooltipVisible(false);
+            }}
+          >
+            {onRenderSlot(item)}
+          </ItemContainer>
+        </Draggable>
+
+        {isTooltipVisible && item && !isFocused && (
+          <ItemTooltip label={item.name} />
+        )}
+
+        {!isContextMenuDisabled && isContextMenuVisible && contextActions && (
+          <RelativeListMenu
+            options={contextActions}
+            onSelected={(optionId: string) => {
+              setIsContextMenuVisible(false);
+              if (item) {
+                onSelected(optionId, item);
+              }
+            }}
+            onOutsideClick={() => {
+              setIsContextMenuVisible(false);
+            }}
+          />
+        )}
+      </Container>
+    );
+  }
+);
+
+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 'unset';
+  }
+};
+
+interface ContainerTypes {
+  item: IItem | null;
+  isSelectingShortcut?: boolean;
+}
+
+const Container = styled.div<ContainerTypes>`
+  margin: 0.1rem;
+  .sprite-from-atlas-img {
+    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)};
+  }
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    border-radius: 12px;
+    pointer-events: none;
+    animation: ${({ isSelectingShortcut }) =>
+      isSelectingShortcut ? 'bg-color-change 1s infinite' : 'none'};
+
+    @keyframes bg-color-change {
+      0% {
+        background-color: rgba(255 255 255 / 0.5);
+      }
+      50% {
+        background-color: transparent;
+      }
+      100% {
+        background-color: rgba(255 255 255 / 0.5);
+      }
+    }
+  }
+`;
+
+const ItemContainer = styled.div<{ isFocused?: boolean }>`
+  width: 100%;
+  height: 100%;
+  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};
+  }
+`;