@rpg-engine/long-bow 0.1.792 → 0.2.1

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

@@ -1,158 +1,212 @@
-import { IItem, IItemContainer, ItemSlotType } 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 '../../shared/SpriteFromAtlas';
-
-export enum SlotContainerType {
-  INVENTORY = 'Inventory',
-  EQUIPMENT_SET = 'EquipmentSet',
-}
-
-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: 'gloves/plate-gloves.png',
-};
-
-interface IProps {
-  slotIndex: number;
-  item: IItem | null;
-  itemContainer?: IItemContainer | null;
-  slotContainerType: SlotContainerType | null;
-  slotSpriteMask?: ItemSlotType | null;
-  onMouseOver: (
-    event: any,
-    slotIndex: number,
-    item: IItem | null,
-    x: number,
-    y: number
-  ) => void;
-  onMouseOut: () => void;
-  onClick: (
-    item: IItem,
-    posX: number,
-    posY: number,
-    slotContainerType: SlotContainerType | null
-  ) => void;
-  onCancelContextMenu: () => void;
-}
-
-export const ItemSlot: React.FC<IProps> = ({
-  slotIndex,
-  item,
-  slotContainerType,
-  slotSpriteMask,
-  onMouseOver,
-  onMouseOut,
-  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';
-  };
-
-  const renderItem = (itemToRender: IItem | null) => {
-    const element = [];
-    if (itemToRender?.texturePath) {
-      element.push(
-        <SpriteFromAtlas
-          atlasIMG={atlasIMG}
-          atlasJSON={atlasJSON}
-          spriteKey={itemToRender.texturePath}
-          imgScale={3}
-        />
-      );
-    }
-    if (itemToRender?.isStackable && itemToRender?.stackQty) {
-      element.push(
-        <ItemQty left={getLeftPositionValue(itemToRender.stackQty)}>
-          {' '}
-          {itemToRender.stackQty}{' '}
-        </ItemQty>
-      );
-    }
-    return element;
-  };
-
-  const renderEquipment = (itemToRender: IItem | null) => {
-    if (
-      itemToRender?.texturePath &&
-      itemToRender.allowedEquipSlotType?.includes(slotSpriteMask!)
-    ) {
-      return (
-        <SpriteFromAtlas
-          atlasIMG={atlasIMG}
-          atlasJSON={atlasJSON}
-          spriteKey={itemToRender.texturePath}
-          imgScale={3}
-        />
-      );
-    } else {
-      return (
-        <SpriteFromAtlas
-          atlasIMG={atlasIMG}
-          atlasJSON={atlasJSON}
-          spriteKey={EquipmentSlotSpriteByType[slotSpriteMask!]}
-          imgScale={3}
-          grayScale={true}
-          opacity={0.4}
-        />
-      );
-    }
-  };
-
-  const onRenderSlot = (itemToRender: IItem | null) => {
-    if (slotContainerType === SlotContainerType.EQUIPMENT_SET)
-      return renderEquipment(itemToRender);
-    return renderItem(itemToRender);
-  };
-
-  return (
-    <Container
-      className="rpgui-icon empty-slot"
-      onMouseOver={event =>
-        onMouseOver(event, slotIndex, item, event.clientX, event.clientY)
-      }
-      onMouseOut={() => onMouseOut()}
-      onClick={e => {
-        if (item) {
-          onClick(item, e.clientX, e.clientY, slotContainerType);
-        } else {
-          onCancelContextMenu();
-        }
-      }}
-    >
-      {onRenderSlot(item)}
-    </Container>
-  );
-};
-
-const Container = styled.div`
-  margin: 0.1rem;
-  .sprite-from-atlas-img {
-    position: relative;
-    top: 1.5rem;
-    left: 1.5rem;
-  }
-`;
-
-interface IItemQtyProps {
-  left: string;
-}
-const ItemQty = styled.span<IItemQtyProps>`
-  position: relative;
-  top: 1.5rem;
-  left: ${props => props.left};
-`;
+import {
+  IItem,
+  IItemContainer,
+  ItemContainerType,
+  ItemSlotType,
+  ItemType,
+} from '@rpg-engine/shared';
+
+import { observer } from 'mobx-react-lite';
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import atlasJSON from '../../../mocks/atlas/items/items.json';
+import atlasIMG from '../../../mocks/atlas/items/items.png';
+import { RelativeListMenu } from '../../RelativeListMenu';
+import { SpriteFromAtlas } from '../../shared/SpriteFromAtlas';
+import { ItemTooltip } from '../Cards/ItemTooltip';
+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: 'gloves/plate-gloves.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;
+}
+
+export const ItemSlot: React.FC<IProps> = observer(
+  ({
+    slotIndex,
+    item,
+    itemContainerType: containerType,
+    slotSpriteMask,
+    onMouseOver,
+    onMouseOut,
+    onClick,
+    onSelected,
+  }) => {
+    const [isTooltipVisible, setTooltipVisible] = useState(false);
+
+    const [isContextMenuVisible, setIsContextMenuVisible] = useState(false);
+
+    const [contextActions, setContextActions] = useState<IContextMenuItem[]>(
+      []
+    );
+
+    useEffect(() => {
+      if (item) {
+        setContextActions(generateContextMenu(item.type, containerType));
+      }
+    }, [item]);
+
+    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';
+    };
+
+    const renderItem = (itemToRender: IItem | null) => {
+      const element = [];
+      if (itemToRender?.texturePath) {
+        element.push(
+          <SpriteFromAtlas
+            key={itemToRender._id}
+            atlasIMG={atlasIMG}
+            atlasJSON={atlasJSON}
+            spriteKey={itemToRender.texturePath}
+            imgScale={3}
+          />
+        );
+      }
+      if (itemToRender?.isStackable && itemToRender?.stackQty) {
+        element.push(
+          <ItemQty
+            left={getLeftPositionValue(itemToRender.stackQty)}
+            key={`qty-${itemToRender._id}`}
+          >
+            {' '}
+            {itemToRender.stackQty}{' '}
+          </ItemQty>
+        );
+      }
+      return element;
+    };
+
+    const renderEquipment = (itemToRender: IItem | null) => {
+      if (
+        itemToRender?.texturePath &&
+        itemToRender.allowedEquipSlotType?.includes(slotSpriteMask!)
+      ) {
+        return (
+          <SpriteFromAtlas
+            key={itemToRender._id}
+            atlasIMG={atlasIMG}
+            atlasJSON={atlasJSON}
+            spriteKey={itemToRender.texturePath}
+            imgScale={3}
+          />
+        );
+      } else {
+        return (
+          <SpriteFromAtlas
+            atlasIMG={atlasIMG}
+            atlasJSON={atlasJSON}
+            spriteKey={EquipmentSlotSpriteByType[slotSpriteMask!]}
+            imgScale={3}
+            grayScale={true}
+            opacity={0.4}
+          />
+        );
+      }
+    };
+
+    const onRenderSlot = (itemToRender: IItem | null) => {
+      switch (containerType) {
+        case ItemContainerType.Equipment:
+          return renderEquipment(itemToRender);
+        case ItemContainerType.Inventory:
+          return renderItem(itemToRender);
+        default:
+          return renderItem(itemToRender);
+      }
+    };
+
+    return (
+      <Container
+        className="rpgui-icon empty-slot"
+        onMouseOver={event =>
+          onMouseOver(event, slotIndex, item, event.clientX, event.clientY)
+        }
+        onMouseOut={() => {
+          if (onMouseOut) onMouseOut();
+        }}
+        onMouseEnter={() => setTooltipVisible(true)}
+        onMouseLeave={() => setTooltipVisible(false)}
+        onClick={() => {
+          setTooltipVisible(false);
+
+          if (item) {
+            setIsContextMenuVisible(!isContextMenuVisible);
+            onClick(item.type, containerType, item);
+          }
+        }}
+      >
+        {isContextMenuVisible && contextActions && (
+          <RelativeListMenu
+            options={contextActions}
+            onSelected={(optionId: string) => {
+              setIsContextMenuVisible(false);
+              if (item) {
+                onSelected(optionId, item);
+              }
+            }}
+            onOutsideClick={() => {
+              setIsContextMenuVisible(false);
+            }}
+          />
+        )}
+
+        {isTooltipVisible && item && <ItemTooltip label={item.name} />}
+
+        {onRenderSlot(item)}
+      </Container>
+    );
+  }
+);
+
+const Container = styled.div`
+  margin: 0.1rem;
+  .sprite-from-atlas-img {
+    position: relative;
+    top: 1.5rem;
+    left: 1.5rem;
+  }
+  position: relative;
+`;
+
+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

@@ -1,81 +1,142 @@
-import {
-  ActionsByItemType,
-  ItemSocketEventsDisplayLabels,
-  ItemType,
-} from '@rpg-engine/shared';
-
-export interface IContextMenuItem {
-  id: string;
-  text: string;
-}
-
-export enum ContainerType {
-  INVENTORY = 'Inventory',
-  EQUIPMENT_SET = 'EquipmentSet',
-}
-
-// TODO: Refactor this file
-const generateContextList = (actionsByTypeList: any) => {
-  const contextMenu: IContextMenuItem[] = actionsByTypeList.map(
-    (action: string) => {
-      return { id: action, text: ItemSocketEventsDisplayLabels[action] };
-    }
-  );
-  return contextMenu;
-};
-
-export const handleContextMenuList = (itemType: ItemType) => {
-  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;
-};
-
-export const handleEquipmentContextMenuList = (itemType: ItemType) => {
-  let contextActionMenu: IContextMenuItem[] = [];
-  switch (itemType) {
-    case ItemType.Weapon:
-    case ItemType.Armor:
-    case ItemType.Accessory:
-    case ItemType.Jewelry:
-    case ItemType.Tool:
-      contextActionMenu = generateContextList(
-        ActionsByItemType.EquipmenSetItems
-      );
-      break;
-    case ItemType.Container:
-      contextActionMenu = generateContextList(
-        ActionsByItemType.EquipmenSetContainer
-      );
-      break;
-    default:
-      contextActionMenu = generateContextList(
-        ActionsByItemType.EquipmenSetItems
-      );
-      break;
-  }
-  return contextActionMenu;
-};
+import {
+  ActionsForEquipmentSet,
+  ActionsForInventory,
+  ActionsForLoot,
+  ActionsForMapContainer,
+  ItemContainerType,
+  ItemSocketEventsDisplayLabels,
+  ItemType,
+} from '@rpg-engine/shared';
+
+export interface IContextMenuItem {
+  id: string;
+  text: string;
+}
+
+const generateContextMenuListOptions = (actionsByTypeList: any) => {
+  const contextMenu: IContextMenuItem[] = actionsByTypeList.map(
+    (action: string) => {
+      return { id: action, text: ItemSocketEventsDisplayLabels[action] };
+    }
+  );
+  return contextMenu;
+};
+
+export const generateContextMenu = (
+  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 = generateContextMenuListOptions(
+          ActionsForInventory.Equipment
+        );
+        break;
+      case ItemType.Consumable:
+        contextActionMenu = generateContextMenuListOptions(
+          ActionsForInventory.Consumable
+        );
+        break;
+      case ItemType.CraftMaterial:
+        contextActionMenu = generateContextMenuListOptions(
+          ActionsForInventory.CraftMaterial
+        );
+        break;
+      case ItemType.Tool:
+        contextActionMenu = generateContextMenuListOptions(
+          ActionsForInventory.Tool
+        );
+        break;
+
+      default:
+        contextActionMenu = generateContextMenuListOptions(
+          ActionsForInventory.Other
+        );
+        break;
+    }
+  }
+  if (itemContainerType === ItemContainerType.Equipment) {
+    switch (itemType) {
+      case ItemType.Container:
+        contextActionMenu = generateContextMenuListOptions(
+          ActionsForEquipmentSet.Container
+        );
+
+        break;
+      default:
+        contextActionMenu = generateContextMenuListOptions(
+          ActionsForEquipmentSet.Equipment
+        );
+    }
+  }
+  if (itemContainerType === ItemContainerType.Loot) {
+    switch (itemType) {
+      case ItemType.Weapon:
+      case ItemType.Armor:
+      case ItemType.Accessory:
+      case ItemType.Jewelry:
+        contextActionMenu = generateContextMenuListOptions(
+          ActionsForLoot.Equipment
+        );
+        break;
+      case ItemType.Consumable:
+        contextActionMenu = generateContextMenuListOptions(
+          ActionsForLoot.Consumable
+        );
+        break;
+      case ItemType.CraftMaterial:
+        contextActionMenu = generateContextMenuListOptions(
+          ActionsForLoot.CraftMaterial
+        );
+        break;
+      case ItemType.Tool:
+        contextActionMenu = generateContextMenuListOptions(ActionsForLoot.Tool);
+        break;
+      default:
+        contextActionMenu = generateContextMenuListOptions(
+          ActionsForLoot.Other
+        );
+        break;
+    }
+  }
+  if (itemContainerType === ItemContainerType.MapContainer) {
+    switch (itemType) {
+      case ItemType.Weapon:
+      case ItemType.Armor:
+      case ItemType.Accessory:
+      case ItemType.Jewelry:
+        contextActionMenu = generateContextMenuListOptions(
+          ActionsForMapContainer.Equipment
+        );
+        break;
+      case ItemType.Consumable:
+        contextActionMenu = generateContextMenuListOptions(
+          ActionsForMapContainer.Consumable
+        );
+        break;
+      case ItemType.CraftMaterial:
+        contextActionMenu = generateContextMenuListOptions(
+          ActionsForMapContainer.CraftMaterial
+        );
+        break;
+      case ItemType.Tool:
+        contextActionMenu = generateContextMenuListOptions(
+          ActionsForMapContainer.Tool
+        );
+        break;
+      default:
+        contextActionMenu = generateContextMenuListOptions(
+          ActionsForMapContainer.Other
+        );
+        break;
+    }
+  }
+  return contextActionMenu;
+};