@rpg-engine/long-bow 0.5.44 → 0.5.45

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

@@ -3,5 +3,4 @@ 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 Private: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, IChatRevampProps>;
-export declare const Trade: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, IChatRevampProps>;
+export declare const PrivateCharacters: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, IChatRevampProps>;

package/package.json

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

package/src/components/Chat/Chat.tsx

@@ -1,11 +1,16 @@
+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;
@@ -14,13 +19,8 @@ export interface IStyles {
   height?: string;
 }
 
-export interface IEmitter {
-  _id: string;
-  name: string;
-}
-
 export interface IChatProps {
-  chatMessages: ChatMessage[];
+  chatMessages: IChatMessage[] | IPrivateChatMessage[];
   onSendChatMessage: (message: string) => void;
   onCloseButton: () => void;
   onFocus?: () => void;
@@ -80,7 +80,9 @@ export const Chat: React.FC<IChatProps> = ({
     } ${message}`;
   };
 
-  const onRenderChatMessages = (chatMessages: ChatMessage[]) => {
+  const onRenderChatMessages = (
+    chatMessages: (IChatMessage | IPrivateChatMessage)[]
+  ) => {
     return chatMessages?.length ? (
       chatMessages?.map((chatMessage, index) => (
         <Message
@@ -159,8 +161,8 @@ interface IButtonProps {
 }
 
 const ChatContainer = styled.div<IContainerProps>`
-  height: ${props => props.height} !important;
-  width: 100%;
+  height: ${props => props.height};
+  width: ${({ width }) => width};
   padding: 10px;
   background-color: rgba(0, 0, 0, 0.2);
   height: auto;
@@ -176,7 +178,10 @@ const TextField = styled.input`
 const MessagesContainer = styled.div`
   height: 70%;
   margin-bottom: 10px;
-  overflow-y: auto;
+  .chat-body {
+    max-height: auto;
+    overflow-y: auto;
+  }
 `;
 
 const Message = styled.div<IMessageProps>`

package/src/components/ChatRevamp/ChatRevamp.tsx

@@ -2,28 +2,27 @@ 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: ChatMessage[];
+  chatMessages: IChatMessage[] | IPrivateChatMessage[];
   onSendGlobalChatMessage: (message: string) => void;
   onCloseButton: () => void;
   onFocus?: () => void;
   onBlur?: () => void;
+  opacity?: number;
   styles?: IStyles;
   tabs: { label: string; id: string }[];
   activeTab: string;
@@ -32,12 +31,6 @@ 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 = ({
@@ -54,30 +47,14 @@ export const ChatRevamp = ({
   privateChatCharacters,
   onCharacterClick,
   onSendPrivateChatMessage,
-  recentChatCharacters,
-  recentSelectedChatCharacterId = '',
-  onPreviousChatCharacterClick,
-  onRemoveRecentChatCharacter,
-  unseenMessageCharacterIds = [],
-  onSendTradeMessage,
 }: IChatRevampProps) => {
-  const [showSearchCharacterUI, setShowSearchCharacterUI] = useState(true);
-  const [showRecentChats, setShowRecentChats] = useState(false);
+  const [showSearchCharacter, setShowSearchCharacter] = useState(true);
 
   useEffect(() => {
-    setShowSearchCharacterUI(true);
+    setShowSearchCharacter(true);
   }, [activeTab]);
 
   const isPrivate = activeTab === 'private';
-  const isTrade = activeTab === 'trade';
-
-  const handlePreviousChatCharacterClick = (
-    character: PrivateChatCharacter
-  ) => {
-    if (!onPreviousChatCharacterClick) return;
-    onPreviousChatCharacterClick(character);
-    setShowSearchCharacterUI(false);
-  };
 
   return (
     <>
@@ -92,83 +69,29 @@ export const ChatRevamp = ({
           </Tab>
         ))}
       </TabContainer>
-      <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>
+      {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}
+        />
+      )}
     </>
   );
 };
@@ -196,136 +119,3 @@ 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, { useEffect, useRef, useState } from 'react';
+import React, { useState } from 'react';
 import { RxMagnifyingGlass } from 'react-icons/rx';
 import styled from 'styled-components';
 import { uiColors } from '../../constants/uiColors';
@@ -33,17 +33,6 @@ 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();
@@ -58,33 +47,34 @@ export const SearchCharacter = ({
     setCharacterName('');
     onCharacterClick(character);
     setShowSearchCharacter(false);
-  };  
+  };
 
   return (
-    <SearchContainer>
+    <SearchCharacterContainer
+      width={styles?.width || '80%'}
+      height={styles?.height || 'auto'}
+    >
       <Form onSubmit={handleSubmit}>
         <Column flex={70}>
           <TextField
             value={characterName}
-            ref={searchCharacterRef}
-            id="characterName"
-            name='characterName'
+            id="inputCharacterName"
             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)'
@@ -106,19 +96,27 @@ export const SearchCharacter = ({
           ))}
         </ListContainer>
       )}
-      </SearchContainer>
+    </SearchCharacterContainer>
   );
 };
 
+interface IContainerProps {
+  width: string;
+  height: string;
+}
 
 interface IButtonProps {
   buttonColor: string;
   buttonBackgroundColor: string;
 }
 
-const SearchContainer = styled.div`
-width: 100%;
-`
+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 Form = styled.form`
   display: flex;
@@ -152,7 +150,6 @@ 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,8 +66,6 @@ type onDragStart =
   | undefined;
 type onDragEnd = ((quantity?: number) => void) | undefined;
 
-const MIN_SLOTS_FOR_SCROLL = 20;
-
 export const ItemContainer: React.FC<IItemContainerProps> = ({
   itemContainer,
   onClose,
@@ -243,11 +241,7 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
               atlasJSON={atlasJSON}
             />
           )}
-        <ItemsContainer
-          className="item-container-body"
-          ref={containerRef}
-          isScrollable={itemContainer.slotQty > MIN_SLOTS_FOR_SCROLL}
-        >
+        <ItemsContainer className="item-container-body" ref={containerRef}>
           {onRenderSlots()}
         </ItemsContainer>
       </SlotsContainer>
@@ -261,16 +255,12 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
   );
 };
 
-interface IItemsContainerProps {
-  isScrollable: boolean;
-}
-
-const ItemsContainer = styled.div<IItemsContainerProps>`
+const ItemsContainer = styled.div`
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   max-height: 270px;
-  overflow-y: ${({ isScrollable }) => (isScrollable ? 'scroll' : 'hidden')};
+  overflow-y: auto;
   overflow-x: hidden;
   width: 415px;
 `;

package/src/index.tsx

@@ -32,6 +32,7 @@ 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';
@@ -44,3 +45,4 @@ 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: 20,
+      slotQty: 60,
       slots: {
         0: items[0],
         1: items[1],
@@ -614,4 +614,4 @@ export const itemContainerMock = (
       ...props,
     };
   }
-};
+}

package/src/stories/ChatRevamp.stories.tsx

@@ -202,7 +202,6 @@ const chatMessagesMock = [
 const tabsMock = [
   { label: 'Global', id: 'global' },
   { label: 'Private', id: 'private' },
-  { label: 'Trade', id: 'trade' },
 ];
 
 const recentPrivateChatCharactersMock = [
@@ -222,6 +221,7 @@ 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 Private = Template.bind({});
+export const PrivateCharacters = Template.bind({});
 
-Private.args = {
+PrivateCharacters.args = {
   onSendGlobalChatMessage: () => {},
   onChangeCharacterName: () => {},
   chatMessages: chatMessagesMock,
+  opacity: 0.5,
   styles: { width: `calc(100% - 0.5rem * 2)`, height: '200px' },
   onCloseButton: () => {},
   tabs: tabsMock,
@@ -245,23 +245,4 @@ Private.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: () => {},
 };