@rpg-engine/long-bow 0.1.62 → 0.1.66

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

@@ -0,0 +1,216 @@
+import {
+  ActionsByItemType,
+  IItem,
+  IItemContainer,
+  IPayloadProps,
+  ItemSocketEvents,
+  ItemType,
+} from '@rpg-engine/shared';
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { DraggableContainer } from '../../DraggableContainer';
+import { ListMenu } from '../../ListMenu';
+import { RPGUIContainerTypes } from '../../RPGUIContainer';
+import { ItemCard } from '../Cards/ItemCard';
+import { ItemSlot } from './ItemSlot';
+
+export interface IItemContainerProps {
+  itemContainer: IItemContainer;
+  onClose: () => void;
+  onMouseOver: (e: any, slotIndex: number, item: IItem | null) => void;
+  onActionSelected: (payload: any) => void;
+}
+
+interface contextItemPropx {
+  visible: boolean;
+  posX: number;
+  posY: number;
+  slotItem: IItem | null;
+  slotIndex?: number | null;
+  contextActions: any;
+}
+
+export const ItemContainer: React.FC<IItemContainerProps> = ({
+  itemContainer,
+  onClose,
+  onMouseOver,
+  onActionSelected,
+}) => {
+  const [contextData, setContextData] = useState<contextItemPropx>({
+    visible: false,
+    posX: 0,
+    posY: 0,
+    contextActions: [],
+    slotItem: null,
+  });
+  const [itemHoverDetail] = useState({
+    visible: false,
+    posX: 0,
+    posY: 0,
+    item: null,
+  });
+  let selectedSlotContext: number | null = null;
+
+  const handleContextMenuList = (itemType: ItemType) => {
+    const generateContextList = (actionsByTypeList: any) => {
+      let contextMenu = actionsByTypeList.map((action: string) => {
+        return { id: action, text: action };
+      });
+      return contextMenu;
+    };
+
+    let contextActionMenu: any = [];
+    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;
+  };
+
+  useEffect(() => {
+    const contextMenuEventHandler = (event: any) => {
+      event.preventDefault();
+      if (selectedSlotContext !== null) {
+        const itemData = itemContainer.slots?.[selectedSlotContext] ?? null;
+        if (itemData) {
+          // TODO: generate a menuActionList based on type and subType of the item.
+          let contextActionMenu: any = handleContextMenuList(itemData.type);
+          setContextData({
+            ...contextData,
+            visible: true,
+            posX: event.clientX,
+            posY: event.clientY,
+            slotItem: itemData,
+            contextActions: contextActionMenu,
+          });
+        } else {
+          // console.log("Empty Slot")
+          setContextData({
+            ...contextData,
+            visible: false,
+            posX: 0,
+            posY: 0,
+            slotIndex: null,
+            slotItem: null,
+            contextActions: [],
+          });
+        }
+      }
+    };
+
+    const offClickHandler = (event: any) => {
+      console.log(event);
+      setContextData({
+        ...contextData,
+        visible: false,
+        posX: 0,
+        posY: 0,
+        slotIndex: null,
+        slotItem: null,
+      });
+    };
+
+    document.addEventListener('contextmenu', contextMenuEventHandler);
+    document.addEventListener('click', offClickHandler);
+    return () => {
+      document.removeEventListener('contextmenu', contextMenuEventHandler);
+      document.removeEventListener('click', offClickHandler);
+    };
+  }, [contextData, selectedSlotContext]);
+
+  const onActionContextMenu = (event: any, slotIndex: number) => {
+    selectedSlotContext = slotIndex;
+    console.log(event);
+    // setContextData({...contextData, slotItem: slotIndex})
+  };
+
+  const handleOnMouseHover = (event: any, slotIndex: number, item: any) => {
+    // TODO: Show a tip view with basic info about the item.
+    //  set a minimun hover period before show infos.
+    // setItemHoverDetail({...itemHoverDetail, visible: true, item: item, posX: event.clientX, posY: event.clientY})
+    onMouseOver(event, slotIndex, item);
+  };
+
+  const onSelected = (selectedActionId: ItemSocketEvents | string): void => {
+    let payloadData: IPayloadProps = {
+      actionType: selectedActionId,
+      item: contextData.slotItem,
+    };
+    // TODO: create a function to validate the selection set the paylod data.
+    onActionSelected(payloadData);
+  };
+
+  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}
+          onActionContextMenu={onActionContextMenu}
+        />
+      );
+    }
+    return slots;
+  };
+
+  return (
+    <DraggableContainer
+      title={itemContainer.name || 'Container'}
+      type={RPGUIContainerTypes.Framed}
+      onCloseButton={() => onClose()}
+      width="330px"
+    >
+      <ItemsContainer>{onRenderSlots()}</ItemsContainer>
+
+      {contextData.visible ? (
+        <ListMenu
+          x={contextData.posX}
+          y={contextData.posY}
+          options={contextData.contextActions}
+          onSelected={onSelected}
+        />
+      ) : null}
+
+      {itemHoverDetail.visible ? (
+        <ItemCard
+          item={itemHoverDetail.item}
+          x={itemHoverDetail.posX}
+          y={itemHoverDetail.posY}
+        />
+      ) : null}
+    </DraggableContainer>
+  );
+};
+
+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,75 @@
+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) => void;
+  onActionContextMenu: (event: any, slotIndex: number) => void;
+}
+
+export const ItemSlot: React.FC<IProps> = ({
+  slotIndex,
+  item,
+  onMouseOver,
+  onActionContextMenu,
+}) => {
+  const getLeftPostionValue = (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
+      onContextMenu={event => {
+        onActionContextMenu(event, slotIndex);
+      }}
+      className="rpgui-icon empty-slot"
+      onMouseOver={event => onMouseOver(event, slotIndex, item)}
+    >
+      {item && item.texturePath ? (
+        <SpriteFromAtlas
+          atlasIMG={atlasIMG}
+          atlasJSON={atlasJSON}
+          spriteKey={item.texturePath}
+          scale={3}
+        />
+      ) : null}
+      {item && item.isStackable && item?.stackQty ? (
+        <ItemQty left={getLeftPostionValue(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/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/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';