@rpg-engine/long-bow 0.8.230 → 0.8.232

package/package.json

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

package/src/components/Item/Cards/ItemTooltip.tsx

@@ -20,38 +20,49 @@ export const ItemTooltip: React.FC<IItemTooltipProps> = ({
   equipmentSet,
 }) => {
   const ref = useRef<HTMLDivElement>(null);
+  const rafId = useRef<number | null>(null);
 
   useEffect(() => {
     const { current } = ref;
 
     if (current) {
       const handleMouseMove = (event: MouseEvent) => {
+        if (rafId.current !== null) return;
+
         const { clientX, clientY } = event;
 
-        // Adjust the position of the tooltip based on the mouse position
-        const rect = current.getBoundingClientRect();
+        rafId.current = requestAnimationFrame(() => {
+          rafId.current = null;
+
+          // Adjust the position of the tooltip based on the mouse position
+          const rect = current.getBoundingClientRect();
 
-        const tooltipWidth = rect.width;
-        const tooltipHeight = rect.height;
-        const isOffScreenRight =
-          clientX + tooltipWidth + offset > window.innerWidth;
-        const isOffScreenBottom =
-          clientY + tooltipHeight + offset > window.innerHeight;
-        const x = isOffScreenRight
-          ? clientX - tooltipWidth - offset
-          : clientX + offset;
-        const y = isOffScreenBottom
-          ? clientY - tooltipHeight - offset
-          : clientY + offset;
+          const tooltipWidth = rect.width;
+          const tooltipHeight = rect.height;
+          const isOffScreenRight =
+            clientX + tooltipWidth + offset > window.innerWidth;
+          const isOffScreenBottom =
+            clientY + tooltipHeight + offset > window.innerHeight;
+          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';
+          current.style.transform = `translate(${x}px, ${y}px)`;
+          current.style.opacity = '1';
+        });
       };
 
       window.addEventListener('mousemove', handleMouseMove);
 
       return () => {
         window.removeEventListener('mousemove', handleMouseMove);
+        if (rafId.current !== null) {
+          cancelAnimationFrame(rafId.current);
+          rafId.current = null;
+        }
       };
     }
 

package/src/components/Quests/QuestInfo/QuestInfo.tsx

@@ -10,14 +10,19 @@ import { DraggableContainer } from '../../DraggableContainer';
 import { RPGUIContainerTypes } from '../../RPGUI/RPGUIContainer';
 import { Column } from '../../shared/Column';
 import thumbnailDefault from './img/default.png';
+import { QuestObjectivesSection } from './QuestObjectivesSection';
+import { QuestRequirementsSection } from './QuestRequirementsSection';
+import { QuestRewardsSection } from './QuestRewardsSection';
+import { IQuestAtlasProps } from './QuestSectionTypes';
 
 export interface IQuestsButtonProps {
   disabled: boolean;
+  disabledReason?: string;
   title: string;
   onClick: (questId: string, npcId: string) => void;
 }
 
-export interface IQuestInfoProps {
+export interface IQuestInfoProps extends IQuestAtlasProps {
   onClose?: () => void;
   buttons?: IQuestsButtonProps[];
   quests: IQuest[];
@@ -31,15 +36,22 @@ export const QuestInfo: React.FC<IQuestInfoProps> = ({
   buttons,
   onChangeQuest,
   scale,
+  itemsAtlasJSON,
+  itemsAtlasIMG,
+  entitiesAtlasJSON,
+  entitiesAtlasIMG,
+  iconsAtlasJSON,
+  iconsAtlasIMG,
 }) => {
   const [currentIndex, setCurrentIndex] = useState(0);
   const questsLength = quests.length - 1;
+  const currentQuest = quests[currentIndex] || quests[0];
 
   useEffect(() => {
-    if (onChangeQuest) {
-      onChangeQuest(currentIndex, quests[currentIndex]._id);
+    if (onChangeQuest && currentQuest) {
+      onChangeQuest(currentIndex, currentQuest._id);
     }
-  }, [currentIndex]);
+  }, [currentIndex, currentQuest]);
 
   const onLeftClick = () => {
     if (currentIndex === 0) setCurrentIndex(questsLength);
@@ -60,86 +72,59 @@ export const QuestInfo: React.FC<IQuestInfoProps> = ({
       cancelDrag=".equipment-container-body .arrow-selector"
       scale={scale}
     >
-      {quests.length >= 2 ? (
+      {currentQuest && (
         <QuestsContainer>
-          {currentIndex !== 0 && (
-            <SelectArrow
-              direction="left"
-              onPointerDown={onLeftClick}
-            ></SelectArrow>
+          {quests.length >= 2 && currentIndex !== 0 && (
+            <SelectArrow direction="left" onPointerDown={onLeftClick} />
           )}
-          {currentIndex !== quests.length - 1 && (
-            <SelectArrow
-              direction="right"
-              onPointerDown={onRightClick}
-            ></SelectArrow>
+          {quests.length >= 2 && currentIndex !== quests.length - 1 && (
+            <SelectArrow direction="right" onPointerDown={onRightClick} />
           )}
-
           <QuestContainer>
             <TitleContainer className="drag-handler">
               <Title>
-                <Thumbnail
-                  src={quests[currentIndex].thumbnail || thumbnailDefault}
-                />
-                {quests[currentIndex].title}
+                <Thumbnail src={currentQuest.thumbnail || thumbnailDefault} />
+                {currentQuest.title}
               </Title>
               <QuestSplitDiv>
                 <hr className="golden" />
               </QuestSplitDiv>
             </TitleContainer>
             <Content>
-              <p>{quests[currentIndex].description}</p>
+              <p>{currentQuest.description}</p>
             </Content>
+            <QuestObjectivesSection
+              objectives={currentQuest.objectives as any}
+              entitiesAtlasJSON={entitiesAtlasJSON}
+              entitiesAtlasIMG={entitiesAtlasIMG}
+            />
+            <QuestRequirementsSection
+              objectives={currentQuest.objectives as any}
+              itemsAtlasJSON={itemsAtlasJSON}
+              itemsAtlasIMG={itemsAtlasIMG}
+            />
+            <QuestRewardsSection
+              rewards={currentQuest.rewards}
+              itemsAtlasJSON={itemsAtlasJSON}
+              itemsAtlasIMG={itemsAtlasIMG}
+              iconsAtlasJSON={iconsAtlasJSON}
+              iconsAtlasIMG={iconsAtlasIMG}
+            />
             <QuestColumn className="dark-background" justifyContent="flex-end">
               {buttons &&
                 buttons.map((button, index) => (
-                  <Button
-                    key={index}
-                    onPointerDown={() =>
-                      button.onClick(
-                        quests[currentIndex]._id,
-                        quests[currentIndex].npcId
-                      )
-                    }
-                    disabled={button.disabled}
-                    buttonType={ButtonTypes.RPGUIButton}
-                    id={`button-${index}`}
-                  >
-                    {button.title}
-                  </Button>
-                ))}
-            </QuestColumn>
-          </QuestContainer>
-        </QuestsContainer>
-      ) : (
-        <QuestsContainer>
-          <QuestContainer>
-            <TitleContainer className="drag-handler">
-              <Title>
-                <Thumbnail src={quests[0].thumbnail || thumbnailDefault} />
-                {quests[0].title}
-              </Title>
-              <QuestSplitDiv>
-                <hr className="golden" />
-              </QuestSplitDiv>
-            </TitleContainer>
-            <Content>
-              <p>{quests[0].description}</p>
-            </Content>
-            <QuestColumn className="dark-background" justifyContent="flex-end">
-              {buttons &&
-                buttons.map((button, index) => (
-                  <Button
-                    key={index}
-                    onPointerDown={() =>
-                      button.onClick(quests[0]._id, quests[0].npcId)
-                    }
-                    disabled={button.disabled}
-                    buttonType={ButtonTypes.RPGUIButton}
-                    id={`button-${index}`}
-                  >
-                    {button.title}
-                  </Button>
+                  <ButtonWrapper key={index} title={button.disabled ? button.disabledReason : undefined}>
+                    <Button
+                      onPointerDown={() =>
+                        button.onClick(currentQuest._id, currentQuest.npcId)
+                      }
+                      disabled={button.disabled}
+                      buttonType={ButtonTypes.RPGUIButton}
+                      id={`button-${index}`}
+                    >
+                      {button.title}
+                    </Button>
+                  </ButtonWrapper>
                 ))}
             </QuestColumn>
           </QuestContainer>
@@ -207,6 +192,10 @@ const QuestColumn = styled(Column)`
   justify-content: space-evenly;
 `;
 
+const ButtonWrapper = styled.div`
+  display: inline-flex;
+`;
+
 const TitleContainer = styled.div`
   width: 100%;
   display: flex;

package/src/components/Quests/QuestInfo/QuestObjectivesSection.tsx

@@ -0,0 +1,114 @@
+import { IQuestObjectiveInteraction, IQuestObjectiveKill, QuestType } from '@rpg-engine/shared';
+import React from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../../constants/uiColors';
+import { SpriteFromAtlas } from '../../shared/SpriteFromAtlas';
+import { IQuestAtlasProps } from './QuestSectionTypes';
+
+interface IProps extends IQuestAtlasProps {
+  objectives?: Array<IQuestObjectiveKill | IQuestObjectiveInteraction>;
+}
+
+export const QuestObjectivesSection: React.FC<IProps> = ({
+  objectives = [],
+  entitiesAtlasJSON,
+  entitiesAtlasIMG,
+}) => {
+  if (!objectives.length) {
+    return null;
+  }
+
+  return (
+    <Section>
+      <SectionTitle>Objectives</SectionTitle>
+      {objectives.map((objective: any, index) => {
+        if (objective.type === QuestType.Kill) {
+          const progress = `${objective.killCount || 0}/${objective.killCountTarget}`;
+          const fill = Math.min((objective.killCount || 0) / Math.max(objective.killCountTarget || 1, 1), 1) * 100;
+
+          return (
+            <ObjectiveBlock key={objective.id || index}>
+              {(objective.creatures || objective.creatureKeys || []).map((creature: any) => {
+                const data = typeof creature === 'string' ? { key: creature, name: creature, texturePath: '' } : creature;
+                return (
+                  <ObjectiveRow key={data.key}>
+                    {entitiesAtlasJSON && entitiesAtlasIMG && data.texturePath && (
+                      <SpriteFromAtlas
+                        atlasJSON={entitiesAtlasJSON}
+                        atlasIMG={entitiesAtlasIMG}
+                        spriteKey={data.texturePath}
+                        width={32}
+                        height={32}
+                        imgScale={1}
+                        centered
+                      />
+                    )}
+                    <ObjectiveText>{data.name || data.key}</ObjectiveText>
+                    <ProgressText>{progress}</ProgressText>
+                  </ObjectiveRow>
+                );
+              })}
+              <ProgressBar>
+                <ProgressFill style={{ width: `${fill}%` }} />
+              </ProgressBar>
+            </ObjectiveBlock>
+          );
+        }
+
+        if (objective.type === QuestType.Interaction) {
+          return (
+            <ObjectiveRow key={objective.id || index}>
+              <ObjectiveText>Talk to {objective.targetNPCkey || 'the quest contact'}</ObjectiveText>
+            </ObjectiveRow>
+          );
+        }
+
+        return null;
+      })}
+    </Section>
+  );
+};
+
+const Section = styled.section`
+  margin: 10px 18px;
+`;
+
+const SectionTitle = styled.h2`
+  color: ${uiColors.yellow};
+  font-size: 0.9rem;
+  margin: 0 0 8px;
+`;
+
+const ObjectiveBlock = styled.div`
+  margin-bottom: 8px;
+`;
+
+const ObjectiveRow = styled.div`
+  color: ${uiColors.white};
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 28px;
+  font-size: 0.75rem;
+`;
+
+const ObjectiveText = styled.span`
+  flex: 1;
+`;
+
+const ProgressText = styled.span`
+  color: ${uiColors.yellow};
+`;
+
+const ProgressBar = styled.div`
+  height: 6px;
+  background: ${uiColors.gray};
+  border-radius: 3px;
+  overflow: hidden;
+  margin-top: 4px;
+`;
+
+const ProgressFill = styled.div`
+  height: 100%;
+  background: ${uiColors.lightGreen};
+`;

package/src/components/Quests/QuestInfo/QuestRequirementsSection.tsx

@@ -0,0 +1,74 @@
+import { IQuestObjectiveInteraction, QuestType } from '@rpg-engine/shared';
+import React from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../../constants/uiColors';
+import { ItemInfoWrapper } from '../../Item/Cards/ItemInfoWrapper';
+import { SpriteFromAtlas } from '../../shared/SpriteFromAtlas';
+import { IQuestAtlasProps } from './QuestSectionTypes';
+
+interface IProps extends IQuestAtlasProps {
+  objectives?: IQuestObjectiveInteraction[];
+}
+
+export const QuestRequirementsSection: React.FC<IProps> = ({
+  objectives = [],
+  itemsAtlasJSON,
+  itemsAtlasIMG,
+}) => {
+  const items = objectives
+    .filter((objective: any) => objective.type === QuestType.Interaction)
+    .flatMap((objective: any) => objective.items || []);
+
+  if (!items.length) {
+    return null;
+  }
+
+  return (
+    <Section>
+      <SectionTitle>Requirements</SectionTitle>
+      {items.map((item: any) => {
+        const hasQty = item.playerHasQty || 0;
+        const isMet = hasQty >= item.qty;
+        return (
+          <RequirementRow key={item.itemKey} isMet={isMet}>
+            {itemsAtlasJSON && itemsAtlasIMG && item.texturePath && (
+              <ItemInfoWrapper item={{ ...item, key: item.itemKey, stackQty: item.qty } as any} atlasJSON={itemsAtlasJSON} atlasIMG={itemsAtlasIMG}>
+                <SpriteFromAtlas
+                  atlasJSON={itemsAtlasJSON}
+                  atlasIMG={itemsAtlasIMG}
+                  spriteKey={item.texturePath}
+                  width={32}
+                  height={32}
+                  imgScale={1.5}
+                  centered
+                />
+              </ItemInfoWrapper>
+            )}
+            <span>
+              {hasQty}/{item.qty} {item.name || item.itemKey}
+            </span>
+          </RequirementRow>
+        );
+      })}
+    </Section>
+  );
+};
+
+const Section = styled.section`
+  margin: 10px 18px;
+`;
+
+const SectionTitle = styled.h2`
+  color: ${uiColors.yellow};
+  font-size: 0.9rem;
+  margin: 0 0 8px;
+`;
+
+const RequirementRow = styled.div<{ isMet: boolean }>`
+  color: ${(props) => (props.isMet ? uiColors.lightGreen : uiColors.red)};
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 34px;
+  font-size: 0.75rem;
+`;

package/src/components/Quests/QuestInfo/QuestRewardsSection.tsx

@@ -0,0 +1,128 @@
+import { IQuestReward } from '@rpg-engine/shared';
+import React from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../../constants/uiColors';
+import { ItemInfoWrapper } from '../../Item/Cards/ItemInfoWrapper';
+import { SpriteFromAtlas } from '../../shared/SpriteFromAtlas';
+import { IQuestAtlasProps } from './QuestSectionTypes';
+
+interface IProps extends IQuestAtlasProps {
+  rewards?: IQuestReward[];
+}
+
+export const QuestRewardsSection: React.FC<IProps> = ({
+  rewards = [],
+  itemsAtlasJSON,
+  itemsAtlasIMG,
+  iconsAtlasJSON,
+  iconsAtlasIMG,
+}) => {
+  const items = rewards.flatMap((reward: any) => reward.items || []);
+  const spells = rewards.flatMap((reward: any) => reward.spells || []);
+
+  if (!items.length && !spells.length) {
+    return null;
+  }
+
+  return (
+    <Section>
+      <SectionTitle>Rewards</SectionTitle>
+      <RewardGrid>
+        {items.map((item: any) => (
+          <RewardItem key={`${item.key}-${item.qty}`}>
+            {itemsAtlasJSON && itemsAtlasIMG && item.texturePath ? (
+              <ItemInfoWrapper
+                item={{ ...item, key: item.key, stackQty: item.qty } as any}
+                atlasJSON={itemsAtlasJSON}
+                atlasIMG={itemsAtlasIMG}
+              >
+                <SpriteFromAtlas
+                  atlasJSON={itemsAtlasJSON}
+                  atlasIMG={itemsAtlasIMG}
+                  spriteKey={item.texturePath}
+                  width={32}
+                  height={32}
+                  imgScale={1.5}
+                  centered
+                />
+              </ItemInfoWrapper>
+            ) : (
+              <FallbackIcon>{item.name?.[0] || '?'}</FallbackIcon>
+            )}
+            {item.qty > 1 && <QtyBadge>x{item.qty}</QtyBadge>}
+            <RewardName>{item.name || item.key}</RewardName>
+          </RewardItem>
+        ))}
+        {spells.map((spell: any) => (
+          <RewardItem key={spell.key} title={spell.name || spell.key}>
+            {iconsAtlasJSON && iconsAtlasIMG && spell.texturePath ? (
+              <SpriteFromAtlas
+                atlasJSON={iconsAtlasJSON}
+                atlasIMG={iconsAtlasIMG}
+                spriteKey={spell.texturePath}
+                width={32}
+                height={32}
+                imgScale={1.5}
+                centered
+              />
+            ) : (
+              <FallbackIcon>{spell.name?.[0] || '?'}</FallbackIcon>
+            )}
+            <RewardName>{spell.name || spell.key}</RewardName>
+          </RewardItem>
+        ))}
+      </RewardGrid>
+    </Section>
+  );
+};
+
+const Section = styled.section`
+  margin: 10px 18px;
+`;
+
+const SectionTitle = styled.h2`
+  color: ${uiColors.yellow};
+  font-size: 0.9rem;
+  margin: 0 0 8px;
+`;
+
+const RewardGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
+  gap: 8px;
+`;
+
+const RewardItem = styled.div`
+  position: relative;
+  min-height: 58px;
+  color: ${uiColors.white};
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  font-size: 0.65rem;
+`;
+
+const FallbackIcon = styled.div`
+  width: 32px;
+  height: 32px;
+  border: 1px solid ${uiColors.gray};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${uiColors.yellow};
+`;
+
+const QtyBadge = styled.span`
+  position: absolute;
+  top: 0;
+  right: 18px;
+  background: ${uiColors.darkGray};
+  color: ${uiColors.yellow};
+  border: 1px solid ${uiColors.gray};
+  padding: 1px 4px;
+`;
+
+const RewardName = styled.span`
+  text-align: center;
+`;

package/src/components/Quests/QuestInfo/QuestSectionTypes.ts

@@ -0,0 +1,8 @@
+export interface IQuestAtlasProps {
+  itemsAtlasJSON?: any;
+  itemsAtlasIMG?: any;
+  entitiesAtlasJSON?: any;
+  entitiesAtlasIMG?: any;
+  iconsAtlasJSON?: any;
+  iconsAtlasIMG?: any;
+}