@rpg-engine/long-bow 0.5.41 → 0.5.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.5.41",
+  "version": "0.5.43",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -83,7 +83,7 @@
   },
   "dependencies": {
     "@rollup/plugin-image": "^2.1.1",
-    "@rpg-engine/shared": "^0.8.92",
+    "@rpg-engine/shared": "^0.9.0",
     "dayjs": "^1.11.2",
     "font-awesome": "^4.7.0",
     "fs-extra": "^10.1.0",

package/src/components/Chat/Chat.tsx

@@ -161,8 +161,8 @@ interface IButtonProps {
 }
 
 const ChatContainer = styled.div<IContainerProps>`
-  height: ${props => props.height};
-  width: ${({ width }) => width};
+  height: ${props => props.height} !important;
+  width: 100%;
   padding: 10px;
   background-color: rgba(0, 0, 0, 0.2);
   height: auto;
@@ -178,10 +178,7 @@ const TextField = styled.input`
 const MessagesContainer = styled.div`
   height: 70%;
   margin-bottom: 10px;
-  .chat-body {
-    max-height: auto;
-    overflow-y: auto;
-  }
+  overflow-y: auto;
 `;
 
 const Message = styled.div<IMessageProps>`

package/src/components/ChatRevamp/ChatRevamp.tsx

@@ -4,16 +4,13 @@ import {
   IPrivateChatMessage,
 } from '@rpg-engine/shared';
 import React, { useEffect, useState } from 'react';
+import { RxCross2, RxMagnifyingGlass } from 'react-icons/rx';
 import styled from 'styled-components';
 import { uiColors } from '../../constants/uiColors';
+import { uiFonts } from '../../constants/uiFonts';
 import { Chat, IStyles } from '../Chat/Chat';
 import { SearchCharacter } from './SearchCharacter';
 
-export interface ITabStyles {
-  width?: string;
-  height?: string;
-}
-
 export type PrivateChatCharacter = Pick<ICharacter, '_id' | 'name'>;
 
 export interface IChatRevampProps {
@@ -22,7 +19,6 @@ export interface IChatRevampProps {
   onCloseButton: () => void;
   onFocus?: () => void;
   onBlur?: () => void;
-  opacity?: number;
   styles?: IStyles;
   tabs: { label: string; id: string }[];
   activeTab: string;
@@ -31,6 +27,11 @@ export interface IChatRevampProps {
   onChangeCharacterName: (characterName: string) => void;
   onCharacterClick?: (character: PrivateChatCharacter) => void;
   onSendPrivateChatMessage: (message: string) => void;
+  recentChatCharacters?: PrivateChatCharacter[];
+  recentSelectedChatCharacterId?: string;
+  onPreviousChatCharacterClick?: (character: PrivateChatCharacter) => void;
+  onRemoveRecentChatCharacter?: (character: PrivateChatCharacter) => void;
+  unseenMessageCharacterIds?: string[];
 }
 
 export const ChatRevamp = ({
@@ -47,15 +48,29 @@ export const ChatRevamp = ({
   privateChatCharacters,
   onCharacterClick,
   onSendPrivateChatMessage,
+  recentChatCharacters,
+  recentSelectedChatCharacterId = '',
+  onPreviousChatCharacterClick,
+  onRemoveRecentChatCharacter,
+  unseenMessageCharacterIds = [],
 }: IChatRevampProps) => {
-  const [showSearchCharacter, setShowSearchCharacter] = useState(true);
+  const [showSearchCharacterUI, setShowSearchCharacterUI] = useState(true);
+  const [showRecentChats, setShowRecentChats] = useState(false);
 
   useEffect(() => {
-    setShowSearchCharacter(true);
+    setShowSearchCharacterUI(true);
   }, [activeTab]);
 
   const isPrivate = activeTab === 'private';
 
+  const handlePreviousChatCharacterClick = (
+    character: PrivateChatCharacter
+  ) => {
+    if (!onPreviousChatCharacterClick) return;
+    onPreviousChatCharacterClick(character);
+    setShowSearchCharacterUI(false);
+  };
+
   return (
     <>
       <TabContainer>
@@ -69,29 +84,81 @@ export const ChatRevamp = ({
           </Tab>
         ))}
       </TabContainer>
-      {isPrivate && showSearchCharacter ? (
-        <SearchCharacter
-          onFocus={onFocus}
-          onBlur={onBlur}
-          onChangeCharacterName={onChangeCharacterName}
-          styles={styles}
-          recentCharacters={privateChatCharacters}
-          setShowSearchCharacter={setShowSearchCharacter}
-          onCharacterClick={onCharacterClick}
-        />
-      ) : (
-        <Chat
-          chatMessages={chatMessages}
-          onSendChatMessage={
-            isPrivate ? onSendPrivateChatMessage : onSendGlobalChatMessage
-          }
-          sendMessage={true}
-          onCloseButton={onCloseButton}
-          styles={styles}
-          onFocus={onFocus}
-          onBlur={onBlur}
-        />
-      )}
+      <PrivateChatContainer
+        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 ? true : false
+              }
+            >
+              <BurgerLineIcon></BurgerLineIcon>
+              <BurgerLineIcon></BurgerLineIcon>
+              <BurgerLineIcon></BurgerLineIcon>
+            </BurgerIconContainer>
+            {showRecentChats && (
+              <SearchButton
+                onPointerDown={() => setShowSearchCharacterUI(true)}
+              >
+                <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>
+        {isPrivate && showSearchCharacterUI ? (
+          <SearchCharacter
+            onFocus={onFocus}
+            onBlur={onBlur}
+            onChangeCharacterName={onChangeCharacterName}
+            styles={styles}
+            recentCharacters={privateChatCharacters}
+            setShowSearchCharacter={setShowSearchCharacterUI}
+            onCharacterClick={onCharacterClick}
+          />
+        ) : (
+          <Chat
+            chatMessages={chatMessages}
+            onSendChatMessage={
+              isPrivate ? onSendPrivateChatMessage : onSendGlobalChatMessage
+            }
+            sendMessage={true}
+            onCloseButton={onCloseButton}
+            styles={styles}
+            onFocus={onFocus}
+            onBlur={onBlur}
+          />
+        )}
+      </PrivateChatContainer>
     </>
   );
 };
@@ -119,3 +186,136 @@ const Tab = styled.button<{ active: boolean }>`
     props.active ? uiColors.orange : 'transparent'};
   color: ${props => (props.active ? 'white' : uiColors.raisinBlack)};
 `;
+
+const PrivateChatContainer = styled.div<{ width: string; height: string }>`
+  width: ${({ width }) => width};
+  min-height: ${({ height }) => height} !important;
+  padding: 10px;
+  background-color: rgba(0, 0, 0, 0.2);
+  height: auto;
+  display: flex;
+  gap: 10px;
+`;
+
+const RecentChatTabContainer = styled.div<{
+  isPrivate: boolean;
+  isOpen: boolean;
+}>`
+  display: ${props => (props.isPrivate ? 'flex' : 'none')};
+  flex-direction: column;
+  border-right: 1px solid ${uiColors.gray};
+  outline: none;
+  width: ${props => (props.isOpen ? '20%' : '30px')} !important;
+  transition: width 0.3s ease-in-out;
+  overflow: hidden;
+
+  @media (max-width: 768px) {
+    width: ${props => (props.isOpen ? '40%' : '30px')} !important;
+  }
+`;
+
+const RecentChatTopBar = styled.div<{ isOpen: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 30px;
+`;
+
+const SearchButton = styled.button`
+  border: none;
+  background-color: transparent;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 2px;
+  padding: 4px;
+  position: relative;
+`;
+
+const BurgerIconContainer = styled.button<{ hasUnseenMessages?: boolean }>`
+  border: none;
+  background-color: transparent;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  padding: 4px;
+  gap: 2px;
+  position: relative;
+
+  &:after {
+    content: '';
+    width: 6px;
+    height: 6px;
+    position: absolute;
+    top: 0;
+    right: 2px;
+    border-radius: 50%;
+    background-color: ${uiColors.lightGreen};
+    display: ${props => (props.hasUnseenMessages ? 'block' : 'none')};
+  }
+`;
+
+const BurgerLineIcon = styled.span`
+  width: 1rem;
+  height: 2px;
+  background-color: #ffffff;
+`;
+
+const RecentChatLogContainer = styled.div<{ isOpen: boolean }>`
+  border: none;
+  list-style: none;
+  display: flex;
+  opacity: ${props => (props.isOpen ? 1 : 0)};
+  flex-direction: column;
+  gap: 0.5rem;
+  transition: opacity 0.3s ease-in-out;
+  padding: 0;
+  margin: 0;
+  flex: 1;
+`;
+
+const ListElementContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const ListElement = styled.button<{ active: boolean }>`
+  margin: 0.5rem 0 !important;
+  font-size: ${uiFonts.size.small} !important;
+  padding: 2px;
+  all: unset;
+  color: ${props => (props.active ? uiColors.yellow : uiColors.white)};
+  width: 100%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+
+  &:hover {
+    color: #ff0;
+  }
+`;
+
+const StatusDot = styled.span<{ isUnseen: boolean }>`
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: ${props =>
+    props.isUnseen ? uiColors.lightGreen : uiColors.gray};
+  display: inline-block;
+  margin-right: 6px;
+`;
+
+const CloseButton = styled.button`
+  all: unset;
+  font-size: ${uiFonts.size.xxsmall};
+  margin: 0 0.5rem;
+  transition: all 0.2s ease-in-out;
+  background-color: ${uiColors.red};
+  color: ${uiColors.white};
+  &:hover {
+    background-color: ${uiColors.white};
+    color: ${uiColors.red};
+  }
+`;

package/src/components/ChatRevamp/SearchCharacter.tsx

@@ -50,19 +50,18 @@ export const SearchCharacter = ({
   };
 
   return (
-    <SearchCharacterContainer
-      width={styles?.width || '80%'}
-      height={styles?.height || 'auto'}
-    >
+    <SearchContainer>
       <Form onSubmit={handleSubmit}>
         <Column flex={70}>
           <TextField
             value={characterName}
-            id="inputCharacterName"
+            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"
@@ -70,11 +69,11 @@ export const SearchCharacter = ({
             onBlur={onBlur}
             onPointerDown={onFocus}
             autoFocus
-            placeholder="Type a character name..."
-          />
+           />
         </Column>
         <Column justifyContent="flex-end">
           <SearchButton
+            type='submit'
             buttonColor={styles?.buttonColor || '#005b96'}
             buttonBackgroundColor={
               styles?.buttonBackgroundColor || 'rgba(0,0,0,.5)'
@@ -96,27 +95,19 @@ export const SearchCharacter = ({
           ))}
         </ListContainer>
       )}
-    </SearchCharacterContainer>
+      </SearchContainer>
   );
 };
 
-interface IContainerProps {
-  width: string;
-  height: string;
-}
 
 interface IButtonProps {
   buttonColor: string;
   buttonBackgroundColor: string;
 }
 
-const SearchCharacterContainer = styled.div<IContainerProps>`
-  height: ${props => props.height};
-  width: ${({ width }) => width};
-  padding: 10px;
-  background-color: rgba(0, 0, 0, 0.2);
-  height: auto;
-`;
+const SearchContainer = styled.div`
+width: 100%;
+`
 
 const Form = styled.form`
   display: flex;
@@ -150,6 +141,7 @@ const ListContainer = styled.ul`
 const ListElement = styled.li`
   margin: 0.5rem 0 !important;
   font-size: ${uiFonts.size.small};
+  padding: 0.5rem 2px;
 
   &:hover {
     color: #ff0;

package/src/components/Item/Inventory/ItemContainer.tsx

@@ -66,6 +66,8 @@ type onDragStart =
   | undefined;
 type onDragEnd = ((quantity?: number) => void) | undefined;
 
+const MIN_SLOTS_FOR_SCROLL = 20;
+
 export const ItemContainer: React.FC<IItemContainerProps> = ({
   itemContainer,
   onClose,
@@ -241,7 +243,11 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
               atlasJSON={atlasJSON}
             />
           )}
-        <ItemsContainer className="item-container-body" ref={containerRef}>
+        <ItemsContainer
+          className="item-container-body"
+          ref={containerRef}
+          isScrollable={itemContainer.slotQty > MIN_SLOTS_FOR_SCROLL}
+        >
           {onRenderSlots()}
         </ItemsContainer>
       </SlotsContainer>
@@ -255,12 +261,16 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
   );
 };
 
-const ItemsContainer = styled.div`
+interface IItemsContainerProps {
+  isScrollable: boolean;
+}
+
+const ItemsContainer = styled.div<IItemsContainerProps>`
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   max-height: 270px;
-  overflow-y: auto;
+  overflow-y: ${({ isScrollable }) => (isScrollable ? 'scroll' : 'hidden')};
   overflow-x: hidden;
   width: 415px;
 `;

package/src/mocks/itemContainer.mocks.ts

@@ -5,7 +5,7 @@ import {
   ItemSlotType,
   ItemSubType,
   ItemType,
-  UserAccountTypes
+  UserAccountTypes,
 } from '@rpg-engine/shared';
 
 export const items: IItem[] = [
@@ -586,7 +586,7 @@ export const itemContainerMock = (
       _id: '629ba0b6fe3f43002f58f23b',
       name: 'Item Container',
       owner: '629ba0b6fe3f43002f58f23b',
-      slotQty: 60,
+      slotQty: 20,
       slots: {
         0: items[0],
         1: items[1],
@@ -614,4 +614,4 @@ export const itemContainerMock = (
       ...props,
     };
   }
-}
+};

package/src/stories/ChatRevamp.stories.tsx

@@ -221,7 +221,6 @@ Default.args = {
   onSendGlobalChatMessage: () => {},
   onChangeCharacterName: () => {},
   chatMessages: chatMessagesMock,
-  opacity: 0.5,
   styles: { width: `calc(100% - 0.5rem * 2)`, height: '200px' },
   onCloseButton: () => console.log('closing chat...'),
   tabs: tabsMock,
@@ -237,7 +236,6 @@ PrivateCharacters.args = {
   onSendGlobalChatMessage: () => {},
   onChangeCharacterName: () => {},
   chatMessages: chatMessagesMock,
-  opacity: 0.5,
   styles: { width: `calc(100% - 0.5rem * 2)`, height: '200px' },
   onCloseButton: () => {},
   tabs: tabsMock,
@@ -245,4 +243,7 @@ PrivateCharacters.args = {
   activeTab: 'private',
   onChangeTab: () => {},
   onSendPrivateChatMessage: () => {},
+  recentChatCharacters: recentPrivateChatCharactersMock,
+  recentSelectedChatCharacterId: recentPrivateChatCharactersMock[0]._id,
+  unseenMessageCharacterIds: [recentPrivateChatCharactersMock[0]._id],
 };