@rpg-engine/long-bow 0.6.65 → 0.6.68

package/package.json

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

package/src/components/Friends/FriendList.tsx

@@ -1,15 +1,18 @@
-import { ICharacter } from '@rpg-engine/shared';
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { uiColors } from '../../constants/uiColors';
-import { uiFonts } from '../../constants/uiFonts';
 import { Button, ButtonTypes } from '../Button';
-import { DraggableContainer } from '../DraggableContainer';
-import { RPGUIContainerTypes } from '../RPGUI/RPGUIContainer';
-import { SearchFriend } from './SearchFriend';
 
+import { ICharacter } from '@rpg-engine/shared';
+import {
+  ActionButtons,
+  Table,
+  TableCell,
+  TableHeader,
+  TableRow,
+} from '../Table/Table';
+import { SearchFriend } from './SearchFriend';
 export type IFriend = Pick<ICharacter, 'name' | '_id' | 'isOnline'>;
-
 interface IFriendListProps {
   scale?: number;
   friends: IFriend[];
@@ -26,33 +29,23 @@ interface IFriendListProps {
   onRejectRequest: (character: IFriend) => void;
 }
 
-export const FriendList = (props: IFriendListProps) => {
+export const FriendList: React.FC<IFriendListProps> = ({
+  friends,
+  friendRequests,
+  searchedCharacters,
+  onFocus,
+  onBlur,
+  onSearch,
+  onAcceptRequest,
+  onSendFriendRequest,
+  onRemoveFriend,
+  onOpenPrivateMessage,
+  onRejectRequest,
+}) => {
   const [isAddFriendUI, setIsAddFriendUI] = useState(false);
-  const {
-    scale,
-    friends,
-    friendRequests,
-    searchedCharacters,
-    onBlur,
-    onFocus,
-    onClose,
-    onSearch,
-    onAcceptRequest,
-    onSendFriendRequest,
-    onRemoveFriend,
-    onOpenPrivateMessage,
-    onRejectRequest,
-  } = props;
+
   return (
-    <DraggableContainer
-      type={RPGUIContainerTypes.Framed}
-      onCloseButton={() => {
-        if (onClose) onClose();
-      }}
-      width="800px"
-      cancelDrag="#FriendListContainer, .rpgui-dropdown-imp, input, .empty-slot, button"
-      scale={scale}
-    >
+    <ListWrapper>
       {isAddFriendUI ? (
         <SearchFriend
           searchedCharacters={searchedCharacters}
@@ -65,79 +58,70 @@ export const FriendList = (props: IFriendListProps) => {
           onFocus={onFocus}
         />
       ) : (
-        <ListContainer>
-          <FriendsTitle>Friends</FriendsTitle>
-          {friends.map(friend => (
-            <ListElement key={friend._id}>
-              <div>
-                <IsOnlineBadge $isOnline={friend.isOnline} />
-                {friend.name}
-              </div>
-
-              <MessageAndDeleteContainer>
-                <Button
-                  buttonType={ButtonTypes.RPGUIButton}
-                  onPointerDown={() => onOpenPrivateMessage(friend)}
-                >
-                  Message
-                </Button>
-                <Button
-                  buttonType={ButtonTypes.RPGUIButton}
-                  onPointerDown={() => onRemoveFriend(friend)}
-                >
-                  Remove
-                </Button>
-              </MessageAndDeleteContainer>
-            </ListElement>
-          ))}
-        </ListContainer>
+        <>
+          <ScrollableArea>
+            <Table>
+              <thead>
+                <TableRow>
+                  <TableHeader>Online</TableHeader>
+                  <TableHeader>Name</TableHeader>
+                  <TableHeader>Actions</TableHeader>
+                </TableRow>
+              </thead>
+              <tbody>
+                {friends.map(friend => (
+                  <TableRow key={friend._id}>
+                    <TableCell>
+                      <IsOnlineBadge $isOnline={friend.isOnline} />
+                    </TableCell>
+                    <TableCell>{friend.name}</TableCell>
+                    <TableCell>
+                      <ActionButtons>
+                        <UserAction
+                          color={uiColors.yellow}
+                          onClick={() => onOpenPrivateMessage(friend)}
+                        >
+                          Chat
+                        </UserAction>
+                        <UserAction
+                          color={uiColors.red}
+                          onClick={() => onRemoveFriend(friend)}
+                        >
+                          Remove
+                        </UserAction>
+                      </ActionButtons>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </tbody>
+            </Table>
+          </ScrollableArea>
+        </>
       )}
 
       <ButtonContainer>
         <Button
           buttonType={ButtonTypes.RPGUIButton}
-          onClick={() => setIsAddFriendUI(t => !t)}
+          onClick={() => setIsAddFriendUI(prev => !prev)}
         >
           {isAddFriendUI ? 'Back' : 'Add New Friend'}
         </Button>
       </ButtonContainer>
-    </DraggableContainer>
+    </ListWrapper>
   );
 };
 
-const FriendsTitle = styled.h2`
-  font-size: ${uiFonts.size.medium};
-  margin: 0;
-  padding: 0;
-  text-align: center;
-`;
-
-const ListContainer = styled.ul`
-  border: none;
-  overflow-y: scroll;
-  list-style: none;
-  padding: 0;
-  width: 100%;
-  height: 50vh;
-
-  @media (max-width: 768px) {
-    max-height: 90wh;
-  }
-`;
-
-const ListElement = styled.li`
-  margin: 0.5rem 0 !important;
-  font-size: ${uiFonts.size.small};
-  padding: 0.5rem 4px;
+// Styled components for FriendList UI
+const ListWrapper = styled.div`
+  margin-top: 1rem;
+  max-height: 350px;
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border-radius: 4px;
+  flex-direction: column;
+`;
 
-  & div {
-    display: flex;
-    align-items: center;
-  }
+const ScrollableArea = styled.div`
+  overflow-y: auto;
+  max-height: 300px; /* Adjust this value based on your layout */
 `;
 
 const IsOnlineBadge = styled.div<{ $isOnline: boolean }>`
@@ -157,8 +141,16 @@ const ButtonContainer = styled.div`
   margin-top: 1rem;
 `;
 
-const MessageAndDeleteContainer = styled.div`
-  display: flex;
-  justify-content: space-between;
-  gap: 0.5rem;
+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/PartySystem/PartyManager/PartyManager.tsx

@@ -33,12 +33,6 @@ export const PartyManager: React.FC<IPartyManagerProps> = ({
 
   return (
     <>
-      <Wrapper>
-        <div style={{ width: '100%' }}>
-          <Title>Party Dashboard</Title>
-          <hr className="golden" />
-        </div>
-      </Wrapper>
       <RowsWrapper className="partyRows">
         {partyRows && sortedMembers.length ? (
           sortedMembers.map(partyRow => (
@@ -79,17 +73,6 @@ const YellowText = styled.span`
   color: ${uiColors.yellow} !important;
 `;
 
-const Wrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-`;
-
-const Title = styled.h1`
-  font-size: 0.6rem;
-  color: ${uiColors.yellow} !important;
-`;
-
 const NotInParty = styled.h1`
   font-size: 0.6rem;
   margin: auto;

package/src/components/Table/Table.tsx

@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+import { uiColors } from '../../constants/uiColors';
+
+export const Table = styled.table`
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 1rem;
+`;
+
+export const TableRow = styled.tr`
+  &:nth-child(even) {
+    background-color: rgba(255, 255, 255, 0.05) !important;
+  }
+`;
+
+export const TableHeader = styled.th`
+  text-align: left;
+  padding: 0.5rem;
+  color: ${uiColors.yellow} !important;
+  border-bottom: 1px solid ${uiColors.lightGray};
+`;
+
+export const TableCell = styled.td`
+  padding: 0.5rem;
+  color: ${uiColors.white};
+  border-bottom: 1px solid ${uiColors.lightGray};
+`;
+
+export const ActionButtons = styled.div`
+  display: flex;
+  gap: 10px;
+  align-items: center;
+`;

package/src/index.tsx

@@ -53,4 +53,6 @@ export * from './components/Truncate';
 export * from './components/Tutorial/TutorialStepper';
 export * from './components/typography/DynamicText';
 
+export * from './components/Table/Table';
+
 export { useEventListener } from './hooks/useEventListener';