@rpg-engine/long-bow 0.6.70 → 0.6.72

package/package.json

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

package/src/components/QuestList.tsx

@@ -1,135 +1,171 @@
-import { IQuest } from '@rpg-engine/shared';
 import React from 'react';
+
 import styled from 'styled-components';
-import { uiFonts } from '../constants/uiFonts';
-import { DraggableContainer } from './DraggableContainer';
-import { RPGUIContainerTypes } from './RPGUI/RPGUIContainer';
+
+import {
+  IQuest,
+  IQuestObjectiveInteraction,
+  IQuestObjectiveKill,
+  QuestStatus,
+} from '@rpg-engine/shared';
+import { uiColors } from '../constants/uiColors';
+import { Table, TableCell, TableHeader, TableRow } from './Table/Table';
+import { Ellipsis } from './shared/Ellipsis';
+import { SimpleTooltip } from './shared/SimpleTooltip';
 
 export interface IQuestListProps {
   quests?: IQuest[];
-  onClose: () => void;
-  scale?: number;
 }
 
-export const QuestList: React.FC<IQuestListProps> = ({
-  quests,
-  onClose,
-  scale,
-}) => {
+export const QuestList: React.FC<IQuestListProps> = ({ quests }) => {
   return (
-    <QuestDraggableContainer
-      type={RPGUIContainerTypes.Framed}
-      onCloseButton={() => {
-        if (onClose) onClose();
-      }}
-      width="520px"
-      scale={scale}
-    >
-      <div style={{ width: '100%' }}>
-        <Title>Quests</Title>
-        <hr className="golden" />
-
-        <QuestListContainer>
-          {quests ? (
-            quests.map((quest, i) => (
-              <div className="quest-item" key={i}>
-                <span className="quest-number">{i + 1}</span>
-                <div className="quest-detail">
-                  <p className="quest-detail__title">{quest.title}</p>
-                  <p className="quest-detail__description">
-                    {quest.description}
-                  </p>
-                </div>
-              </div>
-            ))
-          ) : (
-            <NoQuestContainer>
-              <p>There are no ongoing quests</p>
-            </NoQuestContainer>
-          )}
-        </QuestListContainer>
-      </div>
-    </QuestDraggableContainer>
+    <QuestListContainer>
+      {quests && quests.length > 0 ? (
+        <>
+          <Table>
+            <thead>
+              <TableRow>
+                <TableHeader>Status</TableHeader>
+                <TableHeader>Title</TableHeader>
+                <TableHeader>Description</TableHeader>
+                <TableHeader>Objectives</TableHeader>
+                <TableHeader>Rewards</TableHeader>
+              </TableRow>
+            </thead>
+            <tbody>
+              {quests.map((quest, i) => (
+                <TableRow key={i}>
+                  <TableCell style={{ color: getStatusColor(quest.status) }}>
+                    {quest.status ?? 'Unknown'}
+                  </TableCell>
+                  <TableCell>
+                    <SimpleTooltip
+                      content={formatText(quest.title)}
+                      direction="bottom"
+                    >
+                      <Ellipsis maxWidth="300px">
+                        {formatText(quest.title)}
+                      </Ellipsis>
+                    </SimpleTooltip>
+                  </TableCell>
+                  <TableCell>
+                    <SimpleTooltip
+                      content={quest.description}
+                      direction="bottom"
+                    >
+                      <Ellipsis maxWidth="300px">{quest.description}</Ellipsis>
+                    </SimpleTooltip>
+                  </TableCell>
+                  <TableCell>
+                    <SimpleTooltip
+                      content={formatObjectives(quest.objectives)}
+                      direction="bottom"
+                    >
+                      <Ellipsis maxWidth="300px">
+                        {formatObjectives(quest.objectives)}
+                      </Ellipsis>
+                    </SimpleTooltip>
+                  </TableCell>
+                  <TableCell>
+                    <SimpleTooltip
+                      content={formatRewards(quest.rewards)}
+                      direction="bottom"
+                    >
+                      <Ellipsis maxWidth="200px">
+                        {formatRewards(quest.rewards)}
+                      </Ellipsis>
+                    </SimpleTooltip>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </tbody>
+          </Table>
+        </>
+      ) : (
+        <NoQuestContainer>
+          <p>There are no ongoing quests</p>
+        </NoQuestContainer>
+      )}
+    </QuestListContainer>
   );
 };
 
-const QuestDraggableContainer = styled(DraggableContainer)`
-  .container-close {
-    top: 10px;
-    right: 10px;
-  }
+// Updated helper function to format objectives
+const formatObjectives = (
+  objectives: (IQuestObjectiveKill | IQuestObjectiveInteraction)[]
+) => {
+  return objectives
+    .map(objective => {
+      if ('killCountTarget' in objective) {
+        // This is an IQuestObjectiveKill
+        const killObjective = objective as IQuestObjectiveKill;
+        return `Kill ${formatText(killObjective.creatureKeys.join(', '))}: ${
+          killObjective.killCount
+        }/${killObjective.killCountTarget}`;
+      } else if ('targetNPCkey' in objective) {
+        // This is an IQuestObjectiveInteraction
+        const interactionObjective = objective as IQuestObjectiveInteraction;
+        return `Interact with NPC: ${formatText(
+          interactionObjective.targetNPCkey ?? 'Unknown'
+        )}`;
+      } else {
+        return 'Unknown objective';
+      }
+    })
+    .join('; ');
+};
 
-  .quest-title {
-    text-align: left;
-    margin-left: 44px;
-    margin-top: 20px;
-    color: yellow;
-  }
+// Other helper functions remain the same
+const formatRewards = (rewards: IQuest['rewards']) => {
+  return rewards
+    .map(reward => {
+      return `${formatText(
+        reward.itemKeys.map(itemKey => itemKey + ' x' + reward.qty).join(', ')
+      )}${
+        reward.spellKeys
+          ? `, Spells: ${formatText(reward.spellKeys.join(', '))}`
+          : ''
+      }`;
+    })
+    .join('; ');
+};
 
-  .quest-desc {
-    margin-top: 12px;
-    margin-left: 44px;
-  }
+const formatText = (text: string) => {
+  return text
+    .split('-')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ');
+};
 
-  .rpgui-progress {
-    min-width: 80%;
-    margin: 0 auto;
+const getStatusColor = (status?: QuestStatus) => {
+  switch (status) {
+    case QuestStatus.Pending:
+      return uiColors.orange; // Orange
+    case QuestStatus.InProgress:
+      return uiColors.blue; // Deep Sky Blue
+    case QuestStatus.Completed:
+      return uiColors.lightGreen; // Lime Green
+    default:
+      return uiColors.white; // Default to white
   }
-`;
-
-const Title = styled.h1`
-  z-index: 22;
-  font-size: ${uiFonts.size.medium} !important;
-  color: yellow !important;
-`;
+};
 
 const QuestListContainer = styled.div`
   margin-top: 20px;
   margin-bottom: 40px;
   overflow-y: auto;
   max-height: 400px;
-
-  .quest-item {
-    display: flex;
-    align-items: flex-start;
-    margin-bottom: 12px;
-  }
-
-  .quest-number {
-    border-radius: 50%;
-    width: 28px;
-    height: 28px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-right: 16px;
-    background-color: brown;
-    flex-shrink: 0;
-  }
-
-  .quest-number.completed {
-    background-color: yellow;
-  }
-
-  p {
-    margin: 0;
-  }
-
-  .quest-detail__title {
-    color: yellow;
-  }
-
-  .quest-detail__description {
-    margin-top: 5px;
-  }
-  .Noquest-detail__description {
-    margin-top: 5px;
-    margin: auto;
-  }
+  background-color: ${uiColors.darkGray};
+  padding: 20px;
+  border-radius: 10px;
+  border: 1px solid ${uiColors.gray};
+  font-size: 0.7rem;
 `;
+
 const NoQuestContainer = styled.div`
   text-align: center;
   p {
     margin-top: 5px;
+    color: ${uiColors.lightGray};
   }
 `;

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,13 +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-align: ${({ align }) => (align ? align : 'left')}; /* Add this line */
+  text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
 `;
 
 export const ActionButtons = styled.div`

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'),
 };