@rpg-engine/long-bow 0.3.80 → 0.3.81

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.3.80",
+  "version": "0.3.81",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/Abstractions/ModalPortal.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import styled from 'styled-components';
+
+const modalRoot = document.getElementById('modal-root')!;
+
+interface ModalPortalProps {
+  children: React.ReactNode;
+}
+
+const ModalPortal: React.FC<ModalPortalProps> = ({ children }) => {
+  return ReactDOM.createPortal(
+    <Container className="rpgui-content">{children}</Container>,
+    modalRoot
+  );
+};
+
+const Container = styled.div`
+  position: static !important;
+`;
+
+export default ModalPortal;

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

@@ -137,7 +137,7 @@ export const ItemInfo: React.FC<IItemInfoProps> = ({
 
       {item.maxStackSize && item.maxStackSize !== 1 && (
         <StackInfo>
-          x{item.stackQty ?? 1}({item.maxStackSize})
+          x{Math.round((item.stackQty ?? 1) * 100) / 100}({item.maxStackSize})
         </StackInfo>
       )}
 

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

@@ -1,6 +1,7 @@
 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 {
@@ -22,7 +23,6 @@ export const ItemTooltip: React.FC<IItemTooltipProps> = ({
 
   useEffect(() => {
     const { current } = ref;
-    let initialOffset: DOMRect;
 
     if (current) {
       const handleMouseMove = (event: MouseEvent) => {
@@ -30,9 +30,6 @@ export const ItemTooltip: React.FC<IItemTooltipProps> = ({
 
         // 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;
@@ -40,14 +37,12 @@ export const ItemTooltip: React.FC<IItemTooltipProps> = ({
           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;
+        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';
@@ -64,22 +59,25 @@ export const ItemTooltip: React.FC<IItemTooltipProps> = ({
   }, []);
 
   return (
-    <Container ref={ref}>
-      <ItemInfoDisplay
-        item={item}
-        atlasIMG={atlasIMG}
-        atlasJSON={atlasJSON}
-        equipmentSet={equipmentSet}
-      />
-    </Container>
+    <ModalPortal>
+      <Container ref={ref}>
+        <ItemInfoDisplay
+          item={item}
+          atlasIMG={atlasIMG}
+          atlasJSON={atlasJSON}
+          equipmentSet={equipmentSet}
+        />
+      </Container>
+    </ModalPortal>
   );
 };
 
 const Container = styled.div`
-  position: fixed;
-  z-index: 50;
+  position: absolute;
+  z-index: 100;
   pointer-events: none;
   left: 0;
   top: 0;
   opacity: 0;
+  transition: opacity 0.08s;
 `;

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

@@ -1,6 +1,7 @@
 import { IEquipmentSet, IItem } from '@rpg-engine/shared';
-import React, { useEffect, useRef } from 'react';
+import React, { useRef } from 'react';
 import styled from 'styled-components';
+import ModalPortal from '../../Abstractions/ModalPortal';
 import { ItemInfoDisplay } from './ItemInfoDisplay';
 
 interface IListMenuOption {
@@ -31,72 +32,86 @@ export const MobileItemTooltip: React.FC<MobileItemTooltipProps> = ({
 }) => {
   const ref = useRef<HTMLDivElement>(null);
 
-  useEffect(() => {
-    const { current } = ref;
-
-    if (current) {
-      // Adjust the position to be on whole window
-      const rect = current.getBoundingClientRect();
-
-      const x = (-rect.x * 100) / (scale * 100);
-      const y = (-rect.y * 100) / (scale * 100);
-
-      current.style.transform = `translate(${x}px, ${y}px)`;
-      current.style.opacity = '0.92';
-    }
-
-    return;
-  }, []);
+  const handleFadeOut = () => {
+    ref.current?.classList.add('fadeOut');
+  };
 
   return (
-    <Container
-      ref={ref}
-      onTouchEnd={() => {
-        setTimeout(() => {
-          closeTooltip();
-        }, 10);
-      }}
-      scale={scale}
-    >
-      <ItemInfoDisplay
-        item={item}
-        atlasIMG={atlasIMG}
-        atlasJSON={atlasJSON}
-        equipmentSet={equipmentSet}
-        isMobile
-      />
-      <OptionsContainer>
-        {options?.map(option => (
-          <Option
-            key={option.id}
-            onTouchEnd={() => {
-              setTimeout(() => {
-                onSelected?.(option.id);
-                closeTooltip();
-              }, 10);
-            }}
-          >
-            {option.text}
-          </Option>
-        ))}
-      </OptionsContainer>
-    </Container>
+    <ModalPortal>
+      <Container
+        ref={ref}
+        onTouchEnd={() => {
+          handleFadeOut();
+          setTimeout(() => {
+            closeTooltip();
+          }, 100);
+        }}
+        scale={scale}
+      >
+        <ItemInfoDisplay
+          item={item}
+          atlasIMG={atlasIMG}
+          atlasJSON={atlasJSON}
+          equipmentSet={equipmentSet}
+          isMobile
+        />
+        <OptionsContainer>
+          {options?.map(option => (
+            <Option
+              key={option.id}
+              onTouchEnd={() => {
+                handleFadeOut();
+                setTimeout(() => {
+                  onSelected?.(option.id);
+                  closeTooltip();
+                }, 100);
+              }}
+            >
+              {option.text}
+            </Option>
+          ))}
+        </OptionsContainer>
+      </Container>
+    </ModalPortal>
   );
 };
 
 const Container = styled.div<{ scale: number }>`
-  position: fixed;
-  z-index: 50;
+  position: absolute;
+  z-index: 100;
   left: 0;
   top: 0;
-  opacity: 0;
-  width: ${({ scale }) => `calc(100vw * 100 / ${scale * 100})`};
-  height: ${({ scale }) => `calc(100vh * 100 / ${scale * 100})`};
+  width: 100vw;
+  height: 100vh;
   background-color: rgba(0 0 0 / 0.5);
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 0.5rem;
+  transition: opacity 0.08s;
+  animation: fadeIn 0.1s forwards;
+
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 0.92;
+    }
+  }
+
+  @keyframes fadeOut {
+    0% {
+      opacity: 0.92;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+
+  &.fadeOut {
+    animation: fadeOut 0.1s forwards;
+  }
 
   @media (max-width: 580px) {
     flex-direction: column;
@@ -122,7 +137,7 @@ const Option = styled.button`
   border: none;
   border-radius: 3px;
   width: 8rem;
-  transition: background-color 0.2s;
+  transition: background-color 0.1s;
 
   &:hover {
     background-color: #555;

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

@@ -12,6 +12,7 @@ import { SlotsContainer } from '../../Abstractions/SlotsContainer';
 import { ItemQuantitySelector } from './ItemQuantitySelector';
 
 import { IPosition } from '../../../types/eventTypes';
+import ModalPortal from '../../Abstractions/ModalPortal';
 import { ShortcutsSetter } from '../../Shortcuts/ShortcutsSetter';
 import { ItemSlot } from './ItemSlot';
 
@@ -169,27 +170,29 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
         </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>
+        <ModalPortal>
+          <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>
+        </ModalPortal>
       )}
     </>
   );

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

@@ -146,7 +146,9 @@ export const ItemSlot: React.FC<IProps> = observer(
         return (
           <ItemQtyContainer key={`qty-${itemId}`}>
             <Ellipsis maxLines={1} maxWidth="48px">
-              <ItemQty className={qtyClassName}> {stackQty} </ItemQty>
+              <ItemQty className={qtyClassName}>
+                {Math.round(stackQty * 100) / 100}{' '}
+              </ItemQty>
             </Ellipsis>
           </ItemQtyContainer>
         );

package/src/mocks/itemContainer.mocks.ts

@@ -470,7 +470,7 @@ export const items: IItem[] = [
     isEquipable: true,
     isStackable: true,
     maxStackSize: 100,
-    stackQty: 203.23,
+    stackQty: 203.200000000000008,
     isUsable: false,
     isStorable: true,
     isTwoHanded: false,