@rpg-engine/long-bow 0.8.106 → 0.8.108

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.106",
+  "version": "0.8.108",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/ChatRevamp/ChatContent.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { memo, useCallback } from 'react';
 import styled from 'styled-components';
 import { Chat, IStyles } from '../Chat/Chat';
 import { SearchCharacter } from './SearchCharacter';
 import { ChatMessage, PrivateChatCharacter } from './types';
 
-interface ChatContentProps {
+interface IChatContentProps {
   isPrivate: boolean;
   isTrade: boolean;
   isGlobal: boolean;
@@ -28,76 +28,93 @@ interface ChatContentProps {
   onSendGuildChatMessage: (message: string) => void;
 }
 
-export const ChatContent: React.FC<ChatContentProps> = ({
-  isPrivate,
-  isTrade,
-  isGlobal,
-  searchCharacterUI,
-  chatMessages,
-  onSendLocalChatMessage,
-  onSendGlobalChatMessage,
-  onSendPrivateChatMessage,
-  onSendTradeMessage,
-  onCloseButton,
-  styles,
-  onFocus,
-  onBlur,
-  isExpanded,
-  autoCloseOnSend,
-  onChangeCharacterName,
-  privateChatCharacters,
-  hideSearchCharacterUI,
-  onCharacterClick,
-  isGuild,
-  onSendGuildChatMessage,
-}) => {
-  const handleSendMessage = (message: string) => {
-    if (autoCloseOnSend) {
-      onCloseButton();
-    }
+export const ChatContent: React.FC<IChatContentProps> = memo(
+  ({
+    isPrivate,
+    isTrade,
+    isGlobal,
+    searchCharacterUI,
+    chatMessages,
+    onSendLocalChatMessage,
+    onSendGlobalChatMessage,
+    onSendPrivateChatMessage,
+    onSendTradeMessage,
+    onCloseButton,
+    styles,
+    onFocus,
+    onBlur,
+    isExpanded,
+    autoCloseOnSend,
+    onChangeCharacterName,
+    privateChatCharacters,
+    hideSearchCharacterUI,
+    onCharacterClick,
+    isGuild,
+    onSendGuildChatMessage,
+  }) => {
+    const handleSendMessage = useCallback(
+      (message: string) => {
+        if (autoCloseOnSend) {
+          onCloseButton();
+        }
+
+        if (isPrivate) {
+          onSendPrivateChatMessage(message);
+        } else if (isTrade) {
+          onSendTradeMessage(message);
+        } else if (isGuild) {
+          onSendGuildChatMessage(message);
+        } else if (isGlobal) {
+          onSendGlobalChatMessage(message);
+        } else {
+          onSendLocalChatMessage(message);
+        }
+      },
+      [
+        autoCloseOnSend,
+        isPrivate,
+        isTrade,
+        isGuild,
+        isGlobal,
+        onCloseButton,
+        onSendPrivateChatMessage,
+        onSendTradeMessage,
+        onSendGuildChatMessage,
+        onSendGlobalChatMessage,
+        onSendLocalChatMessage,
+      ]
+    );
 
-    if (isPrivate) {
-      onSendPrivateChatMessage(message);
-    } else if (isTrade) {
-      onSendTradeMessage(message);
-    } else if (isGuild) {
-      onSendGuildChatMessage(message);
-    } else if (isGlobal) {
-      onSendGlobalChatMessage(message);
-    } else {
-      onSendLocalChatMessage(message);
+    if (isPrivate && searchCharacterUI) {
+      return (
+        <SearchCharacter
+          onFocus={onFocus}
+          onBlur={onBlur}
+          onChangeCharacterName={onChangeCharacterName}
+          styles={styles}
+          recentCharacters={privateChatCharacters}
+          hideSearchCharacterUI={hideSearchCharacterUI}
+          onCharacterClick={onCharacterClick}
+        />
+      );
     }
-  };
 
-  if (isPrivate && searchCharacterUI) {
     return (
-      <SearchCharacter
-        onFocus={onFocus}
-        onBlur={onBlur}
-        onChangeCharacterName={onChangeCharacterName}
-        styles={styles}
-        recentCharacters={privateChatCharacters}
-        hideSearchCharacterUI={hideSearchCharacterUI}
-        onCharacterClick={onCharacterClick}
-      />
+      <ChatWrapper>
+        <Chat
+          chatMessages={chatMessages}
+          onSendChatMessage={handleSendMessage}
+          sendMessage={true}
+          onCloseButton={onCloseButton}
+          styles={styles}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          isExpanded={isExpanded}
+        />
+      </ChatWrapper>
     );
   }
-
-  return (
-    <ChatWrapper>
-      <Chat
-        chatMessages={chatMessages}
-        onSendChatMessage={handleSendMessage}
-        sendMessage={true}
-        onCloseButton={onCloseButton}
-        styles={styles}
-        onFocus={onFocus}
-        onBlur={onBlur}
-        isExpanded={isExpanded}
-      />
-    </ChatWrapper>
-  );
-};
+);
 
 const ChatWrapper = styled.div`
   flex-grow: 1;

package/src/components/ChatRevamp/RecentChats.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo, useCallback } from 'react';
 import { RxCross2, RxMagnifyingGlass } from 'react-icons/rx';
 import styled from 'styled-components';
 import { uiColors } from '../../constants/uiColors';
@@ -17,30 +17,39 @@ interface IRecentChatsProps {
   onPreviousChatCharacterClick: (character: PrivateChatCharacter) => void;
   onRemoveRecentChatCharacter?: (character: PrivateChatCharacter) => void;
   isPrivate: boolean;
-  hideSearchCharacterUI: () => void; // Add this line
+  hideSearchCharacterUI: () => void;
 }
 
-export const RecentChats: React.FC<IRecentChatsProps> = ({
-  showRecentChats,
-  toggleRecentChats,
-  hasUnseenMessages,
-  showSearchCharacterUI,
-  recentChatCharacters,
-  recentSelectedChatCharacterId,
-  unseenMessageCharacterIds,
-  onPreviousChatCharacterClick,
-  onRemoveRecentChatCharacter,
-  isPrivate,
-  hideSearchCharacterUI, // Add this line
-}) => {
-  const handlePreviousChatCharacterClick = (
-    character: PrivateChatCharacter
-  ) => {
-    onPreviousChatCharacterClick(character);
-    hideSearchCharacterUI(); // Call hideSearchCharacterUI here
-  };
-
-  return (
+export const RecentChats: React.FC<IRecentChatsProps> = memo(
+  ({
+    showRecentChats,
+    toggleRecentChats,
+    hasUnseenMessages,
+    showSearchCharacterUI,
+    recentChatCharacters,
+    recentSelectedChatCharacterId,
+    unseenMessageCharacterIds,
+    onPreviousChatCharacterClick,
+    onRemoveRecentChatCharacter,
+    isPrivate,
+    hideSearchCharacterUI,
+  }) => {
+    const handlePreviousChatCharacterClick = useCallback(
+      (character: PrivateChatCharacter) => {
+        onPreviousChatCharacterClick(character);
+        hideSearchCharacterUI();
+      },
+      [onPreviousChatCharacterClick, hideSearchCharacterUI]
+    );
+
+    const handleRemoveCharacter = useCallback(
+      (character: PrivateChatCharacter) => {
+        onRemoveRecentChatCharacter?.(character);
+      },
+      [onRemoveRecentChatCharacter]
+    );
+
+    return (
     <RecentChatTabContainer isOpen={showRecentChats} isPrivate={isPrivate}>
       <RecentChatTopBar>
         <BurgerIconContainer
@@ -75,7 +84,7 @@ export const RecentChats: React.FC<IRecentChatsProps> = ({
             </ListElement>
             <CloseButton
               className="close-button"
-              onPointerDown={() => onRemoveRecentChatCharacter?.(character)}
+              onPointerDown={() => handleRemoveCharacter(character)}
             >
               <RxCross2 size={16} />
             </CloseButton>
@@ -84,7 +93,8 @@ export const RecentChats: React.FC<IRecentChatsProps> = ({
       </RecentChatLogContainer>
     </RecentChatTabContainer>
   );
-};
+  }
+);
 
 const RecentChatTabContainer = styled.div<{
   isPrivate: boolean;

package/src/components/ChatRevamp/SearchCharacter.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { RxMagnifyingGlass } from 'react-icons/rx';
 import styled from 'styled-components';
 import { uiColors } from '../../constants/uiColors';
@@ -18,101 +18,115 @@ interface ISearchCharacterProps {
   hideSearchCharacterUI: () => void;
 }
 
-export const SearchCharacter = ({
-  onChangeCharacterName,
-  onBlur,
-  onFocus,
-  recentCharacters,
-  hideSearchCharacterUI,
-  onCharacterClick,
-  styles = {
-    textColor: '#c65102',
-    buttonColor: '#005b96',
-    buttonBackgroundColor: 'rgba(0,0,0,.2)',
-    width: '80%',
-    height: 'auto',
-  },
-}: 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();
-    if (!characterName || characterName.trim() === '') return;
-    onChangeCharacterName(characterName);
-  };
-
-  const handleCharacterClick = (character: PrivateChatCharacter) => {
-    if (!onCharacterClick) return;
-    setCharacterName('');
-    onCharacterClick(character);
-    hideSearchCharacterUI();
-  };
-
-  return (
-    <SearchContainer>
-      <Form onSubmit={handleSubmit}>
-        <Column flex={70}>
-          <TextField
-            value={characterName}
-            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}
-          />
-        </Column>
-        <Column justifyContent="flex-end">
-          <SearchButton
-            type="submit"
-            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}
+export const SearchCharacter: React.FC<ISearchCharacterProps> = memo(
+  ({
+    onChangeCharacterName,
+    onBlur,
+    onFocus,
+    recentCharacters,
+    hideSearchCharacterUI,
+    onCharacterClick,
+    styles = {
+      textColor: '#c65102',
+      buttonColor: '#005b96',
+      buttonBackgroundColor: 'rgba(0,0,0,.2)',
+      width: '80%',
+      height: 'auto',
+    },
+  }) => {
+    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 = useCallback(
+      (event: React.SyntheticEvent<HTMLFormElement>) => {
+        event.preventDefault();
+        if (!characterName || characterName.trim() === '') return;
+        onChangeCharacterName(characterName);
+      },
+      [characterName, onChangeCharacterName]
+    );
+
+    const handleCharacterClick = useCallback(
+      (character: PrivateChatCharacter) => {
+        if (!onCharacterClick) return;
+        setCharacterName('');
+        onCharacterClick(character);
+        hideSearchCharacterUI();
+      },
+      [onCharacterClick, hideSearchCharacterUI]
+    );
+
+    const handleInputChange = useCallback(
+      (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
+        setCharacterName(value);
+        onChangeCharacterName(value);
+      },
+      [onChangeCharacterName]
+    );
+
+    return (
+      <SearchContainer>
+        <Form onSubmit={handleSubmit}>
+          <Column flex={70}>
+            <TextField
+              value={characterName}
+              ref={searchCharacterRef}
+              id="characterName"
+              name="characterName"
+              onChange={handleInputChange}
+              placeholder="Search for a character..."
+              height={20}
+              type="text"
+              autoComplete="off"
+              onFocus={onFocus}
+              onBlur={onBlur}
+              onPointerDown={onFocus}
+            />
+          </Column>
+          <Column justifyContent="flex-end">
+            <SearchButton
+              type="submit"
+              buttonColor={styles?.buttonColor || '#005b96'}
+              buttonBackgroundColor={
+                styles?.buttonBackgroundColor || 'rgba(0,0,0,.5)'
+              }
+              id="chat-send-button"
+              style={{ borderRadius: '20%' }}
             >
-              <Ellipsis maxWidth="150px" maxLines={1}>
-                {character.name}
-              </Ellipsis>
-            </ListElement>
-          ))}
-        </ListContainer>
-      )}
-    </SearchContainer>
-  );
-};
+              <RxMagnifyingGlass size={15} />
+            </SearchButton>
+          </Column>
+        </Form>
+
+        {recentCharacters && recentCharacters.length > 0 && (
+          <ListContainer>
+            {recentCharacters.map(character => (
+              <ListElement
+                onPointerDown={() => handleCharacterClick(character)}
+                key={character._id}
+              >
+                <Ellipsis maxWidth="150px" maxLines={1}>
+                  {character.name}
+                </Ellipsis>
+              </ListElement>
+            ))}
+          </ListContainer>
+        )}
+      </SearchContainer>
+    );
+  }
+);
 
 interface IButtonProps {
   buttonColor: string;

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

@@ -131,6 +131,29 @@ export const generateContextMenu = (
         );
         break;
     }
+
+    // Add "Use" for consumable items in nested containers
+    if (item.type === ItemType.Consumable && item.isUsable) {
+      const hasUseAction = contextActionMenu.some(action => action.id === ItemSocketEvents.Use);
+      if (!hasUseAction) {
+        contextActionMenu.unshift({
+          id: ItemSocketEvents.Use,
+          text: ItemSocketEventsDisplayLabels[ItemSocketEvents.Use],
+        });
+      }
+    }
+
+    // Add "Use with..." for items that have hasUseWith property
+    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.MapContainer) {
     switch (item.type) {

package/src/components/ProgressBar.tsx

@@ -47,7 +47,7 @@ export const ProgressBar: React.FC<IBarProps> = ({
     >
       {displayText && (
         <TextOverlay>
-          <ProgressBarText>
+          <ProgressBarText translate="no">
             {displayValue}/{displayMax}
           </ProgressBarText>
         </TextOverlay>

package/src/hooks/useChat.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { PrivateChatCharacter } from '../components/ChatRevamp/types';
 
 interface IUseChat {
@@ -27,27 +27,39 @@ export const useChat = ({
     }
   }, [isPrivate]);
 
-  const toggleExpand = () => setIsExpanded(prev => !prev);
+  const toggleExpand = useCallback(() => setIsExpanded(prev => !prev), []);
 
-  const toggleRecentChats = () => setShowRecentChats(prev => !prev);
+  const toggleRecentChats = useCallback(
+    () => setShowRecentChats(prev => !prev),
+    []
+  );
 
-  const handleTabChange = (tabId: string) => {
-    if (tabId === 'private') {
-      setIsExpanded(true);
-    }
-    onChangeTab(tabId);
-  };
+  const handleTabChange = useCallback(
+    (tabId: string) => {
+      if (tabId === 'private') {
+        setIsExpanded(true);
+      }
+      onChangeTab(tabId);
+    },
+    [onChangeTab]
+  );
 
-  const handlePreviousChatCharacterClick = (
-    character: PrivateChatCharacter
-  ) => {
-    if (onPreviousChatCharacterClick) {
-      onPreviousChatCharacterClick(character);
-    }
-    if (hideSearchCharacterUI) {
-      hideSearchCharacterUI();
-    }
-  };
+  const handlePreviousChatCharacterClick = useCallback(
+    (character: PrivateChatCharacter) => {
+      if (onPreviousChatCharacterClick) {
+        onPreviousChatCharacterClick(character);
+      }
+      if (hideSearchCharacterUI) {
+        hideSearchCharacterUI();
+      }
+    },
+    [onPreviousChatCharacterClick, hideSearchCharacterUI]
+  );
+
+  const hasUnseenMessages = useMemo(
+    () => unseenMessageCharacterIds && unseenMessageCharacterIds.length > 0,
+    [unseenMessageCharacterIds]
+  );
 
   return {
     showRecentChats,
@@ -56,7 +68,6 @@ export const useChat = ({
     toggleRecentChats,
     handleTabChange,
     handlePreviousChatCharacterClick,
-    hasUnseenMessages:
-      unseenMessageCharacterIds && unseenMessageCharacterIds?.length > 0,
+    hasUnseenMessages,
   };
 };