@rpg-engine/long-bow 0.8.48 → 0.8.50

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

@@ -0,0 +1,5 @@
+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/package.json

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

package/src/components/Character/CharacterSkinSelectionModal.tsx

@@ -0,0 +1,151 @@
+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;
+}
+
+export 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;
+  }
+`;

package/src/components/DailyTasks/DailyRewardsTooltip.tsx

@@ -71,7 +71,7 @@ export const DailyRewardsTooltip: React.FC<IDailyRewardsTooltipProps> = ({
                 <ItemContent>
                   <RewardLabel>
                     <Ellipsis maxWidth="100%" maxLines={2}>
-                      {formatTaskKey(reward.key ?? '')}:
+                      {formatTaskKey(reward.key ?? reward.type)}:
                     </Ellipsis>
                   </RewardLabel>
                 </ItemContent>

package/src/components/DailyTasks/DailyTasks.tsx

@@ -1,5 +1,6 @@
 import {
   ICharacterDailyTask,
+  ICollectGlobalRewardRequest,
   ITaskIdentifier,
   TaskStatus,
   TaskType,
@@ -17,6 +18,7 @@ import { getTaskIcon } from './utils/dailyTasks.utils';
 export interface IDailyTasksProps {
   tasks: ICharacterDailyTask[];
   onClaimReward: (task: ITaskIdentifier) => void;
+  onClaimGlobalReward: (tasks: ICollectGlobalRewardRequest) => void;
   onClose: () => void;
   scale?: number;
   itemsAtlasJSON: Record<string, any>;
@@ -28,6 +30,7 @@ export interface IDailyTasksProps {
 export const DailyTasks: React.FC<IDailyTasksProps> = ({
   tasks,
   onClaimReward,
+  onClaimGlobalReward,
   onClose,
   scale = 1,
   itemsAtlasJSON,
@@ -48,12 +51,14 @@ export const DailyTasks: React.FC<IDailyTasksProps> = ({
   };
 
   const handleClaimAllRewards = () => {
-    localTasks.forEach(task => {
-      if (task.status === TaskStatus.Completed && !task.claimed) {
-        const { type, key } = task;
-        onClaimReward({ type, taskKey: key });
-      }
-    });
+    const tasksToReward = localTasks
+      .filter(task => task.status === TaskStatus.Completed && !task.claimed)
+      .map(task => ({
+        type: task.type,
+        taskKey: task.key,
+      }));
+
+    onClaimGlobalReward({ tasks: tasksToReward });
   };
 
   if (!size) return null;

package/src/components/DailyTasks/TaskProgressDetails.tsx

@@ -48,7 +48,7 @@ export const TaskProgressDetails: React.FC<ITaskProgressDetailsProps> = ({
       return Object.entries((progress as ICollectProgress).collected || {}).map(
         ([key, value], index) => (
           <ProgressItem key={index}>
-            <span>{key}:</span>
+            <span>{formatTaskKey(key)}:</span>
             <ProgressCount>
               {value}/
               {(task.requirements as ICollectItemsRequirement).targets.find(

package/src/index.tsx

@@ -2,6 +2,7 @@ export * from './components/Arrow/SelectArrow';
 export * from './components/AsyncDropdown';
 export * from './components/Button';
 export * from './components/Character/CharacterSelection';
+export * from './components/Character/CharacterSkinSelectionModal';
 export * from './components/Chat/Chat';
 export * from './components/Chatdeprecated/ChatDeprecated';
 export * from './components/ChatRevamp/ChatRevamp';

package/src/mocks/dailyTasks.mocks.ts

@@ -36,7 +36,6 @@ export const mockTasks: ICharacterDailyTask[] = [
             },
             {
                 type: RewardType.Experience,
-                key: 'exp',
                 quantity: 100
             }
         ]
@@ -51,7 +50,7 @@ export const mockTasks: ICharacterDailyTask[] = [
             type: TaskType.CollectItems,
             targets: [
                 {
-                    key: 'Wood',
+                    key: 'wooden-log',
                     quantity: 10
                 }
             ]
@@ -73,7 +72,6 @@ export const mockTasks: ICharacterDailyTask[] = [
             },
             {
                 type: RewardType.Experience,
-                key: 'exp',
                 quantity: 250
             }
         ],
@@ -112,7 +110,6 @@ export const mockTasks: ICharacterDailyTask[] = [
             },
             {
                 type: RewardType.Experience,
-                key: 'exp',
                 quantity: 1000
             }
         ],
@@ -132,8 +129,6 @@ export const mockTasks: ICharacterDailyTask[] = [
         rewards: [
             {
                 type: RewardType.Experience,
-                key: 'exp',
-                texturePath: 'others/royal-chalice.png',
                 quantity: 10000
             },
             {
@@ -202,7 +197,6 @@ export const mockTasks: ICharacterDailyTask[] = [
             },
             {
                 type: RewardType.Experience,
-                key: 'exp',
                 quantity: 200
             }
         ],

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

@@ -0,0 +1,52 @@
+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',
+};