@rpg-engine/long-bow 0.8.46 → 0.8.47

package/src/stories/Features/dailyTasks/DailyTasks.stories.tsx

@@ -0,0 +1,145 @@
+import {
+  ICollectItemsRequirement,
+  ICraftRequirement,
+  IKillMobsRequirement,
+  IMapVisitRequirement,
+  ITaskIdentifier,
+  TaskStatus,
+  TaskType
+} from '@rpg-engine/shared';
+import { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { DailyTasks, IDailyTasksProps } from '../../../components/DailyTasks/DailyTasks';
+import { RPGUIRoot } from '../../../components/RPGUI/RPGUIRoot';
+import iconAtlasJSON from '../../../mocks/atlas/icons/icons.json';
+import iconAtlasIMG from '../../../mocks/atlas/icons/icons.png';
+import itemsAtlasJSON from '../../../mocks/atlas/items/items.json';
+import itemsAtlasIMG from '../../../mocks/atlas/items/items.png';
+import { mockTasks } from '../../../mocks/dailyTasks.mocks';
+
+const meta = {
+  title: 'Features/Daily Tasks/Daily Tasks',
+  component: DailyTasks,
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof DailyTasks>;
+
+export default meta;
+type Story = StoryObj<IDailyTasksProps>;
+
+const Template = (args: IDailyTasksProps) => {
+  return (
+    <RPGUIRoot>
+      <DailyTasks 
+        {...args} 
+      />
+    </RPGUIRoot>
+  );
+};
+
+export const Default: Story = {
+  render: Template,
+  args: {
+    tasks: mockTasks,
+    itemsAtlasJSON,
+    itemsAtlasIMG,
+    iconAtlasJSON,
+    iconAtlasIMG,
+    onClaimReward: ({ taskKey, type }: ITaskIdentifier) => {
+      console.log('Reward collected:', taskKey, type);
+    },
+    onClose: () => {
+      console.log('Closing daily tasks window');
+    },
+  },
+};
+
+export const EmptyTasks: Story = {
+  render: Template,
+  args: {
+    tasks: [],
+    onClaimReward: ({ taskKey, type }: ITaskIdentifier) => {
+      console.log('Reward collected:', taskKey, type);
+    },
+    onClose: () => {
+      console.log('Closing daily tasks window');
+    },
+  },
+};
+
+export const AllCompletedClaimed: Story = {
+  render: Template,
+  args: {
+    itemsAtlasJSON,
+    itemsAtlasIMG,
+    iconAtlasJSON,
+    iconAtlasIMG,
+    tasks: mockTasks.map(task => {
+      const baseTask = {
+        ...task,
+        claimed: true,
+        status: TaskStatus.Completed,
+      };
+
+      switch (task.type) {  
+        case TaskType.KillMobs:
+          const killMobsRequirement = task.requirements as IKillMobsRequirement;
+
+          return {
+            ...baseTask,
+            progress: {
+              kills: killMobsRequirement.targets.reduce((acc, target) => {
+                acc[target.key] = target.quantity;
+                return acc;
+              }, {} as Record<string, number>)
+            }
+          };
+        case TaskType.CollectItems:
+          const collectItemsRequirement = task.requirements as ICollectItemsRequirement;
+
+          return {
+            ...baseTask,
+            progress: {
+              collected: collectItemsRequirement.targets.reduce((acc, target) => {
+                acc[target.key] = target.quantity;
+                return acc;
+              }, {} as Record<string, number>)
+            }
+          };
+        case TaskType.CraftItems:
+          const craftItemsRequirement = task.requirements as ICraftRequirement;
+
+          return {
+            ...baseTask,
+            progress: {
+              crafted: craftItemsRequirement.targets.reduce((acc, target) => {
+                acc[target.key] = target.quantity;
+                return acc;
+              }, {} as Record<string, number>)
+            }
+          };
+        case TaskType.MapVisit:
+          const mapVisitRequirement = task.requirements as IMapVisitRequirement;
+          return {
+            ...baseTask,
+            progress: {
+              visitedMaps: mapVisitRequirement.mapKeys.reduce((acc, key) => {
+                acc[key] = true;
+                return acc;
+              }, {} as Record<string, boolean>)
+            }
+          };
+        default:
+          return baseTask;
+      }
+    }),
+    onClaimReward: ({ taskKey, type }: ITaskIdentifier) => {
+      console.log('Reward collected:', taskKey, type);
+    },
+    onClose: () => {
+      console.log('Closing daily tasks window');
+    },
+  },
+};
+

package/dist/components/Character/CharacterSkinSelectionModal.d.ts

@@ -1,13 +0,0 @@
-import React from 'react';
-import { ICharacterProps } from './CharacterSelection';
-export interface ICharacterSkinSelectionModalProps {
-    isOpen: boolean;
-    onClose: () => void;
-    onConfirm: (textureKey: string) => void;
-    availableCharacters: ICharacterProps[];
-    atlasJSON: any;
-    atlasIMG: any;
-    initialSelectedSkin?: string;
-}
-declare const CharacterSkinSelectionModal: React.FC<ICharacterSkinSelectionModalProps>;
-export default CharacterSkinSelectionModal;

package/dist/stories/Character/character/CharacterSkinSelectionModal.stories.d.ts

@@ -1,5 +0,0 @@
-import { Meta } from '@storybook/react';
-import { ICharacterSkinSelectionModalProps } from '../../../components/Character/CharacterSkinSelectionModal';
-declare const meta: Meta;
-export default meta;
-export declare const KnightSkins: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, ICharacterSkinSelectionModalProps>;

package/src/components/Character/CharacterSkinSelectionModal.tsx

@@ -1,157 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
-import { Button, ButtonTypes } from '../Button';
-import { ErrorBoundary } from '../Item/Inventory/ErrorBoundary';
-import PropertySelect, { IPropertiesProps } from '../PropertySelect/PropertySelect';
-import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
-import { ICharacterProps } from './CharacterSelection';
-
-export interface ICharacterSkinSelectionModalProps {
-    isOpen: boolean;
-    onClose: () => void;
-    onConfirm: (textureKey: string) => void;
-    availableCharacters: ICharacterProps[];
-    atlasJSON: any;
-    atlasIMG: any;
-    initialSelectedSkin?: string;
-}
-
-const CharacterSkinSelectionModal: React.FC<ICharacterSkinSelectionModalProps> = ({
-    isOpen,
-    onClose,
-    onConfirm,
-    availableCharacters,
-    atlasJSON,
-    atlasIMG,
-    initialSelectedSkin = '',
-}) => {
-    // Convert availableCharacters to the format used by PropertySelect
-    const propertySelectValues = availableCharacters.map((item) => ({
-        id: item.textureKey,
-        name: item.name,
-    }));
-
-    // State to store the selected skin and the sprite key
-    const [selectedValue, setSelectedValue] = useState<IPropertiesProps | undefined>();
-    const [selectedSpriteKey, setSelectedSpriteKey] = useState('');
-
-    // Update sprite when the selected value changes
-    const updateSelectedSpriteKey = () => {
-        const textureKey = selectedValue ? selectedValue.id : '';
-        const spriteKey = textureKey ? textureKey + '/down/standing/0.png' : '';
-
-        if (spriteKey === selectedSpriteKey) {
-            return;
-        }
-
-        setSelectedSpriteKey(spriteKey);
-    };
-
-    // Update sprite when selectedValue changes
-    useEffect(() => {
-        updateSelectedSpriteKey();
-    }, [selectedValue]);
-
-    // Initialize selectedValue
-    useEffect(() => {
-        if (initialSelectedSkin) {
-            const initialProperty = propertySelectValues.find(
-                (prop) => prop.id === initialSelectedSkin
-            );
-            setSelectedValue(initialProperty || propertySelectValues[0]);
-        } else if (propertySelectValues.length > 0) {
-            setSelectedValue(propertySelectValues[0]);
-        }
-    }, [initialSelectedSkin, availableCharacters]);
-
-    // Functions to handle confirmation and cancellation
-    const handleConfirm = () => {
-        if (selectedValue) {
-            onConfirm(selectedValue.id);
-            onClose();
-        }
-    };
-
-    const handleCancel = () => {
-        onClose();
-    };
-
-    if (!isOpen) return null;
-
-    return (
-
-        <Container>
-            {selectedSpriteKey && atlasIMG && atlasJSON && (
-                <ErrorBoundary>
-                    <SpriteFromAtlas
-                        spriteKey={selectedSpriteKey}
-                        atlasIMG={atlasIMG}
-                        atlasJSON={atlasJSON}
-                        imgScale={4}
-                        height={80}
-                        width={64}
-                        containerStyle={{
-                            display: 'flex',
-                            alignItems: 'center',
-                            paddingBottom: '15px',
-                        }}
-                        imgStyle={{
-                            left: '22px',
-                        }}
-                    />
-                </ErrorBoundary>
-            )}
-
-
-            <PropertySelect
-                availableProperties={propertySelectValues}
-                onChange={(value) => {
-                    setSelectedValue(value);
-                }}
-            />
-
-
-
-            <ButtonsContainer>
-                <Button
-                    buttonType={ButtonTypes.RPGUIButton}
-                    onClick={handleCancel}
-                >
-                    Cancel
-                </Button>
-                <Button
-                    buttonType={ButtonTypes.RPGUIButton}
-                    onClick={handleConfirm}
-                    disabled={!selectedValue}
-                >
-                    Confirm
-                </Button>
-            </ButtonsContainer>
-        </Container>
-    );
-};
-
-// Styled components
-
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  image-rendering: pixelated;
-`;
-
-
-const ButtonsContainer = styled.div`
-    display: flex;
-    justify-content: center;
-    gap: 0.8rem;
-    width: 100%;
-    margin: 3rem 0 0.75rem;
-    
-    button {
-        min-width: 95px;
-        font-size: 0.9rem;
-    }
-`;
-
-export default CharacterSkinSelectionModal;

package/src/stories/Character/character/CharacterSkinSelectionModal.stories.tsx

@@ -1,49 +0,0 @@
-import { Meta, Story } from '@storybook/react';
-import React from 'react';
-import { RPGUIRoot } from '../../..';
-import CharacterSkinSelectionModal, {
-    ICharacterSkinSelectionModalProps
-} from '../../../components/Character/CharacterSkinSelectionModal';
-import atlasJSON from '../../../mocks/atlas/entities/entities.json';
-import atlasIMG from '../../../mocks/atlas/entities/entities.png';
-
-const meta: Meta = {
-    title: 'Character/Character/Skin Selection',
-    component: CharacterSkinSelectionModal,
-};
-
-export default meta;
-
-const Template: Story<ICharacterSkinSelectionModalProps> = (args: ICharacterSkinSelectionModalProps) => (
-    <RPGUIRoot>
-        <CharacterSkinSelectionModal {...args} />
-    </RPGUIRoot>
-);
-
-export const KnightSkins = Template.bind({});
-
-// Example of different knight skins
-const knightCharacters = [
-    {
-        name: 'Black Knight',
-        textureKey: 'black-knight',
-    },
-    {
-        name: 'Dragon Knight',
-        textureKey: 'dragon-knight',
-    },
-    {
-        name: 'Senior Knight',
-        textureKey: 'senior-knight-1',
-    }
-];
-
-KnightSkins.args = {
-    isOpen: true,
-    onClose: () => console.log('Modal closed'),
-    onConfirm: (textureKey: string) => console.log('Selected skin:', textureKey),
-    availableCharacters: knightCharacters,
-    atlasJSON: atlasJSON,
-    atlasIMG: atlasIMG,
-    initialSelectedSkin: 'black-knight',
-};