@rpg-engine/long-bow 0.8.51 → 0.8.52

package/package.json

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

package/src/components/DailyTasks/DailyTaskItem.tsx

@@ -21,6 +21,7 @@ interface IDailyTaskItemProps {
   itemsAtlasIMG: string;
   iconAtlasJSON?: Record<string, any>;
   iconAtlasIMG?: string;
+  isRewardClaimed: boolean;
 }
 
 export const DailyTaskItem: React.FC<IDailyTaskItemProps> = ({
@@ -31,11 +32,12 @@ export const DailyTaskItem: React.FC<IDailyTaskItemProps> = ({
   itemsAtlasIMG,
   iconAtlasJSON,
   iconAtlasIMG,
+  isRewardClaimed,
 }) => {
   const isMobile = isMobileOrTablet();
 
   const isCompleted = task.status === TaskStatus.Completed;
-  const isClaimed = task.claimed;
+  const isClaimed = task.claimed || isRewardClaimed;
 
   const handleClaimReward = () => {
     onClaimReward(task.key, task.type);

package/src/components/DailyTasks/DailyTasks.tsx

@@ -2,11 +2,11 @@ import {
   ICharacterDailyTask,
   ICollectGlobalRewardRequest,
   ITaskIdentifier,
-  TaskType,
 } from '@rpg-engine/shared';
 import React from 'react';
 import styled from 'styled-components';
 import { uiColors } from '../../constants/uiColors';
+import { useDailyTasksState } from '../../hooks/useDailyTasksState';
 import { useResponsiveSize } from '../CraftBook/hooks/useResponsiveSize';
 import { DraggableContainer } from '../DraggableContainer';
 import { RPGUIContainerTypes } from '../RPGUI/RPGUIContainer';
@@ -40,16 +40,15 @@ export const DailyTasks: React.FC<IDailyTasksProps> = ({
   const [localTasks] = React.useState(tasks);
   const size = useResponsiveSize(scale);
 
-  const handleClaimReward = (taskKey: string, type: TaskType) => {
-    onClaimReward({
-      type,
-      taskKey,
-    });
-  };
-
-  const handleClaimGlobalRewards = (tasks: ICollectGlobalRewardRequest) => {
-    onClaimGlobalReward(tasks);
-  };
+  const {
+    globalRewardClaimed,
+    handleClaimReward,
+    handleClaimGlobalRewards,
+    isTaskRewardClaimed,
+  } = useDailyTasksState({
+    onClaimReward,
+    onClaimGlobalReward,
+  });
 
   if (!size) return null;
 
@@ -68,6 +67,7 @@ export const DailyTasks: React.FC<IDailyTasksProps> = ({
           <GlobalDailyProgress
             tasks={localTasks}
             onClaimAllRewards={handleClaimGlobalRewards}
+            globalRewardClaimed={globalRewardClaimed}
           />
           {localTasks.map(task => (
             <DailyTaskItem
@@ -79,6 +79,7 @@ export const DailyTasks: React.FC<IDailyTasksProps> = ({
               itemsAtlasIMG={itemsAtlasIMG}
               iconAtlasJSON={iconAtlasJSON}
               iconAtlasIMG={iconAtlasIMG}
+              isRewardClaimed={isTaskRewardClaimed(task.key)}
             />
           ))}
         </TasksList>

package/src/components/DailyTasks/GlobalDailyProgress.tsx

@@ -11,26 +11,35 @@ import { Button, ButtonTypes } from '../Button';
 interface IGlobalTaskProgressProps {
   tasks: ICharacterDailyTask[];
   onClaimAllRewards: (tasks: ICollectGlobalRewardRequest) => void;
+  globalRewardClaimed: boolean;
 }
 
 export const GlobalDailyProgress: React.FC<IGlobalTaskProgressProps> = ({
   tasks,
   onClaimAllRewards,
+  globalRewardClaimed,
 }) => {
   const totalTasks = tasks.length;
   const completedTasks = tasks.filter(
     task => task.status === TaskStatus.Completed
   ).length;
 
-  const claimedTasks = tasks.filter(task => task.claimed === true).length;
+  const allCompleted =
+    tasks.length > 0 &&
+    tasks.every(task => task.status === TaskStatus.Completed);
 
-  const allCompleted = completedTasks === totalTasks;
-  const allClaimed = claimedTasks === totalTasks;
-  const [isClaimed, setIsClaimed] = React.useState(false);
+  const allClaimed =
+    tasks.length > 0 && tasks.every(task => task.claimed === true);
 
-  const handleClaimAll = (tasks: ICollectGlobalRewardRequest) => {
-    onClaimAllRewards(tasks);
-    setIsClaimed(true);
+  const shouldShowGlobalButton =
+    allCompleted && allClaimed && !globalRewardClaimed;
+
+  const handleClaimAll = () => {
+    const taskIdentifiers = tasks.map(task => ({
+      taskKey: task.key,
+      type: task.type,
+    }));
+    onClaimAllRewards({ tasks: taskIdentifiers });
   };
 
   return (
@@ -44,11 +53,9 @@ export const GlobalDailyProgress: React.FC<IGlobalTaskProgressProps> = ({
       <ProgressBar>
         <ProgressFill percentage={(completedTasks / totalTasks) * 100} />
       </ProgressBar>
-      {totalTasks > 0 && allCompleted && (
+      {allCompleted && (
         <>
-          {allClaimed || isClaimed ? (
-            <ClaimedText>Global Rewards Claimed</ClaimedText>
-          ) : (
+          {shouldShowGlobalButton ? (
             <CollectWrapper>
               <Button
                 buttonType={ButtonTypes.RPGUIButton}
@@ -57,6 +64,8 @@ export const GlobalDailyProgress: React.FC<IGlobalTaskProgressProps> = ({
                 Collect Global Rewards
               </Button>
             </CollectWrapper>
+          ) : (
+            <ClaimedText>Global Rewards Claimed</ClaimedText>
           )}
         </>
       )}

package/src/hooks/useDailyTasksState.ts

@@ -0,0 +1,40 @@
+import { ICollectGlobalRewardRequest, ITaskIdentifier, TaskType } from '@rpg-engine/shared';
+import { useState } from 'react';
+
+interface IUseDailyTasksStateProps {
+    onClaimReward: (task: ITaskIdentifier) => void;
+    onClaimGlobalReward: (tasks: ICollectGlobalRewardRequest) => void;
+}
+
+export function useDailyTasksState({
+    onClaimReward,
+    onClaimGlobalReward,
+}: IUseDailyTasksStateProps) {
+    const [globalRewardClaimed, setGlobalRewardClaimed] = useState(false);
+    const [claimedTaskKeys, setClaimedTaskKeys] = useState<string[]>([]);
+
+    const handleClaimReward = (taskKey: string, type: TaskType) => {
+        onClaimReward({
+            type,
+            taskKey,
+        });
+        setClaimedTaskKeys(prev => [...prev, taskKey]);
+    };
+
+    const handleClaimGlobalRewards = (tasks: ICollectGlobalRewardRequest) => {
+        onClaimGlobalReward(tasks);
+        setGlobalRewardClaimed(true);
+    };
+
+    const isTaskRewardClaimed = (taskKey: string): boolean => {
+        return claimedTaskKeys.includes(taskKey);
+    };
+
+    return {
+        globalRewardClaimed,
+        claimedTaskKeys,
+        isTaskRewardClaimed,
+        handleClaimReward,
+        handleClaimGlobalRewards,
+    };
+}