@rpg-engine/long-bow 0.8.230 → 0.8.232

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());
-};

package/src/components/Quests/QuestListRow.tsx

@@ -0,0 +1,178 @@
+import { IQuest, QuestStatus, 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';
+
+export interface IQuestListAtlasProps {
+  itemsAtlasJSON?: any;
+  itemsAtlasIMG?: any;
+}
+
+interface IProps extends IQuestListAtlasProps {
+  quest: IQuest;
+  compact?: boolean;
+}
+
+const getProgressText = (quest: IQuest): string | null => {
+  const objective = (quest.objectives || [])[0] as any;
+  if (!objective) {
+    return null;
+  }
+
+  if (objective.type === QuestType.Kill) {
+    return `${objective.killCount || 0}/${objective.killCountTarget}`;
+  }
+
+  if (objective.type === QuestType.Interaction && objective.items?.length) {
+    const item = objective.items[0];
+    return `Bring ${item.playerHasQty || 0}/${item.qty}`;
+  }
+
+  return objective.type === QuestType.Interaction && objective.targetNPCkey ? 'Talk' : null;
+};
+
+export const QuestListRow: React.FC<IProps> = ({
+  quest,
+  compact,
+  itemsAtlasJSON,
+  itemsAtlasIMG,
+}) => {
+  const rewardItems = (quest.rewards || []).flatMap((reward: any) => reward.items || []);
+  const visibleRewards = rewardItems.slice(0, 6);
+  const overflowCount = Math.max(rewardItems.length - visibleRewards.length, 0);
+  const progressText = getProgressText(quest);
+
+  return (
+    <QuestCard>
+      <Header>
+        <Title>{formatQuestText(quest.title)}</Title>
+        <Status style={{ color: getQuestStatusColor(quest.status) }}>
+          {formatQuestStatus(quest.status) || 'Unknown'}
+        </Status>
+      </Header>
+      {!compact && (
+        <>
+          <Description>{quest.description}</Description>
+          <MetaRow>
+            {quest.status === QuestStatus.Completed ? 'Completed' : progressText}
+          </MetaRow>
+          {!!visibleRewards.length && (
+            <RewardStrip>
+              {visibleRewards.map((item: any) => (
+                <RewardIcon key={`${item.key}-${item.qty}`}>
+                  {itemsAtlasJSON && itemsAtlasIMG && item.texturePath ? (
+                    <ItemInfoWrapper item={{ ...item, stackQty: item.qty } as any} atlasJSON={itemsAtlasJSON} atlasIMG={itemsAtlasIMG}>
+                      <SpriteFromAtlas
+                        atlasJSON={itemsAtlasJSON}
+                        atlasIMG={itemsAtlasIMG}
+                        spriteKey={item.texturePath}
+                        width={24}
+                        height={24}
+                        imgScale={1}
+                        centered
+                      />
+                    </ItemInfoWrapper>
+                  ) : (
+                    <FallbackIcon>{item.name?.[0] || '?'}</FallbackIcon>
+                  )}
+                </RewardIcon>
+              ))}
+              {overflowCount > 0 && <MoreRewards>+{overflowCount} more</MoreRewards>}
+            </RewardStrip>
+          )}
+        </>
+      )}
+    </QuestCard>
+  );
+};
+
+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());
+};
+
+const QuestCard = styled.div`
+  background-color: ${uiColors.darkGray};
+  padding: 12px;
+  margin-bottom: 10px;
+  border-radius: 8px;
+  border: 1px solid ${uiColors.gray};
+`;
+
+const Header = styled.div`
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+`;
+
+const Title = styled.span`
+  color: ${uiColors.yellow};
+  font-weight: bold;
+`;
+
+const Status = styled.span`
+  white-space: nowrap;
+`;
+
+const Description = styled.p`
+  color: ${uiColors.white};
+  margin: 8px 0;
+`;
+
+const MetaRow = styled.div`
+  color: ${uiColors.lightGreen};
+  font-size: 0.7rem;
+  margin-bottom: 6px;
+`;
+
+const RewardStrip = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+`;
+
+const RewardIcon = styled.div`
+  width: 24px;
+  height: 24px;
+`;
+
+const FallbackIcon = styled.div`
+  width: 24px;
+  height: 24px;
+  border: 1px solid ${uiColors.gray};
+  color: ${uiColors.yellow};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const MoreRewards = styled.span`
+  color: ${uiColors.lightGray};
+  font-size: 0.65rem;
+`;

package/src/components/Store/CartView.tsx

@@ -53,7 +53,7 @@ const MetadataDisplay: React.FC<{
             <InfoBox />
             <span>Skin:</span>
           </MetadataLabel>
-          <MetadataValue>{metadata.selectedSkinName || 'Custom skin'}</MetadataValue>
+          <MetadataValue>{metadata.selectedSkinName || metadata.selectedSkin || 'Custom skin'}</MetadataValue>
         </MetadataInfo>
       );
     default:
@@ -159,6 +159,7 @@ export const CartView: React.FC<ICartViewProps> = ({
               const getSpriteKey = (textureKey: string) => {
                 return textureKey + '/down/standing/0.png';
               };
+              const selectedSkinTextureKey = cartItem.metadata?.selectedSkinTextureKey ?? cartItem.metadata?.selectedSkin;
 
               return (
                 <CartItemRow key={cartItem.item.key}>
@@ -166,7 +167,7 @@ export const CartView: React.FC<ICartViewProps> = ({
                     <SpriteFromAtlas
                       atlasJSON={cartItem.item.metadataType === MetadataType.CharacterSkin ? characterAtlasJSON : atlasJSON}
                       atlasIMG={cartItem.item.metadataType === MetadataType.CharacterSkin ? characterAtlasIMG : atlasIMG}
-                      spriteKey={cartItem.item.metadataType === MetadataType.CharacterSkin && cartItem.metadata?.selectedSkinTextureKey ? getSpriteKey(cartItem.metadata.selectedSkinTextureKey) : cartItem.item.texturePath}
+                      spriteKey={cartItem.item.metadataType === MetadataType.CharacterSkin && selectedSkinTextureKey ? getSpriteKey(selectedSkinTextureKey) : cartItem.item.texturePath}
                       width={24}
                       height={24}
                       imgScale={1.5}

package/src/components/Store/MetadataCollector.tsx

@@ -2,6 +2,11 @@ import { MetadataType } from '@rpg-engine/shared';
 import React, { useCallback, useEffect, useRef } from 'react';
 import { CharacterSkinSelectionModal } from '../Character/CharacterSkinSelectionModal';
 
+interface ICharacterSkinOption {
+  name: string;
+  textureKey: string;
+}
+
 export interface IMetadataCollectorProps {
   metadataType: MetadataType;
   config: Record<string, any>;
@@ -9,6 +14,21 @@ export interface IMetadataCollectorProps {
   onCancel: () => void;
 }
 
+const getCharacterSkinMetadata = (
+  selectedSkinTextureKey: string,
+  availableCharacters: ICharacterSkinOption[]
+) => {
+  const selectedSkin = availableCharacters.find(
+    (character) => character.textureKey === selectedSkinTextureKey
+  );
+
+  return {
+    selectedSkin: selectedSkinTextureKey,
+    selectedSkinName: selectedSkin?.name ?? selectedSkinTextureKey,
+    selectedSkinTextureKey,
+  };
+};
+
 export const MetadataCollector: React.FC<IMetadataCollectorProps> = ({
   metadataType,
   config,
@@ -54,7 +74,14 @@ export const MetadataCollector: React.FC<IMetadataCollectorProps> = ({
       <CharacterSkinSelectionModal
         isOpen
         onClose={handleCancel}
-        onConfirm={(selectedSkin: any) => handleCollect({ selectedSkin })}
+        onConfirm={(selectedSkin: string) =>
+          handleCollect(
+            getCharacterSkinMetadata(
+              selectedSkin,
+              config.availableCharacters || []
+            )
+          )
+        }
         availableCharacters={config.availableCharacters || []}
         atlasJSON={config.atlasJSON}
         atlasIMG={config.atlasIMG}

package/src/components/Store/__test__/MetadataCollector.spec.tsx

@@ -72,11 +72,16 @@ describe('MetadataCollector', () => {
   });
 
   it('collects once without cancelling again when the modal closes after confirm', () => {
+    const availableCharacters = [
+      { name: 'Superior Knight', textureKey: 'superior-knight' },
+      { name: 'Black Knight', textureKey: 'black-knight' },
+    ];
+
     act(() => {
       ReactDOM.render(
         <MetadataCollector
           metadataType={MetadataType.CharacterSkin}
-          config={{ availableCharacters: ['char1', 'char2'] }}
+          config={{ availableCharacters }}
           onCollect={mockOnCollect}
           onCancel={mockOnCancel}
         />,
@@ -87,11 +92,15 @@ describe('MetadataCollector', () => {
     const callArgs = CharacterSkinSelectionModal.mock.calls[0][0];
 
     act(() => {
-      callArgs.onConfirm('char1');
+      callArgs.onConfirm('superior-knight');
       callArgs.onClose();
     });
 
-    expect(mockOnCollect).toHaveBeenCalledWith({ selectedSkin: 'char1' });
+    expect(mockOnCollect).toHaveBeenCalledWith({
+      selectedSkin: 'superior-knight',
+      selectedSkinName: 'Superior Knight',
+      selectedSkinTextureKey: 'superior-knight',
+    });
     expect(mockOnCollect).toHaveBeenCalledTimes(1);
     expect(mockOnCancel).not.toHaveBeenCalled();
 

package/src/components/Tutorial/TutorialStepper.tsx

@@ -9,6 +9,8 @@ export interface ITutorialLesson {
   title: string;
   body?: React.ReactNode | string;
   text?: string;
+  bodyHighlights?: string[];
+  textHighlights?: string[];
   image: string;
   imageUrl?: string;
 }

package/src/components/shared/SimpleTooltip.tsx

@@ -28,6 +28,7 @@ export const SimpleTooltip: React.FC<TooltipProps> = ({
   const tooltipRef = useRef<HTMLDivElement>(null);
   const triggerRef = useRef<HTMLDivElement>(null);
   const timeoutRef = useRef<NodeJS.Timeout>();
+  const rafId = useRef<number | null>(null);
 
   const calculatePosition = () => {
     if (!triggerRef.current || !tooltipRef.current) return;
@@ -87,26 +88,34 @@ export const SimpleTooltip: React.FC<TooltipProps> = ({
 
   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();
+      if (rafId.current !== null) return;
+
+      const { clientX, clientY } = event;
+
+      rafId.current = requestAnimationFrame(() => {
+        rafId.current = null;
+
+        if (visible && tooltipRef.current && triggerRef.current) {
+          const tooltipRect = tooltipRef.current.getBoundingClientRect();
+          const triggerRect = triggerRef.current.getBoundingClientRect();
+
+          const isOutsideTooltip =
+            clientX < tooltipRect.left ||
+            clientX > tooltipRect.right ||
+            clientY < tooltipRect.top ||
+            clientY > tooltipRect.bottom;
+
+          const isOutsideTrigger =
+            clientX < triggerRect.left ||
+            clientX > triggerRect.right ||
+            clientY < triggerRect.top ||
+            clientY > triggerRect.bottom;
+
+          if (isOutsideTooltip && isOutsideTrigger) {
+            hideTooltip();
+          }
         }
-      }
+      });
     };
 
     const handleScroll = () => {
@@ -129,6 +138,10 @@ export const SimpleTooltip: React.FC<TooltipProps> = ({
       document.removeEventListener('mousemove', handleMouseMove);
       window.removeEventListener('scroll', handleScroll);
       window.removeEventListener('resize', handleResize);
+      if (rafId.current !== null) {
+        cancelAnimationFrame(rafId.current);
+        rafId.current = null;
+      }
       clearTimeout(timeoutRef.current);
     };
   }, [visible]);

package/src/index.tsx

@@ -62,6 +62,7 @@ export * from './components/PropertySelect/PropertySelect';
 export * from './components/QuantitySelector/QuantitySelectorModal';
 export * from './components/Quests/QuestInfo/QuestInfo';
 export * from './components/Quests/QuestList';
+export * from './components/Quests/QuestListRow';
 export * from './components/RadioButton';
 export * from './components/RadioSelectCard/RadioSelectCard';
 export * from './components/RangeSlider';
@@ -98,4 +99,3 @@ export * from './components/Truncate';
 export * from './components/Tutorial/TutorialStepper';
 export * from './components/typography/DynamicText';
 export { useEventListener } from './hooks/useEventListener';
-