@rpg-engine/long-bow 0.7.5 → 0.7.8

package/package.json

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

package/src/components/Chat/Chat.tsx

@@ -1,7 +1,7 @@
-import dayjs from 'dayjs'; // Import dayjs for timestamp formatting
+import dayjs from 'dayjs';
 import React, { useEffect, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
-import { FaTimes } from 'react-icons/fa'; // Import the close icon
+import { FaTimes } from 'react-icons/fa';
 import styled from 'styled-components';
 import { uiColors } from '../../constants/uiColors';
 import { ChatMessage } from '../ChatRevamp/ChatRevamp';
@@ -33,11 +33,11 @@ export interface IChatProps {
 export const Chat: React.FC<IChatProps> = ({
   chatMessages,
   onSendChatMessage,
-  onCloseButton, // Make sure this prop is being passed
+  onCloseButton,
   onFocus,
   onBlur,
   styles = {
-    textColor: '#ff6600', // Keeping the original color
+    textColor: '#ff6600',
     buttonColor: '#ff6600',
     buttonBackgroundColor: '#333',
     width: '100%',
@@ -125,82 +125,89 @@ interface IMessageProps {
 }
 
 const ChatContainer = styled.div<IContainerProps>`
-  width: 100%;
-  background-color: #1e1e1e81;
-
+  width: ${props => props.width};
+  height: ${props => props.height};
+  background-color: rgba(30, 30, 30, 0.3);
   display: flex;
   flex-direction: column;
-  position: relative; // Added for absolute positioning of close button
+  position: relative;
+  border-radius: 8px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+`;
+
+const CloseButton = styled.button`
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  background-color: transparent;
+  border: none;
+  color: white;
+  font-size: 16px;
+  cursor: pointer;
+  z-index: 1;
 `;
 
 const MessagesContainer = styled.div`
   flex-grow: 1;
   overflow-y: auto;
-  padding: 10px;
-  margin-left: 0.9rem;
+  padding: 12px;
+  margin-bottom: 8px;
+
+  scrollbar-width: thin;
+  scrollbar-color: rgba(51, 51, 51, 0.4) rgba(30, 30, 30, 0.4);
 
   &::-webkit-scrollbar {
     width: 6px;
   }
 
   &::-webkit-scrollbar-track {
-    background: #333;
+    background: rgba(30, 30, 30, 0.4);
   }
 
   &::-webkit-scrollbar-thumb {
-    background: transparent;
+    background-color: rgba(51, 51, 51, 0.4);
     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: 4px;
+  margin-bottom: 6px;
   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
+  font-size: 0.7rem;
+  line-height: 1.4;
+  word-break: break-word;
 `;
 
 const Form = styled.form`
   display: flex;
-  width: 100%;
-  padding: 5px;
+  padding: 8px;
+  background-color: rgba(42, 42, 42, 0.4);
 `;
 
 const TextField = styled.input`
   flex-grow: 1;
-  background-color: transparent;
+  background-color: rgba(26, 26, 26, 0.6);
   color: #ff6600;
-  border: none;
+  border: 1px solid rgba(51, 51, 51, 0.6);
+  border-radius: 4px;
+  padding: 8px;
+  margin-right: 8px;
   font-family: 'Press Start 2P', cursive;
-  font-size: 0.7rem; // Matching the font size of messages
-  border-radius: 5px;
-  margin-left: 0.9rem;
+  font-size: 0.7rem;
+  height: 32px;
+  transition: border-color 0.3s, background-color 0.3s;
 
   &::placeholder {
-    color: ${uiColors.lightGray};
-    font-size: 0.7rem;
+    color: rgba(255, 255, 255, 0.5);
+    font-size: 0.6rem;
   }
 
   &:focus {
     outline: none;
+    border-color: #ff6600;
+    background-color: rgba(42, 42, 42, 0.9);
   }
 `;
 
@@ -208,37 +215,13 @@ const SendButton = styled.button`
   background-color: transparent;
   color: #ff6600;
   border: none;
-  padding: 0 10px;
-  font-size: 18px;
+  padding: 8px 12px;
+  font-size: 14px;
   cursor: pointer;
-  transition: color 0.3s ease;
-
-  &:hover {
-    color: #ff8533;
-  }
+  transition: opacity 0.3s ease;
 
   &:disabled {
-    color: #666;
+    opacity: 0.5;
     cursor: not-allowed;
   }
 `;
-
-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

@@ -207,11 +207,12 @@ const Tab = styled.button<{ active: boolean }>`
   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)};
+  border-color: ${props =>
+    props.active ? 'rgba(198, 81, 2, 0.5)' : 'rgba(128, 128, 128, 0.5)'};
 
   background-color: ${props =>
-    props.active ? uiColors.orange : 'transparent'};
-  color: ${props => (props.active ? 'white' : uiColors.raisinBlack)};
+    props.active ? uiColors.orange : 'rgba(0, 0, 0, 0.2)'};
+  color: ${props => (props.active ? 'white' : uiColors.gray)};
 `;
 
 const PrivateChatContainer = styled.div<{ width: string; height: string }>`