@rpg-engine/long-bow 0.3.77 → 0.3.78

package/src/components/Dropdown.tsx

@@ -1,90 +1,90 @@
-import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
-import { v4 as uuidv4 } from 'uuid';
-
-export interface IOptionsProps {
-  id: number;
-  value: string;
-  option: string;
-}
-
-export interface IDropdownProps {
-  options: IOptionsProps[];
-  width?: string;
-  onChange: (value: string) => void;
-}
-
-export const Dropdown: React.FC<IDropdownProps> = ({
-  options,
-  width,
-  onChange,
-}) => {
-  const dropdownId = uuidv4();
-
-  const [selectedValue, setSelectedValue] = useState<string>('');
-  const [selectedOption, setSelectedOption] = useState<string>('');
-  const [opened, setOpened] = useState<boolean>(false);
-
-  useEffect(() => {
-    const firstOption = options[0];
-
-    if (firstOption && !selectedValue) {
-      setSelectedValue(firstOption.value);
-      setSelectedOption(firstOption.option);
-    }
-  }, [options]);
-
-  useEffect(() => {
-    if (selectedValue) {
-      onChange(selectedValue);
-    }
-  }, [selectedValue]);
-
-  return (
-    <Container onMouseLeave={() => setOpened(false)} width={width}>
-      <DropdownSelect
-        id={`dropdown-${dropdownId}`}
-        className="rpgui-dropdown-imp rpgui-dropdown-imp-header"
-        onPointerDown={() => setOpened(prev => !prev)}
-      >
-        <label>▼</label> {selectedOption}
-      </DropdownSelect>
-
-      <DropdownOptions className="rpgui-dropdown-imp" opened={opened}>
-        {options.map(option => {
-          return (
-            <li
-              key={option.id}
-              onPointerDown={() => {
-                setSelectedValue(option.value);
-                setSelectedOption(option.option);
-                setOpened(false);
-              }}
-            >
-              {option.option}
-            </li>
-          );
-        })}
-      </DropdownOptions>
-    </Container>
-  );
-};
-
-const Container = styled.div<{ width: string | undefined }>`
-  position: relative;
-  width: ${props => props.width || '100%'};
-`;
-
-const DropdownSelect = styled.p`
-  width: 100%;
-  box-sizing: border-box;
-`;
-
-const DropdownOptions = styled.ul<{
-  opened: boolean;
-}>`
-  position: absolute;
-  width: 100%;
-  display: ${props => (props.opened ? 'block' : 'none')};
-  box-sizing: border-box;
-`;
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { v4 as uuidv4 } from 'uuid';
+
+export interface IOptionsProps {
+  id: number;
+  value: string;
+  option: string;
+}
+
+export interface IDropdownProps {
+  options: IOptionsProps[];
+  width?: string;
+  onChange: (value: string) => void;
+}
+
+export const Dropdown: React.FC<IDropdownProps> = ({
+  options,
+  width,
+  onChange,
+}) => {
+  const dropdownId = uuidv4();
+
+  const [selectedValue, setSelectedValue] = useState<string>('');
+  const [selectedOption, setSelectedOption] = useState<string>('');
+  const [opened, setOpened] = useState<boolean>(false);
+
+  useEffect(() => {
+    const firstOption = options[0];
+
+    if (firstOption && !selectedValue) {
+      setSelectedValue(firstOption.value);
+      setSelectedOption(firstOption.option);
+    }
+  }, [options]);
+
+  useEffect(() => {
+    if (selectedValue) {
+      onChange(selectedValue);
+    }
+  }, [selectedValue]);
+
+  return (
+    <Container onMouseLeave={() => setOpened(false)} width={width}>
+      <DropdownSelect
+        id={`dropdown-${dropdownId}`}
+        className="rpgui-dropdown-imp rpgui-dropdown-imp-header"
+        onPointerDown={() => setOpened(prev => !prev)}
+      >
+        <label>▼</label> {selectedOption}
+      </DropdownSelect>
+
+      <DropdownOptions className="rpgui-dropdown-imp" opened={opened}>
+        {options.map(option => {
+          return (
+            <li
+              key={option.id}
+              onPointerDown={() => {
+                setSelectedValue(option.value);
+                setSelectedOption(option.option);
+                setOpened(false);
+              }}
+            >
+              {option.option}
+            </li>
+          );
+        })}
+      </DropdownOptions>
+    </Container>
+  );
+};
+
+const Container = styled.div<{ width: string | undefined }>`
+  position: relative;
+  width: ${props => props.width || '100%'};
+`;
+
+const DropdownSelect = styled.p`
+  width: 100%;
+  box-sizing: border-box;
+`;
+
+const DropdownOptions = styled.ul<{
+  opened: boolean;
+}>`
+  position: absolute;
+  width: 100%;
+  display: ${props => (props.opened ? 'block' : 'none')};
+  box-sizing: border-box;
+`;

package/src/components/DropdownSelectorContainer.tsx

@@ -1,42 +1,42 @@
-import React from 'react';
-import styled from 'styled-components';
-import { uiFonts } from '../constants/uiFonts';
-import { Dropdown } from './Dropdown';
-
-interface IDropdownSelectorOption {
-  id: string;
-  name: string;
-}
-
-export interface IDropdownSelectorContainer {
-  onChange: (id: string) => void;
-  options: IDropdownSelectorOption[];
-  details?: string;
-  title: string;
-}
-
-export const DropdownSelectorContainer: React.FC<IDropdownSelectorContainer> = ({
-  title,
-  onChange,
-  options,
-  details,
-}) => {
-  return (
-    <div>
-      <p>{title}</p>
-      <Dropdown
-        options={options.map((option, index) => ({
-          option: option.name,
-          value: option.id,
-          id: index,
-        }))}
-        onChange={onChange}
-      />
-      <Details>{details}</Details>
-    </div>
-  );
-};
-
-const Details = styled.p`
-  font-size: ${uiFonts.size.xsmall} !important;
-`;
+import React from 'react';
+import styled from 'styled-components';
+import { uiFonts } from '../constants/uiFonts';
+import { Dropdown } from './Dropdown';
+
+interface IDropdownSelectorOption {
+  id: string;
+  name: string;
+}
+
+export interface IDropdownSelectorContainer {
+  onChange: (id: string) => void;
+  options: IDropdownSelectorOption[];
+  details?: string;
+  title: string;
+}
+
+export const DropdownSelectorContainer: React.FC<IDropdownSelectorContainer> = ({
+  title,
+  onChange,
+  options,
+  details,
+}) => {
+  return (
+    <div>
+      <p>{title}</p>
+      <Dropdown
+        options={options.map((option, index) => ({
+          option: option.name,
+          value: option.id,
+          id: index,
+        }))}
+        onChange={onChange}
+      />
+      <Details>{details}</Details>
+    </div>
+  );
+};
+
+const Details = styled.p`
+  font-size: ${uiFonts.size.xsmall} !important;
+`;

package/src/components/Equipment/EquipmentSet.tsx

@@ -1,190 +1,190 @@
-import {
-  IEquipmentSet,
-  IItem,
-  IItemContainer,
-  ItemContainerType,
-  ItemSlotType,
-  ItemType,
-} from '@rpg-engine/shared';
-import React from 'react';
-import styled from 'styled-components';
-import { IPosition } from '../../types/eventTypes';
-import { DraggableContainer } from '../DraggableContainer';
-import { ItemSlot } from '../Item/Inventory/ItemSlot';
-import { RPGUIContainerTypes } from '../RPGUIContainer';
-
-export interface IEquipmentSetProps {
-  equipmentSet: IEquipmentSet;
-  onClose?: () => void;
-  onItemClick?: (
-    ItemType: ItemType,
-    item: IItem,
-    itemContainerType: ItemContainerType | null
-  ) => void;
-  onItemDragStart?: (
-    item: IItem,
-    slotIndex: number,
-    itemContainerType: ItemContainerType | null
-  ) => void;
-  onItemDragEnd?: (quantity?: number) => void;
-  onItemPlaceDrop?: (
-    item: IItem | null,
-    slotIndex: number,
-    itemContainerType: ItemContainerType | null
-  ) => void;
-  onItemOutsideDrop?: (item: IItem, position: IPosition) => void;
-  dragScale?: number;
-  checkIfItemCanBeMoved: () => boolean;
-  checkIfItemShouldDragEnd?: () => boolean;
-  onMouseOver?: (e: any, slotIndex: number, item: IItem | null) => void;
-  onSelected?: (optionId: string) => void;
-  initialPosition?: { x: number; y: number };
-  type: ItemContainerType | null;
-  atlasIMG: any;
-  atlasJSON: any;
-}
-
-export const EquipmentSet: React.FC<IEquipmentSetProps> = ({
-  equipmentSet,
-  onClose,
-  onMouseOver,
-  onSelected,
-  onItemClick,
-  atlasIMG,
-  atlasJSON,
-  onItemDragEnd,
-  onItemDragStart,
-  onItemPlaceDrop,
-  onItemOutsideDrop,
-  checkIfItemCanBeMoved,
-  checkIfItemShouldDragEnd,
-  dragScale,
-}) => {
-  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,
-  ];
-
-  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}
-          itemContainerType={ItemContainerType.Equipment}
-          slotSpriteMask={slotMaksRange[i]}
-          onMouseOver={(event, slotIndex, item) => {
-            if (onMouseOver) onMouseOver(event, slotIndex, item);
-          }}
-          onPointerDown={(itemType, ContainerType) => {
-            if (onItemClick) onItemClick(itemType, item, ContainerType);
-          }}
-          onSelected={(optionId: string) => {
-            if (onSelected) onSelected(optionId);
-          }}
-          onDragStart={(item, slotIndex, itemContainerType) => {
-            if (!item) {
-              return;
-            }
-
-            if (onItemDragStart)
-              onItemDragStart(item, slotIndex, itemContainerType);
-          }}
-          onDragEnd={quantity => {
-            if (onItemDragEnd) onItemDragEnd(quantity);
-          }}
-          dragScale={dragScale}
-          checkIfItemCanBeMoved={checkIfItemCanBeMoved}
-          checkIfItemShouldDragEnd={checkIfItemShouldDragEnd}
-          onPlaceDrop={(item, slotIndex, itemContainerType) => {
-            if (onItemPlaceDrop)
-              onItemPlaceDrop(item, slotIndex, itemContainerType);
-          }}
-          onOutsideDrop={(item, position) => {
-            if (onItemOutsideDrop) onItemOutsideDrop(item, position);
-          }}
-          atlasIMG={atlasIMG}
-          atlasJSON={atlasJSON}
-        />
-      );
-    });
-  };
-
-  return (
-    <DraggableContainer
-      title={'Equipments'}
-      type={RPGUIContainerTypes.Framed}
-      onCloseButton={() => {
-        if (onClose) onClose();
-      }}
-      width="330px"
-      cancelDrag=".equipment-container-body"
-    >
-      <EquipmentSetContainer className="equipment-container-body">
-        <EquipmentColumn>{onRenderEquipmentSlotRange(0, 3)}</EquipmentColumn>
-        <EquipmentColumn>{onRenderEquipmentSlotRange(3, 7)}</EquipmentColumn>
-        <EquipmentColumn>{onRenderEquipmentSlotRange(7, 10)}</EquipmentColumn>
-      </EquipmentSetContainer>
-    </DraggableContainer>
-  );
-};
-
-const EquipmentSetContainer = styled.div`
-  width: inherit;
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-  flex-direction: row;
-  touch-action: none;
-`;
-
-const EquipmentColumn = styled.div`
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-  flex-direction: column;
-  touch-action: none;
-`;
+import {
+  IEquipmentSet,
+  IItem,
+  IItemContainer,
+  ItemContainerType,
+  ItemSlotType,
+  ItemType,
+} from '@rpg-engine/shared';
+import React from 'react';
+import styled from 'styled-components';
+import { IPosition } from '../../types/eventTypes';
+import { DraggableContainer } from '../DraggableContainer';
+import { ItemSlot } from '../Item/Inventory/ItemSlot';
+import { RPGUIContainerTypes } from '../RPGUIContainer';
+
+export interface IEquipmentSetProps {
+  equipmentSet: IEquipmentSet;
+  onClose?: () => void;
+  onItemClick?: (
+    ItemType: ItemType,
+    item: IItem,
+    itemContainerType: ItemContainerType | null
+  ) => void;
+  onItemDragStart?: (
+    item: IItem,
+    slotIndex: number,
+    itemContainerType: ItemContainerType | null
+  ) => void;
+  onItemDragEnd?: (quantity?: number) => void;
+  onItemPlaceDrop?: (
+    item: IItem | null,
+    slotIndex: number,
+    itemContainerType: ItemContainerType | null
+  ) => void;
+  onItemOutsideDrop?: (item: IItem, position: IPosition) => void;
+  dragScale?: number;
+  checkIfItemCanBeMoved: () => boolean;
+  checkIfItemShouldDragEnd?: () => boolean;
+  onMouseOver?: (e: any, slotIndex: number, item: IItem | null) => void;
+  onSelected?: (optionId: string) => void;
+  initialPosition?: { x: number; y: number };
+  type: ItemContainerType | null;
+  atlasIMG: any;
+  atlasJSON: any;
+}
+
+export const EquipmentSet: React.FC<IEquipmentSetProps> = ({
+  equipmentSet,
+  onClose,
+  onMouseOver,
+  onSelected,
+  onItemClick,
+  atlasIMG,
+  atlasJSON,
+  onItemDragEnd,
+  onItemDragStart,
+  onItemPlaceDrop,
+  onItemOutsideDrop,
+  checkIfItemCanBeMoved,
+  checkIfItemShouldDragEnd,
+  dragScale,
+}) => {
+  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,
+  ];
+
+  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}
+          itemContainerType={ItemContainerType.Equipment}
+          slotSpriteMask={slotMaksRange[i]}
+          onMouseOver={(event, slotIndex, item) => {
+            if (onMouseOver) onMouseOver(event, slotIndex, item);
+          }}
+          onPointerDown={(itemType, ContainerType) => {
+            if (onItemClick) onItemClick(itemType, item, ContainerType);
+          }}
+          onSelected={(optionId: string) => {
+            if (onSelected) onSelected(optionId);
+          }}
+          onDragStart={(item, slotIndex, itemContainerType) => {
+            if (!item) {
+              return;
+            }
+
+            if (onItemDragStart)
+              onItemDragStart(item, slotIndex, itemContainerType);
+          }}
+          onDragEnd={quantity => {
+            if (onItemDragEnd) onItemDragEnd(quantity);
+          }}
+          dragScale={dragScale}
+          checkIfItemCanBeMoved={checkIfItemCanBeMoved}
+          checkIfItemShouldDragEnd={checkIfItemShouldDragEnd}
+          onPlaceDrop={(item, slotIndex, itemContainerType) => {
+            if (onItemPlaceDrop)
+              onItemPlaceDrop(item, slotIndex, itemContainerType);
+          }}
+          onOutsideDrop={(item, position) => {
+            if (onItemOutsideDrop) onItemOutsideDrop(item, position);
+          }}
+          atlasIMG={atlasIMG}
+          atlasJSON={atlasJSON}
+        />
+      );
+    });
+  };
+
+  return (
+    <DraggableContainer
+      title={'Equipments'}
+      type={RPGUIContainerTypes.Framed}
+      onCloseButton={() => {
+        if (onClose) onClose();
+      }}
+      width="330px"
+      cancelDrag=".equipment-container-body"
+    >
+      <EquipmentSetContainer className="equipment-container-body">
+        <EquipmentColumn>{onRenderEquipmentSlotRange(0, 3)}</EquipmentColumn>
+        <EquipmentColumn>{onRenderEquipmentSlotRange(3, 7)}</EquipmentColumn>
+        <EquipmentColumn>{onRenderEquipmentSlotRange(7, 10)}</EquipmentColumn>
+      </EquipmentSetContainer>
+    </DraggableContainer>
+  );
+};
+
+const EquipmentSetContainer = styled.div`
+  width: inherit;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  flex-direction: row;
+  touch-action: none;
+`;
+
+const EquipmentColumn = styled.div`
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  flex-direction: column;
+  touch-action: none;
+`;