@rpg-engine/long-bow 0.8.51 → 0.8.53

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.51",
+  "version": "0.8.53",
   "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

@@ -1,10 +1,10 @@
 import {
   ICharacterDailyTask,
   ICollectGlobalRewardRequest,
-  ITaskIdentifier,
+  ICollectRewardRequest,
   TaskType,
 } from '@rpg-engine/shared';
-import React from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 import { uiColors } from '../../constants/uiColors';
 import { useResponsiveSize } from '../CraftBook/hooks/useResponsiveSize';
@@ -16,7 +16,7 @@ import { getTaskIcon } from './utils/dailyTasks.utils';
 
 export interface IDailyTasksProps {
   tasks: ICharacterDailyTask[];
-  onClaimReward: (task: ITaskIdentifier) => void;
+  onClaimReward: (task: ICollectRewardRequest) => void;
   onClaimGlobalReward: (tasks: ICollectGlobalRewardRequest) => void;
   onClose: () => void;
   scale?: number;
@@ -24,6 +24,7 @@ export interface IDailyTasksProps {
   itemsAtlasIMG: string;
   iconAtlasJSON?: Record<string, any>;
   iconAtlasIMG?: string;
+  globalRewardClaimed?: boolean;
 }
 
 export const DailyTasks: React.FC<IDailyTasksProps> = ({
@@ -36,19 +37,30 @@ export const DailyTasks: React.FC<IDailyTasksProps> = ({
   itemsAtlasIMG,
   iconAtlasJSON,
   iconAtlasIMG,
+  globalRewardClaimed = false,
 }): JSX.Element | null => {
   const [localTasks] = React.useState(tasks);
   const size = useResponsiveSize(scale);
+  const [claimedTasks, setClaimedTasks] = useState<string[]>([]);
+  const [globalRewardClaimedLocal, setGlobalRewardClaimedLocal] = useState(
+    false
+  );
 
-  const handleClaimReward = (taskKey: string, type: TaskType) => {
+  const handleClaimReward = (taskKey: string, taskType: TaskType) => {
     onClaimReward({
-      type,
       taskKey,
+      type: taskType,
     });
+    setClaimedTasks(prev => [...prev, taskKey]);
   };
 
   const handleClaimGlobalRewards = (tasks: ICollectGlobalRewardRequest) => {
     onClaimGlobalReward(tasks);
+    setGlobalRewardClaimedLocal(true);
+  };
+
+  const isTaskRewardClaimed = (taskKey: string): boolean => {
+    return claimedTasks.includes(taskKey);
   };
 
   if (!size) return null;
@@ -68,6 +80,9 @@ export const DailyTasks: React.FC<IDailyTasksProps> = ({
           <GlobalDailyProgress
             tasks={localTasks}
             onClaimAllRewards={handleClaimGlobalRewards}
+            globalRewardClaimed={
+              globalRewardClaimed || globalRewardClaimedLocal
+            }
           />
           {localTasks.map(task => (
             <DailyTaskItem
@@ -79,6 +94,7 @@ export const DailyTasks: React.FC<IDailyTasksProps> = ({
               itemsAtlasIMG={itemsAtlasIMG}
               iconAtlasJSON={iconAtlasJSON}
               iconAtlasIMG={iconAtlasIMG}
+              isRewardClaimed={task.claimed || isTaskRewardClaimed(task.key)}
             />
           ))}
         </TasksList>
@@ -144,3 +160,5 @@ const TaskTitle = styled.h2`
   font-size: 1.4rem !important;
   width: 100%;
 `;
+
+

package/src/components/DailyTasks/GlobalDailyProgress.tsx

@@ -11,26 +11,37 @@ 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 shouldShowClaimedMessage = globalRewardClaimed;
+
+  const handleClaimAll = () => {
+    const taskIdentifiers = tasks.map(task => ({
+      taskKey: task.key,
+      type: task.type,
+    }));
+    onClaimAllRewards({ tasks: taskIdentifiers });
   };
 
   return (
@@ -44,11 +55,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}
@@ -58,6 +67,9 @@ export const GlobalDailyProgress: React.FC<IGlobalTaskProgressProps> = ({
               </Button>
             </CollectWrapper>
           )}
+          {shouldShowClaimedMessage && (
+            <ClaimedText>Global Rewards Claimed</ClaimedText>
+          )}
         </>
       )}
     </GlobalProgressContainer>