@rpg-engine/long-bow 0.1.68 → 0.1.71

package/dist/mocks/skills.mocks.d.ts

@@ -0,0 +1,115 @@
+import { SkillType } from '@rpg-engine/shared';
+export declare const skillMock: {
+    _id: string;
+    stamina: {
+        type: SkillType;
+        level: number;
+        skillPoints: number;
+        skillPointsToNextLevel: number;
+    };
+    magic: {
+        type: SkillType;
+        level: number;
+        skillPoints: number;
+        skillPointsToNextLevel: number;
+    };
+    magicResistance: {
+        type: SkillType;
+        level: number;
+        skillPoints: number;
+        skillPointsToNextLevel: number;
+    };
+    strength: {
+        type: SkillType;
+        level: number;
+        skillPoints: number;
+        skillPointsToNextLevel: number;
+    };
+    resistance: {
+        type: SkillType;
+        level: number;
+        skillPoints: number;
+        skillPointsToNextLevel: number;
+    };
+    dexterity: {
+        type: SkillType;
+        level: number;
+        skillPoints: number;
+        skillPointsToNextLevel: number;
+    };
+    first: {
+        type: SkillType;
+        level: number;
+        skillPoints: number;
+        skillPointsToNextLevel: number;
+    };
+    club: {
+        type: SkillType;
+        level: number;
+        skillPoints: number;
+        skillPointsToNextLevel: number;
+    };
+    sword: {
+        type: SkillType;
+        level: number;
+        skillPoints: number;
+        skillPointsToNextLevel: number;
+    };
+    axe: {
+        type: SkillType;
+        level: number;
+        skillPoints: number;
+        skillPointsToNextLevel: number;
+    };
+    distance: {
+        type: SkillType;
+        level: number;
+        skillPoints: number;
+        skillPointsToNextLevel: number;
+    };
+    shielding: {
+        type: SkillType;
+        level: number;
+        skillPoints: number;
+        skillPointsToNextLevel: number;
+    };
+    fishing: {
+        type: SkillType;
+        level: number;
+        skillPoints: number;
+        skillPointsToNextLevel: number;
+    };
+    mining: {
+        type: SkillType;
+        level: number;
+        skillPoints: number;
+        skillPointsToNextLevel: number;
+    };
+    lumberjacking: {
+        type: SkillType;
+        level: number;
+        skillPoints: number;
+        skillPointsToNextLevel: number;
+    };
+    cooking: {
+        type: SkillType;
+        level: number;
+        skillPoints: number;
+        skillPointsToNextLevel: number;
+    };
+    alchemy: {
+        type: SkillType;
+        level: number;
+        skillPoints: number;
+        skillPointsToNextLevel: number;
+    };
+    level: number;
+    xpGainRate: number;
+    experience: number;
+    xpToNextLevel: number;
+    ownerType: string;
+    owner: string;
+    createdAt: string;
+    updatedAt: string;
+    __v: number;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.1.68",
+  "version": "0.1.71",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -83,11 +83,13 @@
   },
   "dependencies": {
     "@rollup/plugin-image": "^2.1.1",
-    "@rpg-engine/shared": "^0.3.11",
+    "@rpg-engine/shared": "^0.3.39",
     "dayjs": "^1.11.2",
+    "fs-extra": "^10.1.0",
+    "mobx": "^6.6.0",
+    "mobx-react": "^7.5.0",
     "react-draggable": "^4.4.5",
     "react-error-boundary": "^3.1.4",
-    "react-resizable": "^3.0.4",
     "rollup-plugin-image-files": "^1.4.2",
     "rpgui": "^1.0.3"
   }

package/src/components/Abstractions/SlotsContainer.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { IPosition } from '../../types/eventTypes';
+import { DraggableContainer } from '../DraggableContainer';
+import { RPGUIContainerTypes } from '../RPGUIContainer';
+
+interface IProps {
+  children: React.ReactNode;
+  title: string;
+  onClose?: () => void;
+  onPositionChange?: (position: IPosition) => void;
+  onOutsideClick?: () => void;
+}
+
+export const SlotsContainer: React.FC<IProps> = ({
+  children,
+  title,
+  onClose,
+  onPositionChange,
+  onOutsideClick,
+}) => {
+  return (
+    <DraggableContainer
+      title={title}
+      type={RPGUIContainerTypes.Framed}
+      onCloseButton={() => {
+        if (onClose) {
+          onClose();
+        }
+      }}
+      width="330px"
+      cancelDrag=".item-container-body"
+      onPositionChange={({ x, y }) => {
+        if (onPositionChange) {
+          onPositionChange({ x, y });
+        }
+      }}
+      onOutsideClick={onOutsideClick}
+    >
+      {children}
+    </DraggableContainer>
+  );
+};

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';
 
@@ -10,12 +11,13 @@ export interface IDraggableContainerProps {
   height?: string;
   className?: string;
   type?: RPGUIContainerTypes;
-  title: string;
+  title?: string;
   imgSrc?: string;
   imgWidth?: string;
-  onCloseButton: () => void;
+  onCloseButton?: () => void;
   cancelDrag?: string;
   onPositionChange?: (position: IPosition) => void;
+  onOutsideClick?: () => void;
 }
 
 export const DraggableContainer: React.FC<IDraggableContainerProps> = ({
@@ -30,43 +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,
+            });
+          }
+        }}
       >
-        <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>
   );
 };
 
@@ -101,7 +128,7 @@ const TitleContainer = styled.div`
   height: 100%;
   display: flex;
   flex-wrap: wrap;
-  justify-content: center;
+  justify-content: flex-start;
   align-items: center;
 `;
 

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;
+`;