@rpg-engine/long-bow 0.8.15 → 0.8.17

package/package.json

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

package/src/components/CraftBook/CraftingTooltip.tsx

@@ -1,5 +1,5 @@
 import { ICraftableItem, IItemContainer, ISkill } from '@rpg-engine/shared';
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import styled from 'styled-components';
 import { uiColors } from '../../constants/uiColors';
 import { countItemFromInventory } from '../../libs/itemCounter';
@@ -16,7 +16,12 @@ interface ICraftingTooltipProps {
   atlasJSON: any;
 }
 
-const TooltipContainer = styled.div<{ x: number; y: number }>`
+const OFFSET = 20;
+
+const TooltipContainer = styled.div<{
+  x: number;
+  y: number;
+}>`
   position: fixed;
   left: ${props => props.x}px;
   top: ${props => props.y}px;
@@ -34,17 +39,6 @@ const TooltipContainer = styled.div<{ x: number; y: number }>`
   border: 1px solid ${uiColors.darkGray};
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
   line-height: 1.4;
-
-  /* Arrow */
-  &:before {
-    content: '';
-    position: absolute;
-    top: 12px;
-    left: -6px;
-    border-width: 6px 6px 6px 0;
-    border-style: solid;
-    border-color: transparent rgba(0, 0, 0, 0.95) transparent transparent;
-  }
 `;
 
 const MinCraftingRequirementsText = styled.div<{ levelIsOk: boolean }>`
@@ -96,6 +90,39 @@ export const CraftingTooltip: React.FC<ICraftingTooltipProps> = ({
   atlasIMG,
   atlasJSON,
 }) => {
+  const tooltipRef = useRef<HTMLDivElement>(null);
+  const [adjustedPosition, setAdjustedPosition] = React.useState({ x, y });
+
+  useEffect(() => {
+    const tooltipElement = tooltipRef.current;
+    if (tooltipElement) {
+      const rect = tooltipElement.getBoundingClientRect();
+      const tooltipWidth = rect.width;
+      const tooltipHeight = rect.height;
+
+      let adjustedX = x;
+      let adjustedY = y;
+
+      // If tooltip would go off the right edge, show it on the left side of the cursor
+      if (x + tooltipWidth + OFFSET > window.innerWidth) {
+        adjustedX = x - tooltipWidth - OFFSET;
+      } else {
+        // Otherwise, show it on the right side of the cursor
+        adjustedX = x + OFFSET;
+      }
+
+      // Vertical positioning
+      if (y + tooltipHeight > window.innerHeight) {
+        adjustedY = window.innerHeight - tooltipHeight - OFFSET;
+      }
+      if (y < OFFSET) {
+        adjustedY = OFFSET;
+      }
+
+      setAdjustedPosition({ x: adjustedX, y: adjustedY });
+    }
+  }, [x, y]);
+
   const levelInSkill =
     (skills?.[
       (recipe?.minCraftingRequirements?.[0] ?? '') as keyof ISkill
@@ -104,7 +131,11 @@ export const CraftingTooltip: React.FC<ICraftingTooltipProps> = ({
   const levelIsOk = recipe?.levelIsOk ?? false;
 
   return (
-    <TooltipContainer x={x} y={y}>
+    <TooltipContainer
+      ref={tooltipRef}
+      x={adjustedPosition.x}
+      y={adjustedPosition.y}
+    >
       <TooltipTitle>Skill Requirements</TooltipTitle>
       <MinCraftingRequirementsText levelIsOk={levelIsOk}>
         {modifyString(`${recipe?.minCraftingRequirements?.[0] ?? ''}`)} lvl{' '}

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

@@ -1,20 +1,25 @@
 import React from 'react';
 import { ColorSelector } from './ItemPropertyColorSelector';
 
-interface Props {
+interface IItemPropertySimpleHandlerProps {
   isOpen: boolean;
   selectedColor: string;
   onClose: () => void;
   onConfirm: (color: string) => void;
   onChange: (color: string) => void;
+  costWarning?: {
+    cost: number;
+    currency?: string;
+  };
 }
 
-export const ItemPropertySimpleHandler: React.FC<Props> = ({
+export const ItemPropertySimpleHandler: React.FC<IItemPropertySimpleHandlerProps> = ({
   isOpen,
   selectedColor,
   onClose,
   onConfirm,
   onChange,
+  costWarning,
 }) => (
   <ColorSelector
     selectedColor={selectedColor}
@@ -22,5 +27,6 @@ export const ItemPropertySimpleHandler: React.FC<Props> = ({
     onClose={onClose}
     onConfirm={onConfirm}
     onChange={onChange}
+    costWarning={costWarning}
   />
 );