@rpg-engine/long-bow 0.4.2 → 0.4.4

package/src/components/Equipment/EquipmentSet.tsx

@@ -1,199 +1,199 @@
-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;
-  scale?: 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;
-  onPositionChangeEnd?: (position: IPosition) => void;
-  onPositionChangeStart?: (position: IPosition) => void;
-}
-
-export const EquipmentSet: React.FC<IEquipmentSetProps> = ({
-  equipmentSet,
-  onClose,
-  onMouseOver,
-  onSelected,
-  onItemClick,
-  atlasIMG,
-  atlasJSON,
-  onItemDragEnd,
-  onItemDragStart,
-  onItemPlaceDrop,
-  onItemOutsideDrop,
-  checkIfItemCanBeMoved,
-  checkIfItemShouldDragEnd,
-  scale,
-  initialPosition,
-  onPositionChangeEnd,
-  onPositionChangeStart,
-}) => {
-  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={scale}
-          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"
-      scale={scale}
-      initialPosition={initialPosition}
-      onPositionChangeEnd={onPositionChangeEnd}
-      onPositionChangeStart={onPositionChangeStart}
-    >
-      <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;
+  scale?: 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;
+  onPositionChangeEnd?: (position: IPosition) => void;
+  onPositionChangeStart?: (position: IPosition) => void;
+}
+
+export const EquipmentSet: React.FC<IEquipmentSetProps> = ({
+  equipmentSet,
+  onClose,
+  onMouseOver,
+  onSelected,
+  onItemClick,
+  atlasIMG,
+  atlasJSON,
+  onItemDragEnd,
+  onItemDragStart,
+  onItemPlaceDrop,
+  onItemOutsideDrop,
+  checkIfItemCanBeMoved,
+  checkIfItemShouldDragEnd,
+  scale,
+  initialPosition,
+  onPositionChangeEnd,
+  onPositionChangeStart,
+}) => {
+  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={scale}
+          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"
+      scale={scale}
+      initialPosition={initialPosition}
+      onPositionChangeEnd={onPositionChangeEnd}
+      onPositionChangeStart={onPositionChangeStart}
+    >
+      <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;
+`;

package/src/components/HistoryDialog.tsx

@@ -1,104 +1,104 @@
-import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
-import { NPCDialog, NPCDialogType } from './NPCDialog/NPCDialog';
-import { NPCMultiDialog, NPCMultiDialogType } from './NPCDialog/NPCMultiDialog';
-import {
-  IQuestionDialog,
-  IQuestionDialogAnswer,
-  QuestionDialog,
-} from './NPCDialog/QuestionDialog/QuestionDialog';
-
-export interface IHistoryDialogProps {
-  backgroundImgPath: string[];
-  fullCoverBackground: boolean;
-  questions?: IQuestionDialog[];
-  answers?: IQuestionDialogAnswer[];
-  text?: string;
-  imagePath?: string;
-  textAndTypeArray?: NPCMultiDialogType[];
-  onClose: () => void;
-}
-
-export const HistoryDialog: React.FC<IHistoryDialogProps> = ({
-  backgroundImgPath,
-  fullCoverBackground,
-  questions,
-  answers,
-  text,
-  imagePath,
-  textAndTypeArray,
-  onClose,
-}) => {
-  const [img, setImage] = useState<number>(0);
-  const onHandleSpacePress = (event: KeyboardEvent) => {
-    if (event.code === 'Space') {
-      if (img < backgroundImgPath?.length - 1) {
-        setImage(prev => prev + 1);
-      } else {
-        // if there's no more text chunks, close the dialog
-        onClose();
-      }
-    }
-  };
-
-  useEffect(() => {
-    document.addEventListener('keydown', onHandleSpacePress);
-
-    return () => document.removeEventListener('keydown', onHandleSpacePress);
-  }, [backgroundImgPath]);
-  return (
-    <BackgroundContainer
-      imgPath={backgroundImgPath[img]}
-      fullImg={fullCoverBackground}
-    >
-      <DialogContainer>
-        {textAndTypeArray ? (
-          <NPCMultiDialog
-            textAndTypeArray={textAndTypeArray}
-            onClose={onClose}
-          />
-        ) : questions && answers ? (
-          <QuestionDialog
-            questions={questions}
-            answers={answers}
-            onClose={onClose}
-          />
-        ) : text && imagePath ? (
-          <NPCDialog
-            text={text}
-            imagePath={imagePath}
-            onClose={onClose}
-            type={NPCDialogType.TextAndThumbnail}
-          />
-        ) : (
-          <NPCDialog
-            text={text}
-            onClose={onClose}
-            type={NPCDialogType.TextOnly}
-          />
-        )}
-      </DialogContainer>
-    </BackgroundContainer>
-  );
-};
-
-interface IImgContainerProps {
-  imgPath: string;
-  fullImg: boolean;
-}
-
-const BackgroundContainer = styled.div<IImgContainerProps>`
-  width: 100%;
-  height: 100%;
-  background-image: url(${props => props.imgPath});
-  background-size: ${props => (props.imgPath ? 'cover' : 'auto')};
-  display: flex;
-  justify-content: space-evenly;
-  align-items: center;
-`;
-
-const DialogContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  padding-top: 200px;
-`;
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { NPCDialog, NPCDialogType } from './NPCDialog/NPCDialog';
+import { NPCMultiDialog, NPCMultiDialogType } from './NPCDialog/NPCMultiDialog';
+import {
+  IQuestionDialog,
+  IQuestionDialogAnswer,
+  QuestionDialog,
+} from './NPCDialog/QuestionDialog/QuestionDialog';
+
+export interface IHistoryDialogProps {
+  backgroundImgPath: string[];
+  fullCoverBackground: boolean;
+  questions?: IQuestionDialog[];
+  answers?: IQuestionDialogAnswer[];
+  text?: string;
+  imagePath?: string;
+  textAndTypeArray?: NPCMultiDialogType[];
+  onClose: () => void;
+}
+
+export const HistoryDialog: React.FC<IHistoryDialogProps> = ({
+  backgroundImgPath,
+  fullCoverBackground,
+  questions,
+  answers,
+  text,
+  imagePath,
+  textAndTypeArray,
+  onClose,
+}) => {
+  const [img, setImage] = useState<number>(0);
+  const onHandleSpacePress = (event: KeyboardEvent) => {
+    if (event.code === 'Space') {
+      if (img < backgroundImgPath?.length - 1) {
+        setImage(prev => prev + 1);
+      } else {
+        // if there's no more text chunks, close the dialog
+        onClose();
+      }
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('keydown', onHandleSpacePress);
+
+    return () => document.removeEventListener('keydown', onHandleSpacePress);
+  }, [backgroundImgPath]);
+  return (
+    <BackgroundContainer
+      imgPath={backgroundImgPath[img]}
+      fullImg={fullCoverBackground}
+    >
+      <DialogContainer>
+        {textAndTypeArray ? (
+          <NPCMultiDialog
+            textAndTypeArray={textAndTypeArray}
+            onClose={onClose}
+          />
+        ) : questions && answers ? (
+          <QuestionDialog
+            questions={questions}
+            answers={answers}
+            onClose={onClose}
+          />
+        ) : text && imagePath ? (
+          <NPCDialog
+            text={text}
+            imagePath={imagePath}
+            onClose={onClose}
+            type={NPCDialogType.TextAndThumbnail}
+          />
+        ) : (
+          <NPCDialog
+            text={text}
+            onClose={onClose}
+            type={NPCDialogType.TextOnly}
+          />
+        )}
+      </DialogContainer>
+    </BackgroundContainer>
+  );
+};
+
+interface IImgContainerProps {
+  imgPath: string;
+  fullImg: boolean;
+}
+
+const BackgroundContainer = styled.div<IImgContainerProps>`
+  width: 100%;
+  height: 100%;
+  background-image: url(${props => props.imgPath});
+  background-size: ${props => (props.imgPath ? 'cover' : 'auto')};
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+`;
+
+const DialogContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  padding-top: 200px;
+`;

package/src/components/Input.tsx

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