@rpg-engine/long-bow 0.5.45 → 0.5.46

package/dist/stories/ChatRevamp.stories.d.ts

@@ -3,4 +3,5 @@ import { IChatRevampProps } from '../components/ChatRevamp/ChatRevamp';
 declare const meta: Meta;
 export default meta;
 export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, IChatRevampProps>;
-export declare const PrivateCharacters: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, IChatRevampProps>;
+export declare const Private: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, IChatRevampProps>;
+export declare const Trade: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, IChatRevampProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.5.45",
+  "version": "0.5.46",
   "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.8.92",
+    "@rpg-engine/shared": "^0.9.11",
     "dayjs": "^1.11.2",
     "font-awesome": "^4.7.0",
     "fs-extra": "^10.1.0",

package/src/components/Chat/Chat.tsx

@@ -1,16 +1,11 @@
-import { IChatMessage, IPrivateChatMessage } from '@rpg-engine/shared';
 import dayjs from 'dayjs';
 import React, { useEffect, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { RxPaperPlane } from 'react-icons/rx';
 import styled from 'styled-components';
+import { ChatMessage } from '../ChatRevamp/ChatRevamp';
 import { Column } from '../shared/Column';
 
-interface IEmitter {
-  _id: string;
-  name: string;
-}
-
 export interface IStyles {
   textColor?: string;
   buttonColor?: string;
@@ -19,8 +14,13 @@ export interface IStyles {
   height?: string;
 }
 
+export interface IEmitter {
+  _id: string;
+  name: string;
+}
+
 export interface IChatProps {
-  chatMessages: IChatMessage[] | IPrivateChatMessage[];
+  chatMessages: ChatMessage[];
   onSendChatMessage: (message: string) => void;
   onCloseButton: () => void;
   onFocus?: () => void;
@@ -80,9 +80,7 @@ export const Chat: React.FC<IChatProps> = ({
     } ${message}`;
   };
 
-  const onRenderChatMessages = (
-    chatMessages: (IChatMessage | IPrivateChatMessage)[]
-  ) => {
+  const onRenderChatMessages = (chatMessages: ChatMessage[]) => {
     return chatMessages?.length ? (
       chatMessages?.map((chatMessage, index) => (
         <Message
@@ -161,8 +159,8 @@ interface IButtonProps {
 }
 
 const ChatContainer = styled.div<IContainerProps>`
-  height: ${props => props.height};
-  width: ${({ width }) => width};
+  height: ${props => props.height} !important;
+  width: 100%;
   padding: 10px;
   background-color: rgba(0, 0, 0, 0.2);
   height: auto;
@@ -178,10 +176,7 @@ const TextField = styled.input`
 const MessagesContainer = styled.div`
   height: 70%;
   margin-bottom: 10px;
-  .chat-body {
-    max-height: auto;
-    overflow-y: auto;
-  }
+  overflow-y: auto;
 `;
 
 const Message = styled.div<IMessageProps>`

package/src/components/ChatRevamp/ChatRevamp.tsx

@@ -2,27 +2,28 @@ import {
   ICharacter,
   IChatMessage,
   IPrivateChatMessage,
+  ITradeChatMessage,
 } from '@rpg-engine/shared';
 import React, { useEffect, useState } from 'react';
+import { RxCross2, RxMagnifyingGlass } from 'react-icons/rx';
 import styled from 'styled-components';
 import { uiColors } from '../../constants/uiColors';
+import { uiFonts } from '../../constants/uiFonts';
 import { Chat, IStyles } from '../Chat/Chat';
 import { SearchCharacter } from './SearchCharacter';
 
-export interface ITabStyles {
-  width?: string;
-  height?: string;
-}
-
 export type PrivateChatCharacter = Pick<ICharacter, '_id' | 'name'>;
 
+export type ChatMessage =
+  | IChatMessage
+  | IPrivateChatMessage
+  | ITradeChatMessage;
 export interface IChatRevampProps {
-  chatMessages: IChatMessage[] | IPrivateChatMessage[];
+  chatMessages: ChatMessage[];
   onSendGlobalChatMessage: (message: string) => void;
   onCloseButton: () => void;
   onFocus?: () => void;
   onBlur?: () => void;
-  opacity?: number;
   styles?: IStyles;
   tabs: { label: string; id: string }[];
   activeTab: string;
@@ -31,6 +32,12 @@ export interface IChatRevampProps {
   onChangeCharacterName: (characterName: string) => void;
   onCharacterClick?: (character: PrivateChatCharacter) => void;
   onSendPrivateChatMessage: (message: string) => void;
+  recentChatCharacters?: PrivateChatCharacter[];
+  recentSelectedChatCharacterId?: string;
+  onPreviousChatCharacterClick?: (character: PrivateChatCharacter) => void;
+  onRemoveRecentChatCharacter?: (character: PrivateChatCharacter) => void;
+  unseenMessageCharacterIds?: string[];
+  onSendTradeMessage: (message: string) => void;
 }
 
 export const ChatRevamp = ({
@@ -47,14 +54,30 @@ export const ChatRevamp = ({
   privateChatCharacters,
   onCharacterClick,
   onSendPrivateChatMessage,
+  recentChatCharacters,
+  recentSelectedChatCharacterId = '',
+  onPreviousChatCharacterClick,
+  onRemoveRecentChatCharacter,
+  unseenMessageCharacterIds = [],
+  onSendTradeMessage,
 }: IChatRevampProps) => {
-  const [showSearchCharacter, setShowSearchCharacter] = useState(true);
+  const [showSearchCharacterUI, setShowSearchCharacterUI] = useState(true);
+  const [showRecentChats, setShowRecentChats] = useState(false);
 
   useEffect(() => {
-    setShowSearchCharacter(true);
+    setShowSearchCharacterUI(true);
   }, [activeTab]);
 
   const isPrivate = activeTab === 'private';
+  const isTrade = activeTab === 'trade';
+
+  const handlePreviousChatCharacterClick = (
+    character: PrivateChatCharacter
+  ) => {
+    if (!onPreviousChatCharacterClick) return;
+    onPreviousChatCharacterClick(character);
+    setShowSearchCharacterUI(false);
+  };
 
   return (
     <>
@@ -69,29 +92,83 @@ export const ChatRevamp = ({
           </Tab>
         ))}
       </TabContainer>
-      {isPrivate && showSearchCharacter ? (
-        <SearchCharacter
-          onFocus={onFocus}
-          onBlur={onBlur}
-          onChangeCharacterName={onChangeCharacterName}
-          styles={styles}
-          recentCharacters={privateChatCharacters}
-          setShowSearchCharacter={setShowSearchCharacter}
-          onCharacterClick={onCharacterClick}
-        />
-      ) : (
-        <Chat
-          chatMessages={chatMessages}
-          onSendChatMessage={
-            isPrivate ? onSendPrivateChatMessage : onSendGlobalChatMessage
-          }
-          sendMessage={true}
-          onCloseButton={onCloseButton}
-          styles={styles}
-          onFocus={onFocus}
-          onBlur={onBlur}
-        />
-      )}
+      <PrivateChatContainer
+        width={styles?.width || '80%'}
+        height={styles?.height || 'auto'}
+      >
+        <RecentChatTabContainer isPrivate={isPrivate} isOpen={showRecentChats}>
+          <RecentChatTopBar isOpen={showRecentChats}>
+            <BurgerIconContainer
+              onPointerDown={() => setShowRecentChats(t => !t)}
+              hasUnseenMessages={unseenMessageCharacterIds?.length > 0 || false}
+            >
+              <BurgerLineIcon></BurgerLineIcon>
+              <BurgerLineIcon></BurgerLineIcon>
+              <BurgerLineIcon></BurgerLineIcon>
+            </BurgerIconContainer>
+            {showRecentChats && (
+              <SearchButton
+                onPointerDown={() => setShowSearchCharacterUI(true)}
+              >
+                <RxMagnifyingGlass size={16} color={uiColors.white} />
+              </SearchButton>
+            )}
+          </RecentChatTopBar>
+
+          <RecentChatLogContainer isOpen={showRecentChats}>
+            {recentChatCharacters?.map(character => (
+              <ListElementContainer key={character._id}>
+                <ListElement
+                  active={character._id === recentSelectedChatCharacterId}
+                  onPointerDown={() =>
+                    handlePreviousChatCharacterClick(character)
+                  }
+                >
+                  <StatusDot
+                    isUnseen={
+                      unseenMessageCharacterIds?.includes(character._id) ||
+                      false
+                    }
+                  />
+                  {character.name}
+                </ListElement>
+                <CloseButton
+                  onPointerDown={() => onRemoveRecentChatCharacter?.(character)}
+                >
+                  <RxCross2 size={16} />
+                </CloseButton>
+              </ListElementContainer>
+            ))}
+          </RecentChatLogContainer>
+        </RecentChatTabContainer>
+        {isPrivate && showSearchCharacterUI ? (
+          <SearchCharacter
+            onFocus={onFocus}
+            onBlur={onBlur}
+            onChangeCharacterName={onChangeCharacterName}
+            styles={styles}
+            recentCharacters={privateChatCharacters}
+            setShowSearchCharacter={setShowSearchCharacterUI}
+            onCharacterClick={onCharacterClick}
+          />
+        ) : (
+          <Chat
+            chatMessages={chatMessages}
+            onSendChatMessage={
+              isPrivate
+                ? onSendPrivateChatMessage
+                : isTrade
+                ? onSendTradeMessage
+                : onSendGlobalChatMessage
+            }
+            sendMessage={true}
+            onCloseButton={onCloseButton}
+            styles={styles}
+            onFocus={onFocus}
+            onBlur={onBlur}
+          />
+        )}
+      </PrivateChatContainer>
     </>
   );
 };
@@ -119,3 +196,136 @@ const Tab = styled.button<{ active: boolean }>`
     props.active ? uiColors.orange : 'transparent'};
   color: ${props => (props.active ? 'white' : uiColors.raisinBlack)};
 `;
+
+const PrivateChatContainer = styled.div<{ width: string; height: string }>`
+  width: ${({ width }) => width};
+  min-height: ${({ height }) => height} !important;
+  padding: 10px;
+  background-color: rgba(0, 0, 0, 0.2);
+  height: auto;
+  display: flex;
+  gap: 10px;
+`;
+
+const RecentChatTabContainer = styled.div<{
+  isPrivate: boolean;
+  isOpen: boolean;
+}>`
+  display: ${props => (props.isPrivate ? 'flex' : 'none')};
+  flex-direction: column;
+  border-right: 1px solid ${uiColors.gray};
+  outline: none;
+  width: ${props => (props.isOpen ? '20%' : '30px')} !important;
+  transition: width 0.3s ease-in-out;
+  overflow: hidden;
+
+  @media (max-width: 768px) {
+    width: ${props => (props.isOpen ? '40%' : '30px')} !important;
+  }
+`;
+
+const RecentChatTopBar = styled.div<{ isOpen: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 30px;
+`;
+
+const SearchButton = styled.button`
+  border: none;
+  background-color: transparent;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 2px;
+  padding: 4px;
+  position: relative;
+`;
+
+const BurgerIconContainer = styled.button<{ hasUnseenMessages?: boolean }>`
+  border: none;
+  background-color: transparent;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  padding: 4px;
+  gap: 2px;
+  position: relative;
+
+  &:after {
+    content: '';
+    width: 6px;
+    height: 6px;
+    position: absolute;
+    top: 0;
+    right: 2px;
+    border-radius: 50%;
+    background-color: ${uiColors.lightGreen};
+    display: ${props => (props.hasUnseenMessages ? 'block' : 'none')};
+  }
+`;
+
+const BurgerLineIcon = styled.span`
+  width: 1rem;
+  height: 2px;
+  background-color: #ffffff;
+`;
+
+const RecentChatLogContainer = styled.div<{ isOpen: boolean }>`
+  border: none;
+  list-style: none;
+  display: flex;
+  opacity: ${props => (props.isOpen ? 1 : 0)};
+  flex-direction: column;
+  gap: 0.5rem;
+  transition: opacity 0.3s ease-in-out;
+  padding: 0;
+  margin: 0;
+  flex: 1;
+`;
+
+const ListElementContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const ListElement = styled.button<{ active: boolean }>`
+  margin: 0.5rem 0 !important;
+  font-size: ${uiFonts.size.small} !important;
+  padding: 2px;
+  all: unset;
+  color: ${props => (props.active ? uiColors.yellow : uiColors.white)};
+  width: 100%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+
+  &:hover {
+    color: #ff0;
+  }
+`;
+
+const StatusDot = styled.span<{ isUnseen: boolean }>`
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: ${props =>
+    props.isUnseen ? uiColors.lightGreen : uiColors.gray};
+  display: inline-block;
+  margin-right: 6px;
+`;
+
+const CloseButton = styled.button`
+  all: unset;
+  font-size: ${uiFonts.size.xxsmall};
+  margin: 0 0.5rem;
+  transition: all 0.2s ease-in-out;
+  background-color: ${uiColors.red};
+  color: ${uiColors.white};
+  &:hover {
+    background-color: ${uiColors.white};
+    color: ${uiColors.red};
+  }
+`;

package/src/components/ChatRevamp/SearchCharacter.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { RxMagnifyingGlass } from 'react-icons/rx';
 import styled from 'styled-components';
 import { uiColors } from '../../constants/uiColors';
@@ -33,6 +33,17 @@ export const SearchCharacter = ({
   },
 }: ISearchCharacterProps) => {
   const [characterName, setCharacterName] = useState('');
+  const searchCharacterRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+     const timer = setTimeout(() => {
+      if (searchCharacterRef.current) {
+        searchCharacterRef.current.focus();
+      }
+    }, 100);
+
+    return () => clearTimeout(timer);
+  }, []);
 
   const handleSubmit = (event: React.SyntheticEvent<HTMLFormElement>) => {
     event.preventDefault();
@@ -47,34 +58,33 @@ export const SearchCharacter = ({
     setCharacterName('');
     onCharacterClick(character);
     setShowSearchCharacter(false);
-  };
+  };  
 
   return (
-    <SearchCharacterContainer
-      width={styles?.width || '80%'}
-      height={styles?.height || 'auto'}
-    >
+    <SearchContainer>
       <Form onSubmit={handleSubmit}>
         <Column flex={70}>
           <TextField
             value={characterName}
-            id="inputCharacterName"
+            ref={searchCharacterRef}
+            id="characterName"
+            name='characterName'
             onChange={e => {
               setCharacterName(e.target.value);
               onChangeCharacterName(e.target.value);
             }}
+            placeholder='Search for a character...'
             height={20}
             type="text"
             autoComplete="off"
             onFocus={onFocus}
             onBlur={onBlur}
             onPointerDown={onFocus}
-            autoFocus
-            placeholder="Type a character name..."
-          />
+           />
         </Column>
         <Column justifyContent="flex-end">
           <SearchButton
+            type='submit'
             buttonColor={styles?.buttonColor || '#005b96'}
             buttonBackgroundColor={
               styles?.buttonBackgroundColor || 'rgba(0,0,0,.5)'
@@ -96,27 +106,19 @@ export const SearchCharacter = ({
           ))}
         </ListContainer>
       )}
-    </SearchCharacterContainer>
+      </SearchContainer>
   );
 };
 
-interface IContainerProps {
-  width: string;
-  height: string;
-}
 
 interface IButtonProps {
   buttonColor: string;
   buttonBackgroundColor: string;
 }
 
-const SearchCharacterContainer = styled.div<IContainerProps>`
-  height: ${props => props.height};
-  width: ${({ width }) => width};
-  padding: 10px;
-  background-color: rgba(0, 0, 0, 0.2);
-  height: auto;
-`;
+const SearchContainer = styled.div`
+width: 100%;
+`
 
 const Form = styled.form`
   display: flex;
@@ -150,6 +152,7 @@ const ListContainer = styled.ul`
 const ListElement = styled.li`
   margin: 0.5rem 0 !important;
   font-size: ${uiFonts.size.small};
+  padding: 0.5rem 2px;
 
   &:hover {
     color: #ff0;

package/src/components/Item/Inventory/ItemContainer.tsx

@@ -66,6 +66,8 @@ type onDragStart =
   | undefined;
 type onDragEnd = ((quantity?: number) => void) | undefined;
 
+const MIN_SLOTS_FOR_SCROLL = 20;
+
 export const ItemContainer: React.FC<IItemContainerProps> = ({
   itemContainer,
   onClose,
@@ -241,7 +243,11 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
               atlasJSON={atlasJSON}
             />
           )}
-        <ItemsContainer className="item-container-body" ref={containerRef}>
+        <ItemsContainer
+          className="item-container-body"
+          ref={containerRef}
+          isScrollable={itemContainer.slotQty > MIN_SLOTS_FOR_SCROLL}
+        >
           {onRenderSlots()}
         </ItemsContainer>
       </SlotsContainer>
@@ -255,12 +261,16 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
   );
 };
 
-const ItemsContainer = styled.div`
+interface IItemsContainerProps {
+  isScrollable: boolean;
+}
+
+const ItemsContainer = styled.div<IItemsContainerProps>`
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   max-height: 270px;
-  overflow-y: auto;
+  overflow-y: ${({ isScrollable }) => (isScrollable ? 'scroll' : 'hidden')};
   overflow-x: hidden;
   width: 415px;
 `;

package/src/components/Item/Inventory/itemContainerHelper.ts

@@ -76,6 +76,17 @@ export const generateContextMenu = (
         text: 'Deposit',
       });
     }
+
+    const contextActionMenuDontHaveUseWith = !contextActionMenu.find(action =>
+      action.text.toLowerCase().includes('use with')
+    );
+
+    if (item.hasUseWith && contextActionMenuDontHaveUseWith) {
+      contextActionMenu.push({
+        id: ItemSocketEvents.UseWith,
+        text: ItemSocketEvents.UseWith,
+      });
+    }
   }
   if (itemContainerType === ItemContainerType.Equipment) {
     switch (item.type) {

package/src/index.tsx

@@ -32,7 +32,6 @@ export * from './components/RPGUI/RPGUIContainer';
 export * from './components/RPGUI/RPGUIRoot';
 export * from './components/RadioButton';
 export * from './components/RangeSlider';
-export * from './components/ShopModal/ShopModal';
 export * from './components/Shortcuts/Shortcuts';
 export * from './components/SkillProgressBar';
 export * from './components/SkillsContainer';
@@ -45,4 +44,3 @@ export * from './components/itemSelector/ItemSelector';
 export * from './components/shared/SpriteFromAtlas';
 export * from './components/typography/DynamicText';
 export { useEventListener } from './hooks/useEventListener';
-

package/src/mocks/itemContainer.mocks.ts

@@ -5,7 +5,7 @@ import {
   ItemSlotType,
   ItemSubType,
   ItemType,
-  UserAccountTypes
+  UserAccountTypes,
 } from '@rpg-engine/shared';
 
 export const items: IItem[] = [
@@ -586,7 +586,7 @@ export const itemContainerMock = (
       _id: '629ba0b6fe3f43002f58f23b',
       name: 'Item Container',
       owner: '629ba0b6fe3f43002f58f23b',
-      slotQty: 60,
+      slotQty: 20,
       slots: {
         0: items[0],
         1: items[1],
@@ -614,4 +614,4 @@ export const itemContainerMock = (
       ...props,
     };
   }
-}
+};

package/src/stories/ChatRevamp.stories.tsx

@@ -202,6 +202,7 @@ const chatMessagesMock = [
 const tabsMock = [
   { label: 'Global', id: 'global' },
   { label: 'Private', id: 'private' },
+  { label: 'Trade', id: 'trade' },
 ];
 
 const recentPrivateChatCharactersMock = [
@@ -221,7 +222,6 @@ Default.args = {
   onSendGlobalChatMessage: () => {},
   onChangeCharacterName: () => {},
   chatMessages: chatMessagesMock,
-  opacity: 0.5,
   styles: { width: `calc(100% - 0.5rem * 2)`, height: '200px' },
   onCloseButton: () => console.log('closing chat...'),
   tabs: tabsMock,
@@ -229,15 +229,15 @@ Default.args = {
   activeTab: 'global',
   onChangeTab: () => {},
   onSendPrivateChatMessage: () => {},
+  onSendTradeMessage: () => {},
 };
 
-export const PrivateCharacters = Template.bind({});
+export const Private = Template.bind({});
 
-PrivateCharacters.args = {
+Private.args = {
   onSendGlobalChatMessage: () => {},
   onChangeCharacterName: () => {},
   chatMessages: chatMessagesMock,
-  opacity: 0.5,
   styles: { width: `calc(100% - 0.5rem * 2)`, height: '200px' },
   onCloseButton: () => {},
   tabs: tabsMock,
@@ -245,4 +245,23 @@ PrivateCharacters.args = {
   activeTab: 'private',
   onChangeTab: () => {},
   onSendPrivateChatMessage: () => {},
+  recentChatCharacters: recentPrivateChatCharactersMock,
+  recentSelectedChatCharacterId: recentPrivateChatCharactersMock[0]._id,
+  unseenMessageCharacterIds: [recentPrivateChatCharactersMock[0]._id],
+  onSendTradeMessage: () => {},
+};
+
+export const Trade = Template.bind({});
+
+Trade.args = {
+  onSendGlobalChatMessage: () => {},
+  onChangeCharacterName: () => {},
+  chatMessages: chatMessagesMock,
+  styles: { width: `calc(100% - 0.5rem * 2)`, height: '200px' },
+  onCloseButton: () => {},
+  tabs: tabsMock,
+  privateChatCharacters: recentPrivateChatCharactersMock,
+  activeTab: 'trade',
+  onChangeTab: () => {},
+  onSendTradeMessage: () => {},
 };