@rpg-engine/long-bow 0.3.80 → 0.3.82

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

@@ -1,128 +1,128 @@
-import { IEquipmentSet, IItem } from '@rpg-engine/shared';
-import { camelCase } from 'lodash';
-import React, { useMemo } from 'react';
-import styled from 'styled-components';
-import { ItemInfo } from './ItemInfo';
-
-export interface IItemInfoDisplayProps {
-  item: IItem;
-  atlasIMG: any;
-  atlasJSON: any;
-  equipmentSet?: IEquipmentSet | null;
-  isMobile?: boolean;
-}
-
-type EquipmentSlotTypes =
-  | 'head'
-  | 'neck'
-  | 'leftHand'
-  | 'rightHand'
-  | 'ring'
-  | 'legs'
-  | 'boot'
-  | 'accessory'
-  | 'armor'
-  | 'inventory';
-
-const itemSlotTypes: EquipmentSlotTypes[] = [
-  'head',
-  'neck',
-  'leftHand',
-  'rightHand',
-  'ring',
-  'legs',
-  'boot',
-  'accessory',
-  'armor',
-  'inventory',
-];
-
-const getSlotType = (
-  itemSlotTypes: string[],
-  slotType: string,
-  subType: string
-): keyof IEquipmentSet => {
-  if (!itemSlotTypes.includes(slotType)) {
-    return subType as keyof IEquipmentSet;
-  }
-  return slotType as keyof IEquipmentSet;
-};
-
-export const ItemInfoDisplay: React.FC<IItemInfoDisplayProps> = ({
-  item,
-  atlasIMG,
-  atlasJSON,
-  equipmentSet,
-  isMobile,
-}) => {
-  const itemToCompare = useMemo(() => {
-    if (equipmentSet && item.allowedEquipSlotType?.length) {
-      const allowedSlotTypeCamelCase = camelCase(item.allowedEquipSlotType[0]);
-      const itemSubTypeCamelCase = camelCase(item.subType);
-
-      const slotType = getSlotType(
-        itemSlotTypes,
-        allowedSlotTypeCamelCase,
-        itemSubTypeCamelCase
-      );
-
-      const itemFromEquipment = equipmentSet[slotType] as IItem;
-
-      if (
-        itemFromEquipment &&
-        (!item._id || itemFromEquipment._id !== item._id)
-      ) {
-        return itemFromEquipment;
-      }
-    }
-
-    return undefined;
-  }, [equipmentSet, item]);
-
-  return (
-    <Flex $isMobile={isMobile}>
-      <ItemInfo
-        item={item}
-        itemToCompare={itemToCompare}
-        atlasIMG={atlasIMG}
-        atlasJSON={atlasJSON}
-      />
-
-      {itemToCompare && (
-        <CompareContainer>
-          <Equipped>
-            <span>Equipped</span>
-          </Equipped>
-          <ItemInfo
-            item={itemToCompare}
-            itemToCompare={item}
-            atlasIMG={atlasIMG}
-            atlasJSON={atlasJSON}
-          />
-        </CompareContainer>
-      )}
-    </Flex>
-  );
-};
-
-const Flex = styled.div<{ $isMobile?: boolean }>`
-  display: flex;
-  gap: 0.5rem;
-  flex-direction: ${({ $isMobile }) => ($isMobile ? 'row-reverse' : 'row')};
-
-  @media (max-width: 580px) {
-    flex-direction: column-reverse;
-    align-items: center;
-  }
-`;
-
-const Equipped = styled.div`
-  position: absolute;
-  bottom: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-`;
-
-const CompareContainer = styled.div`
-  position: relative;
-`;
+import { IEquipmentSet, IItem } from '@rpg-engine/shared';
+import { camelCase } from 'lodash';
+import React, { useMemo } from 'react';
+import styled from 'styled-components';
+import { ItemInfo } from './ItemInfo';
+
+export interface IItemInfoDisplayProps {
+  item: IItem;
+  atlasIMG: any;
+  atlasJSON: any;
+  equipmentSet?: IEquipmentSet | null;
+  isMobile?: boolean;
+}
+
+type EquipmentSlotTypes =
+  | 'head'
+  | 'neck'
+  | 'leftHand'
+  | 'rightHand'
+  | 'ring'
+  | 'legs'
+  | 'boot'
+  | 'accessory'
+  | 'armor'
+  | 'inventory';
+
+const itemSlotTypes: EquipmentSlotTypes[] = [
+  'head',
+  'neck',
+  'leftHand',
+  'rightHand',
+  'ring',
+  'legs',
+  'boot',
+  'accessory',
+  'armor',
+  'inventory',
+];
+
+const getSlotType = (
+  itemSlotTypes: string[],
+  slotType: string,
+  subType: string
+): keyof IEquipmentSet => {
+  if (!itemSlotTypes.includes(slotType)) {
+    return subType as keyof IEquipmentSet;
+  }
+  return slotType as keyof IEquipmentSet;
+};
+
+export const ItemInfoDisplay: React.FC<IItemInfoDisplayProps> = ({
+  item,
+  atlasIMG,
+  atlasJSON,
+  equipmentSet,
+  isMobile,
+}) => {
+  const itemToCompare = useMemo(() => {
+    if (equipmentSet && item.allowedEquipSlotType?.length) {
+      const allowedSlotTypeCamelCase = camelCase(item.allowedEquipSlotType[0]);
+      const itemSubTypeCamelCase = camelCase(item.subType);
+
+      const slotType = getSlotType(
+        itemSlotTypes,
+        allowedSlotTypeCamelCase,
+        itemSubTypeCamelCase
+      );
+
+      const itemFromEquipment = equipmentSet[slotType] as IItem;
+
+      if (
+        itemFromEquipment &&
+        (!item._id || itemFromEquipment._id !== item._id)
+      ) {
+        return itemFromEquipment;
+      }
+    }
+
+    return undefined;
+  }, [equipmentSet, item]);
+
+  return (
+    <Flex $isMobile={isMobile}>
+      <ItemInfo
+        item={item}
+        itemToCompare={itemToCompare}
+        atlasIMG={atlasIMG}
+        atlasJSON={atlasJSON}
+      />
+
+      {itemToCompare && (
+        <CompareContainer>
+          <Equipped>
+            <span>Equipped</span>
+          </Equipped>
+          <ItemInfo
+            item={itemToCompare}
+            itemToCompare={item}
+            atlasIMG={atlasIMG}
+            atlasJSON={atlasJSON}
+          />
+        </CompareContainer>
+      )}
+    </Flex>
+  );
+};
+
+const Flex = styled.div<{ $isMobile?: boolean }>`
+  display: flex;
+  gap: 0.5rem;
+  flex-direction: ${({ $isMobile }) => ($isMobile ? 'row-reverse' : 'row')};
+
+  @media (max-width: 580px) {
+    flex-direction: column-reverse;
+    align-items: center;
+  }
+`;
+
+const Equipped = styled.div`
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+`;
+
+const CompareContainer = styled.div`
+  position: relative;
+`;

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

@@ -1,62 +1,62 @@
-import { IEquipmentSet, IItem } from '@rpg-engine/shared';
-import React, { useState } from 'react';
-import { ItemTooltip } from './ItemTooltip';
-import { MobileItemTooltip } from './MobileItemTooltip';
-
-interface IItemInfoWrapperProps {
-  item: IItem;
-  children: React.ReactNode;
-  atlasIMG: any;
-  atlasJSON: any;
-  equipmentSet?: IEquipmentSet | null;
-  scale?: number;
-}
-
-export const ItemInfoWrapper: React.FC<IItemInfoWrapperProps> = ({
-  children,
-  atlasIMG,
-  atlasJSON,
-  item,
-  equipmentSet,
-  scale,
-}) => {
-  const [isTooltipVisible, setIsTooltipVisible] = useState(false);
-  const [isTooltipMobileVisible, setIsTooltipMobileVisible] = useState(false);
-
-  return (
-    <div
-      onMouseEnter={() => {
-        if (!isTooltipMobileVisible) setIsTooltipVisible(true);
-      }}
-      onMouseLeave={setIsTooltipVisible.bind(null, false)}
-      onTouchEnd={() => {
-        setIsTooltipMobileVisible(true);
-        setIsTooltipVisible(false);
-      }}
-    >
-      {children}
-
-      {isTooltipVisible && !isTooltipMobileVisible && (
-        <ItemTooltip
-          atlasIMG={atlasIMG}
-          atlasJSON={atlasJSON}
-          equipmentSet={equipmentSet}
-          item={item}
-        />
-      )}
-      {isTooltipMobileVisible && (
-        <MobileItemTooltip
-          atlasIMG={atlasIMG}
-          atlasJSON={atlasJSON}
-          equipmentSet={equipmentSet}
-          closeTooltip={() => {
-            setIsTooltipMobileVisible(false);
-            console.log('close');
-          }}
-          item={item}
-          scale={scale}
-        />
-      )}
-    </div>
-  );
-};
+import { IEquipmentSet, IItem } from '@rpg-engine/shared';
+import React, { useState } from 'react';
+import { ItemTooltip } from './ItemTooltip';
+import { MobileItemTooltip } from './MobileItemTooltip';
+
+interface IItemInfoWrapperProps {
+  item: IItem;
+  children: React.ReactNode;
+  atlasIMG: any;
+  atlasJSON: any;
+  equipmentSet?: IEquipmentSet | null;
+  scale?: number;
+}
+
+export const ItemInfoWrapper: React.FC<IItemInfoWrapperProps> = ({
+  children,
+  atlasIMG,
+  atlasJSON,
+  item,
+  equipmentSet,
+  scale,
+}) => {
+  const [isTooltipVisible, setIsTooltipVisible] = useState(false);
+  const [isTooltipMobileVisible, setIsTooltipMobileVisible] = useState(false);
+
+  return (
+    <div
+      onMouseEnter={() => {
+        if (!isTooltipMobileVisible) setIsTooltipVisible(true);
+      }}
+      onMouseLeave={setIsTooltipVisible.bind(null, false)}
+      onTouchEnd={() => {
+        setIsTooltipMobileVisible(true);
+        setIsTooltipVisible(false);
+      }}
+    >
+      {children}
+
+      {isTooltipVisible && !isTooltipMobileVisible && (
+        <ItemTooltip
+          atlasIMG={atlasIMG}
+          atlasJSON={atlasJSON}
+          equipmentSet={equipmentSet}
+          item={item}
+        />
+      )}
+      {isTooltipMobileVisible && (
+        <MobileItemTooltip
+          atlasIMG={atlasIMG}
+          atlasJSON={atlasJSON}
+          equipmentSet={equipmentSet}
+          closeTooltip={() => {
+            setIsTooltipMobileVisible(false);
+            console.log('close');
+          }}
+          item={item}
+          scale={scale}
+        />
+      )}
+    </div>
+  );
+};

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

@@ -1,85 +1,83 @@
-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 { IEquipmentSet, IItem } from '@rpg-engine/shared';
+import React, { useEffect, useRef } from 'react';
+import styled from 'styled-components';
+import ModalPortal from '../../Abstractions/ModalPortal';
+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;
+
+    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();
+
+        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;
+        const y = isOffScreenBottom
+          ? clientY - tooltipHeight - offset
+          : clientY + offset;
+
+        current.style.transform = `translate(${x}px, ${y}px)`;
+        current.style.opacity = '1';
+      };
+
+      window.addEventListener('mousemove', handleMouseMove);
+
+      return () => {
+        window.removeEventListener('mousemove', handleMouseMove);
+      };
+    }
+
+    return;
+  }, []);
+
+  return (
+    <ModalPortal>
+      <Container ref={ref}>
+        <ItemInfoDisplay
+          item={item}
+          atlasIMG={atlasIMG}
+          atlasJSON={atlasJSON}
+          equipmentSet={equipmentSet}
+        />
+      </Container>
+    </ModalPortal>
+  );
+};
+
+const Container = styled.div`
+  position: absolute;
+  z-index: 100;
+  pointer-events: none;
+  left: 0;
+  top: 0;
+  opacity: 0;
+  transition: opacity 0.08s;
+`;