@rpg-engine/long-bow 0.3.79 → 0.3.81

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.3.79",
+  "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/Abstractions/SlotsContainer.tsx

@@ -10,6 +10,7 @@ interface IProps {
   onPositionChange?: (position: IPosition) => void;
   onOutsideClick?: () => void;
   initialPosition?: IPosition;
+  scale?: number;
 }
 
 export const SlotsContainer: React.FC<IProps> = ({
@@ -19,6 +20,7 @@ export const SlotsContainer: React.FC<IProps> = ({
   onPositionChange,
   onOutsideClick,
   initialPosition,
+  scale,
 }) => {
   return (
     <DraggableContainer
@@ -38,6 +40,7 @@ export const SlotsContainer: React.FC<IProps> = ({
       }}
       onOutsideClick={onOutsideClick}
       initialPosition={initialPosition}
+      scale={scale}
     >
       {children}
     </DraggableContainer>

package/src/components/CraftBook/CraftBook.tsx

@@ -93,6 +93,7 @@ export const CraftBook: React.FC<IItemCraftSelectorProps> = ({
           onClose();
         }
       }}
+      scale={scale}
     >
       <div style={{ width: '100%' }}>
         <Title>Craftbook</Title>

package/src/components/DraggableContainer.tsx

@@ -20,6 +20,7 @@ export interface IDraggableContainerProps {
   onPositionChange?: (position: IPosition) => void;
   onOutsideClick?: () => void;
   initialPosition?: IPosition;
+  scale?: number;
 }
 
 export const DraggableContainer: React.FC<IDraggableContainerProps> = ({
@@ -36,6 +37,7 @@ export const DraggableContainer: React.FC<IDraggableContainerProps> = ({
   onPositionChange,
   onOutsideClick,
   initialPosition = { x: 0, y: 0 },
+  scale,
 }) => {
   const draggableRef = useRef(null);
 
@@ -69,6 +71,7 @@ export const DraggableContainer: React.FC<IDraggableContainerProps> = ({
         }
       }}
       defaultPosition={initialPosition}
+      scale={scale}
     >
       <Container
         ref={draggableRef}

package/src/components/Equipment/EquipmentSet.tsx

@@ -33,7 +33,7 @@ export interface IEquipmentSetProps {
     itemContainerType: ItemContainerType | null
   ) => void;
   onItemOutsideDrop?: (item: IItem, position: IPosition) => void;
-  dragScale?: number;
+  scale?: number;
   checkIfItemCanBeMoved: () => boolean;
   checkIfItemShouldDragEnd?: () => boolean;
   onMouseOver?: (e: any, slotIndex: number, item: IItem | null) => void;
@@ -58,7 +58,7 @@ export const EquipmentSet: React.FC<IEquipmentSetProps> = ({
   onItemOutsideDrop,
   checkIfItemCanBeMoved,
   checkIfItemShouldDragEnd,
-  dragScale,
+  scale,
 }) => {
   const {
     neck,
@@ -136,7 +136,7 @@ export const EquipmentSet: React.FC<IEquipmentSetProps> = ({
           onDragEnd={quantity => {
             if (onItemDragEnd) onItemDragEnd(quantity);
           }}
-          dragScale={dragScale}
+          dragScale={scale}
           checkIfItemCanBeMoved={checkIfItemCanBeMoved}
           checkIfItemShouldDragEnd={checkIfItemShouldDragEnd}
           onPlaceDrop={(item, slotIndex, itemContainerType) => {
@@ -162,6 +162,7 @@ export const EquipmentSet: React.FC<IEquipmentSetProps> = ({
       }}
       width="330px"
       cancelDrag=".equipment-container-body"
+      scale={scale}
     >
       <EquipmentSetContainer className="equipment-container-body">
         <EquipmentColumn>{onRenderEquipmentSlotRange(0, 3)}</EquipmentColumn>

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';
 
@@ -35,7 +36,7 @@ export interface IItemContainerProps {
     slotIndex: number,
     itemContainerType: ItemContainerType | null
   ) => void;
-  dragScale?: number;
+  scale?: number;
   checkIfItemCanBeMoved: () => boolean;
   checkIfItemShouldDragEnd?: () => boolean;
   onMouseOver?: (e: any, slotIndex: number, item: IItem | null) => void;
@@ -68,7 +69,7 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
   checkIfItemCanBeMoved,
   initialPosition,
   checkIfItemShouldDragEnd,
-  dragScale,
+  scale,
   shortcuts,
   setItemShortcut,
   removeShortcut,
@@ -117,7 +118,7 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
           onDragEnd={quantity => {
             if (onItemDragEnd) onItemDragEnd(quantity);
           }}
-          dragScale={dragScale}
+          dragScale={scale}
           checkIfItemCanBeMoved={checkIfItemCanBeMoved}
           checkIfItemShouldDragEnd={checkIfItemShouldDragEnd}
           openQuantitySelector={(maxQuantity, callback) => {
@@ -150,6 +151,7 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
         title={itemContainer.name || 'Container'}
         onClose={onClose}
         initialPosition={initialPosition}
+        scale={scale}
       >
         {type === ItemContainerType.Inventory &&
           shortcuts &&
@@ -168,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/components/QuestInfo/QuestInfo.tsx

@@ -22,6 +22,7 @@ export interface IQuestInfoProps {
   buttons?: IQuestsButtonProps[];
   quests: IQuest[];
   onChangeQuest: (currentQuestIndex: number, currentQuestId: string) => void;
+  scale?: number;
 }
 
 export const QuestInfo: React.FC<IQuestInfoProps> = ({
@@ -29,6 +30,7 @@ export const QuestInfo: React.FC<IQuestInfoProps> = ({
   onClose,
   buttons,
   onChangeQuest,
+  scale,
 }) => {
   const [currentIndex, setCurrentIndex] = useState(0);
   const questsLength = quests.length - 1;
@@ -56,6 +58,7 @@ export const QuestInfo: React.FC<IQuestInfoProps> = ({
       }}
       width="730px"
       cancelDrag=".equipment-container-body .arrow-selector"
+      scale={scale}
     >
       {quests.length >= 2 ? (
         <QuestsContainer>

package/src/components/QuestList.tsx

@@ -8,9 +8,14 @@ import { RPGUIContainerTypes } from './RPGUIContainer';
 export interface IQuestListProps {
   quests?: IQuest[];
   onClose: () => void;
+  scale?: number;
 }
 
-export const QuestList: React.FC<IQuestListProps> = ({ quests, onClose }) => {
+export const QuestList: React.FC<IQuestListProps> = ({
+  quests,
+  onClose,
+  scale,
+}) => {
   return (
     <QuestDraggableContainer
       type={RPGUIContainerTypes.Framed}
@@ -18,6 +23,7 @@ export const QuestList: React.FC<IQuestListProps> = ({ quests, onClose }) => {
         if (onClose) onClose();
       }}
       width="520px"
+      scale={scale}
     >
       <div style={{ width: '100%' }}>
         <Title>Quests</Title>

package/src/components/SkillsContainer.tsx

@@ -10,6 +10,7 @@ export interface ISkillContainerProps {
   onCloseButton: () => void;
   atlasJSON: any;
   atlasIMG: any;
+  scale?: number;
 }
 
 const skillProps = {
@@ -80,6 +81,7 @@ export const SkillsContainer: React.FC<ISkillContainerProps> = ({
   skill,
   atlasIMG,
   atlasJSON,
+  scale,
 }) => {
   const onRenderSkillCategory = (
     category: 'attributes' | 'combat' | 'crafting'
@@ -115,7 +117,11 @@ export const SkillsContainer: React.FC<ISkillContainerProps> = ({
   };
 
   return (
-    <SkillsDraggableContainer title="Skills" cancelDrag="#skillsDiv">
+    <SkillsDraggableContainer
+      title="Skills"
+      cancelDrag="#skillsDiv"
+      scale={scale}
+    >
       {onCloseButton && (
         <CloseButton onPointerDown={onCloseButton}>X</CloseButton>
       )}

package/src/components/Spellbook/Spellbook.tsx

@@ -21,6 +21,7 @@ export interface ISpellbookProps {
   removeShortcut: (index: number) => void;
   atlasIMG: any;
   atlasJSON: any;
+  scale?: number;
 }
 
 export const Spellbook: React.FC<ISpellbookProps> = ({
@@ -36,6 +37,7 @@ export const Spellbook: React.FC<ISpellbookProps> = ({
   removeShortcut,
   atlasIMG,
   atlasJSON,
+  scale,
 }) => {
   const [search, setSearch] = useState('');
   const [settingShortcutIndex, setSettingShortcutIndex] = useState(-1);
@@ -82,6 +84,7 @@ export const Spellbook: React.FC<ISpellbookProps> = ({
       width="inherit"
       height="inherit"
       cancelDrag="#spellbook-search, #shortcuts_list, .spell"
+      scale={scale}
     >
       <Container>
         <Title>Learned Spells</Title>

package/src/components/TimeWidget/TimeWidget.tsx

@@ -11,15 +11,17 @@ export interface IClockWidgetProps {
   onClose?: () => void;
   TimeClock: string;
   periodOfDay: PeriodOfDay;
+  scale?: number;
 }
 
 export const TimeWidget: React.FC<IClockWidgetProps> = ({
   onClose,
   TimeClock,
   periodOfDay,
+  scale,
 }) => {
   return (
-    <Draggable>
+    <Draggable scale={scale}>
       <WidgetContainer>
         <CloseButton onPointerDown={onClose}>X</CloseButton>
         <DayNightContainer>

package/src/components/TradingMenu/TradingMenu.tsx

@@ -92,6 +92,7 @@ export const TradingMenu: React.FC<ITradingMenu> = ({
       }}
       width="600px"
       cancelDrag="#TraderContainer"
+      scale={scale}
     >
       <>
         <div style={{ width: '100%' }}>

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,