@rpg-engine/long-bow 0.5.13 → 0.5.15

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.13",
+  "version": "0.5.15",
   "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.74",
+    "@rpg-engine/shared": "^0.8.83",
     "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

@@ -13,7 +13,6 @@ import { ItemQuantitySelector } from './ItemQuantitySelector';
 
 import { IPosition } from '../../../types/eventTypes';
 import ModalPortal from '../../Abstractions/ModalPortal';
-import SelectArrow from '../../Arrow/SelectArrow';
 import { ShortcutsSetter } from '../../Shortcuts/ShortcutsSetter';
 import { ItemSlot } from './ItemSlot';
 
@@ -82,15 +81,12 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
   onPositionChangeEnd,
   onPositionChangeStart,
 }) => {
-  const MAX_SLOTS_PER_PAGE = 20;
   const [quantitySelect, setQuantitySelect] = useState({
     isOpen: false,
     maxQuantity: 1,
     callback: (_quantity: number) => { },
   });
   const [settingShortcutIndex, setSettingShortcutIndex] = useState(-1);
-  const [currentPage, setCurrentPage] = useState(1);
-  const totalPages = Math.ceil(itemContainer.slotQty / MAX_SLOTS_PER_PAGE);
 
   const handleSetShortcut = (item: IItem, index: number) => {
     if (item.type === ItemType.Consumable || item.type === ItemType.Tool) {
@@ -100,11 +96,8 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
 
   const onRenderSlots = () => {
     const slots = [];
-    const start = (currentPage - 1) * MAX_SLOTS_PER_PAGE;
-    const end = start + MAX_SLOTS_PER_PAGE;
 
-    for (let i = start; i < end && i < itemContainer.slotQty; i++) {
-      console.log(itemContainer)
+    for (let i = 0; i < itemContainer.slotQty; i++) {
       slots.push(
         <ItemSlot
           isContextMenuDisabled={disableContextMenu}
@@ -163,14 +156,6 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
     return slots;
   };
 
-  const goToNextPage = () => {
-    setCurrentPage(current => Math.min(current + 1, totalPages));
-  };
-
-  const goToPreviousPage = () => {
-    setCurrentPage(current => Math.max(current - 1, 1));
-  };
-
   return (
     <>
       <SlotsContainer
@@ -196,32 +181,6 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
         <ItemsContainer className="item-container-body">
           {onRenderSlots()}
         </ItemsContainer>
-        {totalPages > 1 && (
-          <ArrowContainer>
-            {currentPage > 1 && (
-              <SelectArrow
-                className='arrow .arrow-up'
-                direction="left"
-                onPointerDown={() => {
-                  if (currentPage > 1) {
-                    goToPreviousPage();
-                  }
-                }}
-              />
-            )}
-            {currentPage < totalPages && (
-              <SelectArrow
-                className='arrow .arrow-down'
-                direction="right"
-                onPointerDown={() => {
-                  if (currentPage < totalPages) {
-                    goToNextPage();
-                  }
-                }}
-              />
-            )}
-          </ArrowContainer>
-        )}
       </SlotsContainer>
       {quantitySelect.isOpen && (
         <ModalPortal>
@@ -256,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`
@@ -270,17 +231,3 @@ const QuantitySelectorContainer = styled.div`
   align-items: center;
   background-color: rgba(0, 0, 0, 0.5);
 `;
-
-const ArrowContainer = styled.div`
-  margin-top: 10px;
-  margin-bottom: 30px;
-  /* Aplica a margem ao primeiro span (seta para a esquerda) */
-  span:first-child {
-    margin-left: 20px;
-  }
-
-  /* Aplica a margem ao último span (seta para a direita) */
-  span:last-child {
-    margin-right: 20px;
-  }
-`;

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,8 @@ export const mockSpells: ISpell[] = [
     castingAnimationKey: AnimationEffectKeys.SkillLevelUp,
     targetHitAnimationKey: AnimationEffectKeys.Rooted,
     projectileAnimationKey: AnimationEffectKeys.Energy,
-    usableEffect: () => {},
+    usableEffect: () => { },
+    onlyPremiumAccountType: [],
   },
   {
     key: (SpellsBlueprint.ArrowCreationSpell + '2') as SpellsBlueprint,
@@ -40,7 +41,8 @@ export const mockSpells: ISpell[] = [
     castingAnimationKey: AnimationEffectKeys.SkillLevelUp,
     targetHitAnimationKey: AnimationEffectKeys.Rooted,
     projectileAnimationKey: AnimationEffectKeys.Energy,
-    usableEffect: () => {},
+    usableEffect: () => { },
+    onlyPremiumAccountType: [],
   },
   {
     key: (SpellsBlueprint.ArrowCreationSpell + '3') as SpellsBlueprint,
@@ -58,7 +60,8 @@ export const mockSpells: ISpell[] = [
     castingAnimationKey: AnimationEffectKeys.SkillLevelUp,
     targetHitAnimationKey: AnimationEffectKeys.Rooted,
     projectileAnimationKey: AnimationEffectKeys.Energy,
-    usableEffect: () => {},
+    usableEffect: () => { },
+    onlyPremiumAccountType: [],
   },
   {
     key: (SpellsBlueprint.ArrowCreationSpell + '4') as SpellsBlueprint,
@@ -76,7 +79,8 @@ export const mockSpells: ISpell[] = [
     castingAnimationKey: AnimationEffectKeys.SkillLevelUp,
     targetHitAnimationKey: AnimationEffectKeys.Rooted,
     projectileAnimationKey: AnimationEffectKeys.Energy,
-    usableEffect: () => {},
+    usableEffect: () => { },
+    onlyPremiumAccountType: [],
   },
   {
     key: (SpellsBlueprint.ArrowCreationSpell + '5') as SpellsBlueprint,
@@ -94,6 +98,7 @@ export const mockSpells: ISpell[] = [
     castingAnimationKey: AnimationEffectKeys.SkillLevelUp,
     targetHitAnimationKey: AnimationEffectKeys.Rooted,
     projectileAnimationKey: AnimationEffectKeys.Energy,
-    usableEffect: () => {},
+    usableEffect: () => { },
+    onlyPremiumAccountType: [],
   },
 ];

package/src/components/TradingMenu/TradingItemRow.tsx

@@ -2,6 +2,7 @@ import {
   getItemTextureKeyPath,
   IEquipmentSet,
   ITradeResponseItem,
+  UserAccountTypes,
 } from '@rpg-engine/shared';
 import capitalize from 'lodash/capitalize';
 import React from 'react';
@@ -23,6 +24,7 @@ export interface ITradeComponentProps {
   selectedQty: number;
   equipmentSet?: IEquipmentSet | null;
   scale?: number;
+  isBuy?: boolean;
 }
 
 const outerQty = 10;
@@ -35,6 +37,7 @@ export const TradingItemRow: React.FC<ITradeComponentProps> = ({
   selectedQty,
   equipmentSet,
   scale,
+  isBuy,
 }) => {
   const onLeftClick = (qty = 1) => {
     onQuantityChange(traderItem, Math.max(0, selectedQty - qty));
@@ -47,6 +50,46 @@ export const TradingItemRow: React.FC<ITradeComponentProps> = ({
     );
   };
 
+  const renderAccountTypeIndicator = () => {
+    if (isBuy && traderItem.canBePurchasedOnlyByPremiumPlans) {
+      return traderItem.canBePurchasedOnlyByPremiumPlans.map(accountType => {
+        if (accountType !== UserAccountTypes.Free) {
+          let backgroundColor;
+          let textColor = 'black';
+
+          switch (accountType) {
+            case UserAccountTypes.PremiumBronze:
+              backgroundColor = '#CD7F32';
+              break;
+            case UserAccountTypes.PremiumSilver:
+              backgroundColor = '#C0C0C0';
+              break;
+            case UserAccountTypes.PremiumGold:
+              backgroundColor = '#FFD700';
+              break;
+            case UserAccountTypes.PremiumUltimate:
+              backgroundColor = '#002E99';
+              break;
+            default:
+              return null;
+          }
+
+          return (
+            <PremiumLabel
+              backgroundColor={backgroundColor}
+              textColor={textColor}
+              key={accountType}
+            >
+              {capitalize(accountType) + ' PA'}
+            </PremiumLabel>
+          );
+        }
+        return null;
+      });
+    }
+    return null;
+  };
+
   return (
     <ItemWrapper>
       <ItemIconContainer>
@@ -84,6 +127,7 @@ export const TradingItemRow: React.FC<ITradeComponentProps> = ({
             </Ellipsis>
           </p>
           <p>${traderItem.price}</p>
+          <p>{renderAccountTypeIndicator()}</p>
         </NameValue>
       </ItemNameContainer>
       <QuantityContainer>
@@ -121,6 +165,20 @@ export const TradingItemRow: React.FC<ITradeComponentProps> = ({
   );
 };
 
+const PremiumLabel = styled.span<{
+  backgroundColor: string;
+  textColor: string;
+}>`
+  background-color: ${({ backgroundColor }) => backgroundColor};
+  color: ${({ textColor }) => textColor};
+  font-weight: bold;
+  padding: 2px 5px;
+  border-radius: 5px;
+  margin-right: 5px;
+  margin-bottom: 5px;
+  display: inline-block;
+`;
+
 const StyledArrow = styled(SelectArrow)`
   margin: 40px;
 `;

package/src/components/TradingMenu/TradingMenu.tsx

@@ -110,6 +110,7 @@ export const TradingMenu: React.FC<ITradingMenu> = ({
                 selectedQty={qtyMap.get(tradeItem.key) ?? 0}
                 equipmentSet={equipmentSet}
                 scale={scale}
+                isBuy={isBuy()}
               />
             </ItemWrapper>
           ))}