@rpg-engine/long-bow 0.1.63 → 0.1.67

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

@@ -0,0 +1,213 @@
+import {
+  IItem,
+  IItemContainer,
+  IPayloadProps,
+  ItemSocketEvents,
+} from '@rpg-engine/shared';
+import React, { useEffect, useRef, useState } from 'react';
+import styled from 'styled-components';
+import { useOutsideClick } from '../../../hooks/useOutsideAlerter';
+import { IPosition } from '../../../types/eventTypes';
+import { DraggableContainer } from '../../DraggableContainer';
+import { ListMenu } from '../../ListMenu';
+import { RPGUIContainerTypes } from '../../RPGUIContainer';
+import { ItemCard } from '../Cards/ItemCard';
+import { handleContextMenuList } from './itemContainerHelper';
+import { ItemSlot } from './ItemSlot';
+
+export interface IItemContainerProps {
+  itemContainer: IItemContainer;
+  onClose: () => void;
+  onMouseOver: (e: any, slotIndex: number, item: IItem | null) => void;
+  onActionSelected: (payload: any) => void;
+  initialPosition?: { x: number; y: number };
+}
+
+interface IContextItemProps {
+  visible: boolean;
+  posX: number;
+  posY: number;
+  slotItem: IItem | null;
+  slotIndex?: number | null;
+  contextActions: any;
+}
+
+interface IHoverDetailProps {
+  visible: boolean;
+  posX: number;
+  posY: number;
+  item: IItem | null;
+}
+
+export const ItemContainer: React.FC<IItemContainerProps> = ({
+  itemContainer,
+  onClose,
+  onMouseOver,
+  onActionSelected,
+  initialPosition = { x: 0, y: 0 },
+}) => {
+  // we use this draggable position to offset the menu position, after the container is dragged (otherwise, it bugs!)
+  const [draggablePosition, setDraggablePosition] = useState<IPosition>(
+    initialPosition
+  );
+
+  const draggableRef = useRef(null);
+
+  useOutsideClick(draggableRef, 'item-container');
+
+  useEffect(() => {
+    document.addEventListener('clickOutside', event => {
+      const e = event as CustomEvent;
+
+      if (e.detail.id === 'item-container') {
+        clearContextMenu();
+        clearItemHoverDetail();
+      }
+    });
+
+    return () => {
+      document.removeEventListener('clickOutside', _e => {});
+    };
+  }, []);
+
+  const { x: initX, y: initY } = initialPosition;
+
+  const [contextData, setContextData] = useState<IContextItemProps>({
+    visible: false,
+    posX: initX,
+    posY: initY,
+    contextActions: [],
+    slotItem: null,
+  });
+  const [itemHoverDetail, setItemHoverDetail] = useState<IHoverDetailProps>({
+    visible: false,
+    posX: initX,
+    posY: initY,
+    item: null,
+  });
+
+  const clearContextMenu = () => {
+    setContextData({
+      visible: false,
+      posX: 0,
+      posY: 0,
+      contextActions: [],
+      slotItem: null,
+    });
+  };
+
+  const handleOnMouseHover = (
+    event: any,
+    slotIndex: number,
+    item: IItem | null,
+    x: number,
+    y: number
+  ) => {
+    if (item) {
+      setItemHoverDetail({
+        ...itemHoverDetail,
+        visible: true,
+        item: item,
+        posX: x - draggablePosition.x,
+        posY: y - draggablePosition.y,
+      });
+      onMouseOver(event, slotIndex, item);
+    } else {
+      clearItemHoverDetail();
+    }
+  };
+
+  const clearItemHoverDetail = () => {
+    setItemHoverDetail({
+      ...itemHoverDetail,
+      visible: false,
+      item: null,
+    });
+  };
+
+  const handleOnItemClick = (item: IItem, posX: number, posY: number) => {
+    const contextList = handleContextMenuList(item.type);
+
+    setContextData({
+      ...contextData,
+      visible: true,
+      posX,
+      posY,
+      slotItem: item,
+      contextActions: contextList,
+    });
+    clearItemHoverDetail();
+  };
+
+  const onSelected = (selectedActionId: ItemSocketEvents | string): void => {
+    let payloadData: IPayloadProps = {
+      actionType: selectedActionId,
+      item: contextData.slotItem,
+    };
+    onActionSelected(payloadData);
+    clearContextMenu();
+  };
+
+  const onRenderSlots = () => {
+    const slots = [];
+
+    for (let i = 0; i < itemContainer.slotQty; i++) {
+      slots.push(
+        <ItemSlot
+          key={i}
+          slotIndex={i}
+          item={itemContainer.slots?.[i] || null}
+          onMouseOver={handleOnMouseHover}
+          onClick={handleOnItemClick}
+          onCancelContextMenu={() => {
+            clearContextMenu();
+          }}
+        />
+      );
+    }
+    return slots;
+  };
+
+  return (
+    <div ref={draggableRef}>
+      <DraggableContainer
+        title={itemContainer.name || 'Container'}
+        type={RPGUIContainerTypes.Framed}
+        onCloseButton={() => onClose()}
+        width="330px"
+        cancelDrag=".item-container-body"
+        onPositionChange={({ x, y }) => {
+          setDraggablePosition({ x, y });
+        }}
+      >
+        <ItemsContainer className="item-container-body">
+          {onRenderSlots()}
+        </ItemsContainer>
+
+        {contextData.visible ? (
+          <ListMenu
+            x={contextData.posX - draggablePosition.x}
+            y={contextData.posY - draggablePosition.y}
+            options={contextData.contextActions}
+            onSelected={onSelected}
+          />
+        ) : null}
+
+        {itemHoverDetail.visible ? (
+          <ItemCard
+            item={itemHoverDetail.item}
+            x={itemHoverDetail.posX}
+            y={itemHoverDetail.posY}
+          />
+        ) : null}
+      </DraggableContainer>
+    </div>
+  );
+};
+
+const ItemsContainer = styled.div`
+  max-width: 280px;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+`;

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

@@ -0,0 +1,90 @@
+import { IItem } from '@rpg-engine/shared';
+import React from 'react';
+import styled from 'styled-components';
+import atlasJSON from '../../../mocks/atlas/items/items.json';
+import atlasIMG from '../../../mocks/atlas/items/items.png';
+import { SpriteFromAtlas } from '../SpriteFromAtlas';
+interface IProps {
+  slotIndex: number;
+  item: IItem | null;
+  onMouseOver: (
+    event: any,
+    slotIndex: number,
+    item: IItem | null,
+    x: number,
+    y: number
+  ) => void;
+  onClick: (item: IItem, posX: number, posY: number) => void;
+  onCancelContextMenu: () => void;
+}
+
+export const ItemSlot: React.FC<IProps> = ({
+  slotIndex,
+  item,
+  onMouseOver,
+  onClick,
+  onCancelContextMenu,
+}) => {
+  const getLeftPositionValue = (quantity: number) => {
+    if (quantity > 0 && quantity < 10) return '2.5rem';
+    else if (quantity > 9 && quantity < 100) return '2.0rem';
+    else if (quantity > 99) return '1rem';
+    return '2.5rem';
+  };
+
+  return (
+    <Container
+      className="rpgui-icon empty-slot"
+      onMouseOver={event =>
+        onMouseOver(event, slotIndex, item, event.clientX, event.clientY)
+      }
+      onClick={e => {
+        if (item) {
+          console.log(e);
+          onClick(item, e.clientX, e.clientY);
+        } else {
+          onCancelContextMenu();
+        }
+      }}
+    >
+      {item && item.texturePath ? (
+        <SpriteFromAtlas
+          atlasIMG={atlasIMG}
+          atlasJSON={atlasJSON}
+          spriteKey={item.texturePath}
+          scale={3}
+        />
+      ) : null}
+      {item && item.isStackable && item?.stackQty ? (
+        <ItemQty left={getLeftPositionValue(item.stackQty)}>
+          {' '}
+          {item.stackQty}{' '}
+        </ItemQty>
+      ) : null}
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  margin: 0.1rem;
+  // border: 1px red solid;
+
+  .sprite-from-atlas-img {
+    position: relative;
+    top: 1.5rem;
+    left: 1.5rem;
+
+    &:hover {
+      filter: sepia(100%) saturate(300%) brightness(70%) hue-rotate(180deg);
+    }
+  }
+`;
+
+interface IItemQtyProps {
+  left: string;
+}
+const ItemQty = styled.span<IItemQtyProps>`
+  position: relative;
+  top: 1.5rem;
+  left: ${props => props.left};
+`;

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

@@ -0,0 +1,44 @@
+import { ActionsByItemType, ItemType } from '@rpg-engine/shared';
+
+interface IContextMenuItem {
+  id: string;
+  text: string;
+}
+
+export const handleContextMenuList = (itemType: ItemType) => {
+  const generateContextList = (actionsByTypeList: any) => {
+    const contextMenu: IContextMenuItem[] = actionsByTypeList.map(
+      (action: string) => {
+        return { id: action, text: action };
+      }
+    );
+    return contextMenu;
+  };
+
+  let contextActionMenu: IContextMenuItem[] = [];
+  switch (itemType) {
+    case ItemType.Weapon:
+    case ItemType.Armor:
+    case ItemType.Accessory:
+    case ItemType.Jewelry:
+    case ItemType.Tool:
+      contextActionMenu = generateContextList(ActionsByItemType.Equipment);
+      break;
+    case ItemType.Consumable:
+      contextActionMenu = generateContextList(ActionsByItemType.Consumable);
+      break;
+    case ItemType.CraftMaterial:
+      contextActionMenu = generateContextList(ActionsByItemType.CraftMaterial);
+      break;
+    case ItemType.Other:
+    case ItemType.Information:
+    case ItemType.Quest:
+    case ItemType.Container:
+      contextActionMenu = generateContextList(ActionsByItemType.Other);
+      break;
+    default:
+      contextActionMenu = generateContextList(ActionsByItemType.Other);
+      break;
+  }
+  return contextActionMenu;
+};

package/src/components/Item/SpriteFromAtlas.tsx

@@ -0,0 +1,69 @@
+import { GRID_HEIGHT, GRID_WIDTH } from '@rpg-engine/shared';
+import React from 'react';
+import styled from 'styled-components';
+
+interface IProps {
+  atlasJSON: any;
+  atlasIMG: any;
+  spriteKey: string;
+  width?: number;
+  height?: number;
+  scale?: number;
+}
+
+export const SpriteFromAtlas: React.FC<IProps> = ({
+  atlasJSON,
+  atlasIMG,
+  spriteKey,
+  width = GRID_WIDTH,
+  height = GRID_HEIGHT,
+  scale = 2,
+}) => {
+  //! If an item is not showing, remember that you MUST run yarn atlas:copy everytime you add a new item to the atlas (it will sync our public folder atlas with src/atlas).
+  //!Due to React's limitations, we cannot import it from the public folder directly!
+
+  const spriteData = atlasJSON.frames[spriteKey];
+
+  return (
+    <Container width={width} height={height}>
+      <ImgSprite
+        className="sprite-from-atlas-img"
+        atlasIMG={atlasIMG}
+        frame={spriteData.frame}
+        scale={scale}
+      />
+    </Container>
+  );
+};
+
+interface IImgSpriteProps {
+  atlasIMG: any;
+  frame: {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+  };
+  scale: number;
+}
+
+interface IContainerProps {
+  width: number;
+  height: number;
+}
+
+const Container = styled.div`
+  width: ${(props: IContainerProps) => props.width}px;
+  height: ${(props: IContainerProps) => props.height}px;
+`;
+
+const ImgSprite = styled.div<IImgSpriteProps>`
+  width: ${props => props.frame.w}px;
+  height: ${props => props.frame.h}px;
+  background-image: url(${props => props.atlasIMG});
+  background-position: -${props => props.frame.x}px -${props => props.frame.y}px;
+  transform: scale(${props => props.scale});
+  position: relative;
+  top: 8px;
+  left: 8px;
+`;

package/src/hooks/useOutsideAlerter.ts

@@ -0,0 +1,25 @@
+import { useEffect } from 'react';
+
+export function useOutsideClick(ref: any, id: string) {
+  useEffect(() => {
+    /**
+     * Alert if clicked on outside of element
+     */
+    function handleClickOutside(event: any) {
+      if (ref.current && !ref.current.contains(event.target)) {
+        const event = new CustomEvent('clickOutside', {
+          detail: {
+            id,
+          },
+        });
+        document.dispatchEvent(event);
+      }
+    }
+    // Bind the event listener
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      // Unbind the event listener on clean up
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [ref]);
+}

package/src/index.tsx

@@ -4,6 +4,9 @@ export * from './components/CheckButton';
 export * from './components/DraggableContainer';
 export * from './components/Dropdown';
 export * from './components/Input';
+export * from './components/Item/Inventory/ItemContainer';
+export * from './components/Item/Inventory/ItemSlot';
+export * from './components/Item/SpriteFromAtlas';
 export * from './components/ListMenu';
 export * from './components/NPCDialog/NPCDialog';
 export * from './components/NPCDialog/QuestionDialog/QuestionDialog';