@rpg-engine/long-bow 0.8.16 → 0.8.18

package/package.json

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

package/src/components/CraftBook/CraftBook.tsx

@@ -368,7 +368,7 @@ const ContentContainer = styled.div`
   padding-bottom: 0;
   width: 100%;
   position: relative;
-  min-height: 300px;
+  min-height: 250px;
   overflow: hidden;
 `;
 

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{' '}