@rpg-engine/long-bow 0.3.0 → 0.3.24

package/dist/stories/ChatDeprecated.stories.d.ts

@@ -0,0 +1,5 @@
+import { IChatMessage } from '@rpg-engine/shared';
+import { Meta } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, IChatMessage>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.3.0",
+  "version": "0.3.24",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -85,6 +85,7 @@
     "@rollup/plugin-image": "^2.1.1",
     "@rpg-engine/shared": "^0.6.57",
     "dayjs": "^1.11.2",
+    "font-awesome": "^4.7.0",
     "fs-extra": "^10.1.0",
     "is-mobile": "^3.1.1",
     "lodash": "^4.17.21",
@@ -93,6 +94,7 @@
     "mobx-react": "^7.5.0",
     "react-draggable": "^4.4.5",
     "react-error-boundary": "^3.1.4",
+    "react-icons": "^4.7.1",
     "rollup-plugin-image-files": "^1.4.2",
     "rpgui": "^1.0.3"
   }

package/src/components/Chat/Chat.tsx

@@ -2,18 +2,15 @@ import { IChatMessage } from '@rpg-engine/shared';
 import dayjs from 'dayjs';
 import React, { useEffect, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
+import { CiPaperplane } from 'react-icons/ci';
 import styled from 'styled-components';
-import { uiColors } from '../../constants/uiColors';
-import { uiFonts } from '../../constants/uiFonts';
-import { Button, ButtonTypes } from '../Button';
-import { Input } from '../Input';
-import { RPGUIContainer, RPGUIContainerTypes } from '../RPGUIContainer';
 import { Column } from '../shared/Column';
 
 interface IEmitter {
   _id: string;
   name: string;
 }
+
 export interface IChatProps {
   chatMessages: IChatMessage[];
   onSendChatMessage: (message: string) => void;
@@ -23,17 +20,22 @@ export interface IChatProps {
   opacity?: number;
   width?: string;
   height?: string;
+  sendMessage: boolean;
+  color?: string;
+  buttonColor?: string;
+  buttonBackgroundColor?: string;
 }
 
 export const Chat: React.FC<IChatProps> = ({
   chatMessages,
   onSendChatMessage,
-  opacity = 1,
-  width = '100%',
+  width = '80%',
   height = '250px',
-  onCloseButton,
   onFocus,
   onBlur,
+  color = '#c65102',
+  buttonColor = '#005b96',
+  buttonBackgroundColor = '#FFF',
 }) => {
   const [message, setMessage] = useState('');
 
@@ -74,114 +76,88 @@ export const Chat: React.FC<IChatProps> = ({
   const onRenderChatMessages = (chatMessages: IChatMessage[]) => {
     return chatMessages?.length ? (
       chatMessages?.map(({ _id, createdAt, emitter, message }, index) => (
-        <MessageText key={`${_id}_${index}`}>
+        <Message color={color} key={`${_id}_${index}`}>
           {onRenderMessageLines(emitter, createdAt, message)}
-        </MessageText>
+        </Message>
       ))
     ) : (
-      <MessageText>No messages available.</MessageText>
+      <Message color={color}>No messages available.</Message>
     );
   };
 
   return (
-    <Container>
-      <CustomContainer
-        type={RPGUIContainerTypes.FramedGrey}
-        width={width}
-        height={height}
-        className="chat-container"
-        opacity={opacity}
-      >
-        <ErrorBoundary fallback={<p>Oops! Your chat has crashed.</p>}>
-          {onCloseButton && (
-            <CloseButton onClick={onCloseButton} onTouchStart={onCloseButton}>
-              X
-            </CloseButton>
-          )}
-          <RPGUIContainer
-            type={RPGUIContainerTypes.FramedGrey}
-            width={'100%'}
-            height={'80%'}
-            className="chat-body dark-background"
-          >
-            {onRenderChatMessages(chatMessages)}
-          </RPGUIContainer>
-
-          <Form onSubmit={handleSubmit}>
-            <Column flex={70}>
-              <CustomInput
-                value={message}
-                id="inputMessage"
-                onChange={e => getInputValue(e.target.value)}
-                height={20}
-                className="chat-input dark-background"
-                type="text"
-                autoComplete="off"
-                onFocus={onFocus}
-                onBlur={onBlur}
-              />
-            </Column>
-            <Column justifyContent="flex-end">
-              <Button
-                buttonType={ButtonTypes.RPGUIButton}
-                id="chat-send-button"
-              >
-                Send
-              </Button>
-            </Column>
-          </Form>
-        </ErrorBoundary>
-      </CustomContainer>
-    </Container>
+    <ChatContainer width={width} height={height}>
+      <ErrorBoundary fallback={<p>Oops! Your chat has crashed.</p>}>
+        <MessagesContainer>
+          {onRenderChatMessages(chatMessages)}
+        </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}
+            />
+          </Column>
+          <Column justifyContent="flex-end">
+            <Button
+              buttonColor={buttonColor}
+              buttonBackgroundColor={buttonBackgroundColor}
+              id="chat-send-button"
+              style={{ borderRadius: '20%' }}
+            >
+              <CiPaperplane size={20} />
+            </Button>
+          </Column>
+        </Form>
+      </ErrorBoundary>
+    </ChatContainer>
   );
 };
 
-const Container = styled.div`
-  position: relative;
-`;
-
-const CloseButton = styled.div`
-  position: absolute;
-  top: 2px;
-  right: 0px;
-  color: white;
-  z-index: 22;
-  font-size: 0.7rem;
-`;
-
-const CustomInput = styled(Input)`
-  height: 30px;
-  width: 100%;
-
-  .rpgui-content .input {
-    min-height: 39px;
-  }
-`;
+interface IContainerProps {
+  width: string;
+  height: string;
+}
 
-interface ICustomContainerProps {
-  opacity: number;
+interface IMessageProps {
+  color: string;
 }
 
-const CustomContainer = styled(RPGUIContainer)`
-  display: block;
+interface IButtonProps {
+  buttonColor: string;
+  buttonBackgroundColor: string;
+}
 
-  opacity: ${(props: ICustomContainerProps) => props.opacity};
+const ChatContainer = styled.div<IContainerProps>`
+  height: ${props => props.height};
+  width: ${({ width }) => width};
+  padding: 10px;
+  margin-top: 100px;
+  background-color: rgba(0, 0, 0, 0.1);
+`;
 
-  &:hover {
-    opacity: 1;
-  }
+const TextField = styled.input`
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.2) !important;
+  border: none !important;
+`;
 
-  .dark-background {
-    background-color: ${uiColors.darkGray} !important;
-  }
+const MessagesContainer = styled.div`
+  overflow: hidden;
+  height: 70%;
+  margin-bottom: 10px;
+`;
 
-  .chat-body {
-    &.rpgui-container.framed-grey {
-      background: unset;
-    }
-    max-height: 170px;
-    overflow-y: auto;
-  }
+const Message = styled.div<IMessageProps>`
+  margin-bottom: 8px;
+  color: ${({ color }) => color};
 `;
 
 const Form = styled.form`
@@ -191,10 +167,10 @@ const Form = styled.form`
   align-items: center;
 `;
 
-const MessageText = styled.p`
-  display: block !important;
-  width: 100%;
-  font-size: ${uiFonts.size.xsmall} !important;
-  overflow-y: auto;
-  margin: 0;
+const Button = styled.button<IButtonProps>`
+  color: ${({ buttonColor }) => buttonColor};
+  background-color: ${({ buttonBackgroundColor }) => buttonBackgroundColor};
+  width: 50px;
+  height: 40px;
+  border: none !important;
 `;

package/src/components/Chatdeprecated/ChatDeprecated.tsx

@@ -0,0 +1,200 @@
+import { IChatMessage } from '@rpg-engine/shared';
+import dayjs from 'dayjs';
+import React, { useEffect, useState } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import styled from 'styled-components';
+import { uiColors } from '../../constants/uiColors';
+import { uiFonts } from '../../constants/uiFonts';
+import { Button, ButtonTypes } from '../Button';
+import { Input } from '../Input';
+import { RPGUIContainer, RPGUIContainerTypes } from '../RPGUIContainer';
+import { Column } from '../shared/Column';
+
+interface IEmitter {
+  _id: string;
+  name: string;
+}
+export interface IChatDeprecatedProps {
+  chatMessages: IChatMessage[];
+  onSendChatMessage: (message: string) => void;
+  onCloseButton: () => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
+  opacity?: number;
+  width?: string;
+  height?: string;
+}
+
+export const ChatDeprecated: React.FC<IChatDeprecatedProps> = ({
+  chatMessages,
+  onSendChatMessage,
+  opacity = 1,
+  width = '100%',
+  height = '250px',
+  onCloseButton,
+  onFocus,
+  onBlur,
+}) => {
+  const [message, setMessage] = useState('');
+
+  useEffect(() => {
+    scrollChatToBottom();
+  }, []);
+
+  useEffect(() => {
+    scrollChatToBottom();
+  }, [chatMessages]);
+
+  const scrollChatToBottom = () => {
+    const scrollingElement = document.querySelector('.chat-body');
+    if (scrollingElement) {
+      scrollingElement.scrollTop = scrollingElement.scrollHeight;
+    }
+  };
+
+  const handleSubmit = (event: React.SyntheticEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    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 onRenderChatMessages = (chatMessages: IChatMessage[]) => {
+    return chatMessages?.length ? (
+      chatMessages?.map(({ _id, createdAt, emitter, message }, index) => (
+        <MessageText key={`${_id}_${index}`}>
+          {onRenderMessageLines(emitter, createdAt, message)}
+        </MessageText>
+      ))
+    ) : (
+      <MessageText>No messages available.</MessageText>
+    );
+  };
+
+  return (
+    <Container>
+      <CustomContainer
+        type={RPGUIContainerTypes.FramedGrey}
+        width={width}
+        height={height}
+        className="chat-container"
+        opacity={opacity}
+      >
+        <ErrorBoundary fallback={<p>Oops! Your chat has crashed.</p>}>
+          {onCloseButton && (
+            <CloseButton onClick={onCloseButton} onTouchStart={onCloseButton}>
+              X
+            </CloseButton>
+          )}
+          <RPGUIContainer
+            type={RPGUIContainerTypes.FramedGrey}
+            width={'100%'}
+            height={'80%'}
+            className="chat-body dark-background"
+          >
+            {onRenderChatMessages(chatMessages)}
+          </RPGUIContainer>
+
+          <Form onSubmit={handleSubmit}>
+            <Column flex={70}>
+              <CustomInput
+                value={message}
+                id="inputMessage"
+                onChange={e => getInputValue(e.target.value)}
+                height={20}
+                className="chat-input dark-background"
+                type="text"
+                autoComplete="off"
+                onFocus={onFocus}
+                onBlur={onBlur}
+              />
+            </Column>
+            <Column justifyContent="flex-end">
+              <Button
+                buttonType={ButtonTypes.RPGUIButton}
+                id="chat-send-button"
+              >
+                Send
+              </Button>
+            </Column>
+          </Form>
+        </ErrorBoundary>
+      </CustomContainer>
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  position: relative;
+`;
+
+const CloseButton = styled.div`
+  position: absolute;
+  top: 2px;
+  right: 0px;
+  color: white;
+  z-index: 22;
+  font-size: 0.7rem;
+`;
+
+const CustomInput = styled(Input)`
+  height: 30px;
+  width: 100%;
+
+  .rpgui-content .input {
+    min-height: 39px;
+  }
+`;
+
+interface ICustomContainerProps {
+  opacity: number;
+}
+
+const CustomContainer = styled(RPGUIContainer)`
+  display: block;
+
+  opacity: ${(props: ICustomContainerProps) => props.opacity};
+
+  &:hover {
+    opacity: 1;
+  }
+
+  .dark-background {
+    background-color: ${uiColors.darkGray} !important;
+  }
+
+  .chat-body {
+    &.rpgui-container.framed-grey {
+      background: unset;
+    }
+    max-height: 170px;
+    overflow-y: auto;
+  }
+`;
+
+const Form = styled.form`
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+`;
+
+const MessageText = styled.p`
+  display: block !important;
+  width: 100%;
+  font-size: ${uiFonts.size.xsmall} !important;
+  overflow-y: auto;
+  margin: 0;
+`;

package/src/index.tsx

@@ -1,6 +1,7 @@
 export * from './components/Button';
 export * from './components/Character/CharacterSelection';
 export * from './components/Chat/Chat';
+export * from './components/Chatdeprecated/ChatDeprecated';
 export * from './components/CheckButton';
 export * from './components/CraftBook/CraftBook';
 export * from './components/DraggableContainer';
@@ -12,6 +13,7 @@ export * from './components/Input';
 export { ErrorBoundary } from './components/Item/Inventory/ErrorBoundary';
 export * from './components/Item/Inventory/ItemContainer';
 export * from './components/Item/Inventory/ItemSlot';
+export * from './components/itemSelector/ItemSelector';
 export * from './components/ListMenu';
 export * from './components/NPCDialog/NPCDialog';
 export * from './components/NPCDialog/NPCMultiDialog';
@@ -20,17 +22,16 @@ export * from './components/ProgressBar';
 export * from './components/PropertySelect/PropertySelect';
 export * from './components/QuestInfo/QuestInfo';
 export * from './components/QuestList';
-export * from './components/RPGUIContainer';
-export * from './components/RPGUIRoot';
 export * from './components/RadioButton';
 export * from './components/RangeSlider';
+export * from './components/RPGUIContainer';
+export * from './components/RPGUIRoot';
+export * from './components/shared/SpriteFromAtlas';
 export * from './components/SkillProgressBar';
 export * from './components/SkillsContainer';
 export * from './components/TextArea';
 export * from './components/TimeWidget/TimeWidget';
 export * from './components/TradingMenu/TradingMenu';
 export * from './components/Truncate';
-export * from './components/itemSelector/ItemSelector';
-export * from './components/shared/SpriteFromAtlas';
 export * from './components/typography/DynamicText';
 export { useEventListener } from './hooks/useEventListener';

package/src/stories/Chat.stories.tsx

@@ -1,8 +1,8 @@
 import { ChatMessageType, IChatMessage } from '@rpg-engine/shared';
 import { Meta, Story } from '@storybook/react';
 import React from 'react';
-import { Chat } from '../../src/components/Chat/Chat';
-import { RPGUIRoot } from '../../src/components/RPGUIRoot';
+import { Chat } from '../components/Chat/Chat';
+import { RPGUIRoot } from '../components/RPGUIRoot';
 
 const meta: Meta = {
   title: 'Chat',
@@ -152,6 +152,20 @@ const chatMessagesMock = [
     createdAt: '2020-08-20T16:00:00.000Z',
     updatedAt: '2020-08-20T16:00:00.000Z',
   },
+  {
+    _id: 'test-id-9',
+    message: '22222EEECT!',
+    emitter: {
+      _id: 'someid',
+      name: 'Guilherme',
+    },
+    type: ChatMessageType.Global,
+    x: 128,
+    y: 128,
+    scene: 'MainScene',
+    createdAt: '2020-08-20T16:00:00.000Z',
+    updatedAt: '2020-08-20T16:00:00.000Z',
+  },
 ];
 
 const Template: Story<IChatMessage> = args => (
@@ -162,6 +176,7 @@ const Template: Story<IChatMessage> = args => (
       opacity={0.5}
       height={'200px'}
       onCloseButton={() => console.log('closing chat...')}
+      sendMessage={true}
       {...args}
     />
   </RPGUIRoot>