@rpg-engine/long-bow 0.3.76 → 0.3.77

package/src/components/Item/Cards/ItemTooltip.tsx

@@ -1,85 +1,33 @@
-import { IEquipmentSet, IItem } from '@rpg-engine/shared';
-import React, { useEffect, useRef } from 'react';
-import styled from 'styled-components';
-import { ItemInfoDisplay } from './ItemInfoDisplay';
-
-export interface IItemTooltipProps {
-  item: IItem;
-  atlasIMG: any;
-  atlasJSON: any;
-  equipmentSet?: IEquipmentSet | null;
-}
-
-const offset = 20;
-
-export const ItemTooltip: React.FC<IItemTooltipProps> = ({
-  item,
-  atlasIMG,
-  atlasJSON,
-  equipmentSet,
-}) => {
-  const ref = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const { current } = ref;
-    let initialOffset: DOMRect;
-
-    if (current) {
-      const handleMouseMove = (event: MouseEvent) => {
-        const { clientX, clientY } = event;
-
-        // Adjust the position of the tooltip based on the mouse position
-        const rect = current.getBoundingClientRect();
-        if (!initialOffset) {
-          initialOffset = rect;
-        }
-
-        const tooltipWidth = rect.width;
-        const tooltipHeight = rect.height;
-        const isOffScreenRight =
-          clientX + tooltipWidth + offset > window.innerWidth;
-        const isOffScreenBottom =
-          clientY + tooltipHeight + offset > window.innerHeight;
-        const x =
-          (isOffScreenRight
-            ? clientX - tooltipWidth - offset
-            : clientX + offset) - initialOffset.x;
-        const y =
-          (isOffScreenBottom
-            ? clientY - tooltipHeight - offset
-            : clientY + offset) - initialOffset.y;
-
-        current.style.transform = `translate(${x}px, ${y}px)`;
-        current.style.opacity = '1';
-      };
-
-      window.addEventListener('mousemove', handleMouseMove);
-
-      return () => {
-        window.removeEventListener('mousemove', handleMouseMove);
-      };
-    }
-
-    return;
-  }, []);
-
-  return (
-    <Container ref={ref}>
-      <ItemInfoDisplay
-        item={item}
-        atlasIMG={atlasIMG}
-        atlasJSON={atlasJSON}
-        equipmentSet={equipmentSet}
-      />
-    </Container>
-  );
-};
-
-const Container = styled.div`
-  position: fixed;
-  z-index: 50;
-  pointer-events: none;
-  left: 0;
-  top: 0;
-  opacity: 0;
-`;
+import React from 'react';
+import styled from 'styled-components';
+import { uiFonts } from '../../../constants/uiFonts';
+
+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: ${uiFonts.size.xxsmall};
+  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/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,214 +1,210 @@
-import {
-  IEquipmentSet,
-  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;
-  equipmentSet?: IEquipmentSet | null;
-}
-
-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,
-  equipmentSet,
-}) => {
-  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}
-          equipmentSet={equipmentSet}
-        />
-      );
-    }
-    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);
-`;
+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',
+}