@rpg-engine/long-bow 0.1.92 → 0.1.96

package/src/components/DraggableContainer.tsx

@@ -1,150 +1,150 @@
-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';
-
-export interface IDraggableContainerProps {
-  children: React.ReactNode;
-  width?: string;
-  height?: string;
-  className?: string;
-  type?: RPGUIContainerTypes;
-  title?: string;
-  imgSrc?: string;
-  imgWidth?: string;
-  onCloseButton?: () => void;
-  cancelDrag?: string;
-  onPositionChange?: (position: IPosition) => void;
-  onOutsideClick?: () => void;
-}
-
-export const DraggableContainer: React.FC<IDraggableContainerProps> = ({
-  children,
-  width = '50%',
-  height,
-  className,
-  type = RPGUIContainerTypes.FramedGold,
-  onCloseButton,
-  title,
-  imgSrc,
-  imgWidth = '20px',
-  cancelDrag,
-  onPositionChange,
-  onOutsideClick,
-}) => {
-  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();
-        }
-      }
-    });
-
-    return () => {
-      document.removeEventListener('clickOutside', _e => {});
-    };
-  }, []);
-
-  return (
-    <Draggable
-      cancel={`.container-close,${cancelDrag}`}
-      onDrag={(_e, data: DraggableData) => {
-        if (onPositionChange) {
-          onPositionChange({
-            x: data.x,
-            y: data.y,
-          });
-        }
-      }}
-    >
-      <Container
-        ref={draggableRef}
-        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>
-  );
-};
-
-interface IContainerProps {
-  width: string;
-  height: string;
-}
-
-const Container = styled.div<IContainerProps>`
-  height: ${props => props.height};
-  width: ${({ width }) => width};
-  display: flex;
-  flex-wrap: wrap;
-  image-rendering: pixelated;
-
-  &.rpgui-container {
-    padding-top: 1.5rem;
-  }
-`;
-
-const CloseButton = styled.div`
-  position: absolute;
-  top: 3px;
-  right: 0px;
-  color: white;
-  z-index: 22;
-  font-size: 0.8rem;
-`;
-
-const TitleContainer = styled.div`
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  align-items: center;
-`;
-
-const Title = styled.h1`
-  color: white;
-  z-index: 22;
-  font-size: 0.6rem;
-`;
-
-interface ICustomIconProps {
-  width: string;
-}
-
-const Icon = styled.img`
-  color: white;
-  z-index: 22;
-  font-size: 10px;
-  width: ${(props: ICustomIconProps) => props.width};
-  margin-right: 0.5rem;
-`;
+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';
+
+export interface IDraggableContainerProps {
+  children: React.ReactNode;
+  width?: string;
+  height?: string;
+  className?: string;
+  type?: RPGUIContainerTypes;
+  title?: string;
+  imgSrc?: string;
+  imgWidth?: string;
+  onCloseButton?: () => void;
+  cancelDrag?: string;
+  onPositionChange?: (position: IPosition) => void;
+  onOutsideClick?: () => void;
+}
+
+export const DraggableContainer: React.FC<IDraggableContainerProps> = ({
+  children,
+  width = '50%',
+  height,
+  className,
+  type = RPGUIContainerTypes.FramedGold,
+  onCloseButton,
+  title,
+  imgSrc,
+  imgWidth = '20px',
+  cancelDrag,
+  onPositionChange,
+  onOutsideClick,
+}) => {
+  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();
+        }
+      }
+    });
+
+    return () => {
+      document.removeEventListener('clickOutside', _e => {});
+    };
+  }, []);
+
+  return (
+    <Draggable
+      cancel={`.container-close,${cancelDrag}`}
+      onDrag={(_e, data: DraggableData) => {
+        if (onPositionChange) {
+          onPositionChange({
+            x: data.x,
+            y: data.y,
+          });
+        }
+      }}
+    >
+      <Container
+        ref={draggableRef}
+        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>
+  );
+};
+
+interface IContainerProps {
+  width: string;
+  height: string;
+}
+
+const Container = styled.div<IContainerProps>`
+  height: ${props => props.height};
+  width: ${({ width }) => width};
+  display: flex;
+  flex-wrap: wrap;
+  image-rendering: pixelated;
+
+  &.rpgui-container {
+    padding-top: 1.5rem;
+  }
+`;
+
+const CloseButton = styled.div`
+  position: absolute;
+  top: 3px;
+  right: 0px;
+  color: white;
+  z-index: 22;
+  font-size: 0.8rem;
+`;
+
+const TitleContainer = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: center;
+`;
+
+const Title = styled.h1`
+  color: white;
+  z-index: 22;
+  font-size: 0.6rem;
+`;
+
+interface ICustomIconProps {
+  width: string;
+}
+
+const Icon = styled.img`
+  color: white;
+  z-index: 22;
+  font-size: 10px;
+  width: ${(props: ICustomIconProps) => props.width};
+  margin-right: 0.5rem;
+`;

package/src/components/Dropdown.tsx

@@ -1,57 +1,57 @@
-import React, { useEffect, useState } from 'react';
-import { v4 as uuidv4 } from 'uuid';
-import { _RPGUI } from './RPGUIRoot';
-
-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>('');
-
-  useEffect(() => {
-    const element = document.getElementById(`rpgui-dropdown-${dropdownId}`);
-    const dropdownValue = _RPGUI.get_value(element);
-    setSelectedValue(dropdownValue);
-
-    element?.addEventListener('change', (event: any) => {
-      setSelectedValue(event?.target.value);
-    });
-  }, []);
-
-  useEffect(() => {
-    if (selectedValue) {
-      onChange(selectedValue);
-    }
-  }, [selectedValue]);
-
-  return (
-    <select
-      id={`rpgui-dropdown-${dropdownId}`}
-      style={{ width: width }}
-      className="rpgui-dropdown"
-    >
-      {options.map(option => {
-        return (
-          <option key={option.id} value={option.value}>
-            {option.option}
-          </option>
-        );
-      })}
-    </select>
-  );
-};
+import React, { useEffect, useState } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { _RPGUI } from './RPGUIRoot';
+
+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>('');
+
+  useEffect(() => {
+    const element = document.getElementById(`rpgui-dropdown-${dropdownId}`);
+    const dropdownValue = _RPGUI.get_value(element);
+    setSelectedValue(dropdownValue);
+
+    element?.addEventListener('change', (event: any) => {
+      setSelectedValue(event?.target.value);
+    });
+  }, []);
+
+  useEffect(() => {
+    if (selectedValue) {
+      onChange(selectedValue);
+    }
+  }, [selectedValue]);
+
+  return (
+    <select
+      id={`rpgui-dropdown-${dropdownId}`}
+      style={{ width: width }}
+      className="rpgui-dropdown"
+    >
+      {options.map(option => {
+        return (
+          <option key={option.id} value={option.value}>
+            {option.option}
+          </option>
+        );
+      })}
+    </select>
+  );
+};

package/src/components/Equipment/EquipmentSet.tsx

@@ -1,134 +1,134 @@
-import {
-  IEquipmentSet,
-  IItem,
-  IItemContainer,
-  ItemSlotType,
-} from '@rpg-engine/shared';
-import React from 'react';
-import styled from 'styled-components';
-import { DraggableContainer } from '../DraggableContainer';
-import { SlotContainerType } from '../Item/Inventory/ItemContainerTypes';
-import { ItemSlot } from '../Item/Inventory/ItemSlot';
-import { RPGUIContainerTypes } from '../RPGUIContainer';
-
-export interface IEquipmentSetProps {
-  equipmentSet: IEquipmentSet;
-  onClose?: () => void;
-  onItemClick?: (
-    item: IItem,
-    slotContainerType: SlotContainerType | null
-  ) => void;
-  onMouseOver?: (e: any, slotIndex: number, item: IItem | null) => void;
-  onSelected?: (optionId: string) => void;
-  initialPosition?: { x: number; y: number };
-}
-
-export const EquipmentSet: React.FC<IEquipmentSetProps> = ({
-  equipmentSet,
-  onClose,
-  onMouseOver,
-  onSelected,
-  onItemClick,
-}) => {
-  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}
-          slotContainerType={SlotContainerType.EQUIPMENT_SET}
-          slotSpriteMask={slotMaksRange[i]}
-          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 (
-    <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;
-`;
-
-const EquipmentColumn = styled.div`
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-  flex-direction: column;
-`;
+import {
+  IEquipmentSet,
+  IItem,
+  IItemContainer,
+  ItemSlotType,
+} from '@rpg-engine/shared';
+import React from 'react';
+import styled from 'styled-components';
+import { DraggableContainer } from '../DraggableContainer';
+import { SlotContainerType } from '../Item/Inventory/ItemContainerTypes';
+import { ItemSlot } from '../Item/Inventory/ItemSlot';
+import { RPGUIContainerTypes } from '../RPGUIContainer';
+
+export interface IEquipmentSetProps {
+  equipmentSet: IEquipmentSet;
+  onClose?: () => void;
+  onItemClick?: (
+    item: IItem,
+    slotContainerType: SlotContainerType | null
+  ) => void;
+  onMouseOver?: (e: any, slotIndex: number, item: IItem | null) => void;
+  onSelected?: (optionId: string) => void;
+  initialPosition?: { x: number; y: number };
+}
+
+export const EquipmentSet: React.FC<IEquipmentSetProps> = ({
+  equipmentSet,
+  onClose,
+  onMouseOver,
+  onSelected,
+  onItemClick,
+}) => {
+  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}
+          slotContainerType={SlotContainerType.EQUIPMENT_SET}
+          slotSpriteMask={slotMaksRange[i]}
+          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 (
+    <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;
+`;
+
+const EquipmentColumn = styled.div`
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  flex-direction: column;
+`;