@rpg-engine/long-bow 0.5.14 → 0.5.16

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

@@ -0,0 +1,6 @@
+import { Meta } from '@storybook/react';
+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>;

package/package.json

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

package/src/components/Chat/Chat.tsx

@@ -1,4 +1,4 @@
-import { IChatMessage } from '@rpg-engine/shared';
+import { IChatMessage, IPrivateChatMessage } from '@rpg-engine/shared';
 import dayjs from 'dayjs';
 import React, { useEffect, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
@@ -11,7 +11,7 @@ interface IEmitter {
   name: string;
 }
 
-interface IStyles {
+export interface IStyles {
   textColor?: string;
   buttonColor?: string;
   buttonBackgroundColor?: string;
@@ -20,7 +20,7 @@ interface IStyles {
 }
 
 export interface IChatProps {
-  chatMessages: IChatMessage[];
+  chatMessages: IChatMessage[] | IPrivateChatMessage[];
   onSendChatMessage: (message: string) => void;
   onCloseButton: () => void;
   onFocus?: () => void;
@@ -80,11 +80,20 @@ export const Chat: React.FC<IChatProps> = ({
     } ${message}`;
   };
 
-  const onRenderChatMessages = (chatMessages: IChatMessage[]) => {
+  const onRenderChatMessages = (
+    chatMessages: (IChatMessage | IPrivateChatMessage)[]
+  ) => {
     return chatMessages?.length ? (
-      chatMessages?.map(({ _id, createdAt, emitter, message }, index) => (
-        <Message color={styles?.textColor || '#c65102'} key={`${_id}_${index}`}>
-          {onRenderMessageLines(emitter, createdAt as string, message)}
+      chatMessages?.map((chatMessage, index) => (
+        <Message
+          color={styles?.textColor || '#c65102'}
+          key={`${chatMessage._id}_${index}`}
+        >
+          {onRenderMessageLines(
+            chatMessage.emitter,
+            chatMessage.createdAt as string,
+            chatMessage.message
+          )}
         </Message>
       ))
     ) : (

package/src/components/ChatRevamp/ChatRevamp.tsx

@@ -0,0 +1,121 @@
+import {
+  ICharacter,
+  IChatMessage,
+  IPrivateChatMessage,
+} from '@rpg-engine/shared';
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../constants/uiColors';
+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 interface IChatRevampProps {
+  chatMessages: IChatMessage[] | IPrivateChatMessage[];
+  onSendGlobalChatMessage: (message: string) => void;
+  onCloseButton: () => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
+  opacity?: number;
+  styles?: IStyles;
+  tabs: { label: string; id: string }[];
+  activeTab: string;
+  onChangeTab: (tabId: string) => void;
+  privateChatCharacters?: PrivateChatCharacter[];
+  onChangeCharacterName: (characterName: string) => void;
+  onCharacterClick?: (character: PrivateChatCharacter) => void;
+  onSendPrivateChatMessage: (message: string) => void;
+}
+
+export const ChatRevamp = ({
+  chatMessages,
+  onSendGlobalChatMessage,
+  onChangeCharacterName,
+  onFocus,
+  onBlur,
+  onCloseButton,
+  styles,
+  tabs,
+  onChangeTab,
+  activeTab,
+  privateChatCharacters,
+  onCharacterClick,
+  onSendPrivateChatMessage,
+}: IChatRevampProps) => {
+  const [showSearchCharacter, setShowSearchCharacter] = useState(true);
+
+  useEffect(() => {
+    setShowSearchCharacter(true);
+  }, [activeTab]);
+
+  const isPrivate = activeTab === 'private';
+
+  return (
+    <>
+      <TabContainer>
+        {tabs.map((tab, index) => (
+          <Tab
+            key={`${tab.label}_${index}`}
+            active={tab.id === activeTab}
+            onPointerDown={() => onChangeTab(tab.id)}
+          >
+            {tab.label}
+          </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}
+        />
+      )}
+    </>
+  );
+};
+
+const TabContainer = styled.div`
+  width: 100%;
+  display: flex;
+  gap: 10px;
+`;
+
+const Tab = styled.button<{ active: boolean }>`
+  width: 120px;
+  color: white;
+  font-size: 0.8rem;
+  all: unset;
+  padding: 0.6rem;
+  font-size: 0.8rem;
+
+  border-radius: 5px 5px 0 0;
+  border-width: 0.25rem 0.25rem 0 0.25rem;
+  border-style: solid;
+  border-color: ${props => (props.active ? '#c65102' : uiColors.gray)};
+
+  background-color: ${props =>
+    props.active ? uiColors.orange : 'transparent'};
+  color: ${props => (props.active ? 'white' : uiColors.raisinBlack)};
+`;

package/src/components/ChatRevamp/SearchCharacter.tsx

@@ -0,0 +1,163 @@
+import React, { useState } from 'react';
+import { RxMagnifyingGlass } from 'react-icons/rx';
+import styled from 'styled-components';
+import { uiColors } from '../../constants/uiColors';
+import { uiFonts } from '../../constants/uiFonts';
+import { IStyles } from '../Chat/Chat';
+import { Column } from '../shared/Column';
+import type { PrivateChatCharacter } from './ChatRevamp';
+
+interface ISearchCharacterProps {
+  onFocus?: () => void;
+  onBlur?: () => void;
+  onChangeCharacterName: (characterName: string) => void;
+  styles?: IStyles;
+  recentCharacters?: PrivateChatCharacter[];
+  setShowSearchCharacter: (show: boolean) => void;
+  onCharacterClick?: (character: PrivateChatCharacter) => void;
+}
+
+export const SearchCharacter = ({
+  onChangeCharacterName,
+  onBlur,
+  onFocus,
+  recentCharacters,
+  setShowSearchCharacter,
+  onCharacterClick,
+  styles = {
+    textColor: '#c65102',
+    buttonColor: '#005b96',
+    buttonBackgroundColor: 'rgba(0,0,0,.2)',
+    width: '80%',
+    height: 'auto',
+  },
+}: ISearchCharacterProps) => {
+  const [characterName, setCharacterName] = useState('');
+
+  const handleSubmit = (event: React.SyntheticEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    if (!characterName || characterName.trim() === '') return;
+    onChangeCharacterName(characterName);
+  };
+
+  const handleCharacterClick = (
+    character: PrivateChatCharacter
+  ) => {
+    if (!onCharacterClick) return;
+    setCharacterName('');
+    onCharacterClick(character);
+    setShowSearchCharacter(false);
+  };
+
+  return (
+    <SearchCharacterContainer
+      width={styles?.width || '80%'}
+      height={styles?.height || 'auto'}
+    >
+      <Form onSubmit={handleSubmit}>
+        <Column flex={70}>
+          <TextField
+            value={characterName}
+            id="inputCharacterName"
+            onChange={e => {
+              setCharacterName(e.target.value);
+              onChangeCharacterName(e.target.value);
+            }}
+            height={20}
+            type="text"
+            autoComplete="off"
+            onFocus={onFocus}
+            onBlur={onBlur}
+            onPointerDown={onFocus}
+            autoFocus
+          />
+        </Column>
+        <Column justifyContent="flex-end">
+          <SearchButton
+            buttonColor={styles?.buttonColor || '#005b96'}
+            buttonBackgroundColor={
+              styles?.buttonBackgroundColor || 'rgba(0,0,0,.5)'
+            }
+            id="chat-send-button"
+            style={{ borderRadius: '20%' }}
+          >
+            <RxMagnifyingGlass size={15} />
+          </SearchButton>
+        </Column>
+      </Form>
+
+      {recentCharacters && recentCharacters.length > 0 && (
+        <ListContainer>
+          {recentCharacters.map(character => (
+            <ListElement onPointerDown={() => handleCharacterClick(character)} key={character._id}>
+                {character.name}
+            </ListElement>
+          ))}
+        </ListContainer>
+      )}
+    </SearchCharacterContainer>
+  );
+};
+
+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 Form = styled.form`
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+`;
+
+const TextField = styled.input`
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.25) !important;
+  border: none !important;
+  max-height: 28px !important;
+`;
+
+const SearchButton = styled.button<IButtonProps>`
+  color: ${({ buttonColor }) => buttonColor};
+  background-color: ${({ buttonBackgroundColor }) => buttonBackgroundColor};
+  width: 28px;
+  height: 28px;
+  border: none !important;
+`;
+
+const ListContainer = styled.ul`
+  border: none;
+  overflow-y: scroll;
+  list-style: none;
+  padding: 0;
+`;
+
+const ListElement = styled.li`
+  margin: 0.5rem 0 !important;
+  font-size: ${uiFonts.size.small};
+
+  &:hover {
+    color: #ff0;
+    background-color: ${uiColors.darkGray};
+  }
+
+  button {
+    all: unset;
+  }
+`;
+
+

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

@@ -84,7 +84,7 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
   const [quantitySelect, setQuantitySelect] = useState({
     isOpen: false,
     maxQuantity: 1,
-    callback: (_quantity: number) => {},
+    callback: (_quantity: number) => { },
   });
   const [settingShortcutIndex, setSettingShortcutIndex] = useState(-1);
 
@@ -192,7 +192,7 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
                 setQuantitySelect({
                   isOpen: false,
                   maxQuantity: 1,
-                  callback: () => {},
+                  callback: () => { },
                 });
               }}
               onClose={() => {
@@ -200,7 +200,7 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
                 setQuantitySelect({
                   isOpen: false,
                   maxQuantity: 1,
-                  callback: () => {},
+                  callback: () => { },
                 });
               }}
             />
@@ -215,6 +215,8 @@ const ItemsContainer = styled.div`
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
+  max-height: 270px; /* Defina a altura máxima desejada */
+  overflow-y: auto; /* Adicione uma barra de rolagem vertical quando necessário */
 `;
 
 const QuantitySelectorContainer = styled.div`

package/src/components/Multitab/Tab.tsx

@@ -39,6 +39,8 @@ const CustomTab = styled.div<ICustomTab>`
     border-left: 0.25rem solid rgba(0, 0, 0, 0.25);
     border-right: 0.25rem solid rgba(0, 0, 0, 0.25);
     border-top: 0.25rem solid rgba(0, 0, 0, 0.25);
+    border-bottom: ${props =>
+      props.activeTab ? '' : '0.25rem solid rgba(0, 0, 0, 0.25)'};
     background: ${props => (props.activeTab ? '#4E4A4E' : '#2b292b')};
   }
 
@@ -46,6 +48,7 @@ const CustomTab = styled.div<ICustomTab>`
     border-left: 0.25rem solid #996d55;
     border-right: 0.25rem solid #996d55;
     border-top: 0.25rem solid #996d55;
+    border-bottom: ${props => (props.activeTab ? '' : '0.25rem solid #996d55')};
     background: ${props => (props.activeTab ? '#BF886A' : '#B67051')};
   }
 
@@ -59,8 +62,6 @@ const CustomTab = styled.div<ICustomTab>`
 
   border-radius: 5px 5px 0 0;
 
-  z-index: ${props => (props.activeTab ? 1 : -1)};
-
   position: relative;
   top: 0.3rem;
 `;

package/src/components/Multitab/TabBody.tsx

@@ -1,13 +1,27 @@
 import React from 'react';
 import styled from 'styled-components';
+import { IStyles } from '../Chat/Chat';
 
 interface IProps {
   id: string;
   children: React.ReactNode;
+  styles?: IStyles;
 }
 
-export const TabBody: React.FC<IProps> = ({ id, children }) => {
-  return <Container data-tab-id={id}>{children}</Container>;
+export const TabBody: React.FC<IProps> = ({ id, children, styles }) => {
+  return (
+    <Container styles={styles} data-tab-id={id}>
+      {children}
+    </Container>
+  );
 };
 
-const Container = styled.div``;
+interface IContainerProps {
+  styles?: IStyles;
+}
+
+const Container = styled.div<IContainerProps>`
+  width: 100%;
+  height: ${props => props.styles?.height || 'auto'};
+  overflow-y: auto;
+`;

package/src/components/Multitab/TabsContainer.tsx

@@ -42,9 +42,9 @@ export const TabsContainer: React.FC<ITabsContainer> = ({
 
   const onGetContainerType = () => {
     switch (type) {
-      case 'brown':
+      case MultitabType.Brown:
         return RPGUIContainerTypes.FramedGold;
-      case 'gray':
+      case MultitabType.Gray:
         return RPGUIContainerTypes.Framed;
       default:
         return RPGUIContainerTypes.Framed;

package/src/components/Spellbook/mockSpells.ts

@@ -22,7 +22,7 @@ export const mockSpells: ISpell[] = [
     castingAnimationKey: AnimationEffectKeys.SkillLevelUp,
     targetHitAnimationKey: AnimationEffectKeys.Rooted,
     projectileAnimationKey: AnimationEffectKeys.Energy,
-    usableEffect: () => {},
+    usableEffect: () => { },
     onlyPremiumAccountType: [],
   },
   {
@@ -41,7 +41,7 @@ export const mockSpells: ISpell[] = [
     castingAnimationKey: AnimationEffectKeys.SkillLevelUp,
     targetHitAnimationKey: AnimationEffectKeys.Rooted,
     projectileAnimationKey: AnimationEffectKeys.Energy,
-    usableEffect: () => {},
+    usableEffect: () => { },
     onlyPremiumAccountType: [],
   },
   {
@@ -60,7 +60,7 @@ export const mockSpells: ISpell[] = [
     castingAnimationKey: AnimationEffectKeys.SkillLevelUp,
     targetHitAnimationKey: AnimationEffectKeys.Rooted,
     projectileAnimationKey: AnimationEffectKeys.Energy,
-    usableEffect: () => {},
+    usableEffect: () => { },
     onlyPremiumAccountType: [],
   },
   {
@@ -79,7 +79,7 @@ export const mockSpells: ISpell[] = [
     castingAnimationKey: AnimationEffectKeys.SkillLevelUp,
     targetHitAnimationKey: AnimationEffectKeys.Rooted,
     projectileAnimationKey: AnimationEffectKeys.Energy,
-    usableEffect: () => {},
+    usableEffect: () => { },
     onlyPremiumAccountType: [],
   },
   {
@@ -98,7 +98,7 @@ export const mockSpells: ISpell[] = [
     castingAnimationKey: AnimationEffectKeys.SkillLevelUp,
     targetHitAnimationKey: AnimationEffectKeys.Rooted,
     projectileAnimationKey: AnimationEffectKeys.Energy,
-    usableEffect: () => {},
+    usableEffect: () => { },
     onlyPremiumAccountType: [],
   },
 ];

package/src/index.tsx

@@ -1,6 +1,7 @@
 export * from './components/Button';
 export * from './components/Character/CharacterSelection';
 export * from './components/Chat/Chat';
+export * from './components/ChatRevamp/ChatRevamp';
 export * from './components/Chatdeprecated/ChatDeprecated';
 export * from './components/CheckButton';
 export * from './components/CircularController/CircularController';

package/src/mocks/itemContainer.mocks.ts

@@ -582,7 +582,7 @@ export const itemContainerMock: IItemContainer = {
   _id: '629ba0b6fe3f43002f58f23b',
   name: 'Item Container',
   owner: '629ba0b6fe3f43002f58f23b',
-  slotQty: 20,
+  slotQty: 60,
   slots: {
     0: items[0],
     1: items[1],