@rpg-engine/long-bow 0.8.74 → 0.8.75

package/package.json

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

package/src/components/DailyTasks/DailyTaskItem.tsx

@@ -5,7 +5,7 @@ import {
   TaskType,
 } from '@rpg-engine/shared';
 import React from 'react';
-import styled, { keyframes, css } from 'styled-components';
+import styled, { css, keyframes } from 'styled-components';
 import { uiColors } from '../../constants/uiColors';
 import { Button, ButtonTypes } from '../Button';
 import { Ellipsis } from '../shared/Ellipsis';
@@ -36,6 +36,7 @@ export const DailyTaskItem: React.FC<IDailyTaskItemProps> = ({
   iconAtlasJSON,
   iconAtlasIMG,
   isRewardClaimed,
+  isPinned,
 }) => {
   const isMobile = isMobileOrTablet();
 
@@ -43,19 +44,22 @@ export const DailyTaskItem: React.FC<IDailyTaskItemProps> = ({
   const isInProgress = task.status === TaskStatus.InProgress;
   const isNotStarted = task.status === TaskStatus.NotStarted;
   const isClaimed = task.claimed || isRewardClaimed;
+  const isChallenge = task.difficulty?.toLowerCase() === 'challenge';
 
   const handleClaimReward = () => {
     onClaimReward(task.key, task.type);
   };
 
   return (
-    <TaskContainer 
+    <TaskContainer
       isMobile={isMobile}
       isCompleted={isCompleted}
       isInProgress={isInProgress}
       isNotStarted={isNotStarted}
+      isPinned={isPinned}
+      isChallenge={isChallenge}
     >
-      <TaskHeader>
+      <TaskHeader isMobile={isMobile}>
         <TaskHeaderLeft>
           {iconAtlasJSON && iconAtlasIMG && (
             <IconWrapper>
@@ -99,7 +103,7 @@ export const DailyTaskItem: React.FC<IDailyTaskItemProps> = ({
         </TaskHeaderRight>
       </TaskHeader>
 
-      <TaskBody>
+      <TaskBody isMobile={isMobile}>
         <TaskDescription isMobile={isMobile}>
           <Ellipsis maxWidth="100%" maxLines={isMobile ? 2 : 1}>
             {task.description}
@@ -122,7 +126,7 @@ export const DailyTaskItem: React.FC<IDailyTaskItemProps> = ({
       </TaskBody>
 
       {isCompleted && !isClaimed && (
-        <TaskFooter>
+        <TaskFooter isMobile={isMobile}>
           <Button
             buttonType={ButtonTypes.RPGUIButton}
             onPointerDown={handleClaimReward}
@@ -147,24 +151,25 @@ const pulseAnimation = keyframes`
   }
 `;
 
-const TaskContainer = styled.div<{ 
+const TaskContainer = styled.div<{
   isMobile: boolean;
   isCompleted: boolean;
   isInProgress: boolean;
   isNotStarted: boolean;
   isPinned?: boolean;
+  isChallenge?: boolean;
 }>`
-  background: rgba(0, 0, 0, 0.6) !important;
-  border: 1px solid ${props => 
-    props.isCompleted ? uiColors.green :
-    props.isInProgress ? uiColors.yellow :
-    uiColors.darkGray
+  background: ${props =>
+    props.isChallenge ? 'rgb(209, 39, 42)' :
+      props.isPinned ? 'rgba(255, 215, 0, 0.1)' :
+        'rgba(0, 0, 0, 0.6)'
   } !important;
+  border: 1px solid ${uiColors.darkGray} !important;
   border-radius: ${props => props.isMobile ? '4px' : '6px'};
-  padding: ${props => props.isMobile ? '6px' : '8px'};
+  padding: ${props => props.isMobile ? '10px' : '14px'};
   display: flex;
   flex-direction: column;
-  gap: ${props => props.isMobile ? '4px' : '6px'};
+  gap: ${props => props.isMobile ? '8px' : '12px'};
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
   transition: all 0.2s ease;
   font-style: normal;
@@ -173,11 +178,7 @@ const TaskContainer = styled.div<{
   box-sizing: border-box;
   
   /* Task status visual states */
-  opacity: ${props => 
-    props.isCompleted ? 1 :
-    props.isInProgress ? 1 :
-    0.6
-  };
+  opacity: 1;
   
   ${props => props.isNotStarted && `
     filter: grayscale(0.7);
@@ -192,26 +193,21 @@ const TaskContainer = styled.div<{
   }
   
   &: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};
+    background: ${props =>
+    props.isPinned ? 'rgba(255, 215, 0, 0.25)' : 'rgba(0, 0, 0, 0.7)'
+  } !important;
+    border-color: ${uiColors.yellow};
+    opacity: 1;
   }
 `;
 
-const TaskHeader = styled.div`
+const TaskHeader = styled.div<{ isMobile?: boolean }>`
   display: flex;
   width: 100%;
   justify-content: space-between;
   align-items: flex-start;
   border-bottom: 1px solid ${uiColors.darkGray};
-  padding-bottom: 6px;
+  padding-bottom: ${props => props.isMobile ? '8px' : '10px'};
   min-height: 36px;
 `;
 
@@ -270,7 +266,7 @@ const TaskDifficulty = styled.span<{ difficulty: string }>`
 `;
 
 const StatusText = styled.span<{ color: string }>`
-  color: ${props => props.color};
+  color: ${props => props.color} !important;
   font-size: 0.65rem;
   font-weight: 500;
 `;
@@ -286,23 +282,24 @@ const ClaimedBadge = styled.div<{ isMobile: boolean }>`
   justify-content: center;
   font-size: ${props => props.isMobile ? '10px' : '12px'};
   font-weight: bold;
+  margin-left: 8px;
 `;
 
-const TaskBody = styled.div`
+const TaskBody = styled.div<{ isMobile?: boolean }>`
   display: flex;
   flex-direction: column;
   gap: 8px;
-  padding: 6px 0;
+  padding: ${props => props.isMobile ? '4px 0' : '6px 0'};
 `;
 
 const RewardsSection = styled.div`
   margin-top: 4px;
 `;
 
-const TaskFooter = styled.div`
+const TaskFooter = styled.div<{ isMobile?: boolean }>`
   display: flex;
   justify-content: center;
-  padding-top: 6px;
+  padding-top: ${props => props.isMobile ? '8px' : '10px'};
   border-top: 1px solid ${uiColors.darkGray};
 `;
 

package/src/components/DailyTasks/DailyTasks.tsx

@@ -2,18 +2,18 @@ import {
   ICharacterDailyTask,
   ICollectGlobalRewardRequest,
   ICollectRewardRequest,
-  TaskType,
   TaskStatus,
+  TaskType,
   isMobileOrTablet,
 } from '@rpg-engine/shared';
-import React, { useState, useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
+import { FaClipboardList, FaThumbtack } from 'react-icons/fa';
 import styled from 'styled-components';
-import { FaThumbtack, FaClipboardList } from 'react-icons/fa';
 import { uiColors } from '../../constants/uiColors';
 import { useLocalStorage } from '../../hooks/useLocalStorage';
 import { DraggableContainer } from '../DraggableContainer';
-import { RPGUIContainerTypes } from '../RPGUI/RPGUIContainer';
 import { Dropdown, IOptionsProps as DropdownOption } from '../Dropdown';
+import { RPGUIContainerTypes } from '../RPGUI/RPGUIContainer';
 import { SearchBar } from '../shared/SearchBar/SearchBar';
 import { DailyTaskItem } from './DailyTaskItem';
 import { GlobalDailyProgress } from './GlobalDailyProgress';
@@ -50,7 +50,7 @@ export const DailyTasks: React.FC<IDailyTasksProps> = ({
   const [globalRewardClaimedLocal, setGlobalRewardClaimedLocal] = useState(
     false
   );
-  
+
   // Search and filter state
   const [searchQuery, setSearchQuery] = useState('');
   const [selectedStatus, setSelectedStatus] = useState('all');
@@ -72,15 +72,15 @@ export const DailyTasks: React.FC<IDailyTasksProps> = ({
   const isTaskRewardClaimed = (taskKey: string): boolean => {
     return claimedTasks.includes(taskKey);
   };
-  
+
   const togglePinTask = (taskKey: string) => {
-    setPinnedTasks(prev => 
+    setPinnedTasks(prev =>
       prev.includes(taskKey)
         ? prev.filter(key => key !== taskKey)
         : [...prev, taskKey]
     );
   };
-  
+
   // Filter options using Store pattern
   const statusOptions: DropdownOption[] = [
     { id: 0, value: 'all', option: 'All' },
@@ -89,25 +89,25 @@ export const DailyTasks: React.FC<IDailyTasksProps> = ({
     { id: 3, value: 'inprogress', option: 'In Progress' },
     { id: 4, value: 'notstarted', option: 'Not Started' },
   ];
-  
+
   // Filtered tasks using InformationCenter pattern
   const filteredTasks = useMemo(() => {
     let filtered = localTasks.filter(task => {
-      const matchesSearch = 
+      const matchesSearch =
         task.name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
         task.description?.toLowerCase().includes(searchQuery.toLowerCase()) ||
         task.key.toLowerCase().includes(searchQuery.toLowerCase());
-      
-      const matchesStatus = 
+
+      const matchesStatus =
         selectedStatus === 'all' ||
         (selectedStatus === 'pinned' && pinnedTasks.includes(task.key)) ||
         (selectedStatus === 'completed' && task.status === TaskStatus.Completed) ||
         (selectedStatus === 'inprogress' && task.status === TaskStatus.InProgress) ||
         (selectedStatus === 'notstarted' && task.status === TaskStatus.NotStarted);
-      
+
       return matchesSearch && matchesStatus;
     });
-    
+
     // Sort with pinned tasks first
     return filtered.sort((a, b) => {
       const aIsPinned = pinnedTasks.includes(a.key);
@@ -139,7 +139,7 @@ export const DailyTasks: React.FC<IDailyTasksProps> = ({
             }
           />
         </GlobalProgressFixed>
-        
+
         <SearchHeader>
           <SearchBarContainer>
             <SearchBar
@@ -156,7 +156,7 @@ export const DailyTasks: React.FC<IDailyTasksProps> = ({
             />
           </DropdownContainer>
         </SearchHeader>
-        
+
         <TasksList className="tasks-container" isMobile={isMobile}>
           {filteredTasks.length > 0 ? (
             filteredTasks.map(task => (
@@ -262,14 +262,18 @@ const TasksList = styled.div<{ isMobile: boolean }>`
 
 const GlobalProgressFixed = styled.div`
   flex-shrink: 0;
-  padding: 8px 12px;
+  padding: 12px;
   background-color: transparent;
 `;
 
 const SearchHeader = styled.div`
   display: flex;
-  gap: 12px;
-  padding: 12px 12px 8px 12px;
+  gap: 12px; 
+  justify-content: center;
+  align-items: center;
+  margin-left: 12px;
+  margin-right: 12px;
+  padding: 0.25rem;
   border-bottom: 1px solid ${uiColors.darkGray};
   background: rgba(0, 0, 0, 0.3);
 `;
@@ -291,7 +295,7 @@ const TaskWrapper = styled.div`
 const PinButton = styled.button<{ isPinned: boolean }>`
   position: absolute;
   top: 8px;
-  right: 8px;
+  right: 32px;
   background: rgba(0, 0, 0, 0.7);
   color: ${props => props.isPinned ? uiColors.yellow : uiColors.lightGray};
   border: 1px solid ${props => props.isPinned ? uiColors.yellow : 'transparent'};