@rpg-engine/long-bow 0.7.0 → 0.7.2

package/package.json

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

package/src/components/Chat/Chat.tsx

@@ -1,10 +1,10 @@
-import dayjs from 'dayjs';
+import dayjs from 'dayjs'; // Import dayjs for timestamp formatting
 import React, { useEffect, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
-import { RxPaperPlane } from 'react-icons/rx';
+import { FaTimes } from 'react-icons/fa'; // Import the close icon
 import styled from 'styled-components';
+import { uiColors } from '../../constants/uiColors';
 import { ChatMessage } from '../ChatRevamp/ChatRevamp';
-import { Column } from '../shared/Column';
 
 export interface IStyles {
   textColor?: string;
@@ -33,22 +33,19 @@ export interface IChatProps {
 export const Chat: React.FC<IChatProps> = ({
   chatMessages,
   onSendChatMessage,
+  onCloseButton, // Make sure this prop is being passed
   onFocus,
   onBlur,
   styles = {
-    textColor: '#c65102',
-    buttonColor: '#005b96',
-    buttonBackgroundColor: 'rgba(0,0,0,.2)',
-    width: '80%',
-    height: 'auto',
+    textColor: '#ff6600', // Keeping the original color
+    buttonColor: '#ff6600',
+    buttonBackgroundColor: '#333',
+    width: '100%',
+    height: '100%',
   },
 }) => {
   const [message, setMessage] = useState('');
 
-  useEffect(() => {
-    scrollChatToBottom();
-  }, []);
-
   useEffect(() => {
     scrollChatToBottom();
   }, [chatMessages]);
@@ -60,84 +57,58 @@ export const Chat: React.FC<IChatProps> = ({
     }
   };
 
-  const handleSubmit = (event: React.SyntheticEvent<HTMLFormElement>) => {
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
-    if (!message || message.trim() === '') return;
+    if (!message.trim()) return;
     onSendChatMessage(message);
     setMessage('');
   };
-  const getInputValue = (value: string) => {
-    setMessage(value);
-  };
 
-  const onRenderMessageLines = (
-    emitter: IEmitter,
-    createdAt: string | undefined,
-    message: string
-  ) => {
-    return `${dayjs(createdAt || new Date()).format('HH:mm')} ${
-      emitter?.name ? `${emitter.name}: ` : 'Unknown: '
-    } ${message}`;
+  const truncateName = (name: string, maxLength: number = 10) => {
+    return name.length > maxLength ? name.slice(0, maxLength) + '...' : name;
   };
 
-  const onRenderChatMessages = (chatMessages: ChatMessage[]) => {
-    return chatMessages?.length ? (
-      chatMessages?.map((chatMessage, index) => (
-        <Message
-          color={styles?.textColor || '#c65102'}
-          key={`${chatMessage._id}_${index}`}
-        >
-          {onRenderMessageLines(
-            chatMessage.emitter,
-            chatMessage.createdAt as string,
-            chatMessage.message
-          )}
-        </Message>
-      ))
-    ) : (
-      <Message color={styles?.textColor || '#c65102'}>
-        No messages available.
-      </Message>
-    );
+  const formatMessage = (chatMessage: ChatMessage) => {
+    const timestamp = dayjs(chatMessage.createdAt).format('HH:mm');
+    const truncatedName = truncateName(chatMessage.emitter.name);
+    return `${timestamp} ${truncatedName}: ${chatMessage.message}`;
   };
 
   return (
     <ChatContainer
-      width={styles?.width || '80%'}
-      height={styles?.height || 'auto'}
+      width={styles.width || 'auto'}
+      height={styles.height || 'auto'}
     >
+      <CloseButton onClick={onCloseButton}>
+        <FaTimes />
+      </CloseButton>
       <ErrorBoundary fallback={<p>Oops! Your chat has crashed.</p>}>
         <MessagesContainer className="chat-body">
-          {onRenderChatMessages(chatMessages)}
+          {chatMessages.map((chatMessage, index) => (
+            <Message
+              color={styles.textColor || uiColors.yellow}
+              key={`${chatMessage._id}_${index}`}
+            >
+              {formatMessage(chatMessage)}
+            </Message>
+          ))}
         </MessagesContainer>
 
         <Form onSubmit={handleSubmit}>
-          <Column flex={70}>
-            <TextField
-              value={message}
-              id="inputMessage"
-              onChange={e => getInputValue(e.target.value)}
-              height={20}
-              type="text"
-              autoComplete="off"
-              onFocus={onFocus}
-              onBlur={onBlur}
-              onPointerDown={onFocus}
-              autoFocus
-            />
-          </Column>
-          <Column justifyContent="flex-end">
-            <Button
-              buttonColor={styles?.buttonColor || '#005b96'}
-              buttonBackgroundColor={
-                styles?.buttonBackgroundColor || 'rgba(0,0,0,.5)'
-              }
-              id="chat-send-button"
-              style={{ borderRadius: '20%' }}
-            >
-              <RxPaperPlane size={15} />
-            </Button>
-          </Column>
+          <TextField
+            value={message}
+            onChange={e => setMessage(e.target.value)}
+            type="text"
+            autoComplete="off"
+            onFocus={onFocus}
+            onBlur={onBlur}
+            onPointerDown={onFocus}
+            autoFocus
+            placeholder="Type your message..."
+          />
+          <SendButton type="submit" disabled={!message.trim()}>
+            ▶
+          </SendButton>
         </Form>
       </ErrorBoundary>
     </ChatContainer>
@@ -153,48 +124,122 @@ interface IMessageProps {
   color: string;
 }
 
-interface IButtonProps {
-  buttonColor: string;
-  buttonBackgroundColor: string;
-}
-
 const ChatContainer = styled.div<IContainerProps>`
-  height: ${props => props.height} !important;
-  width: 100%;
-  padding: 10px;
-  background-color: rgba(0, 0, 0, 0.2);
-  height: auto;
-`;
+  width: ${props => props.width};
+  height: ${props => props.height};
+  background-color: #1e1e1e81;
 
-const TextField = styled.input`
-  width: 100%;
-  background-color: rgba(0, 0, 0, 0.25) !important;
-  border: none !important;
-  max-height: 28px !important;
+  display: flex;
+  flex-direction: column;
+  position: relative; // Added for absolute positioning of close button
 `;
 
 const MessagesContainer = styled.div`
-  height: 70%;
-  margin-bottom: 10px;
+  flex-grow: 1;
   overflow-y: auto;
+  padding: 10px;
+  margin-left: 0.9rem;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: #333;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: transparent;
+    border-radius: 3px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: #222;
+  }
+
+  &::-webkit-scrollbar-corner {
+    background: #333;
+  }
+
+  &::-webkit-scrollbar-button {
+    background: #333;
+  }
+
+  &::-webkit-scrollbar-button:hover {
+    background: #222;
+  }
 `;
 
 const Message = styled.div<IMessageProps>`
-  margin-bottom: 8px;
+  margin-bottom: 4px;
   color: ${({ color }) => color};
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.7rem; // Adjusted font size for pixel font
+  white-space: pre-wrap; // Preserve line breaks and spaces
+  word-break: break-word; // Break long words if necessary
 `;
 
 const Form = styled.form`
   display: flex;
   width: 100%;
-  justify-content: center;
-  align-items: center;
+  padding: 5px;
+`;
+
+const TextField = styled.input`
+  flex-grow: 1;
+  background-color: transparent;
+  color: #ff6600;
+  border: none;
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.7rem; // Matching the font size of messages
+  border-radius: 5px;
+  margin-left: 0.9rem;
+
+  &::placeholder {
+    color: ${uiColors.lightGray};
+    font-size: 0.7rem;
+  }
+
+  &:focus {
+    outline: none;
+  }
+`;
+
+const SendButton = styled.button`
+  background-color: transparent;
+  color: #ff6600;
+  border: none;
+  padding: 0 10px;
+  font-size: 18px;
+  cursor: pointer;
+  transition: color 0.3s ease;
+
+  &:hover {
+    color: #ff8533;
+  }
+
+  &:disabled {
+    color: #666;
+    cursor: not-allowed;
+  }
 `;
 
-const Button = styled.button<IButtonProps>`
-  color: ${({ buttonColor }) => buttonColor};
-  background-color: ${({ buttonBackgroundColor }) => buttonBackgroundColor};
-  width: 28px;
-  height: 28px;
-  border: none !important;
+const CloseButton = styled.button`
+  position: absolute;
+  top: 0;
+  right: 0;
+  background-color: transparent;
+  border: none;
+  color: white;
+  font-size: 16px;
+  cursor: pointer;
+  padding: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: color 0.3s ease;
+
+  &:hover {
+    color: ${uiColors.darkYellow};
+  }
 `;

package/src/components/ChatRevamp/ChatRevamp.tsx

@@ -174,7 +174,7 @@ export const ChatRevamp: React.FC<IChatRevampProps> = ({
   };
 
   return (
-    <>
+    <Container>
       {renderTabs()}
       <PrivateChatContainer
         width={styles?.width || '80%'}
@@ -186,10 +186,14 @@ export const ChatRevamp: React.FC<IChatRevampProps> = ({
         </RecentChatTabContainer>
         {renderChatContent()}
       </PrivateChatContainer>
-    </>
+    </Container>
   );
 };
 
+const Container = styled.div`
+  max-width: 800px;
+`;
+
 const TabContainer = styled.div`
   width: 100%;
   display: flex;
@@ -237,7 +241,6 @@ const RecentChatTabContainer = styled.div<{
   min-width: ${props => (props.isOpen ? '180px' : '30px')};
   transition: all 0.3s ease-in-out;
   overflow: hidden;
-
   @media (max-width: 768px) {
     width: ${props => (props.isOpen ? '50%' : '30px')};
     min-width: ${props => (props.isOpen ? '150px' : '30px')};