@rpg-engine/long-bow 0.1.70 → 0.1.71

package/src/components/DraggableContainer.tsx

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import Draggable, { DraggableData } from 'react-draggable';
 import styled from 'styled-components';
+import { useOutsideClick } from '../hooks/useOutsideAlerter';
 import { IPosition } from '../types/eventTypes';
 import { RPGUIContainerTypes } from './RPGUIContainer';
 
@@ -16,6 +17,7 @@ export interface IDraggableContainerProps {
   onCloseButton?: () => void;
   cancelDrag?: string;
   onPositionChange?: (position: IPosition) => void;
+  onOutsideClick?: () => void;
 }
 
 export const DraggableContainer: React.FC<IDraggableContainerProps> = ({
@@ -30,45 +32,68 @@ export const DraggableContainer: React.FC<IDraggableContainerProps> = ({
   imgWidth = '20px',
   cancelDrag,
   onPositionChange,
+  onOutsideClick,
 }) => {
-  return (
-    <Draggable
-      cancel={`.container-close,${cancelDrag}`}
-      onDrag={(_e, data: DraggableData) => {
-        if (onPositionChange) {
-          onPositionChange({
-            x: data.x,
-            y: data.y,
-          });
+  const draggableRef = useRef(null);
+
+  useOutsideClick(draggableRef, 'item-container');
+
+  useEffect(() => {
+    document.addEventListener('clickOutside', event => {
+      const e = event as CustomEvent;
+
+      if (e.detail.id === 'item-container') {
+        if (onOutsideClick) {
+          onOutsideClick();
         }
-      }}
-    >
-      <Container
-        width={width}
-        height={height || 'auto'}
-        className={`rpgui-container ${type} ${className}`}
+      }
+    });
+
+    return () => {
+      document.removeEventListener('clickOutside', _e => {});
+    };
+  }, []);
+
+  return (
+    <div ref={draggableRef}>
+      <Draggable
+        cancel={`.container-close,${cancelDrag}`}
+        onDrag={(_e, data: DraggableData) => {
+          if (onPositionChange) {
+            onPositionChange({
+              x: data.x,
+              y: data.y,
+            });
+          }
+        }}
       >
-        {title && (
-          <TitleContainer className="drag-handler">
-            <Title>
-              {imgSrc && <Icon src={imgSrc} width={imgWidth} />}
-              {title}
-            </Title>
-          </TitleContainer>
-        )}
-        {onCloseButton && (
-          <CloseButton
-            className="container-close"
-            onClick={onCloseButton}
-            onTouchStart={onCloseButton}
-          >
-            X
-          </CloseButton>
-        )}
-
-        {children}
-      </Container>
-    </Draggable>
+        <Container
+          width={width}
+          height={height || 'auto'}
+          className={`rpgui-container ${type} ${className}`}
+        >
+          {title && (
+            <TitleContainer className="drag-handler">
+              <Title>
+                {imgSrc && <Icon src={imgSrc} width={imgWidth} />}
+                {title}
+              </Title>
+            </TitleContainer>
+          )}
+          {onCloseButton && (
+            <CloseButton
+              className="container-close"
+              onClick={onCloseButton}
+              onTouchStart={onCloseButton}
+            >
+              X
+            </CloseButton>
+          )}
+
+          {children}
+        </Container>
+      </Draggable>
+    </div>
   );
 };
 

package/src/components/Equipment/EquipmentSet.tsx

@@ -0,0 +1,179 @@
+import {
+  IEquipementSet,
+  IItem,
+  IItemContainer,
+  ItemSlotType,
+  ItemSocketEvents,
+} from '@rpg-engine/shared';
+import { observer } from 'mobx-react';
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { IPosition } from '../../types/eventTypes';
+import { DraggableContainer } from '../DraggableContainer';
+import { ItemCard } from '../Item/Cards/ItemCard';
+import { ItemSlot, SlotContainerType } from '../Item/Inventory/ItemSlot';
+import { ListMenu } from '../ListMenu';
+import { RPGUIContainerTypes } from '../RPGUIContainer';
+import { uiStore } from '../store/UI.store';
+
+export interface IEquipmentSetProps {
+  equipmentSet: IEquipementSet;
+  onClose?: () => void;
+  onMouseOver?: (e: any, slotIndex: number, item: IItem | null) => void;
+  onActionSelected?: (payload: any) => void;
+  initialPosition?: { x: number; y: number };
+}
+
+export const EquipmentSet: React.FC<IEquipmentSetProps> = observer(
+  ({
+    equipmentSet,
+    onClose,
+    onMouseOver,
+    onActionSelected,
+    initialPosition = { x: 0, y: 0 },
+  }) => {
+    const {
+      neck,
+      leftHand,
+      ring,
+      head,
+      armor,
+      legs,
+      boot,
+      inventory,
+      rightHand,
+      accessory,
+    } = equipmentSet;
+
+    const equipmentData = [
+      neck,
+      leftHand,
+      ring,
+      head,
+      armor,
+      legs,
+      boot,
+      inventory,
+      rightHand,
+      accessory,
+    ];
+
+    const equipmentMaskSlots = [
+      ItemSlotType.Neck,
+      ItemSlotType.LeftHand,
+      ItemSlotType.Ring,
+      ItemSlotType.Head,
+      ItemSlotType.Torso,
+      ItemSlotType.Legs,
+      ItemSlotType.Feet,
+      ItemSlotType.Inventory,
+      ItemSlotType.RightHand,
+      ItemSlotType.Accessory,
+    ];
+
+    // 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 onSelected = (selectedActionId: ItemSocketEvents | string): void => {
+      uiStore.onSelected(selectedActionId, onActionSelected);
+    };
+
+    const onRenderEquipmentSlotRange = (start: number, end: number) => {
+      const equipmentRange = equipmentData.slice(start, end);
+      const slotMaksRange = equipmentMaskSlots.slice(start, end);
+
+      return equipmentRange.map((data, i) => {
+        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}
+            slotSpriteMask={slotMaksRange[i]}
+            onMouseOver={handleOnMouseHover}
+            onMouseOut={() => {
+              uiStore.clearItemHoverDetail();
+            }}
+            onClick={uiStore.handleOnItemClick}
+            onCancelContextMenu={() => {
+              uiStore.clearContextMenu();
+            }}
+          />
+        );
+      });
+    };
+
+    return (
+      <DraggableContainer
+        title={'Equipments'}
+        type={RPGUIContainerTypes.Framed}
+        onCloseButton={() => {
+          if (onClose) onClose();
+        }}
+        width="330px"
+        cancelDrag=".equipment-container-body"
+        onPositionChange={({ x, y }) => {
+          setDraggablePosition({ x, y });
+        }}
+        onOutsideClick={() => {
+          uiStore.clearContextMenu();
+          uiStore.clearItemHoverDetail();
+        }}
+      >
+        <EquipmentSetContainer className="equipment-container-body">
+          <EquipmentColumn>{onRenderEquipmentSlotRange(0, 3)}</EquipmentColumn>
+          <EquipmentColumn>{onRenderEquipmentSlotRange(3, 7)}</EquipmentColumn>
+          <EquipmentColumn>{onRenderEquipmentSlotRange(7, 10)}</EquipmentColumn>
+        </EquipmentSetContainer>
+
+        {uiStore.contextMenu?.visible ? (
+          <ListMenu
+            x={uiStore.contextMenu.posX - draggablePosition.x}
+            y={uiStore.contextMenu.posY - draggablePosition.y}
+            options={uiStore.contextMenu.contextActions}
+            onSelected={onSelected}
+          />
+        ) : null}
+
+        {uiStore.onHoverDetail?.visible ? (
+          <ItemCard
+            item={uiStore.onHoverDetail.item}
+            x={uiStore.onHoverDetail.posX - draggablePosition.x}
+            y={uiStore.onHoverDetail.posY - draggablePosition.y}
+          />
+        ) : null}
+      </DraggableContainer>
+    );
+  }
+);
+
+const EquipmentSetContainer = styled.div`
+  width: inherit;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  flex-direction: row;
+`;
+
+const EquipmentColumn = styled.div`
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  flex-direction: column;
+`;

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;