@rpg-engine/long-bow 0.1.92 → 0.1.96

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/ItemTooltip.tsx

@@ -1,32 +1,32 @@
-import React from 'react';
-import styled from 'styled-components';
-
-interface IProps {
-  label: string;
-}
-
-export const ItemTooltip: React.FC<IProps> = ({ label }) => {
-  return (
-    <Container>
-      <div>{label}</div>
-    </Container>
-  );
-};
-
-const Container = styled.div`
-  z-index: 2;
-  position: absolute;
-  top: 1rem;
-  left: 4rem;
-
-  font-size: 0.5rem;
-  color: white;
-  background-color: black;
-  border-radius: 5px;
-  padding: 0.5rem;
-  min-width: 20px;
-  width: 100%;
-  text-align: center;
-
-  opacity: 0.75;
-`;
+import React from 'react';
+import styled from 'styled-components';
+
+interface IProps {
+  label: string;
+}
+
+export const ItemTooltip: React.FC<IProps> = ({ label }) => {
+  return (
+    <Container>
+      <div>{label}</div>
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  z-index: 2;
+  position: absolute;
+  top: 1rem;
+  left: 4rem;
+
+  font-size: 0.5rem;
+  color: white;
+  background-color: black;
+  border-radius: 5px;
+  padding: 0.5rem;
+  min-width: 20px;
+  width: 100%;
+  text-align: center;
+
+  opacity: 0.75;
+`;

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

@@ -1,65 +1,65 @@
-import { IItem, IItemContainer } from '@rpg-engine/shared';
-import React from 'react';
-import styled from 'styled-components';
-import { SlotsContainer } from '../../Abstractions/SlotsContainer';
-import { SlotContainerType } from './ItemContainerTypes';
-import { ItemSlot } from './ItemSlot';
-
-export interface IItemContainerProps {
-  itemContainer: IItemContainer;
-  onClose?: () => void;
-  onItemClick?: (
-    item: IItem,
-    slotContainerType: SlotContainerType | null
-  ) => void;
-  onMouseOver?: (e: any, slotIndex: number, item: IItem | null) => void;
-  onSelected?: (optionId: string) => void;
-}
-
-export const ItemContainer: React.FC<IItemContainerProps> = ({
-  itemContainer,
-  onClose,
-  onMouseOver,
-  onSelected,
-  onItemClick,
-}) => {
-  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={(event, slotIndex, item) => {
-            if (onMouseOver) onMouseOver(event, slotIndex, item);
-          }}
-          onClick={(item, slotContainerType) => {
-            if (onItemClick) onItemClick(item, slotContainerType);
-          }}
-          onSelected={(optionId: string) => {
-            if (onSelected) onSelected(optionId);
-          }}
-        />
-      );
-    }
-    return slots;
-  };
-
-  return (
-    <SlotsContainer title={itemContainer.name || 'Container'} onClose={onClose}>
-      <ItemsContainer className="item-container-body">
-        {onRenderSlots()}
-      </ItemsContainer>
-    </SlotsContainer>
-  );
-};
-
-const ItemsContainer = styled.div`
-  max-width: 280px;
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-`;
+import { IItem, IItemContainer } from '@rpg-engine/shared';
+import React from 'react';
+import styled from 'styled-components';
+import { SlotsContainer } from '../../Abstractions/SlotsContainer';
+import { SlotContainerType } from './ItemContainerTypes';
+import { ItemSlot } from './ItemSlot';
+
+export interface IItemContainerProps {
+  itemContainer: IItemContainer;
+  onClose?: () => void;
+  onItemClick?: (
+    item: IItem,
+    slotContainerType: SlotContainerType | null
+  ) => void;
+  onMouseOver?: (e: any, slotIndex: number, item: IItem | null) => void;
+  onSelected?: (optionId: string, item: IItem) => void;
+}
+
+export const ItemContainer: React.FC<IItemContainerProps> = ({
+  itemContainer,
+  onClose,
+  onMouseOver,
+  onSelected,
+  onItemClick,
+}) => {
+  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={(event, slotIndex, item) => {
+            if (onMouseOver) onMouseOver(event, slotIndex, item);
+          }}
+          onClick={(item, slotContainerType) => {
+            if (onItemClick) onItemClick(item, slotContainerType);
+          }}
+          onSelected={(optionId: string, item: IItem) => {
+            if (onSelected) onSelected(optionId, item);
+          }}
+        />
+      );
+    }
+    return slots;
+  };
+
+  return (
+    <SlotsContainer title={itemContainer.name || 'Container'} onClose={onClose}>
+      <ItemsContainer className="item-container-body">
+        {onRenderSlots()}
+      </ItemsContainer>
+    </SlotsContainer>
+  );
+};
+
+const ItemsContainer = styled.div`
+  max-width: 280px;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+`;

package/src/components/Item/Inventory/ItemContainerTypes.ts

@@ -1,4 +1,4 @@
-export enum SlotContainerType {
-  INVENTORY = 'Inventory',
-  EQUIPMENT_SET = 'EquipmentSet',
-}
+export enum SlotContainerType {
+  INVENTORY = 'Inventory',
+  EQUIPMENT_SET = 'EquipmentSet',
+}

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

@@ -1,199 +1,198 @@
-import { IItem, IItemContainer, ItemSlotType } from '@rpg-engine/shared';
-
-import { observer } from 'mobx-react-lite';
-import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
-import atlasJSON from '../../../mocks/atlas/items/items.json';
-import atlasIMG from '../../../mocks/atlas/items/items.png';
-import { RelativeListMenu } from '../../RelativeListMenu';
-import { SpriteFromAtlas } from '../../shared/SpriteFromAtlas';
-import { ItemTooltip } from '../Cards/ItemTooltip';
-import {
-  handleContextMenuList,
-  IContextMenuItem,
-} from './itemContainerHelper';
-import { SlotContainerType } from './ItemContainerTypes';
-
-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;
-  onSelected: (payload: any) => void;
-  onMouseOver: (
-    event: any,
-    slotIndex: number,
-    item: IItem | null,
-    x: number,
-    y: number
-  ) => void;
-  onMouseOut?: () => void;
-  onClick: (item: IItem, slotContainerType: SlotContainerType | null) => void;
-}
-
-export const ItemSlot: React.FC<IProps> = observer(
-  ({
-    slotIndex,
-    item,
-    slotContainerType,
-    slotSpriteMask,
-    onMouseOver,
-    onMouseOut,
-    onClick,
-    onSelected,
-  }) => {
-    const [isTooltipVisible, setTooltipVisible] = useState(false);
-
-    const [isContextMenuVisible, setIsContextMenuVisible] = useState(false);
-
-    const [contextActions, setContextActions] = useState<IContextMenuItem[]>(
-      []
-    );
-
-    useEffect(() => {
-      if (item) {        
-        setContextActions(handleContextMenuList(item.type, slotContainerType) );
-      }
-    }, [item]);
-
-    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
-            key={itemToRender._id}
-            atlasIMG={atlasIMG}
-            atlasJSON={atlasJSON}
-            spriteKey={itemToRender.texturePath}
-            imgScale={3}
-          />
-        );
-      }
-      if (itemToRender?.isStackable && itemToRender?.stackQty) {
-        element.push(
-          <ItemQty
-            left={getLeftPositionValue(itemToRender.stackQty)}
-            key={`qty-${itemToRender._id}`}
-          >
-            {' '}
-            {itemToRender.stackQty}{' '}
-          </ItemQty>
-        );
-      }
-      return element;
-    };
-
-    const renderEquipment = (itemToRender: IItem | null) => {
-      if (
-        itemToRender?.texturePath &&
-        itemToRender.allowedEquipSlotType?.includes(slotSpriteMask!)
-      ) {
-        return (
-          <SpriteFromAtlas
-            key={itemToRender._id}
-            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={() => {
-          if (onMouseOut) onMouseOut();
-        }}
-        onMouseEnter={() => setTooltipVisible(true)}
-        onMouseLeave={() => setTooltipVisible(false)}
-        onClick={() => {
-          setTooltipVisible(false);
-
-          if (item) {
-            setIsContextMenuVisible(!isContextMenuVisible);
-            onClick(item, slotContainerType);
-          }
-        }}
-      >
-        {isContextMenuVisible && contextActions && (
-          <RelativeListMenu
-            options={contextActions}
-            onSelected={(optionId: string) => {
-              setIsContextMenuVisible(false);
-              onSelected(optionId);
-            }}
-            onOutsideClick={() => {
-              setIsContextMenuVisible(false);
-            }}
-          />
-        )}
-
-        {isTooltipVisible && item && <ItemTooltip label={item.name} />}
-
-        {onRenderSlot(item)}
-      </Container>
-    );
-  }
-);
-
-const Container = styled.div`
-  margin: 0.1rem;
-  .sprite-from-atlas-img {
-    position: relative;
-    top: 1.5rem;
-    left: 1.5rem;
-  }
-  position: relative;
-`;
-
-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 { observer } from 'mobx-react-lite';
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import atlasJSON from '../../../mocks/atlas/items/items.json';
+import atlasIMG from '../../../mocks/atlas/items/items.png';
+import { RelativeListMenu } from '../../RelativeListMenu';
+import { SpriteFromAtlas } from '../../shared/SpriteFromAtlas';
+import { ItemTooltip } from '../Cards/ItemTooltip';
+import { handleContextMenuList, IContextMenuItem } from './itemContainerHelper';
+import { SlotContainerType } from './ItemContainerTypes';
+
+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;
+  onSelected: (selectedOption: string, item: IItem) => void;
+  onMouseOver: (
+    event: any,
+    slotIndex: number,
+    item: IItem | null,
+    x: number,
+    y: number
+  ) => void;
+  onMouseOut?: () => void;
+  onClick: (item: IItem, slotContainerType: SlotContainerType | null) => void;
+}
+
+export const ItemSlot: React.FC<IProps> = observer(
+  ({
+    slotIndex,
+    item,
+    slotContainerType,
+    slotSpriteMask,
+    onMouseOver,
+    onMouseOut,
+    onClick,
+    onSelected,
+  }) => {
+    const [isTooltipVisible, setTooltipVisible] = useState(false);
+
+    const [isContextMenuVisible, setIsContextMenuVisible] = useState(false);
+
+    const [contextActions, setContextActions] = useState<IContextMenuItem[]>(
+      []
+    );
+
+    useEffect(() => {
+      if (item) {
+        setContextActions(handleContextMenuList(item.type, slotContainerType));
+      }
+    }, [item]);
+
+    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
+            key={itemToRender._id}
+            atlasIMG={atlasIMG}
+            atlasJSON={atlasJSON}
+            spriteKey={itemToRender.texturePath}
+            imgScale={3}
+          />
+        );
+      }
+      if (itemToRender?.isStackable && itemToRender?.stackQty) {
+        element.push(
+          <ItemQty
+            left={getLeftPositionValue(itemToRender.stackQty)}
+            key={`qty-${itemToRender._id}`}
+          >
+            {' '}
+            {itemToRender.stackQty}{' '}
+          </ItemQty>
+        );
+      }
+      return element;
+    };
+
+    const renderEquipment = (itemToRender: IItem | null) => {
+      if (
+        itemToRender?.texturePath &&
+        itemToRender.allowedEquipSlotType?.includes(slotSpriteMask!)
+      ) {
+        return (
+          <SpriteFromAtlas
+            key={itemToRender._id}
+            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={() => {
+          if (onMouseOut) onMouseOut();
+        }}
+        onMouseEnter={() => setTooltipVisible(true)}
+        onMouseLeave={() => setTooltipVisible(false)}
+        onClick={() => {
+          setTooltipVisible(false);
+
+          if (item) {
+            setIsContextMenuVisible(!isContextMenuVisible);
+            onClick(item, slotContainerType);
+          }
+        }}
+      >
+        {isContextMenuVisible && contextActions && (
+          <RelativeListMenu
+            options={contextActions}
+            onSelected={(optionId: string) => {
+              setIsContextMenuVisible(false);
+              if (item) {
+                onSelected(optionId, item);
+              }
+            }}
+            onOutsideClick={() => {
+              setIsContextMenuVisible(false);
+            }}
+          />
+        )}
+
+        {isTooltipVisible && item && <ItemTooltip label={item.name} />}
+
+        {onRenderSlot(item)}
+      </Container>
+    );
+  }
+);
+
+const Container = styled.div`
+  margin: 0.1rem;
+  .sprite-from-atlas-img {
+    position: relative;
+    top: 1.5rem;
+    left: 1.5rem;
+  }
+  position: relative;
+`;
+
+interface IItemQtyProps {
+  left: string;
+}
+const ItemQty = styled.span<IItemQtyProps>`
+  position: relative;
+  top: 1.5rem;
+  left: ${props => props.left};
+`;