@rpg-engine/long-bow 0.8.231 → 0.8.232

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/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';
-