@rpg-engine/long-bow 0.6.69 → 0.6.71

package/package.json

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

package/src/components/Friends/FriendList.tsx

@@ -10,6 +10,7 @@ import {
   TableCell,
   TableHeader,
   TableRow,
+  UserActionLink,
 } from '../Table/Table';
 import { SearchFriend } from './SearchFriend';
 export type IFriend = Pick<ICharacter, 'name' | '_id' | 'isOnline'>;
@@ -89,18 +90,18 @@ export const FriendList: React.FC<IFriendListProps> = ({
                     <TableCell>{friend.name}</TableCell>
                     <TableCell>
                       <ActionButtons>
-                        <UserAction
-                          color={uiColors.yellow}
+                        <UserActionLink
+                          color={uiColors.white}
                           onClick={() => onOpenPrivateMessage(friend)}
                         >
                           Chat
-                        </UserAction>
-                        <UserAction
+                        </UserActionLink>
+                        <UserActionLink
                           color={uiColors.red}
                           onClick={() => onRemoveFriend(friend)}
                         >
                           Remove
-                        </UserAction>
+                        </UserActionLink>
                       </ActionButtons>
                     </TableCell>
                   </TableRow>
@@ -152,17 +153,3 @@ const ButtonContainer = styled.div`
   width: 100%;
   margin-top: 1rem;
 `;
-
-interface IUserActionProps {
-  color: string;
-}
-
-const UserAction = styled.span<IUserActionProps>`
-  color: ${({ color }) => color} !important;
-  cursor: pointer;
-  margin-right: 0.5rem;
-
-  &:hover {
-    text-decoration: underline;
-  }
-`;

package/src/components/Friends/SearchFriend.tsx

@@ -1,11 +1,12 @@
-import React, { useState } from 'react';
+import { debounce } from 'lodash';
+import React, { useCallback, useState } from 'react';
 import styled from 'styled-components';
+import { TableTab, UserActionLink } from '../..';
+import { uiColors } from '../../constants/uiColors';
 import { uiFonts } from '../../constants/uiFonts';
-import { Button, ButtonTypes } from '../Button';
-import { Column } from '../shared/Column';
-import type { IFriend } from './FriendList';
+import { IFriend } from './FriendList';
 
-interface ISearchFriendProp {
+interface ISearchFriendProps {
   searchedCharacters: IFriend[];
   friendRequests: IFriend[];
   onFocus?: () => void;
@@ -16,142 +17,194 @@ interface ISearchFriendProp {
   onRejectRequest: (character: IFriend) => void;
 }
 
-export const SearchFriend = (props: ISearchFriendProp) => {
-  const {
-    searchedCharacters,
-    friendRequests,
-    onBlur,
-    onFocus,
-    onSearch,
-    onSendFriendRequest,
-    onAcceptRequest,
-    onRejectRequest,
-  } = props;
+export const SearchFriend: React.FC<ISearchFriendProps> = ({
+  searchedCharacters,
+  friendRequests,
+  onBlur,
+  onFocus,
+  onSearch,
+  onSendFriendRequest,
+  onAcceptRequest,
+  onRejectRequest,
+}) => {
   const [characterName, setCharacterName] = useState('');
 
+  const debouncedSearch = useCallback(
+    debounce((name: string) => {
+      onSearch(name);
+    }, 300),
+    []
+  );
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const name = e.target.value;
+    setCharacterName(name);
+    debouncedSearch(name);
+  };
+
   const handleSubmit = (event: React.SyntheticEvent<HTMLFormElement>) => {
     event.preventDefault();
-    if (!characterName || characterName.trim() === '') return;
-    onSearch(characterName);
+    if (characterName.trim()) {
+      onSearch(characterName);
+    }
   };
 
+  const searchTabContent = (
+    <ListContainer>
+      <SearchForm onSubmit={handleSubmit}>
+        <SearchInput
+          value={characterName}
+          id="characterName"
+          name="characterName"
+          onChange={handleInputChange}
+          type="text"
+          autoComplete="off"
+          onFocus={onFocus}
+          onBlur={onBlur}
+          onPointerDown={onFocus}
+          autoFocus
+          placeholder="Search for a character..."
+        />
+      </SearchForm>
+      <CharacterList
+        characters={searchedCharacters}
+        onAction={onSendFriendRequest}
+        actionLabel="Add Friend"
+      />
+    </ListContainer>
+  );
+
+  const requestsTabContent = (
+    <ListContainer>
+      <FriendRequestSection
+        friendRequests={friendRequests}
+        onAccept={onAcceptRequest}
+        onReject={onRejectRequest}
+      />
+    </ListContainer>
+  );
+
+  const tabs = [
+    { id: 'search', title: 'Search', content: searchTabContent },
+    {
+      id: 'requests',
+      title: `Requests (${friendRequests.length})`,
+      content: requestsTabContent,
+    },
+  ];
+
   return (
-    <>
-      <Form onSubmit={handleSubmit}>
-        <Column flex={70}>
-          <TextField
-            value={characterName}
-            id="characterName"
-            name="characterName"
-            onChange={e => {
-              setCharacterName(e.target.value);
-            }}
-            height={20}
-            type="text"
-            autoComplete="off"
-            onFocus={onFocus}
-            onBlur={onBlur}
-            onPointerDown={onFocus}
-            autoFocus
-          />
-        </Column>
-        <Column justifyContent="flex-end">
-          <Button type="submit" buttonType={ButtonTypes.RPGUIButton}>
-            Search
-          </Button>
-        </Column>
-      </Form>
+    <Container>
+      <TableTab
+        tabs={tabs}
+        activeTextColor="#000"
+        inactiveColor="#777"
+        borderColor="#f59e0b"
+      />
+    </Container>
+  );
+};
+
+const CharacterList: React.FC<{
+  characters: IFriend[];
+  onAction: (character: IFriend) => void;
+  actionLabel: string;
+}> = ({ characters, onAction, actionLabel }) => (
+  <ListContainer>
+    {characters.map(character => (
+      <ListItem key={character._id}>
+        <CharacterName>{character.name}</CharacterName>
+        <UserActionLink
+          color={uiColors.lightGreen}
+          onClick={() => onAction(character)}
+        >
+          {actionLabel}
+        </UserActionLink>
+      </ListItem>
+    ))}
+  </ListContainer>
+);
+
+const FriendRequestSection: React.FC<{
+  friendRequests: IFriend[];
+  onAccept: (character: IFriend) => void;
+  onReject: (character: IFriend) => void;
+}> = ({ friendRequests, onAccept, onReject }) => (
+  <>
+    {friendRequests.length > 0 && (
       <ListContainer>
-        {searchedCharacters.map(character => (
-          <ListElement key={character._id}>
-            <p>{character.name}</p>
-
-            <Button
-              buttonType={ButtonTypes.RPGUIButton}
-              onPointerDown={() => onSendFriendRequest(character)}
-            >
-              Add Friend
-            </Button>
-          </ListElement>
+        {friendRequests.map(character => (
+          <ListItem key={character._id}>
+            <CharacterName>{character.name}</CharacterName>
+            <AcceptRejectActions>
+              <UserActionLink
+                color={uiColors.lightGreen}
+                onClick={() => onAccept(character)}
+              >
+                Accept
+              </UserActionLink>
+              <UserActionLink
+                color={uiColors.red}
+                onClick={() => onReject(character)}
+              >
+                Reject
+              </UserActionLink>
+            </AcceptRejectActions>
+          </ListItem>
         ))}
       </ListContainer>
-      <FriendRequestTitle>
-        Friend Requests <span>({friendRequests.length})</span>
-      </FriendRequestTitle>
-      {friendRequests.length > 0 && (
-          <ListContainer>
-            {friendRequests.map(character => (
-              <ListElement key={character._id}>
-                <p>{character.name}</p>
-
-                <AcceptRejectButtonContainer>
-                  <Button
-                    buttonType={ButtonTypes.RPGUIButton}
-                    onPointerDown={() => onAcceptRequest(character)}
-                  >
-                    Accept
-                  </Button>
-                  <Button
-                    buttonType={ButtonTypes.RPGUIButton}
-                    onPointerDown={() => onRejectRequest(character)}
-                  >
-                    Reject
-                  </Button>
-                </AcceptRejectButtonContainer>
-              </ListElement>
-            ))}
-          </ListContainer>
-      )}
-    </>
-  );
-};
+    )}
+  </>
+);
 
-const Form = styled.form`
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+`;
+
+const SearchForm = styled.form`
   display: flex;
-  width: 100%;
-  justify-content: center;
   align-items: center;
+  width: 100%;
   margin-top: 1rem;
 `;
 
-const TextField = styled.input`
+const SearchInput = styled.input`
   width: 100%;
-  background-color: rgba(0, 0, 0, 0.25) !important;
-  border: none !important;
-  max-height: 28px !important;
+  background-color: rgba(0, 0, 0, 0.25);
+  border: none;
+  padding: 0.5rem;
+  font-size: ${uiFonts.size.small};
 `;
 
 const ListContainer = styled.ul`
-  width: 100%;
-  c4height: 50vh;
-  border: none;
-  overflow-y: scroll;
   list-style: none;
   padding: 0;
+  margin: 0;
+  width: 100%;
+  max-height: 50vh;
+  overflow-y: auto;
 
   @media (max-width: 768px) {
-    max-height: 90wh;
+    max-height: 90vh;
   }
 `;
 
-const ListElement = styled.li`
-  margin: 0.5rem 0 !important;
-  font-size: ${uiFonts.size.small};
-  padding: 0.5rem 2px;
+const ListItem = styled.li`
   display: flex;
   align-items: center;
   justify-content: space-between;
+  padding: 0.5rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 `;
 
-const FriendRequestTitle = styled.h3`
-  font-size: ${uiFonts.size.small} !important;
-  margin-top: 0.5rem !important;
-  text-align: center;
-  gap: 0.5rem;
+const CharacterName = styled.p`
+  font-size: ${uiFonts.size.small};
+  margin: 0;
 `;
 
-const AcceptRejectButtonContainer = styled.div`
+const AcceptRejectActions = styled.div`
   display: flex;
-  justify-content: space-between;
   gap: 0.5rem;
 `;

package/src/components/QuestList.tsx

@@ -1,135 +1,172 @@
-import { IQuest } from '@rpg-engine/shared';
 import React from 'react';
+import 'react-tippy/dist/tippy.css';
 import styled from 'styled-components';
-import { uiFonts } from '../constants/uiFonts';
-import { DraggableContainer } from './DraggableContainer';
-import { RPGUIContainerTypes } from './RPGUI/RPGUIContainer';
+
+import {
+  IQuest,
+  IQuestObjectiveInteraction,
+  IQuestObjectiveKill,
+  QuestStatus,
+} from '@rpg-engine/shared';
+import { uiColors } from '../constants/uiColors';
+import { Table, TableCell, TableHeader, TableRow } from './Table/Table';
+import { Ellipsis } from './shared/Ellipsis';
+import { SimpleTooltip } from './shared/SimpleTooltip';
 
 export interface IQuestListProps {
   quests?: IQuest[];
-  onClose: () => void;
-  scale?: number;
 }
 
-export const QuestList: React.FC<IQuestListProps> = ({
-  quests,
-  onClose,
-  scale,
-}) => {
+export const QuestList: React.FC<IQuestListProps> = ({ quests }) => {
   return (
-    <QuestDraggableContainer
-      type={RPGUIContainerTypes.Framed}
-      onCloseButton={() => {
-        if (onClose) onClose();
-      }}
-      width="520px"
-      scale={scale}
-    >
-      <div style={{ width: '100%' }}>
-        <Title>Quests</Title>
-        <hr className="golden" />
-
-        <QuestListContainer>
-          {quests ? (
-            quests.map((quest, i) => (
-              <div className="quest-item" key={i}>
-                <span className="quest-number">{i + 1}</span>
-                <div className="quest-detail">
-                  <p className="quest-detail__title">{quest.title}</p>
-                  <p className="quest-detail__description">
-                    {quest.description}
-                  </p>
-                </div>
-              </div>
-            ))
-          ) : (
-            <NoQuestContainer>
-              <p>There are no ongoing quests</p>
-            </NoQuestContainer>
-          )}
-        </QuestListContainer>
-      </div>
-    </QuestDraggableContainer>
+    <QuestListContainer>
+      {quests && quests.length > 0 ? (
+        <>
+          <Table>
+            <thead>
+              <TableRow>
+                <TableHeader>Status</TableHeader>
+                <TableHeader>Title</TableHeader>
+                <TableHeader>Description</TableHeader>
+                <TableHeader>Objectives</TableHeader>
+                <TableHeader>Rewards</TableHeader>
+              </TableRow>
+            </thead>
+            <tbody>
+              {quests.map((quest, i) => (
+                <TableRow key={i}>
+                  <TableCell style={{ color: getStatusColor(quest.status) }}>
+                    {quest.status ?? 'Unknown'}
+                  </TableCell>
+                  <TableCell>
+                    <SimpleTooltip
+                      content={formatText(quest.title)}
+                      direction="bottom"
+                    >
+                      <Ellipsis maxWidth="300px">
+                        {formatText(quest.title)}
+                      </Ellipsis>
+                    </SimpleTooltip>
+                  </TableCell>
+                  <TableCell>
+                    <SimpleTooltip
+                      content={quest.description}
+                      direction="bottom"
+                    >
+                      <Ellipsis maxWidth="300px">{quest.description}</Ellipsis>
+                    </SimpleTooltip>
+                  </TableCell>
+                  <TableCell>
+                    <SimpleTooltip
+                      content={formatObjectives(quest.objectives)}
+                      direction="bottom"
+                    >
+                      <Ellipsis maxWidth="300px">
+                        {formatObjectives(quest.objectives)}
+                      </Ellipsis>
+                    </SimpleTooltip>
+                  </TableCell>
+                  <TableCell>
+                    <SimpleTooltip
+                      content={formatRewards(quest.rewards)}
+                      direction="bottom"
+                    >
+                      <Ellipsis maxWidth="200px">
+                        {formatRewards(quest.rewards)}
+                      </Ellipsis>
+                    </SimpleTooltip>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </tbody>
+          </Table>
+        </>
+      ) : (
+        <NoQuestContainer>
+          <p>There are no ongoing quests</p>
+        </NoQuestContainer>
+      )}
+    </QuestListContainer>
   );
 };
 
-const QuestDraggableContainer = styled(DraggableContainer)`
-  .container-close {
-    top: 10px;
-    right: 10px;
-  }
+// Updated helper function to format objectives
+const formatObjectives = (
+  objectives: (IQuestObjectiveKill | IQuestObjectiveInteraction)[]
+) => {
+  return objectives
+    .map(objective => {
+      if ('killCountTarget' in objective) {
+        // This is an IQuestObjectiveKill
+        const killObjective = objective as IQuestObjectiveKill;
+        return `Kill ${formatText(killObjective.creatureKeys.join(', '))}: ${
+          killObjective.killCount
+        }/${killObjective.killCountTarget}`;
+      } else if ('targetNPCkey' in objective) {
+        // This is an IQuestObjectiveInteraction
+        const interactionObjective = objective as IQuestObjectiveInteraction;
+        return `Interact with NPC: ${formatText(
+          interactionObjective.targetNPCkey ?? 'Unknown'
+        )}`;
+      } else {
+        return 'Unknown objective';
+      }
+    })
+    .join('; ');
+};
 
-  .quest-title {
-    text-align: left;
-    margin-left: 44px;
-    margin-top: 20px;
-    color: yellow;
-  }
+// Other helper functions remain the same
+const formatRewards = (rewards: IQuest['rewards']) => {
+  return rewards
+    .map(reward => {
+      return `${formatText(
+        reward.itemKeys.map(itemKey => itemKey + ' x' + reward.qty).join(', ')
+      )}${
+        reward.spellKeys
+          ? `, Spells: ${formatText(reward.spellKeys.join(', '))}`
+          : ''
+      }`;
+    })
+    .join('; ');
+};
 
-  .quest-desc {
-    margin-top: 12px;
-    margin-left: 44px;
-  }
+const formatText = (text: string) => {
+  return text
+    .split('-')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ');
+};
 
-  .rpgui-progress {
-    min-width: 80%;
-    margin: 0 auto;
+const getStatusColor = (status?: QuestStatus) => {
+  switch (status) {
+    case QuestStatus.Pending:
+      return uiColors.orange; // Orange
+    case QuestStatus.InProgress:
+      return uiColors.blue; // Deep Sky Blue
+    case QuestStatus.Completed:
+      return uiColors.lightGreen; // Lime Green
+    default:
+      return uiColors.white; // Default to white
   }
-`;
-
-const Title = styled.h1`
-  z-index: 22;
-  font-size: ${uiFonts.size.medium} !important;
-  color: yellow !important;
-`;
+};
 
+// Styled components
 const QuestListContainer = styled.div`
   margin-top: 20px;
   margin-bottom: 40px;
   overflow-y: auto;
   max-height: 400px;
-
-  .quest-item {
-    display: flex;
-    align-items: flex-start;
-    margin-bottom: 12px;
-  }
-
-  .quest-number {
-    border-radius: 50%;
-    width: 28px;
-    height: 28px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-right: 16px;
-    background-color: brown;
-    flex-shrink: 0;
-  }
-
-  .quest-number.completed {
-    background-color: yellow;
-  }
-
-  p {
-    margin: 0;
-  }
-
-  .quest-detail__title {
-    color: yellow;
-  }
-
-  .quest-detail__description {
-    margin-top: 5px;
-  }
-  .Noquest-detail__description {
-    margin-top: 5px;
-    margin: auto;
-  }
+  background-color: ${uiColors.darkGray};
+  padding: 20px;
+  border-radius: 10px;
+  border: 1px solid ${uiColors.gray};
+  font-size: 0.7rem;
 `;
+
 const NoQuestContainer = styled.div`
   text-align: center;
   p {
     margin-top: 5px;
+    color: ${uiColors.lightGray};
   }
 `;