@rpg-engine/long-bow 0.8.231 → 0.8.232

package/package.json

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

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;
+}

package/src/components/Quests/QuestList.tsx

@@ -1,10 +1,12 @@
-import { IQuest, QuestStatus } from '@rpg-engine/shared';
+import { IQuest } from '@rpg-engine/shared';
 import React from 'react';
 import styled, { CSSProperties } from 'styled-components';
 import { uiColors } from '../../constants/uiColors';
+import { IQuestListAtlasProps, QuestListRow } from './QuestListRow';
 
-export interface IQuestListProps {
+export interface IQuestListProps extends IQuestListAtlasProps {
   quests?: IQuest[];
+  compact?: boolean;
   styles?: {
     container?: CSSProperties;
     card?: CSSProperties;
@@ -13,34 +15,18 @@ export interface IQuestListProps {
   };
 }
 
-export const QuestList: React.FC<IQuestListProps> = ({ quests, styles }) => {
+export const QuestList: React.FC<IQuestListProps> = ({ quests, compact, styles, itemsAtlasJSON, itemsAtlasIMG }) => {
   return (
     <QuestListContainer style={styles?.container}>
       {quests && quests.length > 0 ? (
         quests.map((quest, i) => (
-          <QuestCard key={i} style={styles?.card}>
-            <QuestItem>
-              <Label style={styles?.label}>Title:</Label>
-              <Value style={styles?.value}>
-                {formatQuestText(quest.title)}
-              </Value>
-            </QuestItem>
-            <QuestItem>
-              <Label style={styles?.label}>Status:</Label>
-              <Value
-                style={{
-                  ...styles?.value,
-                  color: getQuestStatusColor(quest.status),
-                }}
-              >
-                {formatQuestStatus(quest.status) ?? 'Unknown'}
-              </Value>
-            </QuestItem>
-            <QuestItem>
-              <Label style={styles?.label}>Description:</Label>
-              <Value style={styles?.value}>{quest.description}</Value>
-            </QuestItem>
-          </QuestCard>
+          <QuestListRow
+            key={quest._id || i}
+            quest={quest}
+            compact={compact}
+            itemsAtlasJSON={itemsAtlasJSON}
+            itemsAtlasIMG={itemsAtlasIMG}
+          />
         ))
       ) : (
         <NoQuestContainer>
@@ -58,38 +44,6 @@ const QuestListContainer = styled.div`
   font-size: 0.7rem;
 `;
 
-const QuestCard = styled.div`
-  background-color: ${uiColors.darkGray};
-  padding: 15px;
-  margin-bottom: 10px;
-  border-radius: 10px;
-  border: 1px solid ${uiColors.gray};
-  display: flex;
-  flex-direction: column;
-`;
-
-const QuestItem = styled.div`
-  display: flex;
-  margin-bottom: 5px;
-  flex-wrap: wrap;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-`;
-
-const Label = styled.span`
-  font-weight: bold;
-  color: ${uiColors.yellow} !important;
-  margin-right: 10px;
-`;
-
-const Value = styled.span`
-  flex-grow: 1;
-  color: ${uiColors.white};
-  word-wrap: break-word;
-`;
-
 const NoQuestContainer = styled.div`
   text-align: center;
   p {
@@ -97,32 +51,3 @@ const NoQuestContainer = styled.div`
     color: ${uiColors.lightGray};
   }
 `;
-
-export const formatQuestText = (text: string) => {
-  if (!text) return '';
-  return text
-    .split('-')
-    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
-    .join(' ');
-};
-
-export const getQuestStatusColor = (status?: QuestStatus) => {
-  switch (status) {
-    case QuestStatus.Pending:
-      return uiColors.orange;
-    case QuestStatus.InProgress:
-      return uiColors.blue;
-    case QuestStatus.Completed:
-      return uiColors.lightGreen;
-    default:
-      return uiColors.white;
-  }
-};
-
-export const formatQuestStatus = (status?: QuestStatus) => {
-  if (!status) return '';
-  return status
-    .split(/(?=[A-Z])/)
-    .join(' ')
-    .replace(/^\w/, c => c.toUpperCase());
-};