@rpg-engine/long-bow 0.1.96 → 0.1.99

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.1.96",
+  "version": "0.1.99",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -83,7 +83,7 @@
   },
   "dependencies": {
     "@rollup/plugin-image": "^2.1.1",
-    "@rpg-engine/shared": "^0.3.86",
+    "@rpg-engine/shared": "^0.4.6",
     "dayjs": "^1.11.2",
     "fs-extra": "^10.1.0",
     "lodash": "^4.17.21",

package/src/components/Equipment/EquipmentSet.tsx

@@ -2,12 +2,13 @@ import {
   IEquipmentSet,
   IItem,
   IItemContainer,
+  ItemContainerType,
   ItemSlotType,
+  ItemType,
 } from '@rpg-engine/shared';
 import React from 'react';
 import styled from 'styled-components';
 import { DraggableContainer } from '../DraggableContainer';
-import { SlotContainerType } from '../Item/Inventory/ItemContainerTypes';
 import { ItemSlot } from '../Item/Inventory/ItemSlot';
 import { RPGUIContainerTypes } from '../RPGUIContainer';
 
@@ -15,12 +16,14 @@ export interface IEquipmentSetProps {
   equipmentSet: IEquipmentSet;
   onClose?: () => void;
   onItemClick?: (
+    ItemType: ItemType,
     item: IItem,
-    slotContainerType: SlotContainerType | null
+    itemContainerType: ItemContainerType | null
   ) => void;
   onMouseOver?: (e: any, slotIndex: number, item: IItem | null) => void;
   onSelected?: (optionId: string) => void;
   initialPosition?: { x: number; y: number };
+  ContainerTypes: ItemContainerType | null;
 }
 
 export const EquipmentSet: React.FC<IEquipmentSetProps> = ({
@@ -77,19 +80,20 @@ export const EquipmentSet: React.FC<IEquipmentSetProps> = ({
       const item = data as IItem;
       const itemContainer =
         (item && (item.itemContainer as IItemContainer)) ?? null;
+
       return (
         <ItemSlot
           key={i}
           slotIndex={i}
           item={item}
           itemContainer={itemContainer}
-          slotContainerType={SlotContainerType.EQUIPMENT_SET}
+          itemContainerType={ItemContainerType.Equipment}
           slotSpriteMask={slotMaksRange[i]}
           onMouseOver={(event, slotIndex, item) => {
             if (onMouseOver) onMouseOver(event, slotIndex, item);
           }}
-          onClick={(item, slotContainerType) => {
-            if (onItemClick) onItemClick(item, slotContainerType);
+          onClick={(itemType, ContainerType) => {
+            if (onItemClick) onItemClick(itemType, item, ContainerType);
           }}
           onSelected={(optionId: string) => {
             if (onSelected) onSelected(optionId);

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

@@ -1,8 +1,8 @@
-import { IItem, IItemContainer } from '@rpg-engine/shared';
+import { IItem, IItemContainer, ItemContainerType } from '@rpg-engine/shared';
 import React from 'react';
 import styled from 'styled-components';
 import { SlotsContainer } from '../../Abstractions/SlotsContainer';
-import { SlotContainerType } from './ItemContainerTypes';
+
 import { ItemSlot } from './ItemSlot';
 
 export interface IItemContainerProps {
@@ -10,10 +10,12 @@ export interface IItemContainerProps {
   onClose?: () => void;
   onItemClick?: (
     item: IItem,
-    slotContainerType: SlotContainerType | null
+    ItemType: IItem['type'],
+    itemContainerType: ItemContainerType | null
   ) => void;
   onMouseOver?: (e: any, slotIndex: number, item: IItem | null) => void;
   onSelected?: (optionId: string, item: IItem) => void;
+  ContainerType: ItemContainerType;
 }
 
 export const ItemContainer: React.FC<IItemContainerProps> = ({
@@ -22,6 +24,7 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
   onMouseOver,
   onSelected,
   onItemClick,
+  ContainerType,
 }) => {
   const onRenderSlots = () => {
     const slots = [];
@@ -32,12 +35,12 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
           key={i}
           slotIndex={i}
           item={itemContainer.slots?.[i] || null}
-          slotContainerType={SlotContainerType.INVENTORY}
+          itemContainerType={ContainerType}
           onMouseOver={(event, slotIndex, item) => {
             if (onMouseOver) onMouseOver(event, slotIndex, item);
           }}
-          onClick={(item, slotContainerType) => {
-            if (onItemClick) onItemClick(item, slotContainerType);
+          onClick={(ItemType, ContainerType, item) => {
+            if (onItemClick) onItemClick(item, ItemType, ContainerType);
           }}
           onSelected={(optionId: string, item: IItem) => {
             if (onSelected) onSelected(optionId, item);

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

@@ -1,4 +1,6 @@
 export enum SlotContainerType {
   INVENTORY = 'Inventory',
   EQUIPMENT_SET = 'EquipmentSet',
+  LOOT = 'Loot',
+  MAP_CONTAINER = 'Map-Container',
 }

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

@@ -1,4 +1,10 @@
-import { IItem, IItemContainer, ItemSlotType } from '@rpg-engine/shared';
+import {
+  IItem,
+  IItemContainer,
+  ItemContainerType,
+  ItemSlotType,
+  ItemType,
+} from '@rpg-engine/shared';
 
 import { observer } from 'mobx-react-lite';
 import React, { useEffect, useState } from 'react';
@@ -8,8 +14,7 @@ import atlasIMG from '../../../mocks/atlas/items/items.png';
 import { RelativeListMenu } from '../../RelativeListMenu';
 import { SpriteFromAtlas } from '../../shared/SpriteFromAtlas';
 import { ItemTooltip } from '../Cards/ItemTooltip';
-import { handleContextMenuList, IContextMenuItem } from './itemContainerHelper';
-import { SlotContainerType } from './ItemContainerTypes';
+import { handleNewContextMenu, IContextMenuItem } from './itemContainerHelper';
 
 const EquipmentSlotSpriteByType: any = {
   Neck: 'accessories/corruption-necklace.png',
@@ -28,7 +33,7 @@ interface IProps {
   slotIndex: number;
   item: IItem | null;
   itemContainer?: IItemContainer | null;
-  slotContainerType: SlotContainerType | null;
+  itemContainerType: ItemContainerType | null;
   slotSpriteMask?: ItemSlotType | null;
   onSelected: (selectedOption: string, item: IItem) => void;
   onMouseOver: (
@@ -39,14 +44,18 @@ interface IProps {
     y: number
   ) => void;
   onMouseOut?: () => void;
-  onClick: (item: IItem, slotContainerType: SlotContainerType | null) => void;
+  onClick: (
+    ItemType: ItemType,
+    itemContainerType: ItemContainerType | null,
+    item: IItem
+  ) => void;
 }
 
 export const ItemSlot: React.FC<IProps> = observer(
   ({
     slotIndex,
     item,
-    slotContainerType,
+    itemContainerType: containerType,
     slotSpriteMask,
     onMouseOver,
     onMouseOut,
@@ -63,7 +72,7 @@ export const ItemSlot: React.FC<IProps> = observer(
 
     useEffect(() => {
       if (item) {
-        setContextActions(handleContextMenuList(item.type, slotContainerType));
+        setContextActions(handleNewContextMenu(item.type, containerType));
       }
     }, [item]);
 
@@ -130,9 +139,14 @@ export const ItemSlot: React.FC<IProps> = observer(
     };
 
     const onRenderSlot = (itemToRender: IItem | null) => {
-      if (slotContainerType === SlotContainerType.EQUIPMENT_SET)
-        return renderEquipment(itemToRender);
-      return renderItem(itemToRender);
+      switch (containerType) {
+        case ItemContainerType.Equipment:
+          return renderEquipment(itemToRender);
+        case ItemContainerType.Inventory:
+          return renderItem(itemToRender);
+        default:
+          return renderItem(itemToRender);
+      }
     };
 
     return (
@@ -151,7 +165,7 @@ export const ItemSlot: React.FC<IProps> = observer(
 
           if (item) {
             setIsContextMenuVisible(!isContextMenuVisible);
-            onClick(item, slotContainerType);
+            onClick(item.type, containerType, item);
           }
         }}
       >

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

@@ -1,7 +1,12 @@
 import {
   ActionsByItemType,
+  ActionsForEquipmentSet,
+  ActionsForInventory,
+  ActionsForLoot,
+  ActionsForMapContainer,
+  ItemContainerType,
   ItemSocketEventsDisplayLabels,
-  ItemType
+  ItemType,
 } from '@rpg-engine/shared';
 import { SlotContainerType } from './ItemContainerTypes';
 
@@ -10,11 +15,6 @@ export interface IContextMenuItem {
   text: string;
 }
 
-export enum ContainerType {
-  INVENTORY = 'Inventory',
-  EQUIPMENT_SET = 'EquipmentSet',
-}
-
 // TODO: Refactor this file
 const generateContextList = (actionsByTypeList: any) => {
   const contextMenu: IContextMenuItem[] = actionsByTypeList.map(
@@ -24,8 +24,107 @@ const generateContextList = (actionsByTypeList: any) => {
   );
   return contextMenu;
 };
+export const handleNewContextMenu = (
+  itemType: ItemType,
+  itemContainerType: ItemContainerType | null
+) => {
+  let contextActionMenu: IContextMenuItem[] = [];
+
+  if (itemContainerType === ItemContainerType.Inventory) {
+    switch (itemType) {
+      case ItemType.Weapon:
+      case ItemType.Armor:
+      case ItemType.Accessory:
+      case ItemType.Jewelry:
+      case ItemType.Container:
+        contextActionMenu = generateContextList(ActionsForInventory.Equipment);
+        break;
+      case ItemType.Consumable:
+        contextActionMenu = generateContextList(ActionsForInventory.Consumable);
+        break;
+      case ItemType.CraftMaterial:
+        contextActionMenu = generateContextList(
+          ActionsForInventory.CraftMaterial
+        );
+        break;
+      case ItemType.Tool:
+        contextActionMenu = generateContextList(ActionsForInventory.Tool);
+        break;
+      case ItemType.Other:
+        contextActionMenu = generateContextList(ActionsForInventory.Other);
+        break;
+    }
+  }
+  if (itemContainerType === ItemContainerType.Equipment) {
+    switch (itemType) {
+      case ItemType.Weapon:
+      case ItemType.Armor:
+      case ItemType.Accessory:
+      case ItemType.Jewelry:
+      case ItemType.Container:
+        contextActionMenu = generateContextList(
+          ActionsForEquipmentSet.Equipment
+        );
+        break;
+    }
+  }
+  if (itemContainerType === ItemContainerType.Loot) {
+    switch (itemType) {
+      case ItemType.Weapon:
+      case ItemType.Armor:
+      case ItemType.Accessory:
+      case ItemType.Jewelry:
+        contextActionMenu = generateContextList(ActionsForLoot.Equipment);
+        break;
+      case ItemType.Consumable:
+        contextActionMenu = generateContextList(ActionsForLoot.Consumable);
+        break;
+      case ItemType.CraftMaterial:
+        contextActionMenu = generateContextList(ActionsForLoot.CraftMaterial);
+        break;
+      case ItemType.Tool:
+        contextActionMenu = generateContextList(ActionsForLoot.Tool);
+        break;
+      case ItemType.Other:
+        contextActionMenu = generateContextList(ActionsForLoot.Other);
+        break;
+    }
+  }
+  if (itemContainerType === ItemContainerType.MapContainer) {
+    switch (itemType) {
+      case ItemType.Weapon:
+      case ItemType.Armor:
+      case ItemType.Accessory:
+      case ItemType.Jewelry:
+        contextActionMenu = generateContextList(
+          ActionsForMapContainer.Equipment
+        );
+        break;
+      case ItemType.Consumable:
+        contextActionMenu = generateContextList(
+          ActionsForMapContainer.Consumable
+        );
+        break;
+      case ItemType.CraftMaterial:
+        contextActionMenu = generateContextList(
+          ActionsForMapContainer.CraftMaterial
+        );
+        break;
+      case ItemType.Tool:
+        contextActionMenu = generateContextList(ActionsForMapContainer.Tool);
+        break;
+      case ItemType.Other:
+        contextActionMenu = generateContextList(ActionsForMapContainer.Other);
+        break;
+    }
+  }
+  return contextActionMenu;
+};
 
-export const handleContextMenuList = (itemType: ItemType, slotContainerType: SlotContainerType | null) => {
+export const handleContextMenuList = (
+  itemType: ItemType,
+  slotContainerType: SlotContainerType | null
+) => {
   let contextActionMenu: IContextMenuItem[] = [];
 
   switch (itemType) {
@@ -35,7 +134,9 @@ export const handleContextMenuList = (itemType: ItemType, slotContainerType: Slo
     case ItemType.Jewelry:
     case ItemType.Tool:
       if (slotContainerType === SlotContainerType.EQUIPMENT_SET) {
-        contextActionMenu = generateContextList(ActionsByItemType.EquipmentSetItems);
+        contextActionMenu = generateContextList(
+          ActionsByItemType.EquipmentSetItems
+        );
       } else {
         contextActionMenu = generateContextList(ActionsByItemType.Equipment);
       }

package/src/stories/EquipmentSet.stories.tsx

@@ -1,4 +1,4 @@
-import { IItem } from '@rpg-engine/shared';
+import { IItem, ItemContainerType, ItemType } from '@rpg-engine/shared';
 import { Meta, Story } from '@storybook/react';
 import React from 'react';
 import {
@@ -7,7 +7,6 @@ import {
 } from '../../src/components/Equipment/EquipmentSet';
 import { RPGUIRoot } from '../../src/components/RPGUIRoot';
 import { equipmentSetMock } from '../../src/mocks/equipmentSet.mocks';
-import { SlotContainerType } from '../components/Item/Inventory/ItemContainerTypes';
 
 const meta: Meta = {
   title: 'Equipment Set',
@@ -24,10 +23,11 @@ const onMouseOver = (event: any, slotIndex: number, item: IItem | null) => {
 };
 
 const onItemClick = (
+  ItemType: ItemType,
   item: IItem,
-  slotContainerType: SlotContainerType | null
+  itemContainerType: ItemContainerType | null
 ) => {
-  console.log(item, slotContainerType, 'was clicked!');
+  console.log(item, ItemType, itemContainerType, 'was clicked!');
 };
 
 const onSelected = (payload: string) => {
@@ -43,6 +43,7 @@ const Template: Story<IEquipmentSetProps> = args => (
       onMouseOver={onMouseOver}
       onSelected={onSelected}
       onItemClick={onItemClick}
+      ContainerTypes={ItemContainerType.Inventory}
     />
   </RPGUIRoot>
 );

package/src/stories/ItemContainer.stories.tsx

@@ -1,4 +1,4 @@
-import { IItem } from '@rpg-engine/shared';
+import { IItem, ItemContainerType, ItemType } from '@rpg-engine/shared';
 import { Meta, Story } from '@storybook/react';
 import React from 'react';
 import {
@@ -7,7 +7,6 @@ import {
 } from '../../src/components/Item/Inventory/ItemContainer';
 import { RPGUIRoot } from '../../src/components/RPGUIRoot';
 import { itemContainerMock } from '../../src/mocks/itemContainer.mocks';
-import { SlotContainerType } from '../components/Item/Inventory/ItemContainerTypes';
 
 const meta: Meta = {
   title: 'Item Container',
@@ -30,9 +29,10 @@ const onSelected = (payload: string, item: IItem) => {
 
 const onItemClick = (
   item: IItem,
-  slotContainerType: SlotContainerType | null
+  ItemType: ItemType,
+  itemContainerType: ItemContainerType | null
 ) => {
-  console.log(item, slotContainerType, 'was clicked!');
+  console.log(item, ItemType, itemContainerType, 'was clicked!');
 };
 
 const Template: Story<IItemContainerProps> = () => (
@@ -43,6 +43,7 @@ const Template: Story<IItemContainerProps> = () => (
       onMouseOver={onMouseOver}
       onSelected={onSelected}
       onItemClick={onItemClick}
+      ContainerType={ItemContainerType.Inventory}
     />
   </RPGUIRoot>
 );