@rpg-engine/long-bow 0.8.73 → 0.8.74

package/package.json

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

package/src/components/DailyTasks/DailyRewardsTooltip.tsx

@@ -1,4 +1,4 @@
-import { ITaskReward, RewardType } from '@rpg-engine/shared';
+import { ITaskReward, RewardType, isMobileOrTablet } from '@rpg-engine/shared';
 import React from 'react';
 import styled from 'styled-components';
 import { uiColors } from '../../constants/uiColors';
@@ -20,6 +20,7 @@ export const DailyRewardsTooltip: React.FC<IDailyRewardsTooltipProps> = ({
   itemsAtlasIMG,
 }) => {
   const [isExpanded, setIsExpanded] = React.useState(true);
+  const isMobile = isMobileOrTablet();
 
   const sortedRewards = React.useMemo(() => {
     if (!rewards) return [];
@@ -51,25 +52,27 @@ export const DailyRewardsTooltip: React.FC<IDailyRewardsTooltipProps> = ({
 
       {isExpanded && (
         <CollapsibleContent>
-          <RewardsList>
+          <RewardsList isMobile={isMobile} rewardCount={sortedRewards.length}>
             {sortedRewards.map((reward: ITaskReward, index: number) => (
               <RewardItem key={index}>
-                <SpriteFromAtlas
-                  atlasJSON={itemsAtlasJSON}
-                  atlasIMG={itemsAtlasIMG}
-                  spriteKey={reward.texturePath ?? 'check.png'}
-                  width={24}
-                  height={24}
-                  imgScale={1.75}
-                />
-                <ItemContent>
-                  <RewardLabel>
-                    <Ellipsis maxWidth="100%" maxLines={2}>
-                      {formatTaskKey(reward.key ?? reward.type)}:
+                <RewardIcon>
+                  <SpriteFromAtlas
+                    atlasJSON={itemsAtlasJSON}
+                    atlasIMG={itemsAtlasIMG}
+                    spriteKey={reward.texturePath ?? 'check.png'}
+                    width={isMobile ? 16 : 18}
+                    height={isMobile ? 16 : 18}
+                    imgScale={isMobile ? 1.5 : 1.5}
+                  />
+                </RewardIcon>
+                <RewardContent>
+                  <RewardLabel isMobile={isMobile}>
+                    <Ellipsis maxWidth="100%" maxLines={1}>
+                      {formatTaskKey(reward.key ?? reward.type)}
                     </Ellipsis>
                   </RewardLabel>
-                </ItemContent>
-                <RewardValue>x{reward.quantity}</RewardValue>
+                  <RewardValue isMobile={isMobile}>×{reward.quantity}</RewardValue>
+                </RewardContent>
               </RewardItem>
             ))}
           </RewardsList>
@@ -86,10 +89,13 @@ const TooltipContainer = styled.div`
   width: 100%;
 `;
 
-const RewardsList = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
+const RewardsList = styled.div<{ isMobile: boolean; rewardCount: number }>`
+  display: grid;
+  grid-template-columns: ${props =>
+    props.rewardCount > 2 && !props.isMobile ? 'repeat(2, 1fr)' : '1fr'
+  };
+  gap: ${props => props.isMobile ? '6px' : '8px'};
+  column-gap: ${props => props.rewardCount > 2 && !props.isMobile ? '16px' : '8px'};
   width: 100%;
 `;
 
@@ -104,50 +110,75 @@ const CollapsibleHeader = styled.div`
 
 const HeaderText = styled.span`
   color: ${uiColors.yellow} !important;
+  font-size: 0.75rem;
+  font-weight: 500;
 `;
 
 const ExpandIcon = styled.span`
   color: ${uiColors.yellow};
-  font-size: 0.8rem;
+  font-size: 0.7rem;
   margin-left: 8px;
 `;
 
 const CollapsibleContent = styled.div`
   display: block;
-  padding-top: 8px;
+  padding-top: 6px;
   width: 100%;
 `;
 
 const RewardItem = styled.div`
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 4px;
   width: 100%;
-  min-width: 200px;
+  padding: 2px;
+  min-height: 22px;
 `;
 
-const ItemContent = styled.div`
+const RewardIcon = styled.div`
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
   display: flex;
-  flex-direction: column;
-  justify-content: center;
+  align-items: flex-start;
+  justify-content: flex-start;
+  font-style: normal;
+  margin-right: 4px;
+  
+  * {
+    font-style: normal !important;
+  }
+
+    position: relative;
+  left: -0.5rem;
+  top: -0.4rem;
 `;
 
-const RewardLabel = styled.span`
+const RewardContent = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+`;
+
+const RewardLabel = styled.span<{ isMobile: boolean }>`
   color: ${uiColors.yellow};
-  font-size: 0.9rem;
+  font-size: ${props => props.isMobile ? '0.65rem' : '0.7rem'};
   line-height: 1.2;
-  padding-top: 15px;
-  display: inline-flex;
+  display: flex;
   align-items: center;
+  flex: 1;
+  min-width: 0;
 `;
 
-const RewardValue = styled.span`
-  color: ${uiColors.yellow};
-  font-size: 0.9rem;
-  margin-left: auto;
+const RewardValue = styled.span<{ isMobile: boolean }>`
+  color: ${uiColors.green};
+  font-size: ${props => props.isMobile ? '0.6rem' : '0.65rem'};
   line-height: 1.2;
-  display: inline-flex;
+  display: flex;
   align-items: center;
-  min-width: 50px;
-  text-align: right;
+  font-weight: 600;
+  flex-shrink: 0;
+  margin-left: 8px;
 `;

package/src/components/DailyTasks/DailyTaskItem.tsx

@@ -5,13 +5,15 @@ import {
   TaskType,
 } from '@rpg-engine/shared';
 import React from 'react';
-import styled from 'styled-components';
+import styled, { keyframes, css } 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';
+import { DailyRewardsTooltip } from './DailyRewardsTooltip';
+import { TaskProgressDetails } from './TaskProgressDetails';
+import { formatDifficulty, formatTaskKey, getStatusInfo } from './utils/dailyTasks.utils';
+
 
 interface IDailyTaskItemProps {
   task: ICharacterDailyTask;
@@ -22,6 +24,7 @@ interface IDailyTaskItemProps {
   iconAtlasJSON?: Record<string, any>;
   iconAtlasIMG?: string;
   isRewardClaimed: boolean;
+  isPinned?: boolean;
 }
 
 export const DailyTaskItem: React.FC<IDailyTaskItemProps> = ({
@@ -37,6 +40,8 @@ export const DailyTaskItem: React.FC<IDailyTaskItemProps> = ({
   const isMobile = isMobileOrTablet();
 
   const isCompleted = task.status === TaskStatus.Completed;
+  const isInProgress = task.status === TaskStatus.InProgress;
+  const isNotStarted = task.status === TaskStatus.NotStarted;
   const isClaimed = task.claimed || isRewardClaimed;
 
   const handleClaimReward = () => {
@@ -44,94 +49,296 @@ export const DailyTaskItem: React.FC<IDailyTaskItemProps> = ({
   };
 
   return (
-    <TaskContainer>
+    <TaskContainer 
+      isMobile={isMobile}
+      isCompleted={isCompleted}
+      isInProgress={isInProgress}
+      isNotStarted={isNotStarted}
+    >
       <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>
+        <TaskHeaderLeft>
+          {iconAtlasJSON && iconAtlasIMG && (
+            <IconWrapper>
+              <SpriteFromAtlas
+                atlasJSON={iconAtlasJSON}
+                atlasIMG={iconAtlasIMG}
+                spriteKey={spriteKey}
+                width={isMobile ? 10 : 12}
+                height={isMobile ? 10 : 12}
+                imgScale={2}
+
+              />
+            </IconWrapper>
+          )}
+          <TaskTitleSection>
+            <TaskTitle isMobile={isMobile}>
+              <Ellipsis maxWidth="100%" maxLines={1}>
+                {task.name ?? formatTaskKey(task.key)}
+              </Ellipsis>
+            </TaskTitle>
+            <TaskMeta isMobile={isMobile}>
+              <MetaItem>
+                <MetaLabel>Difficulty:</MetaLabel>
+                <TaskDifficulty difficulty={task.difficulty}>
+                  {formatDifficulty(task.difficulty)}
+                </TaskDifficulty>
+              </MetaItem>
+              <MetaDivider>•</MetaDivider>
+              <MetaItem>
+                <MetaLabel>Status:</MetaLabel>
+                <StatusText color={getStatusInfo(task).color}>
+                  {getStatusInfo(task).text}
+                </StatusText>
+              </MetaItem>
+            </TaskMeta>
+          </TaskTitleSection>
+        </TaskHeaderLeft>
+
+        <TaskHeaderRight>
+          {isClaimed && <ClaimedBadge isMobile={isMobile}>✓</ClaimedBadge>}
+        </TaskHeaderRight>
       </TaskHeader>
 
-      <TaskProgress
-        task={task}
-        itemsAtlasJSON={itemsAtlasJSON}
-        itemsAtlasIMG={itemsAtlasIMG}
-      />
+      <TaskBody>
+        <TaskDescription isMobile={isMobile}>
+          <Ellipsis maxWidth="100%" maxLines={isMobile ? 2 : 1}>
+            {task.description}
+          </Ellipsis>
+        </TaskDescription>
+
+        <TaskProgressDetails task={task} />
+
+        {task.rewards && task.rewards.length > 0 && (
+          <RewardsSection>
+            <DailyRewardsTooltip
+              rewards={task.rewards}
+              itemsAtlasJSON={itemsAtlasJSON}
+              itemsAtlasIMG={itemsAtlasIMG}
+              iconAtlasJSON={iconAtlasJSON}
+              iconAtlasIMG={iconAtlasIMG}
+            />
+          </RewardsSection>
+        )}
+      </TaskBody>
 
       {isCompleted && !isClaimed && (
-        <CollectWrapper>
+        <TaskFooter>
           <Button
             buttonType={ButtonTypes.RPGUIButton}
             onPointerDown={handleClaimReward}
           >
-            Collect Reward
+            {isMobile ? 'Collect Reward' : 'Collect Reward'}
           </Button>
-        </CollectWrapper>
+        </TaskFooter>
       )}
-
-      {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;
+const pulseAnimation = keyframes`
+  0% {
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
+  }
+  50% {
+    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
+  }
+  100% {
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
+  }
+`;
+
+const TaskContainer = styled.div<{ 
+  isMobile: boolean;
+  isCompleted: boolean;
+  isInProgress: boolean;
+  isNotStarted: boolean;
+  isPinned?: boolean;
+}>`
+  background: rgba(0, 0, 0, 0.6) !important;
+  border: 1px solid ${props => 
+    props.isCompleted ? uiColors.green :
+    props.isInProgress ? uiColors.yellow :
+    uiColors.darkGray
+  } !important;
+  border-radius: ${props => props.isMobile ? '4px' : '6px'};
+  padding: ${props => props.isMobile ? '6px' : '8px'};
   display: flex;
   flex-direction: column;
-  gap: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  gap: ${props => props.isMobile ? '4px' : '6px'};
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
+  transition: all 0.2s ease;
+  font-style: normal;
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+  
+  /* Task status visual states */
+  opacity: ${props => 
+    props.isCompleted ? 1 :
+    props.isInProgress ? 1 :
+    0.6
+  };
+  
+  ${props => props.isNotStarted && `
+    filter: grayscale(0.7);
+  `}
+  
+  ${props => props.isInProgress && css`
+    animation: ${pulseAnimation} 2s ease-in-out infinite;
+  `}
+  
+  * {
+    font-style: normal !important;
+  }
+  
+  &:hover {
+    background: ${props => 
+      props.isPinned ? 'rgba(255, 215, 0, 0.25)' : 'rgba(0, 0, 0, 0.7)'
+    } !important;
+    border-color: ${props => 
+      props.isPinned ? uiColors.yellow :
+      props.isCompleted ? uiColors.green :
+      props.isInProgress ? uiColors.yellow :
+      uiColors.yellow
+    };
+    opacity: ${props => props.isNotStarted ? 0.8 : 1};
+  }
 `;
 
 const TaskHeader = styled.div`
   display: flex;
   width: 100%;
-  justify-content: center;
-  border-bottom: 1.3px solid ${uiColors.darkGray};
+  justify-content: space-between;
+  align-items: flex-start;
+  border-bottom: 1px solid ${uiColors.darkGray};
+  padding-bottom: 6px;
+  min-height: 36px;
 `;
 
-const NonInteractiveWrapper = styled.div`
-  pointer-events: none;
-  user-select: none;
-  margin-top: 5px;
+const TaskHeaderLeft = styled.div`
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  flex: 1;
+`;
+
+const TaskHeaderRight = styled.div`
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
 `;
 
-const TaskContent = styled.div`
+const TaskTitleSection = styled.div`
   display: flex;
   flex-direction: column;
+  gap: 4px;
   flex: 1;
+  min-width: 0;
+`;
+
+const TaskMeta = styled.div<{ isMobile: boolean }>`
+  display: flex;
+  align-items: center;
+  gap: ${props => props.isMobile ? '6px' : '8px'};
+  flex-wrap: wrap;
+`;
+
+const MetaItem = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+`;
+
+const MetaLabel = styled.span`
+  color: ${uiColors.lightGray};
+  font-size: 0.65rem;
+  opacity: 0.8;
 `;
 
-const TaskTitle = styled.h3`
+const MetaDivider = styled.span`
+  color: ${uiColors.darkGray};
+  font-size: 0.7rem;
+`;
+
+const TaskDifficulty = styled.span<{ difficulty: string }>`
+  color: ${props =>
+    props.difficulty.toLowerCase() === 'challenge'
+      ? uiColors.red
+      : uiColors.lightGray};
+  font-size: 0.65rem;
+  font-weight: 500;
+`;
+
+const StatusText = styled.span<{ color: string }>`
+  color: ${props => props.color};
+  font-size: 0.65rem;
+  font-weight: 500;
+`;
+
+const ClaimedBadge = styled.div<{ isMobile: boolean }>`
+  background: ${uiColors.green};
+  color: white;
+  border-radius: 50%;
+  width: ${props => props.isMobile ? '18px' : '20px'};
+  height: ${props => props.isMobile ? '18px' : '20px'};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: ${props => props.isMobile ? '10px' : '12px'};
+  font-weight: bold;
+`;
+
+const TaskBody = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 6px 0;
+`;
+
+const RewardsSection = styled.div`
+  margin-top: 4px;
+`;
+
+const TaskFooter = styled.div`
+  display: flex;
+  justify-content: center;
+  padding-top: 6px;
+  border-top: 1px solid ${uiColors.darkGray};
+`;
+
+const IconWrapper = styled.div`
+  pointer-events: none;
+  user-select: none;
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  margin-top: 2px;
+  margin-left: 2px;
+  font-style: normal;
+
+
+  
+  * {
+    font-style: normal !important;
+  }
+`;
+
+
+const TaskTitle = styled.h3<{ isMobile: boolean }>`
   && {
     color: ${uiColors.yellow};
-    padding-left: 10px;
-    text-align: center;
+    margin: 0;
+    padding: 0;
+    text-align: left;
+    font-size: ${props => props.isMobile ? '0.85rem' : '0.9rem'};
+    line-height: 1.2;
     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
-    flex: 1;
-    display: block;
+    font-weight: 600;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
 
     span {
       color: inherit;
@@ -139,25 +346,14 @@ const TaskTitle = styled.h3`
   }
 `;
 
-const TaskDescription = styled.h3`
-  font-size: 0.6rem !important;
-  text-decoration: none !important;
-  a
+const TaskDescription = styled.div<{ isMobile: boolean }>`
+  color: ${uiColors.lightGray};
+  font-size: ${props => props.isMobile ? '0.7rem' : '0.75rem'};
+  line-height: 1.4;
+  margin: 0;
+  opacity: 0.9;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
 `;
 
-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;
-  }
-`;