@rpg-engine/long-bow 0.6.88 → 0.6.90

package/package.json

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

package/src/components/ChatRevamp/SearchCharacter.tsx

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