@rpg-engine/long-bow 0.1.79 → 0.1.82

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

@@ -1,113 +1,113 @@
-import { IItem, IItemContainer, 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 { SlotsContainer } from '../../Abstractions/SlotsContainer';
-import { ListMenu } from '../../ListMenu';
-import { uiStore } from '../../store/UI.store';
-import { ItemCard } from '../Cards/ItemCard';
-import { ItemSlot, SlotContainerType } from './ItemSlot';
-
-export interface IItemContainerProps {
-  itemContainer: IItemContainer;
-  onClose?: () => void;
-  onMouseOver?: (e: any, slotIndex: number, item: IItem | null) => void;
-  onActionSelected?: (payload: any) => void;
-  initialPosition?: { x: number; y: number };
-}
-
-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 onSelected = (selectedActionId: ItemSocketEvents | string): void => {
-      uiStore.onSelected(selectedActionId, onActionSelected);
-    };
-
-    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();
-            }}
-          />
-        );
-      }
-      return slots;
-    };
-
-    return (
-      <SlotsContainer
-        title={itemContainer.name || 'Container'}
-        onPositionChange={({ x, y }) => {
-          setDraggablePosition({ x, y });
-        }}
-        onOutsideClick={() => {
-          uiStore.clearContextMenu();
-          uiStore.clearItemHoverDetail();
-        }}
-        onClose={onClose}
-      >
-        <ItemsContainer className="item-container-body">
-          {onRenderSlots()}
-        </ItemsContainer>
-
-        {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}
-      </SlotsContainer>
-    );
-  }
-);
-
-const ItemsContainer = styled.div`
-  max-width: 280px;
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-`;
+import { IItem, IItemContainer, 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 { SlotsContainer } from '../../Abstractions/SlotsContainer';
+import { ListMenu } from '../../ListMenu';
+import { uiStore } from '../../store/UI.store';
+import { ItemCard } from '../Cards/ItemCard';
+import { ItemSlot, SlotContainerType } from './ItemSlot';
+
+export interface IItemContainerProps {
+  itemContainer: IItemContainer;
+  onClose?: () => void;
+  onMouseOver?: (e: any, slotIndex: number, item: IItem | null) => void;
+  onActionSelected?: (payload: any) => void;
+  initialPosition?: { x: number; y: number };
+}
+
+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 onSelected = (selectedActionId: ItemSocketEvents | string): void => {
+      uiStore.onSelected(selectedActionId, onActionSelected);
+    };
+
+    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();
+            }}
+          />
+        );
+      }
+      return slots;
+    };
+
+    return (
+      <SlotsContainer
+        title={itemContainer.name || 'Container'}
+        onPositionChange={({ x, y }) => {
+          setDraggablePosition({ x, y });
+        }}
+        onOutsideClick={() => {
+          uiStore.clearContextMenu();
+          uiStore.clearItemHoverDetail();
+        }}
+        onClose={onClose}
+      >
+        <ItemsContainer className="item-container-body">
+          {onRenderSlots()}
+        </ItemsContainer>
+
+        {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}
+      </SlotsContainer>
+    );
+  }
+);
+
+const ItemsContainer = styled.div`
+  max-width: 280px;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+`;

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

@@ -1,158 +1,158 @@
-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 '../../shared/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: 'legs/studded-legs.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,
-    item: IItem | null,
-    x: number,
-    y: 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,
-}) => {
-  const getLeftPositionValue = (quantity: number) => {
-    if (quantity > 0 && quantity < 10) return '2.5rem';
-    else if (quantity > 9 && quantity < 100) return '2.0rem';
-    else if (quantity > 99) return '1rem';
-    return '2.5rem';
-  };
-
-  const renderItem = (itemToRender: IItem | null) => {
-    const element = [];
-    if (itemToRender?.texturePath) {
-      element.push(
-        <SpriteFromAtlas
-          atlasIMG={atlasIMG}
-          atlasJSON={atlasJSON}
-          spriteKey={itemToRender.texturePath}
-          imgScale={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}
-          imgScale={3}
-        />
-      );
-    } else {
-      return (
-        <SpriteFromAtlas
-          atlasIMG={atlasIMG}
-          atlasJSON={atlasJSON}
-          spriteKey={EquipmentSlotSpriteByType[slotSpriteMask!]}
-          imgScale={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) {
-          onClick(item, e.clientX, e.clientY, slotContainerType);
-        } else {
-          onCancelContextMenu();
-        }
-      }}
-    >
-      {onRenderSlot(item)}
-    </Container>
-  );
-};
-
-const Container = styled.div`
-  margin: 0.1rem;
-  .sprite-from-atlas-img {
-    position: relative;
-    top: 1.5rem;
-    left: 1.5rem;
-  }
-`;
-
-interface IItemQtyProps {
-  left: string;
-}
-const ItemQty = styled.span<IItemQtyProps>`
-  position: relative;
-  top: 1.5rem;
-  left: ${props => props.left};
-`;
+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 '../../shared/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: 'legs/studded-legs.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,
+    item: IItem | null,
+    x: number,
+    y: 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,
+}) => {
+  const getLeftPositionValue = (quantity: number) => {
+    if (quantity > 0 && quantity < 10) return '2.5rem';
+    else if (quantity > 9 && quantity < 100) return '2.0rem';
+    else if (quantity > 99) return '1rem';
+    return '2.5rem';
+  };
+
+  const renderItem = (itemToRender: IItem | null) => {
+    const element = [];
+    if (itemToRender?.texturePath) {
+      element.push(
+        <SpriteFromAtlas
+          atlasIMG={atlasIMG}
+          atlasJSON={atlasJSON}
+          spriteKey={itemToRender.texturePath}
+          imgScale={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}
+          imgScale={3}
+        />
+      );
+    } else {
+      return (
+        <SpriteFromAtlas
+          atlasIMG={atlasIMG}
+          atlasJSON={atlasJSON}
+          spriteKey={EquipmentSlotSpriteByType[slotSpriteMask!]}
+          imgScale={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) {
+          onClick(item, e.clientX, e.clientY, slotContainerType);
+        } else {
+          onCancelContextMenu();
+        }
+      }}
+    >
+      {onRenderSlot(item)}
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  margin: 0.1rem;
+  .sprite-from-atlas-img {
+    position: relative;
+    top: 1.5rem;
+    left: 1.5rem;
+  }
+`;
+
+interface IItemQtyProps {
+  left: string;
+}
+const ItemQty = styled.span<IItemQtyProps>`
+  position: relative;
+  top: 1.5rem;
+  left: ${props => props.left};
+`;