@rpg-engine/long-bow 0.7.13 → 0.7.15

package/package.json

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

package/src/components/Quests/QuestList.tsx

@@ -1,31 +1,44 @@
 import { IQuest, QuestStatus } from '@rpg-engine/shared';
 import React from 'react';
-import styled from 'styled-components';
+import styled, { CSSProperties } from 'styled-components';
 import { uiColors } from '../../constants/uiColors';
 
 export interface IQuestListProps {
   quests?: IQuest[];
+  styles?: {
+    container?: CSSProperties;
+    card?: CSSProperties;
+    label?: CSSProperties;
+    value?: CSSProperties;
+  };
 }
 
-export const QuestList: React.FC<IQuestListProps> = ({ quests }) => {
+export const QuestList: React.FC<IQuestListProps> = ({ quests, styles }) => {
   return (
-    <QuestListContainer>
+    <QuestListContainer style={styles?.container}>
       {quests && quests.length > 0 ? (
         quests.map((quest, i) => (
-          <QuestCard key={i}>
+          <QuestCard key={i} style={styles?.card}>
             <QuestItem>
-              <Label>Title:</Label>
-              <Value>{formatText(quest.title)}</Value>
+              <Label style={styles?.label}>Title:</Label>
+              <Value style={styles?.value}>
+                {formatQuestText(quest.title)}
+              </Value>
             </QuestItem>
             <QuestItem>
-              <Label>Status:</Label>
-              <Value style={{ color: getStatusColor(quest.status) }}>
-                {formatStatus(quest.status) ?? 'Unknown'}
+              <Label style={styles?.label}>Status:</Label>
+              <Value
+                style={{
+                  ...styles?.value,
+                  color: getQuestStatusColor(quest.status),
+                }}
+              >
+                {formatQuestStatus(quest.status) ?? 'Unknown'}
               </Value>
             </QuestItem>
             <QuestItem>
-              <Label>Description:</Label>
-              <Value>{quest.description}</Value>
+              <Label style={styles?.label}>Description:</Label>
+              <Value style={styles?.value}>{quest.description}</Value>
             </QuestItem>
           </QuestCard>
         ))
@@ -39,8 +52,6 @@ export const QuestList: React.FC<IQuestListProps> = ({ quests }) => {
 };
 
 const QuestListContainer = styled.div`
-  margin-top: 20px;
-  margin-bottom: 40px;
   max-height: 400px;
   padding: 10px;
   border-radius: 10px;
@@ -87,79 +98,7 @@ const NoQuestContainer = styled.div`
   }
 `;
 
-// const formatObjectives = (
-//   objectives: (IQuestObjectiveKill | IQuestObjectiveInteraction)[]
-// ) => {
-//   try {
-//     if (!objectives || !Array.isArray(objectives)) return '';
-//     return objectives
-//       .map(objective => {
-//         if ('killCountTarget' in objective) {
-//           const killObjective = objective as IQuestObjectiveKill;
-//           return `Kill ${formatText(
-//             killObjective.creatureKeys?.join(', ') ?? ''
-//           )}: ${killObjective.killCount ?? 0}/${killObjective.killCountTarget ??
-//             0}`;
-//         } else if ('targetNPCkey' in objective) {
-//           const interactionObjective = objective as IQuestObjectiveInteraction;
-//           return `Interact with NPC: ${formatText(
-//             interactionObjective.targetNPCkey ?? ''
-//           )}`;
-//         } else {
-//           return '';
-//         }
-//       })
-//       .filter(Boolean)
-//       .join('; ');
-//   } catch (error) {
-//     console.error('Error formatting objectives:', error);
-//     return '';
-//   }
-// };
-
-// const formatRewards = (rewards: IQuest['rewards']) => {
-//   try {
-//     if (!rewards || !Array.isArray(rewards)) return '';
-
-//     return rewards
-//       .map(reward => {
-//         const itemKeysFormatted = reward?.itemKeys
-//           ?.map(itemKey =>
-//             itemKey && reward?.qty !== undefined
-//               ? `${itemKey} x${reward.qty}`
-//               : ''
-//           )
-//           .filter(Boolean)
-//           .join(', ');
-
-//         const spellKeysFormatted = reward?.spellKeys
-//           ?.filter(Boolean)
-//           .join(', ');
-
-//         const formattedReward = itemKeysFormatted
-//           ? `${formatText(itemKeysFormatted)}`
-//           : '';
-
-//         if (spellKeysFormatted) {
-//           return formattedReward
-//             ? `${formattedReward}, Spells: ${formatText(spellKeysFormatted)}`
-//             : `Spells: ${formatText(spellKeysFormatted)}`;
-//         }
-
-//         return formattedReward || '';
-//       })
-//       .filter(Boolean)
-//       .join('; ');
-//   } catch (error) {
-//     console.error(
-//       `Error formatting rewards: ${JSON.stringify(rewards)}:`,
-//       error
-//     );
-//     return '';
-//   }
-// };
-
-const formatText = (text: string) => {
+export const formatQuestText = (text: string) => {
   if (!text) return '';
   return text
     .split('-')
@@ -167,7 +106,7 @@ const formatText = (text: string) => {
     .join(' ');
 };
 
-const getStatusColor = (status?: QuestStatus) => {
+export const getQuestStatusColor = (status?: QuestStatus) => {
   switch (status) {
     case QuestStatus.Pending:
       return uiColors.orange;
@@ -180,7 +119,7 @@ const getStatusColor = (status?: QuestStatus) => {
   }
 };
 
-const formatStatus = (status?: QuestStatus) => {
+export const formatQuestStatus = (status?: QuestStatus) => {
   if (!status) return '';
   return status
     .split(/(?=[A-Z])/)