@rpg-engine/long-bow 0.3.57 → 0.3.59

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

@@ -1,42 +1,42 @@
-import React, { Component, ErrorInfo, ReactNode } from 'react';
-import atlasJSON from '../../../mocks/atlas/items/items.json';
-import atlasIMG from '../../../mocks/atlas/items/items.png';
-import { SpriteFromAtlas } from '../../shared/SpriteFromAtlas';
-
-interface Props {
-  children?: ReactNode;
-}
-
-interface State {
-  hasError: boolean;
-}
-
-export class ErrorBoundary extends Component<Props, State> {
-  public state: State = {
-    hasError: false,
-  };
-
-  public static getDerivedStateFromError(_: Error): State {
-    // Update state so the next render will show the fallback UI.
-    return { hasError: true };
-  }
-
-  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-    console.error('Uncaught error:', error, errorInfo);
-  }
-
-  public render() {
-    if (this.state.hasError) {
-      return (
-        <SpriteFromAtlas
-          atlasIMG={atlasIMG}
-          atlasJSON={atlasJSON}
-          spriteKey={'others/no-image.png'}
-          imgScale={3}
-        />
-      );
-    }
-
-    return this.props.children;
-  }
-}
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+import atlasJSON from '../../../mocks/atlas/items/items.json';
+import atlasIMG from '../../../mocks/atlas/items/items.png';
+import { SpriteFromAtlas } from '../../shared/SpriteFromAtlas';
+
+interface Props {
+  children?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  public state: State = {
+    hasError: false,
+  };
+
+  public static getDerivedStateFromError(_: Error): State {
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true };
+  }
+
+  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error('Uncaught error:', error, errorInfo);
+  }
+
+  public render() {
+    if (this.state.hasError) {
+      return (
+        <SpriteFromAtlas
+          atlasIMG={atlasIMG}
+          atlasJSON={atlasJSON}
+          spriteKey={'others/no-image.png'}
+          imgScale={3}
+        />
+      );
+    }
+
+    return this.props.children;
+  }
+}

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

@@ -1,175 +1,210 @@
-import { IItem, IItemContainer, ItemContainerType } from '@rpg-engine/shared';
-import React, { useState } from 'react';
-import styled from 'styled-components';
-import { SlotsContainer } from '../../Abstractions/SlotsContainer';
-import { ItemQuantitySelector } from './ItemQuantitySelector';
-
-import { IPosition } from '../../../types/eventTypes';
-import { ItemSlot } from './ItemSlot';
-
-export interface IItemContainerProps {
-  itemContainer: IItemContainer;
-  onClose?: () => void;
-  onItemClick?: (
-    item: IItem,
-    ItemType: IItem['type'],
-    itemContainerType: ItemContainerType | null
-  ) => void;
-  onItemDragStart?: (
-    item: IItem,
-    slotIndex: number,
-    itemContainerType: ItemContainerType | null
-  ) => void;
-  onItemDragEnd?: (quantity?: number) => void;
-  onOutsideDrop?: (item: IItem, position: IPosition) => void;
-  onItemPlaceDrop?: (
-    item: IItem | null,
-    slotIndex: number,
-    itemContainerType: ItemContainerType | null
-  ) => void;
-  dragScale?: number;
-  checkIfItemCanBeMoved: () => boolean;
-  checkIfItemShouldDragEnd?: () => boolean;
-  onMouseOver?: (e: any, slotIndex: number, item: IItem | null) => void;
-  onSelected?: (optionId: string, item: IItem) => void;
-  type: ItemContainerType;
-  atlasJSON: any;
-  atlasIMG: any;
-  disableContextMenu?: boolean;
-  initialPosition?: { x: number; y: number };
-}
-
-export const ItemContainer: React.FC<IItemContainerProps> = ({
-  itemContainer,
-  onClose,
-  onMouseOver,
-  onSelected,
-  onItemClick,
-  type,
-  atlasJSON,
-  atlasIMG,
-  disableContextMenu = false,
-  onItemDragEnd,
-  onItemDragStart,
-  onItemPlaceDrop,
-  onOutsideDrop,
-  checkIfItemCanBeMoved,
-  initialPosition,
-  checkIfItemShouldDragEnd,
-  dragScale,
-}) => {
-  const [quantitySelect, setQuantitySelect] = useState({
-    isOpen: false,
-    maxQuantity: 1,
-    callback: (_quantity: number) => {},
-  });
-
-  const onRenderSlots = () => {
-    const slots = [];
-
-    for (let i = 0; i < itemContainer.slotQty; i++) {
-      slots.push(
-        <ItemSlot
-          isContextMenuDisabled={disableContextMenu}
-          key={i}
-          slotIndex={i}
-          item={itemContainer.slots?.[i] || null}
-          itemContainerType={type}
-          onMouseOver={(event, slotIndex, item) => {
-            if (onMouseOver) onMouseOver(event, slotIndex, item);
-          }}
-          onPointerDown={(ItemType, ContainerType, item) => {
-            if (onItemClick) onItemClick(item, ItemType, ContainerType);
-          }}
-          onSelected={(optionId: string, item: IItem) => {
-            if (onSelected) onSelected(optionId, item);
-          }}
-          onDragStart={(item, slotIndex, itemContainerType) => {
-            if (onItemDragStart)
-              onItemDragStart(item, slotIndex, itemContainerType);
-          }}
-          onDragEnd={quantity => {
-            if (onItemDragEnd) onItemDragEnd(quantity);
-          }}
-          dragScale={dragScale}
-          checkIfItemCanBeMoved={checkIfItemCanBeMoved}
-          checkIfItemShouldDragEnd={checkIfItemShouldDragEnd}
-          openQuantitySelector={(maxQuantity, callback) => {
-            setQuantitySelect({
-              isOpen: true,
-              maxQuantity,
-              callback,
-            });
-          }}
-          onPlaceDrop={(item, slotIndex, itemContainerType) => {
-            if (onItemPlaceDrop)
-              onItemPlaceDrop(item, slotIndex, itemContainerType);
-          }}
-          onOutsideDrop={(item, position) => {
-            if (onOutsideDrop) onOutsideDrop(item, position);
-          }}
-          atlasIMG={atlasIMG}
-          atlasJSON={atlasJSON}
-        />
-      );
-    }
-    return slots;
-  };
-
-  return (
-    <>
-      <SlotsContainer
-        title={itemContainer.name || 'Container'}
-        onClose={onClose}
-        initialPosition={initialPosition}
-      >
-        <ItemsContainer className="item-container-body">
-          {onRenderSlots()}
-        </ItemsContainer>
-      </SlotsContainer>
-      {quantitySelect.isOpen && (
-        <QuantitySelectorContainer>
-          <ItemQuantitySelector
-            quantity={quantitySelect.maxQuantity}
-            onConfirm={quantity => {
-              quantitySelect.callback(quantity);
-              setQuantitySelect({
-                isOpen: false,
-                maxQuantity: 1,
-                callback: () => {},
-              });
-            }}
-            onClose={() => {
-              quantitySelect.callback(-1);
-              setQuantitySelect({
-                isOpen: false,
-                maxQuantity: 1,
-                callback: () => {},
-              });
-            }}
-          />
-        </QuantitySelectorContainer>
-      )}
-    </>
-  );
-};
-
-const ItemsContainer = styled.div`
-  max-width: 280px;
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-`;
-
-const QuantitySelectorContainer = styled.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  z-index: 100;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: rgba(0, 0, 0, 0.5);
-`;
+import {
+  IItem,
+  IItemContainer,
+  IShortcut,
+  ItemContainerType,
+  ItemType,
+} from '@rpg-engine/shared';
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { SlotsContainer } from '../../Abstractions/SlotsContainer';
+import { ItemQuantitySelector } from './ItemQuantitySelector';
+
+import { IPosition } from '../../../types/eventTypes';
+import { ShortcutsSetter } from '../../Shortcuts/ShortcutsSetter';
+import { ItemSlot } from './ItemSlot';
+
+export interface IItemContainerProps {
+  itemContainer: IItemContainer;
+  onClose?: () => void;
+  onItemClick?: (
+    item: IItem,
+    ItemType: IItem['type'],
+    itemContainerType: ItemContainerType | null
+  ) => void;
+  onItemDragStart?: (
+    item: IItem,
+    slotIndex: number,
+    itemContainerType: ItemContainerType | null
+  ) => void;
+  onItemDragEnd?: (quantity?: number) => void;
+  onOutsideDrop?: (item: IItem, position: IPosition) => void;
+  onItemPlaceDrop?: (
+    item: IItem | null,
+    slotIndex: number,
+    itemContainerType: ItemContainerType | null
+  ) => void;
+  dragScale?: number;
+  checkIfItemCanBeMoved: () => boolean;
+  checkIfItemShouldDragEnd?: () => boolean;
+  onMouseOver?: (e: any, slotIndex: number, item: IItem | null) => void;
+  onSelected?: (optionId: string, item: IItem) => void;
+  type: ItemContainerType;
+  atlasJSON: any;
+  atlasIMG: any;
+  disableContextMenu?: boolean;
+  initialPosition?: { x: number; y: number };
+  shortcuts?: IShortcut[];
+  setItemShortcut?: (key: string, index: number) => void;
+  removeShortcut?: (index: number) => void;
+}
+
+export const ItemContainer: React.FC<IItemContainerProps> = ({
+  itemContainer,
+  onClose,
+  onMouseOver,
+  onSelected,
+  onItemClick,
+  type,
+  atlasJSON,
+  atlasIMG,
+  disableContextMenu = false,
+  onItemDragEnd,
+  onItemDragStart,
+  onItemPlaceDrop,
+  onOutsideDrop,
+  checkIfItemCanBeMoved,
+  initialPosition,
+  checkIfItemShouldDragEnd,
+  dragScale,
+  shortcuts,
+  setItemShortcut,
+  removeShortcut,
+}) => {
+  const [quantitySelect, setQuantitySelect] = useState({
+    isOpen: false,
+    maxQuantity: 1,
+    callback: (_quantity: number) => {},
+  });
+  const [settingShortcutIndex, setSettingShortcutIndex] = useState(-1);
+
+  const onRenderSlots = () => {
+    const slots = [];
+
+    for (let i = 0; i < itemContainer.slotQty; i++) {
+      slots.push(
+        <ItemSlot
+          isContextMenuDisabled={disableContextMenu}
+          key={i}
+          slotIndex={i}
+          item={itemContainer.slots?.[i] || null}
+          itemContainerType={type}
+          onMouseOver={(event, slotIndex, item) => {
+            if (onMouseOver) onMouseOver(event, slotIndex, item);
+          }}
+          onPointerDown={(itemType, containerType, item) => {
+            if (settingShortcutIndex !== -1) {
+              setSettingShortcutIndex(-1);
+
+              if (
+                itemType === ItemType.Consumable ||
+                itemType === ItemType.Tool
+              ) {
+                setItemShortcut?.(item.key, settingShortcutIndex);
+              }
+            } else if (onItemClick) onItemClick(item, itemType, containerType);
+          }}
+          onSelected={(optionId: string, item: IItem) => {
+            if (onSelected) onSelected(optionId, item);
+          }}
+          onDragStart={(item, slotIndex, itemContainerType) => {
+            if (onItemDragStart)
+              onItemDragStart(item, slotIndex, itemContainerType);
+          }}
+          onDragEnd={quantity => {
+            if (onItemDragEnd) onItemDragEnd(quantity);
+          }}
+          dragScale={dragScale}
+          checkIfItemCanBeMoved={checkIfItemCanBeMoved}
+          checkIfItemShouldDragEnd={checkIfItemShouldDragEnd}
+          openQuantitySelector={(maxQuantity, callback) => {
+            setQuantitySelect({
+              isOpen: true,
+              maxQuantity,
+              callback,
+            });
+          }}
+          onPlaceDrop={(item, slotIndex, itemContainerType) => {
+            if (onItemPlaceDrop)
+              onItemPlaceDrop(item, slotIndex, itemContainerType);
+          }}
+          onOutsideDrop={(item, position) => {
+            if (onOutsideDrop) onOutsideDrop(item, position);
+          }}
+          atlasIMG={atlasIMG}
+          atlasJSON={atlasJSON}
+          isSelectingShortcut={settingShortcutIndex !== -1}
+        />
+      );
+    }
+    return slots;
+  };
+
+  return (
+    <>
+      <SlotsContainer
+        title={itemContainer.name || 'Container'}
+        onClose={onClose}
+        initialPosition={initialPosition}
+      >
+        {type === ItemContainerType.Inventory &&
+          shortcuts &&
+          removeShortcut && (
+            <ShortcutsSetter
+              setSettingShortcutIndex={setSettingShortcutIndex}
+              settingShortcutIndex={settingShortcutIndex}
+              shortcuts={shortcuts}
+              removeShortcut={removeShortcut}
+              atlasIMG={atlasIMG}
+              atlasJSON={atlasJSON}
+            />
+          )}
+        <ItemsContainer className="item-container-body">
+          {onRenderSlots()}
+        </ItemsContainer>
+      </SlotsContainer>
+      {quantitySelect.isOpen && (
+        <QuantitySelectorContainer>
+          <ItemQuantitySelector
+            quantity={quantitySelect.maxQuantity}
+            onConfirm={quantity => {
+              quantitySelect.callback(quantity);
+              setQuantitySelect({
+                isOpen: false,
+                maxQuantity: 1,
+                callback: () => {},
+              });
+            }}
+            onClose={() => {
+              quantitySelect.callback(-1);
+              setQuantitySelect({
+                isOpen: false,
+                maxQuantity: 1,
+                callback: () => {},
+              });
+            }}
+          />
+        </QuantitySelectorContainer>
+      )}
+    </>
+  );
+};
+
+const ItemsContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+`;
+
+const QuantitySelectorContainer = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 100;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.5);
+`;

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

@@ -1,6 +1,6 @@
-export enum SlotContainerType {
-  INVENTORY = 'Inventory',
-  EQUIPMENT_SET = 'EquipmentSet',
-  LOOT = 'Loot',
-  MAP_CONTAINER = 'Map-Container',
-}
+export enum SlotContainerType {
+  INVENTORY = 'Inventory',
+  EQUIPMENT_SET = 'EquipmentSet',
+  LOOT = 'Loot',
+  MAP_CONTAINER = 'Map-Container',
+}