@rpg-engine/long-bow 0.8.49 → 0.8.51

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.49",
+  "version": "0.8.51",
   "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

@@ -57,13 +57,7 @@ export const DailyRewardsTooltip: React.FC<IDailyRewardsTooltipProps> = ({
                 <SpriteFromAtlas
                   atlasJSON={itemsAtlasJSON}
                   atlasIMG={itemsAtlasIMG}
-                  spriteKey={
-                    reward.type === RewardType.Gold
-                      ? 'others/gold-coin-qty-6.png'
-                      : reward.type === RewardType.Experience
-                      ? 'others/royal-chalice.png'
-                      : reward.texturePath || 'others/no-image.png'
-                  }
+                  spriteKey={reward.texturePath ?? 'check.png'}
                   width={24}
                   height={24}
                   imgScale={1.75}
@@ -71,7 +65,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>
@@ -142,6 +136,7 @@ const RewardLabel = styled.span`
   color: ${uiColors.yellow};
   font-size: 0.9rem;
   line-height: 1.2;
+  padding-top: 15px;
   display: inline-flex;
   align-items: center;
 `;

package/src/components/DailyTasks/DailyTasks.tsx

@@ -2,7 +2,6 @@ import {
   ICharacterDailyTask,
   ICollectGlobalRewardRequest,
   ITaskIdentifier,
-  TaskStatus,
   TaskType,
 } from '@rpg-engine/shared';
 import React from 'react';
@@ -38,27 +37,18 @@ export const DailyTasks: React.FC<IDailyTasksProps> = ({
   iconAtlasJSON,
   iconAtlasIMG,
 }): JSX.Element | null => {
-  const [localTasks, setLocalTasks] = React.useState(tasks);
+  const [localTasks] = React.useState(tasks);
   const size = useResponsiveSize(scale);
 
   const handleClaimReward = (taskKey: string, type: TaskType) => {
-    setLocalTasks(prevTasks =>
-      prevTasks.map(task =>
-        task.key === taskKey ? { ...task, claimed: true } : task
-      )
-    );
-    onClaimReward({ type, taskKey });
+    onClaimReward({
+      type,
+      taskKey,
+    });
   };
 
-  const handleClaimAllRewards = () => {
-    const tasksToReward = localTasks
-      .filter(task => task.status === TaskStatus.Completed && !task.claimed)
-      .map(task => ({
-        type: task.type,
-        taskKey: task.key,
-      }));
-
-    onClaimGlobalReward({ tasks: tasksToReward });
+  const handleClaimGlobalRewards = (tasks: ICollectGlobalRewardRequest) => {
+    onClaimGlobalReward(tasks);
   };
 
   if (!size) return null;
@@ -77,7 +67,7 @@ export const DailyTasks: React.FC<IDailyTasksProps> = ({
         <TasksList className="tasks-container">
           <GlobalDailyProgress
             tasks={localTasks}
-            onClaimAllRewards={handleClaimAllRewards}
+            onClaimAllRewards={handleClaimGlobalRewards}
           />
           {localTasks.map(task => (
             <DailyTaskItem

package/src/components/DailyTasks/GlobalDailyProgress.tsx

@@ -44,9 +44,9 @@ export const GlobalDailyProgress: React.FC<IGlobalTaskProgressProps> = ({
       <ProgressBar>
         <ProgressFill percentage={(completedTasks / totalTasks) * 100} />
       </ProgressBar>
-      {totalTasks > 0 && allCompleted && allClaimed && (
+      {totalTasks > 0 && allCompleted && (
         <>
-          {isClaimed ? (
+          {allClaimed || isClaimed ? (
             <ClaimedText>Global Rewards Claimed</ClaimedText>
           ) : (
             <CollectWrapper>

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,7 @@ export const mockTasks: ICharacterDailyTask[] = [
             },
             {
                 type: RewardType.Experience,
-                key: 'exp',
+                texturePath: 'others/royal-chalice.png',
                 quantity: 100
             }
         ]
@@ -51,7 +51,7 @@ export const mockTasks: ICharacterDailyTask[] = [
             type: TaskType.CollectItems,
             targets: [
                 {
-                    key: 'Wood',
+                    key: 'wooden-log',
                     quantity: 10
                 }
             ]
@@ -63,6 +63,7 @@ export const mockTasks: ICharacterDailyTask[] = [
             {
                 type: RewardType.Gold,
                 key: 'gold-coin',
+                texturePath: 'others/gold-coin-qty-6.png',
                 quantity: 100
             },
             {
@@ -73,7 +74,7 @@ export const mockTasks: ICharacterDailyTask[] = [
             },
             {
                 type: RewardType.Experience,
-                key: 'exp',
+                texturePath: 'others/royal-chalice.png',
                 quantity: 250
             }
         ],
@@ -102,6 +103,7 @@ export const mockTasks: ICharacterDailyTask[] = [
             {
                 type: RewardType.Gold,
                 key: 'gold-coin',
+                texturePath: 'others/gold-coin-qty-6.png',
                 quantity: 1000
             },
             {
@@ -112,7 +114,7 @@ export const mockTasks: ICharacterDailyTask[] = [
             },
             {
                 type: RewardType.Experience,
-                key: 'exp',
+                texturePath: 'others/royal-chalice.png',
                 quantity: 1000
             }
         ],
@@ -132,13 +134,13 @@ export const mockTasks: ICharacterDailyTask[] = [
         rewards: [
             {
                 type: RewardType.Experience,
-                key: 'exp',
                 texturePath: 'others/royal-chalice.png',
                 quantity: 10000
             },
             {
                 type: RewardType.Gold,
                 key: 'gold-coin',
+                texturePath: 'others/gold-coin-qty-6.png',
                 quantity: 1000
             },
             {
@@ -186,7 +188,7 @@ export const mockTasks: ICharacterDailyTask[] = [
             ]
         },
         progress: {
-            crafted: { 'life-potion': 2 },
+            crafted: { 'life-potion': 5 },
         },
         rewards: [
             {
@@ -198,15 +200,16 @@ export const mockTasks: ICharacterDailyTask[] = [
             {
                 type: RewardType.Gold,
                 key: 'gold-coin',
+                texturePath: 'others/gold-coin-qty-6.png',
                 quantity: 150
             },
             {
                 type: RewardType.Experience,
-                key: 'exp',
+                texturePath: 'others/royal-chalice.png',
                 quantity: 200
             }
         ],
-        status: TaskStatus.InProgress,
-        claimed: false
+        status: TaskStatus.Completed,
+        claimed: true
     },
 ];

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',
+};