@rpg-engine/long-bow 0.8.46 → 0.8.48

package/dist/mocks/dailyTasks.mocks.d.ts

@@ -0,0 +1,2 @@
+import { ICharacterDailyTask } from "@rpg-engine/shared";
+export declare const mockTasks: ICharacterDailyTask[];

package/dist/stories/Features/dailyTasks/DailyTasks.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.46",
+  "version": "0.8.48",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -84,7 +84,7 @@
   "dependencies": {
     "@capacitor/core": "^6.1.0",
     "@rollup/plugin-image": "^2.1.1",
-    "@rpg-engine/shared": "^0.9.104",
+    "@rpg-engine/shared": "^0.9.113",
     "dayjs": "^1.11.2",
     "font-awesome": "^4.7.0",
     "fs-extra": "^10.1.0",

package/src/components/DailyTasks/DailyRewardsTooltip.tsx

@@ -0,0 +1,158 @@
+import { ITaskReward, RewardType } from '@rpg-engine/shared';
+import React from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../constants/uiColors';
+import { Ellipsis } from '../shared/Ellipsis';
+import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
+import { formatTaskKey } from './utils/dailyTasks.utils';
+
+interface IDailyRewardsTooltipProps {
+  rewards: ITaskReward[];
+  itemsAtlasJSON: Record<string, any>;
+  itemsAtlasIMG: string;
+  iconAtlasJSON?: Record<string, any>;
+  iconAtlasIMG?: string;
+}
+
+export const DailyRewardsTooltip: React.FC<IDailyRewardsTooltipProps> = ({
+  rewards,
+  itemsAtlasJSON,
+  itemsAtlasIMG,
+}) => {
+  const [isExpanded, setIsExpanded] = React.useState(true);
+
+  const sortedRewards = React.useMemo(() => {
+    if (!rewards) return [];
+
+    const REWARD_PRIORITY = {
+      [RewardType.Item]: 1,
+      [RewardType.Gold]: 2,
+      [RewardType.Experience]: 3,
+    } as const;
+
+    const getPriority = (type: RewardType) =>
+      REWARD_PRIORITY[type] ?? Number.MAX_SAFE_INTEGER;
+
+    return [...rewards].sort((a, b) => {
+      return getPriority(a.type) - getPriority(b.type);
+    });
+  }, [rewards]);
+
+  const toggleExpand = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  return (
+    <TooltipContainer>
+      <CollapsibleHeader onClick={toggleExpand}>
+        <HeaderText>Rewards?</HeaderText>
+        <ExpandIcon>{isExpanded ? '▼' : '▶'}</ExpandIcon>
+      </CollapsibleHeader>
+
+      {isExpanded && (
+        <CollapsibleContent>
+          <RewardsList>
+            {sortedRewards.map((reward: ITaskReward, index: number) => (
+              <RewardItem key={index}>
+                <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'
+                  }
+                  width={24}
+                  height={24}
+                  imgScale={1.75}
+                />
+                <ItemContent>
+                  <RewardLabel>
+                    <Ellipsis maxWidth="100%" maxLines={2}>
+                      {formatTaskKey(reward.key ?? '')}:
+                    </Ellipsis>
+                  </RewardLabel>
+                </ItemContent>
+                <RewardValue>x{reward.quantity}</RewardValue>
+              </RewardItem>
+            ))}
+          </RewardsList>
+        </CollapsibleContent>
+      )}
+    </TooltipContainer>
+  );
+};
+
+const TooltipContainer = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+
+const RewardsList = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+`;
+
+const CollapsibleHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  border-bottom: 1px solid ${uiColors.darkGray};
+  width: 100%;
+`;
+
+const HeaderText = styled.span`
+  color: ${uiColors.yellow} !important;
+`;
+
+const ExpandIcon = styled.span`
+  color: ${uiColors.yellow};
+  font-size: 0.8rem;
+  margin-left: 8px;
+`;
+
+const CollapsibleContent = styled.div`
+  display: block;
+  padding-top: 8px;
+  width: 100%;
+`;
+
+const RewardItem = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  min-width: 200px;
+`;
+
+const ItemContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+`;
+
+const RewardLabel = styled.span`
+  color: ${uiColors.yellow};
+  font-size: 0.9rem;
+  line-height: 1.2;
+  display: inline-flex;
+  align-items: center;
+`;
+
+const RewardValue = styled.span`
+  color: ${uiColors.yellow};
+  font-size: 0.9rem;
+  margin-left: auto;
+  line-height: 1.2;
+  display: inline-flex;
+  align-items: center;
+  min-width: 50px;
+  text-align: right;
+`;

package/src/components/DailyTasks/DailyTaskItem.tsx

@@ -0,0 +1,161 @@
+import {
+  ICharacterDailyTask,
+  isMobileOrTablet,
+  TaskStatus,
+  TaskType,
+} from '@rpg-engine/shared';
+import React from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../constants/uiColors';
+import { Button, ButtonTypes } from '../Button';
+import { Ellipsis } from '../shared/Ellipsis';
+import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
+import { TaskProgress } from './TaskProgress';
+import { formatTaskKey } from './utils/dailyTasks.utils';
+
+interface IDailyTaskItemProps {
+  task: ICharacterDailyTask;
+  spriteKey: string;
+  onClaimReward: (taskKey: string, taskType: TaskType) => void;
+  itemsAtlasJSON: Record<string, any>;
+  itemsAtlasIMG: string;
+  iconAtlasJSON?: Record<string, any>;
+  iconAtlasIMG?: string;
+}
+
+export const DailyTaskItem: React.FC<IDailyTaskItemProps> = ({
+  task,
+  spriteKey,
+  onClaimReward,
+  itemsAtlasJSON,
+  itemsAtlasIMG,
+  iconAtlasJSON,
+  iconAtlasIMG,
+}) => {
+  const isMobile = isMobileOrTablet();
+
+  const isCompleted = task.status === TaskStatus.Completed;
+  const isClaimed = task.claimed;
+
+  const handleClaimReward = () => {
+    onClaimReward(task.key, task.type);
+  };
+
+  return (
+    <TaskContainer>
+      <TaskHeader>
+        {iconAtlasJSON && iconAtlasIMG && (
+          <NonInteractiveWrapper>
+            <SpriteFromAtlas
+              atlasJSON={iconAtlasJSON}
+              atlasIMG={iconAtlasIMG}
+              spriteKey={spriteKey}
+              width={12}
+              height={12}
+              imgScale={2.75}
+            />
+          </NonInteractiveWrapper>
+        )}
+        <TaskContent>
+          <TaskTitle>
+            <Ellipsis maxWidth="100%" maxLines={isMobile ? 3 : 2}>
+              {task.name ?? formatTaskKey(task.key)}
+            </Ellipsis>
+          </TaskTitle>
+          <TaskDescription>
+            <Ellipsis maxWidth="100%" maxLines={isMobile ? 5 : 3}>
+              {task.description}
+            </Ellipsis>
+          </TaskDescription>
+        </TaskContent>
+      </TaskHeader>
+
+      <TaskProgress
+        task={task}
+        itemsAtlasJSON={itemsAtlasJSON}
+        itemsAtlasIMG={itemsAtlasIMG}
+      />
+
+      {isCompleted && !isClaimed && (
+        <CollectWrapper>
+          <Button
+            buttonType={ButtonTypes.RPGUIButton}
+            onPointerDown={handleClaimReward}
+          >
+            Collect Reward
+          </Button>
+        </CollectWrapper>
+      )}
+
+      {isClaimed && <ClaimedText>Reward Claimed</ClaimedText>}
+    </TaskContainer>
+  );
+};
+
+const TaskContainer = styled.div`
+  background: rgba(0, 0, 0, 0.5) !important;
+  border: 2px solid ${uiColors.darkGray} !important;
+  border-radius: 8px;
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+`;
+
+const TaskHeader = styled.div`
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  border-bottom: 1.3px solid ${uiColors.darkGray};
+`;
+
+const NonInteractiveWrapper = styled.div`
+  pointer-events: none;
+  user-select: none;
+  margin-top: 5px;
+`;
+
+const TaskContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+`;
+
+const TaskTitle = styled.h3`
+  && {
+    color: ${uiColors.yellow};
+    padding-left: 10px;
+    text-align: center;
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
+    flex: 1;
+    display: block;
+
+    span {
+      color: inherit;
+    }
+  }
+`;
+
+const TaskDescription = styled.h3`
+  font-size: 0.6rem !important;
+  text-decoration: none !important;
+  a
+`;
+
+const ClaimedText = styled.span`
+  color: ${uiColors.green};
+  font-size: 0.9rem;
+  text-align: center;
+  font-weight: bold;
+`;
+
+const CollectWrapper = styled.div`
+  && {
+    width: 100% !important;
+    display: flex !important;
+    justify-content: center !important;
+    align-items: center !important;
+    margin: 5px 0 !important;
+  }
+`;

package/src/components/DailyTasks/DailyTasks.tsx

@@ -0,0 +1,151 @@
+import {
+  ICharacterDailyTask,
+  ITaskIdentifier,
+  TaskStatus,
+  TaskType,
+} from '@rpg-engine/shared';
+import React from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../constants/uiColors';
+import { useResponsiveSize } from '../CraftBook/hooks/useResponsiveSize';
+import { DraggableContainer } from '../DraggableContainer';
+import { RPGUIContainerTypes } from '../RPGUI/RPGUIContainer';
+import { DailyTaskItem } from './DailyTaskItem';
+import { GlobalDailyProgress } from './GlobalDailyProgress';
+import { getTaskIcon } from './utils/dailyTasks.utils';
+
+export interface IDailyTasksProps {
+  tasks: ICharacterDailyTask[];
+  onClaimReward: (task: ITaskIdentifier) => void;
+  onClose: () => void;
+  scale?: number;
+  itemsAtlasJSON: Record<string, any>;
+  itemsAtlasIMG: string;
+  iconAtlasJSON?: Record<string, any>;
+  iconAtlasIMG?: string;
+}
+
+export const DailyTasks: React.FC<IDailyTasksProps> = ({
+  tasks,
+  onClaimReward,
+  onClose,
+  scale = 1,
+  itemsAtlasJSON,
+  itemsAtlasIMG,
+  iconAtlasJSON,
+  iconAtlasIMG,
+}): JSX.Element | null => {
+  const [localTasks, setLocalTasks] = 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 });
+  };
+
+  const handleClaimAllRewards = () => {
+    localTasks.forEach(task => {
+      if (task.status === TaskStatus.Completed && !task.claimed) {
+        const { type, key } = task;
+        onClaimReward({ type, taskKey: key });
+      }
+    });
+  };
+
+  if (!size) return null;
+
+  return (
+    <TasksContainer
+      type={RPGUIContainerTypes.Framed}
+      onCloseButton={onClose}
+      cancelDrag=".tasks-container"
+      scale={scale}
+      width={size.width}
+      height={size.height}
+    >
+      <TaskTitle>Daily Tasks</TaskTitle>
+      <Container>
+        <TasksList className="tasks-container">
+          <GlobalDailyProgress
+            tasks={localTasks}
+            onClaimAllRewards={handleClaimAllRewards}
+          />
+          {localTasks.map(task => (
+            <DailyTaskItem
+              key={task.key}
+              task={task}
+              spriteKey={getTaskIcon(task.type, task.difficulty)}
+              onClaimReward={handleClaimReward}
+              itemsAtlasJSON={itemsAtlasJSON}
+              itemsAtlasIMG={itemsAtlasIMG}
+              iconAtlasJSON={iconAtlasJSON}
+              iconAtlasIMG={iconAtlasIMG}
+            />
+          ))}
+        </TasksList>
+      </Container>
+    </TasksContainer>
+  );
+};
+
+const TasksContainer = styled(DraggableContainer)`
+  min-width: 450px;
+  max-width: 550px;
+  margin: 0 auto;
+
+  .rpgui-container-title {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+  }
+
+  .rpgui-container {
+    padding: 0 !important;
+    overflow: hidden !important;
+    background-color: rgba(30, 30, 30, 0.9) !important;
+  }
+`;
+
+const Container = styled.div`
+  width: 100%;
+  max-width: 100%;
+  margin: 0 auto;
+  padding: 0.125rem;
+  overflow-y: auto;
+
+  box-sizing: border-box;
+
+  @media (min-width: 320px) {
+    padding: 0.25rem;
+  }
+
+  @media (min-width: 360px) {
+    padding: 0.5rem;
+  }
+
+  @media (min-width: 480px) {
+    padding: 0.75rem;
+  }
+`;
+
+const TasksList = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 15px;
+  max-height: 70vh;
+`;
+
+const TaskTitle = styled.h2`
+  color: ${uiColors.yellow} !important;
+  text-align: center;
+  padding-right: 30px !important;
+  font-size: 1.4rem !important;
+  width: 100%;
+`;

package/src/components/DailyTasks/GlobalDailyProgress.tsx

@@ -0,0 +1,132 @@
+import {
+  ICharacterDailyTask,
+  ICollectGlobalRewardRequest,
+  TaskStatus,
+} from '@rpg-engine/shared';
+import React from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../constants/uiColors';
+import { Button, ButtonTypes } from '../Button';
+
+interface IGlobalTaskProgressProps {
+  tasks: ICharacterDailyTask[];
+  onClaimAllRewards: (tasks: ICollectGlobalRewardRequest) => void;
+}
+
+export const GlobalDailyProgress: React.FC<IGlobalTaskProgressProps> = ({
+  tasks,
+  onClaimAllRewards,
+}) => {
+  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 = completedTasks === totalTasks;
+  const allClaimed = claimedTasks === totalTasks;
+  const [isClaimed, setIsClaimed] = React.useState(false);
+
+  const handleClaimAll = (tasks: ICollectGlobalRewardRequest) => {
+    onClaimAllRewards(tasks);
+    setIsClaimed(true);
+  };
+
+  return (
+    <GlobalProgressContainer>
+      <HeaderContainer>
+        <GlobeIcon>🌍</GlobeIcon>
+        <ProgressText>
+          Global Tasks Completed: {completedTasks}/{totalTasks}
+        </ProgressText>
+      </HeaderContainer>
+      <ProgressBar>
+        <ProgressFill percentage={(completedTasks / totalTasks) * 100} />
+      </ProgressBar>
+      {totalTasks > 0 && allCompleted && allClaimed && (
+        <>
+          {isClaimed ? (
+            <ClaimedText>Global Rewards Claimed</ClaimedText>
+          ) : (
+            <CollectWrapper>
+              <Button
+                buttonType={ButtonTypes.RPGUIButton}
+                onPointerDown={handleClaimAll}
+              >
+                Collect Global Rewards
+              </Button>
+            </CollectWrapper>
+          )}
+        </>
+      )}
+    </GlobalProgressContainer>
+  );
+};
+
+const GlobalProgressContainer = styled.div`
+  background: rgba(0, 0, 0, 0.5) !important;
+  border: 2px solid ${uiColors.darkGray} !important;
+  border-radius: 8px;
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+`;
+
+const HeaderContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+`;
+
+const GlobeIcon = styled.span`
+  font-size: 1.5rem !important;
+  line-height: 1;
+  color: ${uiColors.blue};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const ProgressText = styled.div`
+  color: ${uiColors.white};
+  text-align: center !important;
+  margin-top: 8px;
+  line-height: 1.2;
+`;
+
+const ProgressBar = styled.div`
+  width: 100%;
+  height: 8px;
+  background: ${uiColors.darkGray};
+  border-radius: 4px;
+  overflow: hidden;
+`;
+
+const ProgressFill = styled.div<{ percentage: number }>`
+  width: ${props => props.percentage}%;
+  height: 100%;
+  background: ${uiColors.green};
+  transition: width 0.3s ease;
+`;
+
+const ClaimedText = styled.span`
+  color: ${uiColors.green};
+  font-size: 0.9rem;
+  text-align: center;
+  margin-top: 8px;
+  font-weight: bold;
+`;
+
+const CollectWrapper = styled.div`
+  && {
+    width: 100% !important;
+    display: flex !important;
+    justify-content: center !important;
+    align-items: center !important;
+    margin: 5px 0 !important;
+  }
+`;