@rpg-engine/long-bow 0.1.68 → 0.1.71

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

@@ -1,19 +1,13 @@
-import {
-  IItem,
-  IItemContainer,
-  IPayloadProps,
-  ItemSocketEvents,
-} from '@rpg-engine/shared';
-import React, { useEffect, useRef, useState } from 'react';
+import { IItem, IItemContainer, ItemSocketEvents } from '@rpg-engine/shared';
+import { observer } from 'mobx-react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
-import { useOutsideClick } from '../../../hooks/useOutsideAlerter';
 import { IPosition } from '../../../types/eventTypes';
-import { DraggableContainer } from '../../DraggableContainer';
+import { SlotsContainer } from '../../Abstractions/SlotsContainer';
 import { ListMenu } from '../../ListMenu';
-import { RPGUIContainerTypes } from '../../RPGUIContainer';
+import { uiStore } from '../../store/UI.store';
 import { ItemCard } from '../Cards/ItemCard';
-import { handleContextMenuList } from './itemContainerHelper';
-import { ItemSlot } from './ItemSlot';
+import { ItemSlot, SlotContainerType } from './ItemSlot';
 
 export interface IItemContainerProps {
   itemContainer: IItemContainer;
@@ -23,195 +17,93 @@ export interface IItemContainerProps {
   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 => {});
+export const ItemContainer: React.FC<IItemContainerProps> = observer(
+  ({
+    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 handleOnMouseHover = (
+      event: any,
+      slotIndex: number,
+      item: IItem | null,
+      x: number,
+      y: number
+    ) => {
+      uiStore.handleOnMouseHover(event, slotIndex, item, x, y, onMouseOver);
     };
-  }, []);
-
-  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 onSelected = (selectedActionId: ItemSocketEvents | string): void => {
+      uiStore.onSelected(selectedActionId, onActionSelected);
+    };
 
-  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,
-      });
-      if (onMouseOver) {
-        onMouseOver(event, slotIndex, item);
+    const onRenderSlots = () => {
+      const slots = [];
+
+      for (let i = 0; i < itemContainer.slotQty; i++) {
+        slots.push(
+          <ItemSlot
+            key={i}
+            slotIndex={i}
+            item={itemContainer.slots?.[i] || null}
+            slotContainerType={SlotContainerType.INVENTORY}
+            onMouseOver={handleOnMouseHover}
+            onClick={uiStore.handleOnItemClick}
+            onMouseOut={() => {
+              uiStore.clearItemHoverDetail();
+            }}
+            onCancelContextMenu={() => {
+              uiStore.clearContextMenu();
+            }}
+          />
+        );
       }
-    } 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,
+      return slots;
     };
-    if (onActionSelected) {
-      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
+    return (
+      <SlotsContainer
         title={itemContainer.name || 'Container'}
-        type={RPGUIContainerTypes.Framed}
-        onCloseButton={() => {
-          if (onClose) {
-            onClose();
-          }
-        }}
-        width="330px"
-        cancelDrag=".item-container-body"
         onPositionChange={({ x, y }) => {
           setDraggablePosition({ x, y });
         }}
+        onOutsideClick={() => {
+          uiStore.clearContextMenu();
+          uiStore.clearItemHoverDetail();
+        }}
+        onClose={onClose}
       >
         <ItemsContainer className="item-container-body">
           {onRenderSlots()}
         </ItemsContainer>
 
-        {contextData.visible ? (
+        {uiStore.contextMenu?.visible ? (
           <ListMenu
-            x={contextData.posX - draggablePosition.x}
-            y={contextData.posY - draggablePosition.y}
-            options={contextData.contextActions}
+            x={uiStore.contextMenu.posX - draggablePosition.x}
+            y={uiStore.contextMenu.posY - draggablePosition.y}
+            options={uiStore.contextMenu.contextActions}
             onSelected={onSelected}
           />
         ) : null}
 
-        {itemHoverDetail.visible ? (
+        {uiStore.onHoverDetail?.visible ? (
           <ItemCard
-            item={itemHoverDetail.item}
-            x={itemHoverDetail.posX}
-            y={itemHoverDetail.posY}
+            item={uiStore.onHoverDetail.item}
+            x={uiStore.onHoverDetail.posX}
+            y={uiStore.onHoverDetail.posY}
           />
         ) : null}
-      </DraggableContainer>
-    </div>
-  );
-};
+      </SlotsContainer>
+    );
+  }
+);
 
 const ItemsContainer = styled.div`
   max-width: 280px;

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

@@ -9,6 +9,8 @@ interface IProps {
   width?: number;
   height?: number;
   scale?: number;
+  grayScale?: boolean;
+  opacity?: number;
 }
 
 export const SpriteFromAtlas: React.FC<IProps> = ({
@@ -18,6 +20,8 @@ export const SpriteFromAtlas: React.FC<IProps> = ({
   width = GRID_WIDTH,
   height = GRID_HEIGHT,
   scale = 2,
+  grayScale = false,
+  opacity = 1,
 }) => {
   //! 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!
@@ -25,12 +29,14 @@ 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}
         frame={spriteData.frame}
         scale={scale}
+        grayScale={grayScale}
+        opacity={opacity}
       />
     </Container>
   );
@@ -45,16 +51,25 @@ interface IImgSpriteProps {
     h: number;
   };
   scale: number;
+  grayScale: boolean;
+  opacity: number;
 }
 
 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>`
@@ -66,4 +81,6 @@ const ImgSprite = styled.div<IImgSpriteProps>`
   position: relative;
   top: 8px;
   left: 8px;
+  filter: ${props => (props.grayScale ? 'grayscale(100%)' : 'none')};
+  opacity: ${props => props.opacity};
 `;

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/Multitab/Tab.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import styled from 'styled-components';
+import { MultitabType } from './TabsContainer';
+
+export interface ISingleTab {
+  active: boolean;
+  label: string;
+  onClick: () => void;
+  type: MultitabType;
+}
+
+export const Tab: React.FC<ISingleTab> = ({ active, label, onClick, type }) => {
+  return (
+    <CustomTab activeTab={active} onClick={onClick} className={type}>
+      <p>{label}</p>
+    </CustomTab>
+  );
+};
+
+interface ICustomTab {
+  activeTab: boolean;
+}
+
+const CustomTab = styled.div<ICustomTab>`
+  width: 120px;
+  color: white;
+  font-size: 0.8rem;
+
+  &.gray {
+    border-left: 0.25rem solid rgba(0, 0, 0, 0.25);
+    border-right: 0.25rem solid rgba(0, 0, 0, 0.25);
+    border-top: 0.25rem solid rgba(0, 0, 0, 0.25);
+    background: ${props => (props.activeTab ? '#4E4A4E' : '#2b292b')};
+  }
+
+  &.brown {
+    border-left: 0.25rem solid #996d55;
+    border-right: 0.25rem solid #996d55;
+    border-top: 0.25rem solid #996d55;
+    background: ${props => (props.activeTab ? '#BF886A' : '#B67051')};
+  }
+
+  margin-right: 10px;
+  p {
+    text-align: center;
+    font-size: 0.6rem;
+
+    opacity: ${props => (props.activeTab ? '1' : '0.5')};
+  }
+
+  border-radius: 5px 5px 0 0;
+
+  z-index: ${props => (props.activeTab ? 1 : -1)};
+
+  position: relative;
+  top: 0.3rem;
+`;

package/src/components/Multitab/TabBody.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import styled from 'styled-components';
+
+interface IProps {
+  id: string;
+  children: React.ReactNode;
+}
+
+export const TabBody: React.FC<IProps> = ({ id, children }) => {
+  return <Container data-tab-id={id}>{children}</Container>;
+};
+
+const Container = styled.div``;