@rpg-engine/long-bow 0.1.70 → 0.1.71

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

@@ -1,12 +1,34 @@
-import { IItem } from '@rpg-engine/shared';
+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 '../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: 'crafting-resources/medicinal-leaf.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,
@@ -14,14 +36,23 @@ interface IProps {
     x: number,
     y: number
   ) => void;
-  onClick: (item: IItem, posX: number, posY: 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,
 }) => {
@@ -32,51 +63,88 @@ export const ItemSlot: React.FC<IProps> = ({
     return '2.5rem';
   };
 
+  const renderItem = (itemToRender: IItem | null) => {
+    const element = [];
+    if (itemToRender?.texturePath) {
+      element.push(
+        <SpriteFromAtlas
+          atlasIMG={atlasIMG}
+          atlasJSON={atlasJSON}
+          spriteKey={itemToRender.texturePath}
+          scale={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}
+          scale={3}
+        />
+      );
+    } else {
+      return (
+        <SpriteFromAtlas
+          atlasIMG={atlasIMG}
+          atlasJSON={atlasJSON}
+          spriteKey={EquipmentSlotSpriteByType[slotSpriteMask!]}
+          scale={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) {
-          console.log(e);
-          onClick(item, e.clientX, e.clientY);
+          onClick(item, e.clientX, e.clientY, slotContainerType);
         } 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}
+      {onRenderSlot(item)}
     </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);
-    }
   }
 `;
 

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

@@ -1,21 +1,32 @@
-import { ActionsByItemType, ItemType } from '@rpg-engine/shared';
+import {
+  ActionsByItemType,
+  ItemSocketEventsDisplayLabels,
+  ItemType,
+} from '@rpg-engine/shared';
 
-interface IContextMenuItem {
+export 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;
-  };
+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:
@@ -42,3 +53,29 @@ export const handleContextMenuList = (itemType: ItemType) => {
   }
   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;
+};

package/src/components/Item/SpriteFromAtlas.tsx

@@ -29,7 +29,7 @@ export const SpriteFromAtlas: React.FC<IProps> = ({
   const spriteData = atlasJSON.frames[spriteKey];
 
   return (
-    <Container width={width} height={height}>
+    <Container width={width} height={height} hasHover={grayScale}>
       <ImgSprite
         className="sprite-from-atlas-img"
         atlasIMG={atlasIMG}
@@ -58,11 +58,18 @@ interface IImgSpriteProps {
 interface IContainerProps {
   width: number;
   height: number;
+  hasHover: boolean;
 }
 
 const Container = styled.div`
   width: ${(props: IContainerProps) => props.width}px;
   height: ${(props: IContainerProps) => props.height}px;
+  ${(props: IContainerProps) =>
+    !props.hasHover
+      ? `&:hover {
+    filter: sepia(100%) saturate(300%) brightness(70%) hue-rotate(180deg);
+  }`
+      : ``}
 `;
 
 const ImgSprite = styled.div<IImgSpriteProps>`

package/src/components/ListMenu.tsx

@@ -26,12 +26,12 @@ export const ListMenu: React.FC<IListMenuProps> = ({
       <ul className="rpgui-list-imp" style={{ overflow: 'hidden' }}>
         {options.map(params => (
           <ListElement
-            key={params.text}
+            key={params?.id}
             onClick={() => {
-              onSelected(params.id);
+              onSelected(params?.id);
             }}
           >
-            {params.text}
+            {params?.text || 'No text'}
           </ListElement>
         ))}
       </ul>

package/src/components/store/UI.store.ts

@@ -0,0 +1,192 @@
+import {
+  IItem,
+  IPayloadProps,
+  ItemSocketEvents,
+  ItemSocketEventsDisplayLabels,
+  ItemType,
+} from '@rpg-engine/shared';
+import { makeAutoObservable, toJS } from 'mobx';
+import {
+  handleContextMenuList,
+  handleEquipmentContextMenuList,
+  IContextMenuItem,
+} from '../Item/Inventory/itemContainerHelper';
+import { SlotContainerType } from '../Item/Inventory/ItemSlot';
+
+interface IContextMenu {
+  visible: boolean;
+  posX: number;
+  posY: number;
+  slotItem: IItem | null;
+  slotIndex?: number | null;
+  contextActions: IContextMenuItem[];
+}
+
+interface IHoverDetail {
+  visible: boolean;
+  posX: number;
+  posY: number;
+  item: IItem | null;
+}
+
+interface ISetContextMenu extends Omit<IContextMenu, 'contextActions'> {}
+
+const initialState = {
+  visible: false,
+  posX: 0,
+  posY: 0,
+  contextActions: [],
+  slotItem: null,
+};
+
+const initialHoverState = {
+  visible: false,
+  posX: 0,
+  posY: 0,
+  item: null,
+};
+class UIStore {
+  public contextMenu: IContextMenu | null = initialState;
+
+  public onHoverDetail: IHoverDetail | null = initialHoverState;
+
+  constructor() {
+    makeAutoObservable(this);
+  }
+
+  public setContextMenu(contextMenu: ISetContextMenu, itemType: ItemType) {
+    const contextActions = handleContextMenuList(itemType);
+
+    this.contextMenu = {
+      ...contextMenu,
+      contextActions,
+    };
+
+    console.log(toJS(this.contextMenu));
+  }
+
+  public setEquipContextMenu(
+    contextMenu: ISetContextMenu,
+    itemType: ItemType,
+    isItemContainer: boolean | undefined
+  ) {
+    const contextActions = handleEquipmentContextMenuList(itemType);
+    if (isItemContainer)
+      contextActions.push({
+        id: ItemSocketEvents.ContainerOpen,
+        text: ItemSocketEventsDisplayLabels[ItemSocketEvents.ContainerOpen],
+      });
+    this.contextMenu = {
+      ...contextMenu,
+      contextActions,
+    };
+
+    console.log(toJS(this.contextMenu));
+  }
+
+  public clearContextMenu() {
+    this.contextMenu = initialState;
+  }
+
+  public setItemHoverDetail(hoverDetail: IHoverDetail) {
+    if (hoverDetail?.item === null) this.clearItemHoverDetail();
+
+    this.onHoverDetail = {
+      ...hoverDetail,
+    };
+  }
+
+  public clearItemHoverDetail() {
+    this.onHoverDetail = initialHoverState;
+  }
+
+  public handleOnItemClick = (
+    item: IItem,
+    posX: number,
+    posY: number,
+    slotContainerType: SlotContainerType | null
+  ): void => {
+    if (
+      !item ||
+      JSON.stringify(this.contextMenu?.slotItem) === JSON.stringify(item)
+    ) {
+      this.clearContextMenu();
+      this.clearItemHoverDetail();
+      return;
+    }
+    switch (slotContainerType) {
+      case SlotContainerType.EQUIPMENT_SET:
+        this.setEquipContextMenu(
+          {
+            visible: true,
+            posX,
+            posY,
+            slotItem: item,
+          },
+          item.type,
+          item.isItemContainer
+        );
+        break;
+      case SlotContainerType.INVENTORY:
+        this.setContextMenu(
+          {
+            visible: true,
+            posX,
+            posY,
+            slotItem: item,
+          },
+          item.type
+        );
+        break;
+      default:
+        this.setContextMenu(
+          {
+            visible: true,
+            posX,
+            posY,
+            slotItem: item,
+          },
+          item.type
+        );
+    }
+
+    this.clearItemHoverDetail();
+  };
+
+  public handleOnMouseHover = (
+    event: any,
+    slotIndex: number,
+    item: IItem | null,
+    posX: number,
+    posY: number,
+    onMouseOver: any
+  ): void => {
+    if (item) {
+      this.setItemHoverDetail({
+        visible: true,
+        posX,
+        posY,
+        item: item,
+      });
+    }
+    if (onMouseOver) {
+      onMouseOver(event, slotIndex, item);
+    }
+  };
+
+  public onSelected(
+    selectedActionId: ItemSocketEvents | string,
+    onActionSelected: any
+  ) {
+    let payloadData: IPayloadProps = {
+      actionType: selectedActionId,
+      item: this.contextMenu?.slotItem!,
+    };
+    if (onActionSelected) {
+      onActionSelected(payloadData);
+    }
+    this.clearContextMenu!();
+  }
+}
+
+export const uiStore = new UIStore();

package/src/index.tsx

@@ -19,4 +19,5 @@ export * from './components/SkillProgressBar';
 export * from './components/TextArea';
 export * from './components/Truncate';
 export * from './components/typography/DynamicText';
+export * from './components/Equipment/EquipmentSet';
 export { useEventListener } from './hooks/useEventListener';