@rpg-engine/long-bow 0.1.78 → 0.1.794

package/src/components/Equipment/EquipmentSet.tsx

@@ -1,179 +1,180 @@
-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;
-`;
+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!)
+    // uiStore.setDraggablePosition(initialPosition)
+    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 });
+          console.log(draggablePosition)
+        }}
+        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 - uiStore.draggablePosition.x}
+            y={uiStore.contextMenu.posY - uiStore.draggablePosition.y}
+            options={uiStore.contextMenu.contextActions}
+            onSelected={onSelected}
+          />
+        ) : null}
+
+        {uiStore.onHoverDetail?.visible ? (
+          <ItemCard
+            item={uiStore.onHoverDetail.item}
+            x={uiStore.onHoverDetail.posX}
+            y={uiStore.onHoverDetail.posY}
+          />
+        ) : 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/Input.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
-
-export interface IInputProps
-  extends React.DetailedHTMLProps<
-    React.InputHTMLAttributes<HTMLInputElement>,
-    HTMLInputElement
-  > {}
-
-export const Input: React.FC<IInputProps> = ({ ...props }) => {
-  return <input {...props} />;
-};
+import React from 'react';
+
+export interface IInputProps
+  extends React.DetailedHTMLProps<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    HTMLInputElement
+  > {}
+
+export const Input: React.FC<IInputProps> = ({ ...props }) => {
+  return <input {...props} />;
+};

package/src/components/Item/Cards/ItemCard.tsx

@@ -1,36 +1,36 @@
-import { IItem } from '@rpg-engine/shared';
-import React from 'react';
-import styled from 'styled-components';
-
-interface IProps {
-  item: IItem | null;
-  x: number;
-  y: number;
-}
-
-export const ItemCard: React.FC<IProps> = ({ item, x, y }) => {
-  return (
-    <Container x={x} y={y}>
-      {item?.name}
-    </Container>
-  );
-};
-
-interface IContainerProps {
-  x?: number;
-  y?: number;
-  fontSize?: number;
-}
-const Container = styled.div<IContainerProps>`
-  position: absolute;
-  top: ${props => props.y || 0}px;
-  left: ${props => props.x || 0}px;
-  font-size: 0.5rem;
-  color: white;
-  background-color: black;
-  border-radius: 5px;
-  padding: 0.5rem;
-  min-width: 20px;
-
-  opacity: 0.5;
-`;
+import { IItem } from '@rpg-engine/shared';
+import React from 'react';
+import styled from 'styled-components';
+
+interface IProps {
+  item: IItem | null;
+  x: number;
+  y: number;
+}
+
+export const ItemCard: React.FC<IProps> = ({ item, x, y }) => {
+  return (
+    <Container x={x} y={y}>
+      {item?.name}
+    </Container>
+  );
+};
+
+interface IContainerProps {
+  x?: number;
+  y?: number;
+  fontSize?: number;
+}
+const Container = styled.div<IContainerProps>`
+  position: absolute;
+  top: ${props => props.y || 0}px;
+  left: ${props => props.x || 0}px;
+  font-size: 0.5rem;
+  color: white;
+  background-color: black;
+  border-radius: 5px;
+  padding: 0.5rem;
+  min-width: 20px;
+
+  opacity: 0.5;
+`;