@rpg-engine/long-bow 0.6.85 → 0.6.87

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.6.85",
+  "version": "0.6.87",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -86,6 +86,7 @@
     "@rpg-engine/shared": "^0.9.52",
     "dayjs": "^1.11.2",
     "font-awesome": "^4.7.0",
+    "framer-motion": "^11.3.31",
     "fs-extra": "^10.1.0",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",

package/src/components/ChatRevamp/ChatRevamp.tsx

@@ -10,6 +10,7 @@ import styled from 'styled-components';
 import { uiColors } from '../../constants/uiColors';
 import { uiFonts } from '../../constants/uiFonts';
 import { Chat, IStyles } from '../Chat/Chat';
+import { Ellipsis } from '../shared/Ellipsis';
 import { SearchCharacter } from './SearchCharacter';
 
 export type PrivateChatCharacter = Pick<ICharacter, '_id' | 'name'>;
@@ -81,13 +82,13 @@ export const ChatRevamp = ({
   };
 
   return (
-    <>
+    <ChatContainer>
       <TabContainer>
         {tabs.map((tab, index) => (
           <Tab
             key={`${tab.label}_${index}`}
             active={tab.id === activeTab}
-            onPointerDown={() => onChangeTab(tab.id)}
+            onClick={() => onChangeTab(tab.id)}
           >
             {tab.label}
           </Tab>
@@ -97,56 +98,63 @@ export const ChatRevamp = ({
         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={() => showSearchCharacterUI()}>
-                <RxMagnifyingGlass size={16} color={uiColors.white} />
-              </SearchButton>
-            )}
-          </RecentChatTopBar>
+        {isPrivate && (
+          <RecentChatTabContainer
+            isPrivate={isPrivate}
+            isOpen={showRecentChats}
+          >
+            <RecentChatTopBar isOpen={showRecentChats}>
+              <BurgerIconContainer
+                onClick={() => setShowRecentChats(t => !t)}
+                hasUnseenMessages={
+                  unseenMessageCharacterIds?.length > 0 || false
+                }
+              >
+                <BurgerLineIcon></BurgerLineIcon>
+                <BurgerLineIcon></BurgerLineIcon>
+                <BurgerLineIcon></BurgerLineIcon>
+              </BurgerIconContainer>
+              {showRecentChats && (
+                <SearchButton onClick={() => showSearchCharacterUI()}>
+                  <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>
+            <RecentChatLogContainer isOpen={showRecentChats}>
+              {recentChatCharacters?.map(character => (
+                <ListElementContainer key={character._id}>
+                  <ListElement
+                    active={character._id === recentSelectedChatCharacterId}
+                    onClick={() => handlePreviousChatCharacterClick(character)}
+                  >
+                    <StatusDot
+                      isUnseen={
+                        unseenMessageCharacterIds?.includes(character._id) ||
+                        false
+                      }
+                    />
+                    <Ellipsis maxLines={1} maxWidth="140px">
+                      {character.name}
+                    </Ellipsis>
+                  </ListElement>
+                  <CloseButton
+                    onClick={() => onRemoveRecentChatCharacter?.(character)}
+                  >
+                    <RxCross2 size={16} />
+                  </CloseButton>
+                </ListElementContainer>
+              ))}
+            </RecentChatLogContainer>
+          </RecentChatTabContainer>
+        )}
         {isPrivate && searchCharacterUI ? (
           <SearchCharacter
             onFocus={onFocus}
             onBlur={onBlur}
             onChangeCharacterName={onChangeCharacterName}
             styles={styles}
-            recentCharacters={privateChatCharacters}
+            recentCharacters={privateChatCharacters as ICharacter[]}
             hideSearchCharacterUI={hideSearchCharacterUI}
             onCharacterClick={onCharacterClick}
           />
@@ -168,10 +176,18 @@ export const ChatRevamp = ({
           />
         )}
       </PrivateChatContainer>
-    </>
+    </ChatContainer>
   );
 };
 
+const ChatContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  max-width: 1200px;
+  margin: 0 auto;
+`;
+
 const TabContainer = styled.div`
   width: 100%;
   display: flex;
@@ -185,15 +201,20 @@ const Tab = styled.button<{ active: boolean }>`
   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)};
+  transition: all 0.3s ease;
+  cursor: pointer;
+
+  &:hover {
+    background-color: ${props =>
+      props.active ? uiColors.orange : uiColors.lightGray};
+  }
 `;
 
 const PrivateChatContainer = styled.div<{ width: string; height: string }>`
@@ -204,6 +225,8 @@ const PrivateChatContainer = styled.div<{ width: string; height: string }>`
   height: auto;
   display: flex;
   gap: 10px;
+  border-radius: 0 0 10px 10px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 `;
 
 const RecentChatTabContainer = styled.div<{
@@ -292,7 +315,8 @@ const ListElementContainer = styled.div`
 const ListElement = styled.button<{ active: boolean }>`
   margin: 0.5rem 0 !important;
   font-size: ${uiFonts.size.small} !important;
-  padding: 2px;
+  padding: 8px;
+  border-radius: 4px;
   all: unset;
   color: ${props => (props.active ? uiColors.yellow : uiColors.white)};
   width: 100%;
@@ -300,9 +324,10 @@ const ListElement = styled.button<{ active: boolean }>`
   display: flex;
   align-items: center;
   gap: 4px;
+  transition: all 0.2s ease;
 
   &:hover {
-    color: #ff0;
+    background-color: rgba(255, 255, 255, 0.1);
   }
 `;
 
@@ -323,6 +348,12 @@ const CloseButton = styled.button`
   transition: all 0.2s ease-in-out;
   background-color: ${uiColors.red};
   color: ${uiColors.white};
+  border-radius: 50%;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
   &:hover {
     background-color: ${uiColors.white};
     color: ${uiColors.red};

package/src/components/ChatRevamp/SearchCharacter.tsx

@@ -1,23 +1,23 @@
+import { ICharacter } from '@rpg-engine/shared/dist/types/character.types';
 import React, { useEffect, useRef, useState } from 'react';
-import { RxMagnifyingGlass } from 'react-icons/rx';
+import { RxCross2, 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';
+import { Ellipsis } from '../shared/Ellipsis';
 
 interface ISearchCharacterProps {
   onFocus?: () => void;
   onBlur?: () => void;
   onChangeCharacterName: (characterName: string) => void;
   styles?: IStyles;
-  recentCharacters?: PrivateChatCharacter[];
-  onCharacterClick?: (character: PrivateChatCharacter) => void;
+  recentCharacters?: ICharacter[];
+  onCharacterClick?: (character: ICharacter) => void;
   hideSearchCharacterUI: () => void;
 }
 
-export const SearchCharacter = ({
+export const SearchCharacter: React.FC<ISearchCharacterProps> = ({
   onChangeCharacterName,
   onBlur,
   onFocus,
@@ -25,143 +25,241 @@ export const SearchCharacter = ({
   hideSearchCharacterUI,
   onCharacterClick,
   styles = {
-    textColor: '#c65102',
-    buttonColor: '#005b96',
-    buttonBackgroundColor: 'rgba(0,0,0,.2)',
-    width: '80%',
+    textColor: uiColors.white,
+    buttonColor: uiColors.orange,
+    buttonBackgroundColor: uiColors.darkGray,
+    width: '100%',
     height: 'auto',
   },
-}: ISearchCharacterProps) => {
+}) => {
   const [characterName, setCharacterName] = useState('');
+  const [isFocused, setIsFocused] = useState(false);
   const searchCharacterRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
-     const timer = setTimeout(() => {
-      if (searchCharacterRef.current) {
-        searchCharacterRef.current.focus();
-      }
-    }, 100);
-
-    return () => clearTimeout(timer);
+    if (searchCharacterRef.current) {
+      searchCharacterRef.current.focus();
+    }
   }, []);
 
-  const handleSubmit = (event: React.SyntheticEvent<HTMLFormElement>) => {
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
-    if (!characterName || characterName.trim() === '') return;
+    if (!characterName.trim()) return;
     onChangeCharacterName(characterName);
   };
 
-  const handleCharacterClick = (
-    character: PrivateChatCharacter
-  ) => {
+  const handleCharacterClick = (character: ICharacter) => {
     if (!onCharacterClick) return;
     setCharacterName('');
     onCharacterClick(character);
     hideSearchCharacterUI();
   };
 
+  const handleFocus = () => {
+    setIsFocused(true);
+    onFocus?.();
+  };
+
+  const handleBlur = () => {
+    setIsFocused(false);
+    onBlur?.();
+  };
+
   return (
-    <SearchContainer>
+    <SearchContainer width={styles.width || 'auto'}>
       <Form onSubmit={handleSubmit}>
-        <Column flex={70}>
+        <InputWrapper isFocused={isFocused}>
+          <SearchIcon>
+            <RxMagnifyingGlass />
+          </SearchIcon>
           <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}
+            placeholder="Search for a character..."
             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>
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+          />
+          {characterName && (
+            <ClearButton onClick={() => setCharacterName('')} type="button">
+              <RxCross2 />
+            </ClearButton>
+          )}
+        </InputWrapper>
+        <SearchButton
+          type="submit"
+          buttonColor={styles.buttonColor!}
+          buttonBackgroundColor={styles.buttonBackgroundColor!}
+        >
+          Search
+        </SearchButton>
       </Form>
 
       {recentCharacters && recentCharacters.length > 0 && (
-        <ListContainer>
-          {recentCharacters.map(character => (
-            <ListElement onPointerDown={() => handleCharacterClick(character)} key={character._id}>
-                {character.name}
-            </ListElement>
-          ))}
-        </ListContainer>
+        <ResultsContainer>
+          <ResultsTitle>Recent Characters</ResultsTitle>
+          <ResultsList>
+            {recentCharacters.map(character => (
+              <ResultItem
+                key={character._id}
+                onClick={() => handleCharacterClick(character)}
+              >
+                <CharacterAvatar
+                  src={character.textureKey || '/default-avatar.png'}
+                  alt={character.name}
+                />
+                <CharacterInfo>
+                  <CharacterName>
+                    <Ellipsis maxLines={1} maxWidth="150px">
+                      {character.name}
+                    </Ellipsis>
+                  </CharacterName>
+                  <CharacterDescription>
+                    <Ellipsis
+                      maxLines={1}
+                      maxWidth="150px"
+                    >{`Class: ${character.class}, Level: ${character.skills.level}`}</Ellipsis>
+                  </CharacterDescription>
+                </CharacterInfo>
+              </ResultItem>
+            ))}
+          </ResultsList>
+        </ResultsContainer>
       )}
-      </SearchContainer>
+    </SearchContainer>
   );
 };
 
-
-interface IButtonProps {
-  buttonColor: string;
-  buttonBackgroundColor: string;
-}
-
-const SearchContainer = styled.div`
-width: 100%;
-`
+const SearchContainer = styled.div<{ width: string }>`
+  width: ${({ width }) => width};
+  max-width: 600px;
+  margin: 0 auto;
+`;
 
 const Form = styled.form`
   display: flex;
-  width: 100%;
-  justify-content: center;
+  gap: 10px;
+  margin-bottom: 20px;
+`;
+
+const InputWrapper = styled.div<{ isFocused: boolean }>`
+  position: relative;
+  flex-grow: 1;
+  display: flex;
   align-items: center;
+  background-color: ${uiColors.raisinBlack};
+  border-radius: 24px;
+  padding: 8px 16px;
+  transition: all 0.3s ease;
+  box-shadow: ${({ isFocused }) =>
+    isFocused ? `0 0 0 2px ${uiColors.orange}` : 'none'};
+`;
+
+const SearchIcon = styled.span`
+  color: ${uiColors.gray};
+  margin-right: 8px;
 `;
 
 const TextField = styled.input`
   width: 100%;
-  background-color: rgba(0, 0, 0, 0.25) !important;
-  border: none !important;
-  max-height: 28px !important;
+  background-color: transparent;
+  border: none;
+  color: ${uiColors.white};
+  font-size: ${uiFonts.size.medium};
+  outline: none;
+
+  &::placeholder {
+    color: ${uiColors.gray};
+  }
 `;
 
-const SearchButton = styled.button<IButtonProps>`
-  color: ${({ buttonColor }) => buttonColor};
-  background-color: ${({ buttonBackgroundColor }) => buttonBackgroundColor};
-  width: 28px;
-  height: 28px;
-  border: none !important;
+const ClearButton = styled.button`
+  background: none;
+  border: none;
+  color: ${uiColors.gray};
+  cursor: pointer;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 `;
 
-const ListContainer = styled.ul`
+const SearchButton = styled.button<{
+  buttonColor: string;
+  buttonBackgroundColor: string;
+}>`
+  background-color: ${({ buttonBackgroundColor }) => buttonBackgroundColor};
+  color: ${({ buttonColor }) => buttonColor};
   border: none;
-  overflow-y: scroll;
-  list-style: none;
+  border-radius: 24px;
+  padding: 8px 16px;
+  font-size: ${uiFonts.size.medium};
+  font-weight: bold;
+  cursor: pointer;
+  transition: all 0.3s ease;
+
+  &:hover {
+    background-color: ${uiColors.orange};
+    color: ${uiColors.white};
+  }
+`;
+
+const ResultsContainer = styled.div`
+  background-color: ${uiColors.raisinBlack};
+  border-radius: 8px;
+  padding: 16px;
+`;
+
+const ResultsTitle = styled.h3`
+  color: ${uiColors.white};
+  font-size: ${uiFonts.size.medium};
+  margin-bottom: 12px;
+`;
+
+const ResultsList = styled.ul`
+  list-style-type: none;
   padding: 0;
+  margin: 0;
 `;
 
-const ListElement = styled.li`
-  margin: 0.5rem 0 !important;
-  font-size: ${uiFonts.size.small};
-  padding: 0.5rem 2px;
+const ResultItem = styled.li`
+  display: flex;
+  align-items: center;
+  padding: 8px;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: all 0.2s ease;
 
   &:hover {
-    color: #ff0;
     background-color: ${uiColors.darkGray};
   }
+`;
 
-  button {
-    all: unset;
-  }
+const CharacterAvatar = styled.img`
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  margin-right: 12px;
+  object-fit: cover;
+`;
+
+const CharacterInfo = styled.div`
+  flex-grow: 1;
 `;
 
+const CharacterName = styled.div`
+  color: ${uiColors.white};
+  font-size: ${uiFonts.size.medium};
+  font-weight: bold;
+  margin-bottom: 4px;
+`;
 
+const CharacterDescription = styled.div`
+  color: ${uiColors.gray};
+  font-size: ${uiFonts.size.small};
+`;

package/src/components/Spellbook/cards/SpellInfoWrapper.tsx

@@ -1,5 +1,5 @@
 import { ISpell } from '@rpg-engine/shared';
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { MobileSpellTooltip } from './MobileSpellTooltip';
 import { MagicTooltip } from './SpellTooltip';
 
@@ -7,15 +7,32 @@ interface ISpellInfoWrapperProps {
   spell: ISpell;
   children: React.ReactNode;
   scale?: number;
+  holdTouchDuration?: number; // New prop for hold touch duration
 }
 
 export const SpellInfoWrapper: React.FC<ISpellInfoWrapperProps> = ({
   children,
   spell,
   scale,
+  holdTouchDuration = 500, // Default hold duration to 500ms
 }) => {
   const [isTooltipVisible, setIsTooltipVisible] = useState(false);
   const [isTooltipMobileVisible, setIsTooltipMobileVisible] = useState(false);
+  const touchTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  const handleTouchStart = () => {
+    touchTimeoutRef.current = setTimeout(() => {
+      setIsTooltipMobileVisible(true);
+      setIsTooltipVisible(false);
+    }, holdTouchDuration);
+  };
+
+  const handleTouchEnd = () => {
+    if (touchTimeoutRef.current) {
+      clearTimeout(touchTimeoutRef.current);
+      touchTimeoutRef.current = null;
+    }
+  };
 
   return (
     <div
@@ -23,10 +40,8 @@ export const SpellInfoWrapper: React.FC<ISpellInfoWrapperProps> = ({
         if (!isTooltipMobileVisible) setIsTooltipVisible(true);
       }}
       onMouseLeave={setIsTooltipVisible.bind(null, false)}
-      onTouchEnd={() => {
-        setIsTooltipMobileVisible(true);
-        setIsTooltipVisible(false);
-      }}
+      onTouchStart={handleTouchStart}
+      onTouchEnd={handleTouchEnd}
     >
       {children}
 
@@ -45,4 +60,4 @@ export const SpellInfoWrapper: React.FC<ISpellInfoWrapperProps> = ({
       )}
     </div>
   );
-};
+};

package/src/stories/ChatRevamp.stories.tsx

@@ -206,7 +206,7 @@ const tabsMock = [
 ];
 
 const recentPrivateChatCharactersMock = [
-  { _id: 'someid', name: 'Guilherme' },
+  { _id: 'someid', name: 'Guilhermexxxxxxxxxxxx' },
   { _id: 'someid2', name: 'Guilherme2' },
 ];