@rpg-engine/long-bow 0.6.69 → 0.6.71

package/src/components/Table/Table.tsx

@@ -11,6 +11,9 @@ export const TableRow = styled.tr`
   &:nth-child(even) {
     background-color: rgba(255, 255, 255, 0.05) !important;
   }
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.1) !important;
+  }
 `;
 
 export const TableHeader = styled.th`
@@ -18,12 +21,14 @@ export const TableHeader = styled.th`
   padding: 0.5rem;
   color: ${uiColors.yellow} !important;
   border-bottom: 1px solid ${uiColors.lightGray};
+  text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
 `;
 
 export const TableCell = styled.td`
   padding: 0.5rem;
   color: ${uiColors.white};
   border-bottom: 1px solid ${uiColors.lightGray};
+  text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
 `;
 
 export const ActionButtons = styled.div`
@@ -31,3 +36,17 @@ export const ActionButtons = styled.div`
   gap: 10px;
   align-items: center;
 `;
+
+interface IUserActionProps {
+  color: string;
+}
+
+export const UserActionLink = styled.span<IUserActionProps>`
+  color: ${({ color }) => color} !important;
+  cursor: pointer;
+  margin-right: 0.5rem;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;

package/src/components/shared/Ellipsis.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 interface IProps {
   children: React.ReactNode;
-  maxLines: 1 | 2 | 3;
+  maxLines?: 1 | 2 | 3;
   maxWidth: string;
   fontSize?: string;
   center?: boolean;
@@ -11,7 +11,7 @@ interface IProps {
 
 export const Ellipsis = ({
   children,
-  maxLines,
+  maxLines = 1,
   maxWidth,
   fontSize,
   center,

package/src/components/shared/SimpleTooltip.tsx

@@ -0,0 +1,198 @@
+import React, { ReactNode, useEffect, useRef, useState } from 'react';
+import ReactDOM from 'react-dom';
+import styled, { keyframes } from 'styled-components';
+import { uiColors } from '../../constants/uiColors';
+import { RPGUIRoot } from '../RPGUI/RPGUIRoot';
+
+interface TooltipProps {
+  content: string | ReactNode;
+  direction?: 'top' | 'bottom' | 'left' | 'right';
+  backgroundColor?: string;
+  textColor?: string;
+  children: ReactNode;
+  showDelay?: number;
+  hideDelay?: number;
+}
+
+export const SimpleTooltip: React.FC<TooltipProps> = ({
+  content,
+  direction = 'top',
+  backgroundColor = uiColors.raisinBlack,
+  textColor = uiColors.white,
+  children,
+  showDelay = 200,
+  hideDelay = 200,
+}) => {
+  const [visible, setVisible] = useState(false);
+  const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0 });
+  const tooltipRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLDivElement>(null);
+  const timeoutRef = useRef<NodeJS.Timeout>();
+
+  const calculatePosition = () => {
+    if (!triggerRef.current || !tooltipRef.current) return;
+
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const tooltipRect = tooltipRef.current.getBoundingClientRect();
+
+    let top, left;
+
+    switch (direction) {
+      case 'top':
+        top = triggerRect.top - tooltipRect.height - 8;
+        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
+        break;
+      case 'bottom':
+        top = triggerRect.bottom + 8;
+        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
+        break;
+      case 'left':
+        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
+        left = triggerRect.left - tooltipRect.width - 8;
+        break;
+      case 'right':
+        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
+        left = triggerRect.right + 8;
+        break;
+      default:
+        top = triggerRect.top - tooltipRect.height - 8;
+        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
+    }
+
+    // Ensure the tooltip stays within the viewport
+    if (left < 8) left = 8;
+    if (left + tooltipRect.width > window.innerWidth)
+      left = window.innerWidth - tooltipRect.width - 8;
+    if (top < 8) top = 8;
+    if (top + tooltipRect.height > window.innerHeight)
+      top = window.innerHeight - tooltipRect.height - 8;
+
+    setTooltipPosition({ top: Math.round(top), left: Math.round(left) });
+  };
+
+  const showTooltip = () => {
+    clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(() => {
+      setVisible(true);
+      calculatePosition();
+    }, showDelay);
+  };
+
+  const hideTooltip = () => {
+    clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(() => {
+      setVisible(false);
+    }, hideDelay);
+  };
+
+  useEffect(() => {
+    const handleMouseMove = (event: MouseEvent) => {
+      if (visible && tooltipRef.current && triggerRef.current) {
+        const tooltipRect = tooltipRef.current.getBoundingClientRect();
+        const triggerRect = triggerRef.current.getBoundingClientRect();
+
+        const isOutsideTooltip =
+          event.clientX < tooltipRect.left ||
+          event.clientX > tooltipRect.right ||
+          event.clientY < tooltipRect.top ||
+          event.clientY > tooltipRect.bottom;
+
+        const isOutsideTrigger =
+          event.clientX < triggerRect.left ||
+          event.clientX > triggerRect.right ||
+          event.clientY < triggerRect.top ||
+          event.clientY > triggerRect.bottom;
+
+        if (isOutsideTooltip && isOutsideTrigger) {
+          hideTooltip();
+        }
+      }
+    };
+
+    const handleScroll = () => {
+      if (visible) {
+        hideTooltip();
+      }
+    };
+
+    const handleResize = () => {
+      if (visible) {
+        calculatePosition();
+      }
+    };
+
+    document.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('scroll', handleScroll);
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('scroll', handleScroll);
+      window.removeEventListener('resize', handleResize);
+      clearTimeout(timeoutRef.current);
+    };
+  }, [visible]);
+
+  return (
+    <TooltipContainer
+      ref={triggerRef}
+      onMouseEnter={showTooltip}
+      onMouseLeave={hideTooltip}
+      onFocus={showTooltip}
+      onBlur={hideTooltip}
+    >
+      {children}
+      {visible &&
+        ReactDOM.createPortal(
+          <RPGUIRoot>
+            <TooltipBox
+              ref={tooltipRef}
+              direction={direction}
+              backgroundColor={backgroundColor}
+              textColor={textColor}
+              style={{ top: tooltipPosition.top, left: tooltipPosition.left }}
+            >
+              {content}
+            </TooltipBox>
+          </RPGUIRoot>,
+          document.body
+        )}
+    </TooltipContainer>
+  );
+};
+
+const TooltipContainer = styled.div`
+  display: inline-block;
+  cursor: inherit;
+`;
+
+const fadeIn = keyframes`
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+`;
+
+interface TooltipBoxProps {
+  direction: 'top' | 'bottom' | 'left' | 'right';
+  backgroundColor: string;
+  textColor: string;
+}
+
+const TooltipBox = styled.div<TooltipBoxProps>`
+  position: fixed;
+  z-index: 1000;
+  background-color: ${({ backgroundColor }) => backgroundColor};
+  color: ${({ textColor }) => textColor};
+  padding: 8px;
+  border-radius: 4px;
+  font-size: 0.65rem;
+  max-width: 250px;
+  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+  animation: ${fadeIn} 0.2s ease-out;
+  line-height: 1.3;
+`;

package/src/stories/QuestList.stories.tsx

@@ -22,61 +22,31 @@ const IQuestMock = [
     _id: '6317996c77f2420047a20b55',
     rewards: [
       {
-        id: '6317996c77f2420047a20b53',
-        itemKeys: ['6317996c77f2420047a20b53'],
-        spellKeys: ['6317996c77f2420047a20b53'],
+        id: '66cd2b039b486b00436a4ace',
+        itemKeys: ['iron-armor'],
         qty: 1,
       },
     ],
     objectives: [
       {
-        id: '6317996c77f2420047a20b53',
-        type: QuestType.Kill,
+        id: '66cd2b049b486b00436a4b1a',
+        type: QuestType.Interaction,
         status: QuestStatus.Pending,
-        killCount: 10,
-        killCountTarget: 30,
-        creatureKeys: ['6317996c77f2420047a20b53'],
+        targetNPCkey: 'durgan-miner',
+        items: [{ itemKey: 'iron-ingot', qty: 10 }],
       },
     ],
     npcId: '6317996b77f2420047a20825',
-    title: 'Deliver message to the trader1',
-    key: 'interaction-trader',
+    title: 'Iron Ingot Craftsmanship',
+    key: 'interaction-durgan-miner',
     description:
-      "Need to send a message to my brother, the trader, about my father's health. I cannot do it because it is too dangerous out there. Please, help me by delivering this message to him.",
-    createdAt: '2022-09-06T19:03:08.285+0000',
-    updatedAt: '2022-09-06T19:03:08.304+0000',
-  },
-  {
-    _id: '6317996c77f2420047a20b55',
-    rewards: [
-      {
-        id: '6317996c77f2420047a20b53',
-        itemKeys: ['6317996c77f2420047a20b53'],
-        spellKeys: ['6317996c77f2420047a20b53'],
-        qty: 1,
-      },
-    ],
-    objectives: [
-      {
-        id: '6317996c77f2420047a20b53',
-        type: QuestType.Kill,
-        status: QuestStatus.Pending,
-        killCount: 10,
-        killCountTarget: 30,
-        creatureKeys: ['6317996c77f2420047a20b53'],
-      },
-    ],
-    npcId: '6317996b77f2420047a20825',
-    title: 'Deliver message to the trader2',
-    key: 'interaction-trader',
-    description:
-      "Need to send a message to my brother, the trader, about my father's health. I cannot do it because it is too dangerous out there. Please, help me by delivering this message to him.",
-    createdAt: '2022-09-06T19:03:08.285+0000',
-    updatedAt: '2022-09-06T19:03:08.304+0000',
+      "Employ your pickaxe to mine ore, followed by utilizing your blacksmith hammer. Select 'Use with,' then target an anvil to forge ingots. Provide me with 10 Iron Ingots, and I shall craft you an Iron Armor!",
+    createdAt: '2024-08-27T01:25:24.285+0000',
+    updatedAt: '2024-08-27T01:25:24.304+0000',
+    status: QuestStatus.Pending,
   },
 ];
 
 Default.args = {
   quests: IQuestMock,
-  onClose: () => console.log('closing'),
 };