@rpg-engine/long-bow 0.8.73 → 0.8.75

package/src/components/DailyTasks/DailyTasks.tsx

@@ -2,14 +2,19 @@ import {
   ICharacterDailyTask,
   ICollectGlobalRewardRequest,
   ICollectRewardRequest,
+  TaskStatus,
   TaskType,
+  isMobileOrTablet,
 } from '@rpg-engine/shared';
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
+import { FaClipboardList, FaThumbtack } from 'react-icons/fa';
 import styled from 'styled-components';
 import { uiColors } from '../../constants/uiColors';
-import { useResponsiveSize } from '../CraftBook/hooks/useResponsiveSize';
+import { useLocalStorage } from '../../hooks/useLocalStorage';
 import { DraggableContainer } from '../DraggableContainer';
+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';
 import { getTaskIcon } from './utils/dailyTasks.utils';
@@ -40,12 +45,17 @@ export const DailyTasks: React.FC<IDailyTasksProps> = ({
   globalRewardClaimed = false,
 }): JSX.Element | null => {
   const [localTasks] = React.useState(tasks);
-  const size = useResponsiveSize(scale);
+  const isMobile = isMobileOrTablet();
   const [claimedTasks, setClaimedTasks] = useState<string[]>([]);
   const [globalRewardClaimedLocal, setGlobalRewardClaimedLocal] = useState(
     false
   );
 
+  // Search and filter state
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedStatus, setSelectedStatus] = useState('all');
+  const [pinnedTasks, setPinnedTasks] = useLocalStorage<string[]>('dailyTasks.pinned', []);
+
   const handleClaimReward = (taskKey: string, taskType: TaskType) => {
     onClaimReward({
       taskKey,
@@ -63,7 +73,50 @@ export const DailyTasks: React.FC<IDailyTasksProps> = ({
     return claimedTasks.includes(taskKey);
   };
 
-  if (!size) return null;
+  const togglePinTask = (taskKey: string) => {
+    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' },
+    { id: 1, value: 'pinned', option: 'Pinned' },
+    { id: 2, value: 'completed', option: 'Completed' },
+    { 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 =
+        task.name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        task.description?.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        task.key.toLowerCase().includes(searchQuery.toLowerCase());
+
+      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);
+      const bIsPinned = pinnedTasks.includes(b.key);
+      if (aIsPinned && !bIsPinned) return -1;
+      if (!aIsPinned && bIsPinned) return 1;
+      return 0;
+    });
+  }, [localTasks, searchQuery, selectedStatus, pinnedTasks]);
 
   return (
     <TasksContainer
@@ -71,12 +124,13 @@ export const DailyTasks: React.FC<IDailyTasksProps> = ({
       onCloseButton={onClose}
       cancelDrag=".tasks-container"
       scale={scale}
-      width={size.width}
-      height={size.height}
+      width={isMobile ? '100vw' : 'max(50vw, 900px)'}
+      height={isMobile ? '100vh' : 'min(85vh, 800px)'}
+      isMobile={isMobile}
     >
-      <TaskTitle>Daily Tasks</TaskTitle>
-      <Container>
-        <TasksList className="tasks-container">
+      <TaskTitle isMobile={isMobile}>Daily Tasks</TaskTitle>
+      <Container isMobile={isMobile}>
+        <GlobalProgressFixed>
           <GlobalDailyProgress
             tasks={localTasks}
             onClaimAllRewards={handleClaimGlobalRewards}
@@ -84,29 +138,79 @@ export const DailyTasks: React.FC<IDailyTasksProps> = ({
               globalRewardClaimed || globalRewardClaimedLocal
             }
           />
-          {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}
-              isRewardClaimed={task.claimed || isTaskRewardClaimed(task.key)}
+        </GlobalProgressFixed>
+
+        <SearchHeader>
+          <SearchBarContainer>
+            <SearchBar
+              value={searchQuery}
+              onChange={setSearchQuery}
+              placeholder="Search tasks..."
+            />
+          </SearchBarContainer>
+          <DropdownContainer>
+            <Dropdown
+              options={statusOptions}
+              onChange={setSelectedStatus}
+              width="100%"
             />
-          ))}
+          </DropdownContainer>
+        </SearchHeader>
+
+        <TasksList className="tasks-container" isMobile={isMobile}>
+          {filteredTasks.length > 0 ? (
+            filteredTasks.map(task => (
+              <TaskWrapper key={task.key}>
+                <DailyTaskItem
+                  task={task}
+                  spriteKey={getTaskIcon(task.type, task.difficulty)}
+                  onClaimReward={handleClaimReward}
+                  itemsAtlasJSON={itemsAtlasJSON}
+                  itemsAtlasIMG={itemsAtlasIMG}
+                  iconAtlasJSON={iconAtlasJSON}
+                  iconAtlasIMG={iconAtlasIMG}
+                  isRewardClaimed={task.claimed || isTaskRewardClaimed(task.key)}
+                  isPinned={pinnedTasks.includes(task.key)}
+                />
+                <PinButton
+                  onClick={() => togglePinTask(task.key)}
+                  isPinned={pinnedTasks.includes(task.key)}
+                >
+                  <FaThumbtack size={10} />
+                </PinButton>
+              </TaskWrapper>
+            ))
+          ) : (
+            <EmptyState>
+              <FaClipboardList size={48} />
+              <p>
+                {searchQuery || selectedStatus !== 'all'
+                  ? 'No tasks match your criteria.'
+                  : 'No daily tasks available.'}
+              </p>
+            </EmptyState>
+          )}
         </TasksList>
       </Container>
     </TasksContainer>
   );
 };
 
-const TasksContainer = styled(DraggableContainer)`
-  min-width: 450px;
-  max-width: 550px;
-  margin: 0 auto;
+const TasksContainer = styled(DraggableContainer) <{ isMobile: boolean }>`
+  ${props => props.isMobile ? `
+    position: fixed !important;
+    top: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    width: 100vw !important;
+    height: 100vh !important;
+    margin: 0 !important;
+    z-index: 1000 !important;
+  ` : `
+    margin: 0 auto;
+    min-width: 50vw;
+  `}
 
   .rpgui-container-title {
     width: 100%;
@@ -114,51 +218,135 @@ const TasksContainer = styled(DraggableContainer)`
     justify-content: center;
     align-items: center;
     text-align: center;
+    ${props => props.isMobile ? 'padding: 8px 0;' : ''}
   }
 
   .rpgui-container {
     padding: 0 !important;
     overflow: hidden !important;
-    background-color: rgba(30, 30, 30, 0.9) !important;
+    background-color: rgba(30, 30, 30, 0.98) !important;
+    ${props => props.isMobile ? `
+      border-radius: 0 !important;
+      height: 100vh !important;
+      width: 100vw !important;
+    ` : ''}
   }
 `;
 
-const Container = styled.div`
+const Container = styled.div<{ isMobile: boolean }>`
   width: 100%;
-  max-width: 100%;
-  margin: 0 auto;
-  padding: 0.125rem;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  flex-direction: column;
+`;
+
+const TasksList = styled.div<{ isMobile: boolean }>`
+  display: flex;
+  flex-direction: column;
+  gap: ${props => props.isMobile ? '8px' : '12px'};
+  padding: ${props => props.isMobile ? '8px' : '12px'};
   overflow-y: auto;
+  flex: 1;
+  background-color: transparent;
+  
+  ${props => props.isMobile ? `
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: thin;
+  ` : ''}
+`;
 
-  box-sizing: border-box;
+const GlobalProgressFixed = styled.div`
+  flex-shrink: 0;
+  padding: 12px;
+  background-color: transparent;
+`;
 
-  @media (min-width: 320px) {
-    padding: 0.25rem;
-  }
+const SearchHeader = styled.div`
+  display: flex;
+  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);
+`;
 
-  @media (min-width: 360px) {
-    padding: 0.5rem;
-  }
+const SearchBarContainer = styled.div`
+  flex: 3;
+`;
 
-  @media (min-width: 480px) {
-    padding: 0.75rem;
+const DropdownContainer = styled.div`
+  flex: 1;
+  min-width: 120px;
+`;
+
+const TaskWrapper = styled.div`
+  position: relative;
+  width: 100%;
+`;
+
+const PinButton = styled.button<{ isPinned: boolean }>`
+  position: absolute;
+  top: 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'};
+  cursor: pointer;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 3px;
+  transition: all 0.2s ease;
+  z-index: 10;
+  width: 20px;
+  height: 20px;
+  
+  &:hover {
+    color: ${uiColors.yellow};
+    background: rgba(0, 0, 0, 0.9);
+    border-color: ${uiColors.yellow};
   }
+  
+  ${props => props.isPinned && `
+    transform: rotate(45deg);
+  `}
 `;
 
-const TasksList = styled.div`
+const EmptyState = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 12px;
-  padding: 15px;
-  max-height: 70vh;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+  text-align: center;
+  color: ${uiColors.lightGray};
+  opacity: 0.7;
+  gap: 16px;
+  
+  p {
+    margin: 0;
+    font-size: 0.9rem;
+    line-height: 1.4;
+  }
 `;
 
-const TaskTitle = styled.h2`
+const TaskTitle = styled.h2<{ isMobile: boolean }>`
   color: ${uiColors.yellow} !important;
   text-align: center;
   padding-right: 30px !important;
-  font-size: 1.4rem !important;
+  font-size: ${props => props.isMobile ? '1rem' : '1.2rem'} !important;
   width: 100%;
+  margin: ${props => props.isMobile ? '4px 0' : '8px 0'} !important;
+  font-weight: 600;
 `;
 
 

package/src/components/DailyTasks/GlobalDailyProgress.tsx

@@ -2,6 +2,7 @@ import {
   ICharacterDailyTask,
   ICollectGlobalRewardRequest,
   TaskStatus,
+  isMobileOrTablet,
 } from '@rpg-engine/shared';
 import React from 'react';
 import styled from 'styled-components';
@@ -19,6 +20,7 @@ export const GlobalDailyProgress: React.FC<IGlobalTaskProgressProps> = ({
   onClaimAllRewards,
   globalRewardClaimed,
 }) => {
+  const isMobile = isMobileOrTablet();
   const totalTasks = tasks.length;
   const completedTasks = tasks.filter(
     task => task.status === TaskStatus.Completed
@@ -45,11 +47,11 @@ export const GlobalDailyProgress: React.FC<IGlobalTaskProgressProps> = ({
   };
 
   return (
-    <GlobalProgressContainer>
+    <GlobalProgressContainer isMobile={isMobile}>
       <HeaderContainer>
         <GlobeIcon>🌍</GlobeIcon>
-        <ProgressText>
-          Global Tasks Completed: {completedTasks}/{totalTasks}
+        <ProgressText isMobile={isMobile}>
+          {isMobile ? `${completedTasks}/${totalTasks} Complete` : `Global Tasks: ${completedTasks}/${totalTasks}`}
         </ProgressText>
       </HeaderContainer>
       <ProgressBar>
@@ -63,12 +65,12 @@ export const GlobalDailyProgress: React.FC<IGlobalTaskProgressProps> = ({
                 buttonType={ButtonTypes.RPGUIButton}
                 onPointerDown={handleClaimAll}
               >
-                Collect Global Rewards
+                {isMobile ? 'Global Rewards' : 'Collect Global Rewards'}
               </Button>
             </CollectWrapper>
           )}
           {shouldShowClaimedMessage && (
-            <ClaimedText>Global Rewards Claimed</ClaimedText>
+            <ClaimedText isMobile={isMobile}>✓ Global Rewards Claimed</ClaimedText>
           )}
         </>
       )}
@@ -76,26 +78,27 @@ export const GlobalDailyProgress: React.FC<IGlobalTaskProgressProps> = ({
   );
 };
 
-const GlobalProgressContainer = styled.div`
-  background: rgba(0, 0, 0, 0.5) !important;
-  border: 2px solid ${uiColors.darkGray} !important;
-  border-radius: 8px;
-  padding: 12px;
+const GlobalProgressContainer = styled.div<{ isMobile: boolean }>`
+  background: rgba(0, 0, 0, 0.6) !important;
+  border: 1px solid ${uiColors.blue} !important;
+  border-radius: ${props => props.isMobile ? '4px' : '6px'};
+  padding: ${props => props.isMobile ? '6px' : '8px'};
   display: flex;
   flex-direction: column;
-  gap: 12px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  gap: ${props => props.isMobile ? '6px' : '8px'};
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
+  margin-bottom: ${props => props.isMobile ? '4px' : '6px'};
 `;
 
 const HeaderContainer = styled.div`
   display: flex;
   align-items: center;
-  gap: 8px;
-  margin-bottom: 8px;
+  gap: 6px;
+  margin-bottom: 2px;
 `;
 
 const GlobeIcon = styled.span`
-  font-size: 1.5rem !important;
+  font-size: 1rem !important;
   line-height: 1;
   color: ${uiColors.blue};
   display: flex;
@@ -103,18 +106,19 @@ const GlobeIcon = styled.span`
   justify-content: center;
 `;
 
-const ProgressText = styled.div`
+const ProgressText = styled.div<{ isMobile: boolean }>`
   color: ${uiColors.white};
-  text-align: center !important;
-  margin-top: 8px;
+  font-size: ${props => props.isMobile ? '0.75rem' : '0.8rem'};
+  font-weight: 500;
+  flex: 1;
   line-height: 1.2;
 `;
 
 const ProgressBar = styled.div`
   width: 100%;
-  height: 8px;
+  height: 4px;
   background: ${uiColors.darkGray};
-  border-radius: 4px;
+  border-radius: 2px;
   overflow: hidden;
 `;
 
@@ -125,12 +129,15 @@ const ProgressFill = styled.div<{ percentage: number }>`
   transition: width 0.3s ease;
 `;
 
-const ClaimedText = styled.span`
+const ClaimedText = styled.span<{ isMobile: boolean }>`
   color: ${uiColors.green};
-  font-size: 0.9rem;
+  font-size: ${props => props.isMobile ? '0.8rem' : '0.9rem'};
   text-align: center;
-  margin-top: 8px;
   font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
 `;
 
 const CollectWrapper = styled.div`
@@ -139,6 +146,6 @@ const CollectWrapper = styled.div`
     display: flex !important;
     justify-content: center !important;
     align-items: center !important;
-    margin: 5px 0 !important;
+    margin: 4px 0 !important;
   }
 `;

package/src/components/DailyTasks/TaskProgress.tsx

@@ -1,4 +1,4 @@
-import { ICharacterDailyTask } from '@rpg-engine/shared';
+import { ICharacterDailyTask, isMobileOrTablet } from '@rpg-engine/shared';
 import React from 'react';
 import styled from 'styled-components';
 import { uiColors } from '../../constants/uiColors';
@@ -22,23 +22,25 @@ export const TaskProgress: React.FC<TaskProgressProps> = ({
   iconAtlasIMG,
 }) => {
   const { difficulty } = task;
+  const isMobile = isMobileOrTablet();
 
   return (
-    <ProgressContainer>
-      <ProgressList>
-        <ProgressItem>
-          <ProgressLabel>Difficulty:</ProgressLabel>
-          <TaskDifficulty difficulty={difficulty}>
-            {formatDifficulty(difficulty)}
-          </TaskDifficulty>
-        </ProgressItem>
-
-        <ProgressItem>
-          <ProgressLabel>Status:</ProgressLabel>
-          <StatusText color={getStatusInfo(task).color}>
-            {getStatusInfo(task).text}
-          </StatusText>
-        </ProgressItem>
+    <ProgressContainer isMobile={isMobile}>
+      <ProgressList isMobile={isMobile}>
+        <ProgressRow>
+          <ProgressItem>
+            <ProgressLabel>Difficulty:</ProgressLabel>
+            <TaskDifficulty difficulty={difficulty}>
+              {formatDifficulty(difficulty)}
+            </TaskDifficulty>
+          </ProgressItem>
+          <ProgressItem>
+            <ProgressLabel>Status:</ProgressLabel>
+            <StatusText color={getStatusInfo(task).color}>
+              {getStatusInfo(task).text}
+            </StatusText>
+          </ProgressItem>
+        </ProgressRow>
 
         <TaskProgressDetails task={task} />
 
@@ -58,25 +60,34 @@ export const TaskProgress: React.FC<TaskProgressProps> = ({
   );
 };
 
-const ProgressContainer = styled.div`
+const ProgressContainer = styled.div<{ isMobile: boolean }>`
   width: 100%;
   position: relative;
 `;
 
-const ProgressList = styled.div`
+const ProgressList = styled.div<{ isMobile: boolean }>`
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: ${props => props.isMobile ? '3px' : '4px'};
+`;
+
+const ProgressRow = styled.div`
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
 `;
 
 const ProgressItem = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
+  flex: 1;
+  min-width: 100px;
 `;
 
 const ProgressLabel = styled.span`
-  color: ${uiColors.white} !important;
+  color: ${uiColors.lightGray} !important;
+  font-size: 0.7rem;
 `;
 
 const TaskDifficulty = styled.span<{ difficulty: string }>`