@rpg-engine/long-bow 0.5.47 → 0.5.49

package/dist/stories/FriendList.stories.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { Meta } from "@storybook/react";
+declare const meta: Meta;
+export default meta;
+export declare const Default: () => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.5.47",
+  "version": "0.5.49",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -83,7 +83,7 @@
   },
   "dependencies": {
     "@rollup/plugin-image": "^2.1.1",
-    "@rpg-engine/shared": "^0.9.13",
+    "@rpg-engine/shared": "^0.9.19",
     "dayjs": "^1.11.2",
     "font-awesome": "^4.7.0",
     "fs-extra": "^10.1.0",

package/src/components/ChatRevamp/ChatRevamp.tsx

@@ -4,7 +4,7 @@ import {
   IPrivateChatMessage,
   ITradeChatMessage,
 } from '@rpg-engine/shared';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { RxCross2, RxMagnifyingGlass } from 'react-icons/rx';
 import styled from 'styled-components';
 import { uiColors } from '../../constants/uiColors';
@@ -38,6 +38,9 @@ export interface IChatRevampProps {
   onRemoveRecentChatCharacter?: (character: PrivateChatCharacter) => void;
   unseenMessageCharacterIds?: string[];
   onSendTradeMessage: (message: string) => void;
+  searchCharacterUI: boolean;
+  hideSearchCharacterUI: () => void;
+  showSearchCharacterUI: () => void;
 }
 
 export const ChatRevamp = ({
@@ -60,14 +63,12 @@ export const ChatRevamp = ({
   onRemoveRecentChatCharacter,
   unseenMessageCharacterIds = [],
   onSendTradeMessage,
+  searchCharacterUI,
+  hideSearchCharacterUI,
+  showSearchCharacterUI,
 }: IChatRevampProps) => {
-  const [showSearchCharacterUI, setShowSearchCharacterUI] = useState(true);
   const [showRecentChats, setShowRecentChats] = useState(false);
 
-  useEffect(() => {
-    setShowSearchCharacterUI(true);
-  }, [activeTab]);
-
   const isPrivate = activeTab === 'private';
   const isTrade = activeTab === 'trade';
 
@@ -76,7 +77,7 @@ export const ChatRevamp = ({
   ) => {
     if (!onPreviousChatCharacterClick) return;
     onPreviousChatCharacterClick(character);
-    setShowSearchCharacterUI(false);
+    hideSearchCharacterUI();
   };
 
   return (
@@ -107,9 +108,7 @@ export const ChatRevamp = ({
               <BurgerLineIcon></BurgerLineIcon>
             </BurgerIconContainer>
             {showRecentChats && (
-              <SearchButton
-                onPointerDown={() => setShowSearchCharacterUI(true)}
-              >
+              <SearchButton onPointerDown={() => showSearchCharacterUI()}>
                 <RxMagnifyingGlass size={16} color={uiColors.white} />
               </SearchButton>
             )}
@@ -141,14 +140,14 @@ export const ChatRevamp = ({
             ))}
           </RecentChatLogContainer>
         </RecentChatTabContainer>
-        {isPrivate && showSearchCharacterUI ? (
+        {isPrivate && searchCharacterUI ? (
           <SearchCharacter
             onFocus={onFocus}
             onBlur={onBlur}
             onChangeCharacterName={onChangeCharacterName}
             styles={styles}
             recentCharacters={privateChatCharacters}
-            setShowSearchCharacter={setShowSearchCharacterUI}
+            hideSearchCharacterUI={hideSearchCharacterUI}
             onCharacterClick={onCharacterClick}
           />
         ) : (

package/src/components/ChatRevamp/SearchCharacter.tsx

@@ -13,8 +13,8 @@ interface ISearchCharacterProps {
   onChangeCharacterName: (characterName: string) => void;
   styles?: IStyles;
   recentCharacters?: PrivateChatCharacter[];
-  setShowSearchCharacter: (show: boolean) => void;
   onCharacterClick?: (character: PrivateChatCharacter) => void;
+  hideSearchCharacterUI: () => void;
 }
 
 export const SearchCharacter = ({
@@ -22,7 +22,7 @@ export const SearchCharacter = ({
   onBlur,
   onFocus,
   recentCharacters,
-  setShowSearchCharacter,
+  hideSearchCharacterUI,
   onCharacterClick,
   styles = {
     textColor: '#c65102',
@@ -57,8 +57,8 @@ export const SearchCharacter = ({
     if (!onCharacterClick) return;
     setCharacterName('');
     onCharacterClick(character);
-    setShowSearchCharacter(false);
-  };  
+    hideSearchCharacterUI();
+  };
 
   return (
     <SearchContainer>

package/src/components/Friends/FriendList.tsx

@@ -0,0 +1,164 @@
+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';
+
+export type IFriend = Pick<ICharacter, 'name' | '_id' | 'isOnline'>;
+
+interface IFriendListProps {
+  scale?: number;
+  friends: IFriend[];
+  friendRequests: IFriend[];
+  searchedCharacters: IFriend[];
+  onFocus?: () => void;
+  onBlur?: () => void;
+  onClose: () => void;
+  onOpenPrivateMessage: (character: IFriend) => void;
+  onRemoveFriend: (character: IFriend) => void;
+  onSendFriendRequest: (character: IFriend) => void;
+  onSearch: (characterName: string) => void;
+  onAcceptRequest: (character: IFriend) => void;
+  onRejectRequest: (character: IFriend) => void;
+}
+
+export const FriendList = (props: IFriendListProps) => {
+  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}
+    >
+      {isAddFriendUI ? (
+        <SearchFriend
+          searchedCharacters={searchedCharacters}
+          onSendFriendRequest={onSendFriendRequest}
+          onAcceptRequest={onAcceptRequest}
+          onRejectRequest={onRejectRequest}
+          friendRequests={friendRequests}
+          onSearch={onSearch}
+          onBlur={onBlur}
+          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>
+      )}
+
+      <ButtonContainer>
+        <Button
+          buttonType={ButtonTypes.RPGUIButton}
+          onClick={() => setIsAddFriendUI(t => !t)}
+        >
+          {isAddFriendUI ? 'Back' : 'Add New Friend'}
+        </Button>
+      </ButtonContainer>
+    </DraggableContainer>
+  );
+};
+
+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;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 4px;
+
+  & div {
+    display: flex;
+    align-items: center;
+  }
+`;
+
+const IsOnlineBadge = styled.div<{ $isOnline: boolean }>`
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background-color: ${({ $isOnline }) =>
+    $isOnline ? uiColors.lightGreen : uiColors.red};
+  margin-right: 1rem;
+`;
+
+const ButtonContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  margin-top: 1rem;
+`;
+
+const MessageAndDeleteContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  gap: 0.5rem;
+`;

package/src/components/Friends/SearchFriend.tsx

@@ -0,0 +1,157 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { uiFonts } from '../../constants/uiFonts';
+import { Button, ButtonTypes } from '../Button';
+import { Column } from '../shared/Column';
+import type { IFriend } from './FriendList';
+
+interface ISearchFriendProp {
+  searchedCharacters: IFriend[];
+  friendRequests: IFriend[];
+  onFocus?: () => void;
+  onBlur?: () => void;
+  onSearch: (characterName: string) => void;
+  onSendFriendRequest: (character: IFriend) => void;
+  onAcceptRequest: (character: IFriend) => void;
+  onRejectRequest: (character: IFriend) => void;
+}
+
+export const SearchFriend = (props: ISearchFriendProp) => {
+  const {
+    searchedCharacters,
+    friendRequests,
+    onBlur,
+    onFocus,
+    onSearch,
+    onSendFriendRequest,
+    onAcceptRequest,
+    onRejectRequest,
+  } = props;
+  const [characterName, setCharacterName] = useState('');
+
+  const handleSubmit = (event: React.SyntheticEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    if (!characterName || characterName.trim() === '') return;
+    onSearch(characterName);
+  };
+
+  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>
+      <ListContainer>
+        {searchedCharacters.map(character => (
+          <ListElement key={character._id}>
+            <p>{character.name}</p>
+
+            <Button
+              buttonType={ButtonTypes.RPGUIButton}
+              onPointerDown={() => onSendFriendRequest(character)}
+            >
+              Add Friend
+            </Button>
+          </ListElement>
+        ))}
+      </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`
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  margin-top: 1rem;
+`;
+
+const TextField = styled.input`
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.25) !important;
+  border: none !important;
+  max-height: 28px !important;
+`;
+
+const ListContainer = styled.ul`
+  width: 100%;
+  c4height: 50vh;
+  border: none;
+  overflow-y: scroll;
+  list-style: none;
+  padding: 0;
+
+  @media (max-width: 768px) {
+    max-height: 90wh;
+  }
+`;
+
+const ListElement = styled.li`
+  margin: 0.5rem 0 !important;
+  font-size: ${uiFonts.size.small};
+  padding: 0.5rem 2px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+const FriendRequestTitle = styled.h3`
+  font-size: ${uiFonts.size.small} !important;
+  margin-top: 0.5rem !important;
+  text-align: center;
+  gap: 0.5rem;
+`;
+
+const AcceptRejectButtonContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  gap: 0.5rem;
+`;

package/src/components/SkillsContainer.tsx

@@ -46,6 +46,7 @@ const skillProps = {
     color: uiColors.blue,
     values: {
       fishing: 'foods/fish.png',
+      farming: 'foods/cabbage.png',
       mining: 'crafting-resources/iron-ingot.png',
       lumberjacking: 'crafting-resources/greater-wooden-log.png',
       blacksmithing: 'hammers/hammer.png',
@@ -74,6 +75,7 @@ const skillNameMap: SkillMap = {
   shielding: 'Shielding',
   dagger: 'Dagger',
   fishing: 'Fishing',
+  farming: 'Farming',
   mining: 'Mining',
   lumberjacking: 'Lumberjacking',
   blacksmithing: 'Blacksmithing',

package/src/index.tsx

@@ -10,6 +10,7 @@ export * from './components/DraggableContainer';
 export * from './components/Dropdown';
 export * from './components/DropdownSelectorContainer';
 export * from './components/Equipment/EquipmentSet';
+export * from './components/Friends/FriendList';
 export * from './components/HistoryDialog';
 export * from './components/ImageCarousel/ImageCarousel';
 export * from './components/Input';

package/src/mocks/skills.mocks.ts

@@ -13,7 +13,7 @@ export const skillMock = {
     level: 2,
     skillPoints: 22,
     skillPointsToNextLevel: getSPForLevel(2.4),
-    buffAndDebuff: -10
+    buffAndDebuff: -10,
   },
   magicResistance: {
     type: SkillType.BasicAttributes,
@@ -88,6 +88,12 @@ export const skillMock = {
     skillPoints: 5,
     skillPointsToNextLevel: 80,
   },
+  farming: {
+    type: SkillType.Gathering,
+    level: 1,
+    skillPoints: 5,
+    skillPointsToNextLevel: 80,
+  },
   mining: {
     type: SkillType.Crafting,
     level: 1,

package/src/stories/FriendList.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta } from "@storybook/react";
+import React from 'react';
+import { FriendList } from "../components/Friends/FriendList";
+import { RPGUIRoot } from "../components/RPGUI/RPGUIRoot";
+
+const meta :Meta = {
+  title: 'Friend System/Friend List',
+  component: FriendList
+};
+
+export default meta;
+
+
+const friends = Array.from({ length: 15 }, (_, i) => ({
+  _id: i.toString(),
+  name: `Friend ${i}`,
+  isOnline: i % 2 === 0,
+}));
+
+const characters = Array.from({ length: 1 }, (_, i) => ({
+  _id: i.toString(),
+  name: `Character ${i}`,
+  isOnline: i % 2 === 0,
+}));
+
+const Template = () => {
+  return <RPGUIRoot>
+   <FriendList
+    friends={friends}
+    friendRequests={characters}
+    searchedCharacters={characters}
+    onClose={() => console.log('close')}
+    onOpenPrivateMessage={(character) => console.log(character)}
+    onRemoveFriend={(character) => console.log(character)}
+    onSendFriendRequest={(character) => console.log(character)}
+    onSearch={(characterName) => console.log(characterName)}
+    onAcceptRequest={(character) => console.log(character)}
+    onRejectRequest={(character) => console.log(character)}
+    onBlur={() => console.log('blur')}
+    onFocus={() => console.log('focus')}
+/>
+  </RPGUIRoot>;
+}
+
+
+export const Default = Template.bind({});