@rpg-engine/long-bow 0.8.46 → 0.8.48

package/src/components/DailyTasks/TaskProgress.tsx

@@ -0,0 +1,92 @@
+import { ICharacterDailyTask } from '@rpg-engine/shared';
+import React from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../constants/uiColors';
+import { DailyRewardsTooltip } from './DailyRewardsTooltip';
+import { TaskProgressDetails } from './TaskProgressDetails';
+import { formatDifficulty, getStatusInfo } from './utils/dailyTasks.utils';
+
+interface TaskProgressProps {
+  task: ICharacterDailyTask;
+  itemsAtlasJSON: Record<string, any>;
+  itemsAtlasIMG: string;
+  iconAtlasJSON?: Record<string, any>;
+  iconAtlasIMG?: string;
+}
+
+export const TaskProgress: React.FC<TaskProgressProps> = ({
+  task,
+  itemsAtlasJSON,
+  itemsAtlasIMG,
+  iconAtlasJSON,
+  iconAtlasIMG,
+}) => {
+  const { difficulty } = task;
+
+  return (
+    <ProgressContainer>
+      <ProgressList>
+        <ProgressItem>
+          <ProgressLabel>Difficulty:</ProgressLabel>
+          <TaskDifficulty difficulty={difficulty}>
+            {formatDifficulty(difficulty)}
+          </TaskDifficulty>
+        </ProgressItem>
+
+        <ProgressItem>
+          <ProgressLabel>Status:</ProgressLabel>
+          <StatusText color={getStatusInfo(task).color}>
+            {getStatusInfo(task).text}
+          </StatusText>
+        </ProgressItem>
+
+        <TaskProgressDetails task={task} />
+
+        {task.rewards && task.rewards.length > 0 && (
+          <ProgressItem>
+            <DailyRewardsTooltip
+              rewards={task.rewards}
+              itemsAtlasJSON={itemsAtlasJSON}
+              itemsAtlasIMG={itemsAtlasIMG}
+              iconAtlasJSON={iconAtlasJSON}
+              iconAtlasIMG={iconAtlasIMG}
+            />
+          </ProgressItem>
+        )}
+      </ProgressList>
+    </ProgressContainer>
+  );
+};
+
+const ProgressContainer = styled.div`
+  width: 100%;
+  position: relative;
+`;
+
+const ProgressList = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+`;
+
+const ProgressItem = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const ProgressLabel = styled.span`
+  color: ${uiColors.white} !important;
+`;
+
+const TaskDifficulty = styled.span<{ difficulty: string }>`
+  color: ${props =>
+    props.difficulty.toLowerCase() === 'challenge'
+      ? uiColors.red
+      : uiColors.lightGray} !important;
+`;
+
+const StatusText = styled.span<{ color: string }>`
+  color: ${props => props.color} !important;
+  font-weight: bold;
+`;

package/src/components/DailyTasks/TaskProgressDetails.tsx

@@ -0,0 +1,128 @@
+import {
+  ICharacterDailyTask,
+  ICollectItemsRequirement,
+  ICollectProgress,
+  ICraftProgress,
+  ICraftRequirement,
+  IKillMobsProgress,
+  IKillMobsRequirement,
+  IMapVisitProgress,
+  TaskType,
+} from '@rpg-engine/shared';
+import React from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../constants/uiColors';
+import { ReadOnlyCheckItem } from '../ReadOnlyCheckItem';
+import { formatTaskKey } from './utils/dailyTasks.utils';
+
+interface ITaskProgressDetailsProps {
+  task: ICharacterDailyTask;
+}
+
+export const TaskProgressDetails: React.FC<ITaskProgressDetailsProps> = ({
+  task,
+}) => {
+  const { progress, type } = task;
+
+  const progressRenderers = {
+    [TaskType.KillMobs]: () => {
+      return (
+        (progress as IKillMobsProgress).kills &&
+        Object.entries((progress as IKillMobsProgress).kills).map(
+          ([key, value], index) => (
+            <ProgressItem key={index}>
+              <span>{formatTaskKey(key)}:</span>
+              <ProgressCount>
+                {value}/
+                {(task.requirements as IKillMobsRequirement).targets.find(
+                  t => t.key === key
+                )?.quantity || 0}
+              </ProgressCount>
+            </ProgressItem>
+          )
+        )
+      );
+    },
+
+    [TaskType.CollectItems]: () => {
+      return Object.entries((progress as ICollectProgress).collected || {}).map(
+        ([key, value], index) => (
+          <ProgressItem key={index}>
+            <span>{key}:</span>
+            <ProgressCount>
+              {value}/
+              {(task.requirements as ICollectItemsRequirement).targets.find(
+                t => t.key === key
+              )?.quantity || 0}
+            </ProgressCount>
+          </ProgressItem>
+        )
+      );
+    },
+
+    [TaskType.CraftItems]: () => {
+      return Object.entries((progress as ICraftProgress).crafted || {}).map(
+        ([key, value], index) => (
+          <ProgressItem key={index}>
+            <span>{formatTaskKey(key)}:</span>
+            <ProgressCount>
+              {value}/
+              {(task.requirements as ICraftRequirement).targets.find(
+                t => t.key === key
+              )?.quantity || 0}
+            </ProgressCount>
+          </ProgressItem>
+        )
+      );
+    },
+
+    [TaskType.MapVisit]: () => {
+      return Object.entries(
+        (progress as IMapVisitProgress).visitedMaps || {}
+      ).map(([mapName, visited], index) => (
+        <ProgressItem key={index}>
+          <CheckItemWrapper>
+            <ReadOnlyCheckItem
+              labelLeft={formatTaskKey(mapName)}
+              checked={visited}
+            />
+          </CheckItemWrapper>
+        </ProgressItem>
+      ));
+    },
+  };
+
+  return (
+    <ProgressList>
+      {progressRenderers[type] ? progressRenderers[type]() : null}
+    </ProgressList>
+  );
+};
+
+const ProgressList = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+
+const ProgressItem = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const ProgressCount = styled.span`
+  color: ${uiColors.white} !important;
+`;
+
+const CheckItemWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  height: 20px;
+
+  input.rpgui-checkbox + label {
+    margin: 0 !important;
+    padding-left: 23px !important;
+  }
+`;

package/src/components/DailyTasks/utils/dailyTasks.utils.ts

@@ -0,0 +1,96 @@
+import { ICharacterDailyTask, ICollectProgress, ICraftProgress, IKillMobsProgress, IMapVisitProgress, TaskStatus, TaskType } from '@rpg-engine/shared';
+import { uiColors } from '../../../constants/uiColors';
+
+export const formatTaskKey = (key: string): string => {
+    let formatted = key.replace(/[-_]/g, ' ');
+    formatted = formatted.replace(/([A-Z])/g, ' $1');
+    formatted = formatted.trim();
+    return formatted
+        .split(' ')
+        .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+        .join(' ');
+};
+
+export const getTaskIcon = (taskType: TaskType, difficulty?: string): string => {
+    const MapIcon = 'map-2.png';
+    const KillMobsIconRegular = 'white-skull.png';
+    const KillMobsIconChallenge = 'red-skull.png';
+    const CollectItemIcon = 'inventory-2.png';
+    const CraftItemIcon = 'crafting.png';
+
+    switch (taskType) {
+        case TaskType.KillMobs:
+            return difficulty === 'Challenge'
+                ? KillMobsIconChallenge
+                : KillMobsIconRegular;
+        case TaskType.CollectItems:
+            return CollectItemIcon;
+        case TaskType.MapVisit:
+            return MapIcon;
+        case TaskType.CraftItems:
+            return CraftItemIcon;
+        default:
+            return 'check.png';
+    }
+};
+
+export const getStatusInfo = (
+    task: ICharacterDailyTask
+): { text: string; color: string } => {
+    if (task.status === TaskStatus.Completed) {
+        return { text: 'Completed', color: uiColors.lightGreen };
+    }
+
+    if (task.claimed) {
+        return { text: 'Claimed', color: uiColors.yellow };
+    }
+
+    const isTaskNotStarted = (() => {
+        switch (task.type) {
+            case TaskType.KillMobs:
+                return (
+                    task.type === TaskType.KillMobs &&
+                    Object.values((task.progress as IKillMobsProgress).kills || {}).every(
+                        kill => kill === 0
+                    )
+                );
+
+            case TaskType.CollectItems:
+                return (
+                    task.type === TaskType.CollectItems &&
+                    Object.values(
+                        (task.progress as ICollectProgress).collected || {}
+                    ).every(quantity => quantity === 0)
+                );
+
+            case TaskType.CraftItems:
+                return (
+                    task.type === TaskType.CraftItems &&
+                    Object.values((task.progress as ICraftProgress).crafted || {}).every(
+                        quantity => quantity === 0
+                    )
+                );
+
+            case TaskType.MapVisit:
+                return (
+                    task.type === TaskType.MapVisit &&
+                    Object.values(
+                        (task.progress as IMapVisitProgress).visitedMaps || {}
+                    ).every(visited => !visited)
+                );
+
+            default:
+                return false;
+        }
+    })();
+
+    if (isTaskNotStarted) {
+        return { text: 'Not Started', color: uiColors.lightGray };
+    }
+
+    return { text: 'In Progress', color: uiColors.blue };
+};
+
+export const formatDifficulty = (difficulty: string): string => {
+    return difficulty.charAt(0).toUpperCase() + difficulty.slice(1).toLowerCase();
+};

package/src/components/ReadOnlyCheckItem.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export interface IReadOnlyCheckItemProps {
+  labelLeft?: string;
+  labelRight?: string;
+  checked: boolean;
+}
+
+export const ReadOnlyCheckItem: React.FC<IReadOnlyCheckItemProps> = ({
+         labelLeft,
+         labelRight,
+         checked,
+       }) => {
+         return (
+           <Container>
+             {labelLeft && <Label>{labelLeft}</Label>}
+             <div className="rpgui-checkbox-container">
+               <CheckBox
+                 className="rpgui-checkbox"
+                 type="checkbox"
+                 checked={checked}
+                 readOnly
+               />
+               <label></label>
+             </div>
+             {labelRight && <Label isRight>{labelRight}</Label>}
+           </Container>
+         );
+       };
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 20px;
+`;
+
+const Label = styled.span<{ isRight?: boolean }>`
+  ${({ isRight }) => (isRight ? 'margin-left: auto;' : 'margin-right: auto;')}
+`;
+
+const CheckBox = styled.input.attrs({ type: 'checkbox' })``;

package/src/constants/uiColors.ts

@@ -16,6 +16,7 @@ export const uiColors = {
   darkBlue: '#30346D',
   brown: '#854C30',
   lightGreen: '#66cd1c',
+  green: '#4CAF50',
   brownGreen: '#346524',
   white: '#fff'
 };

package/src/index.tsx

@@ -2,7 +2,6 @@ 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';
@@ -10,6 +9,7 @@ export * from './components/CheckButton';
 export * from './components/CheckItem';
 export * from './components/CircularController/CircularController';
 export * from './components/CraftBook/CraftBook';
+export * from './components/DailyTasks/DailyTasks';
 export * from './components/DPad/JoystickDPad';
 export * from './components/DraggableContainer';
 export * from './components/Dropdown';

package/src/mocks/dailyTasks.mocks.ts

@@ -0,0 +1,212 @@
+import { DailyTaskBlueprintChallenge, DailyTaskBlueprintRegular, ICharacterDailyTask, RewardType, TaskDifficulty, TaskStatus, TaskType } from "@rpg-engine/shared";
+
+export const mockTasks: ICharacterDailyTask[] = [
+    {
+        key: DailyTaskBlueprintRegular.HuntRats,
+        name: 'Kill Rats',
+        description: 'Eliminate 5 rats in the forest',
+        type: TaskType.KillMobs,
+        difficulty: TaskDifficulty.Regular,
+        claimed: false,
+        status: TaskStatus.Completed,
+        requirements: {
+            type: TaskType.KillMobs,
+            targets: [
+                {
+                    key: 'Rats',
+                    quantity: 5
+                }
+            ]
+        },
+        progress: {
+            kills: { 'Rats': 5 },
+        },
+        rewards: [
+            {
+                type: RewardType.Item,
+                key: "angelic-sword",
+                texturePath: "swords/angelic-sword.png",
+                quantity: 50
+            },
+            {
+                type: RewardType.Item,
+                key: 'wolf-tooth-chain',
+                texturePath: 'accessories/wolf-tooth-chain.png',
+                quantity: 1
+            },
+            {
+                type: RewardType.Experience,
+                key: 'exp',
+                quantity: 100
+            }
+        ]
+    },
+    {
+        key: DailyTaskBlueprintRegular.GatherResources,
+        name: 'Gather Resources',
+        description: 'Collect 10 pieces of wood',
+        type: TaskType.CollectItems,
+        difficulty: TaskDifficulty.Regular,
+        requirements: {
+            type: TaskType.CollectItems,
+            targets: [
+                {
+                    key: 'Wood',
+                    quantity: 10
+                }
+            ]
+        },
+        progress: {
+            collected: { 'Wood': 7 },
+        },
+        rewards: [
+            {
+                type: RewardType.Gold,
+                key: 'gold-coin',
+                quantity: 100
+            },
+            {
+                type: RewardType.Item,
+                key: 'wooden-log',
+                texturePath: 'crafting-resources/wooden-log.png',
+                quantity: 10
+            },
+            {
+                type: RewardType.Experience,
+                key: 'exp',
+                quantity: 250
+            }
+        ],
+        status: TaskStatus.InProgress,
+        claimed: false
+    },
+    {
+        key: DailyTaskBlueprintChallenge.HuntEloraTheQueen,
+        name: 'Slay the Dragon',
+        description: 'Defeat the Queen Dragon',
+        type: TaskType.KillMobs,
+        difficulty: TaskDifficulty.Challenge,
+        requirements: {
+            type: TaskType.KillMobs,
+            targets: [
+                {
+                    key: 'QueenDragon',
+                    quantity: 1
+                }
+            ]
+        },
+        progress: {
+            kills: { 'QueenDragon': 0 },
+        },
+        rewards: [
+            {
+                type: RewardType.Gold,
+                key: 'gold-coin',
+                quantity: 1000
+            },
+            {
+                type: RewardType.Item,
+                key: 'dragonscale-cleaver-club',
+                texturePath: 'maces/dragonscale-cleaver-club.png',
+                quantity: 5
+            },
+            {
+                type: RewardType.Experience,
+                key: 'exp',
+                quantity: 1000
+            }
+        ],
+        status: TaskStatus.NotStarted,
+        claimed: false
+    },
+    {
+        key: DailyTaskBlueprintRegular.ExploreVillage,
+        name: "Village Ilya Explorer",
+        description: "Visit the key locations in the ilya village",
+        difficulty: TaskDifficulty.Regular,
+        type: TaskType.MapVisit,
+        requirements: {
+            type: TaskType.MapVisit,
+            mapKeys: ["ilya", "isle_of_origins", "ilya-village-sewer", "dungeon-ilya-01"],
+        },
+        rewards: [
+            {
+                type: RewardType.Experience,
+                key: 'exp',
+                texturePath: 'others/royal-chalice.png',
+                quantity: 10000
+            },
+            {
+                type: RewardType.Gold,
+                key: 'gold-coin',
+                quantity: 1000
+            },
+            {
+                type: RewardType.Item,
+                key: 'light-life-potion',
+                texturePath: 'potions/light-life-potion.png',
+                quantity: 20
+            },
+            {
+                type: RewardType.Item,
+                key: 'light-mana-potion',
+                texturePath: 'potions/light-mana-potion.png',
+                quantity: 20
+            },
+        ],
+        progress: {
+            visitedMaps: { 'ilya': true, 'isle_of_origins': false, 'ilya-village-sewer': false, 'dungeon-ilya-01': true },
+        },
+        status: TaskStatus.InProgress,
+        claimed: false
+    },
+    {
+        key: DailyTaskBlueprintRegular.CraftPotions,
+        name: 'Craft Potions',
+        description: 'Craft 5 health potions for the local alchemist',
+        type: TaskType.CraftItems,
+        difficulty: TaskDifficulty.Regular,
+        requirements: {
+            type: TaskType.CraftItems,
+            targets: [
+                {
+                    key: 'life-potion',
+                    quantity: 5
+                }
+            ],
+            materials: [
+                {
+                    key: 'foods/apple.png',
+                    quantity: 10
+                },
+                {
+                    key: 'foods/banana.png',
+                    quantity: 5
+                }
+            ]
+        },
+        progress: {
+            crafted: { 'life-potion': 2 },
+        },
+        rewards: [
+            {
+                type: RewardType.Item,
+                key: 'light-mana-potion',
+                texturePath: 'potions/light-mana-potion.png',
+                quantity: 10
+            },
+            {
+                type: RewardType.Gold,
+                key: 'gold-coin',
+                quantity: 150
+            },
+            {
+                type: RewardType.Experience,
+                key: 'exp',
+                quantity: 200
+            }
+        ],
+        status: TaskStatus.InProgress,
+        claimed: false
+    },
+];