@rpg-engine/long-bow 0.5.21 → 0.5.23

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

@@ -0,0 +1,70 @@
+import React from 'react';
+import styled from 'styled-components';
+import { uiFonts } from '../../../../constants/uiFonts';
+import { Ellipsis } from '../../../shared/Ellipsis';
+
+interface IProps {
+  itemId: string;
+  stackQty: number;
+  qtyClassName: string;
+}
+
+export const onRenderStackInfo = (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 (
+      <ItemSlotQty
+        itemId={itemId}
+        stackQty={stackQty}
+        qtyClassName={qtyClassName}
+      />
+    );
+  }
+  return undefined;
+};
+
+export const ItemSlotQty = ({
+  itemId,
+  stackQty,
+  qtyClassName,
+}: IProps): JSX.Element => {
+  return (
+    <ItemQtyContainer key={`qty-${itemId}`} className="item-slot-qty">
+      <Ellipsis maxLines={1} maxWidth="48px">
+        <ItemQty className={qtyClassName}>
+          {Math.round(stackQty * 100) / 100}{' '}
+        </ItemQty>
+      </Ellipsis>
+    </ItemQtyContainer>
+  );
+};
+
+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};
+  }
+`;

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

@@ -0,0 +1,92 @@
+import {
+  IItem,
+  ItemContainerType,
+  ItemSlotType,
+  getItemTextureKeyPath,
+} from '@rpg-engine/shared';
+import React from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { SpriteFromAtlas } from '../../shared/SpriteFromAtlas';
+import { ErrorBoundary } from './ErrorBoundary';
+import { EquipmentSlotSpriteByType } from './ItemSlot';
+import { onRenderStackInfo } from './ItemSlotQty/ItemSlotQty';
+
+interface IProps {
+  containerType: ItemContainerType | null | undefined;
+  atlasJSON: any;
+  atlasIMG: any;
+  slotSpriteMask: ItemSlotType | null | undefined;
+  item: IItem | null;
+}
+
+export const ItemSlotRenderer: React.FC<IProps> = ({
+  containerType,
+  atlasJSON,
+  atlasIMG,
+  slotSpriteMask,
+  item,
+}) => {
+  const renderItem = (itemToRender: IItem | null) => {
+    if (!itemToRender?.texturePath) {
+      return null;
+    }
+
+    return (
+      <ErrorBoundary key={itemToRender._id}>
+        <SpriteFromAtlas
+          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"
+        />
+        {onRenderStackInfo(itemToRender._id, itemToRender.stackQty ?? 0)}
+      </ErrorBoundary>
+    );
+  };
+
+  const renderEquipment = (itemToRender: IItem | null) => {
+    if (
+      !itemToRender?.texturePath ||
+      !itemToRender.allowedEquipSlotType?.includes(slotSpriteMask!)
+    ) {
+      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>
+      );
+    }
+
+    return renderItem(itemToRender);
+  };
+
+  const onRenderSlot = (itemToRender: IItem | null) => {
+    switch (containerType) {
+      case ItemContainerType.Equipment:
+        return renderEquipment(itemToRender);
+      case ItemContainerType.Inventory:
+        return renderItem(itemToRender);
+      default:
+        return null;
+    }
+  };
+
+  return <>{onRenderSlot(item)}</>;
+};

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

@@ -0,0 +1,93 @@
+import { IEquipmentSet, IItem } from '@rpg-engine/shared';
+import React from 'react';
+import { IPosition } from '../../../types/eventTypes';
+import { RelativeListMenu } from '../../RelativeListMenu';
+import { ItemTooltip } from '../Cards/ItemTooltip';
+import { MobileItemTooltip } from '../Cards/MobileItemTooltip';
+import { IContextMenuItem } from './itemContainerHelper';
+
+interface IProps {
+  isTooltipVisible: boolean;
+  isFocused: boolean;
+  isContextMenuVisible: boolean;
+  isContextMenuDisabled: boolean;
+  item: IItem | null;
+  isTooltipMobileVisible: boolean;
+  contextActions: IContextMenuItem[];
+  contextMenuPosition: IPosition;
+  dragScale: number | undefined;
+  setIsContextMenuVisible: (visible: boolean) => void;
+  setIsTooltipMobileVisible: (visible: boolean) => void;
+  setIsTooltipVisible: (visible: boolean) => void;
+  onSelected?: (optionId: string, item: IItem) => void;
+  atlasIMG: any;
+  atlasJSON: any;
+  equipmentSet?: IEquipmentSet | null;
+}
+
+export const ItemSlotToolTips = ({
+  isTooltipVisible,
+  isFocused,
+  isContextMenuVisible,
+  isContextMenuDisabled,
+  item,
+  contextActions,
+  contextMenuPosition,
+  dragScale,
+  setIsContextMenuVisible,
+  setIsTooltipMobileVisible,
+  isTooltipMobileVisible,
+  onSelected,
+  atlasIMG,
+  atlasJSON,
+  equipmentSet,
+}: IProps): JSX.Element => {
+  return (
+    <>
+      {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}
+        />
+      )}
+    </>
+  );
+};

package/src/components/Item/Inventory/context/DraggingContext.tsx

@@ -0,0 +1,26 @@
+import { IItem } from '@rpg-engine/shared';
+import React, { createContext, useContext, useState } from 'react';
+
+const DraggingContext = createContext<{
+  item: IItem | null;
+  setDraggingItem: React.Dispatch<React.SetStateAction<IItem | null>>;
+}>({
+  item: null,
+  setDraggingItem: () => {},
+});
+
+export const useDragging = () => useContext(DraggingContext);
+
+interface IProps {
+  children: React.ReactNode;
+}
+
+export const DraggingProvider = ({ children }: IProps) => {
+  const [item, setDraggingItem] = useState<IItem | null>(null);
+
+  return (
+    <DraggingContext.Provider value={{ item, setDraggingItem }}>
+      {children}
+    </DraggingContext.Provider>
+  );
+};

package/src/hooks/useMousePosition.ts

@@ -0,0 +1,49 @@
+import { useEffect, useState } from 'react';
+
+interface ICursorPosition {
+  x: number;
+  y: number;
+}
+
+export const useCursorPosition = (): ICursorPosition => {
+  const [cursorPosition, setCursorPosition] = useState<ICursorPosition>({ x: 0, y: 0 });
+
+  useEffect(() => {
+    let animationFrameId: number;
+
+    const updateCursorPosition = (x: number, y: number) => {
+      // Cancel the previous frame request
+      cancelAnimationFrame(animationFrameId);
+
+      // Request a new frame
+      animationFrameId = requestAnimationFrame(() => {
+        setCursorPosition({ x, y });
+      });
+    };
+
+    const handleMouseMove = (event: MouseEvent) => {
+      updateCursorPosition(event.clientX, event.clientY);
+    };
+
+    const handleTouchMove = (event: TouchEvent) => {
+      // Prevent default touch behavior (like scrolling)
+      event.preventDefault();
+      if (event.touches.length > 0) {
+        const touch = event.touches[0];
+        updateCursorPosition(touch.clientX, touch.clientY);
+      }
+    };
+
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('touchmove', handleTouchMove, { passive: false });
+
+    // Cleanup function
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('touchmove', handleTouchMove);
+      cancelAnimationFrame(animationFrameId);
+    };
+  }, []);
+
+  return cursorPosition;
+};