@rpg-engine/long-bow 0.3.45 → 0.3.47

package/src/components/Character/CharacterSelection.tsx

@@ -1,96 +1,96 @@
-import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
-
-import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
-
-import entitiesJSON from '../../mocks/atlas/entities/entities.json';
-import entitiesIMG from '../../mocks/atlas/entities/entities.png';
-import { ErrorBoundary } from '../Item/Inventory/ErrorBoundary';
-import PropertySelect, {
-  IPropertiesProps,
-} from '../PropertySelect/PropertySelect';
-
-export interface ICharacterProps {
-  name: string;
-  textureKey: string;
-}
-
-export interface ICharacterSelectionProps {
-  availableCharacters: ICharacterProps[];
-  onChange: (textureKey: string) => void;
-}
-
-export const CharacterSelection: React.FC<ICharacterSelectionProps> = ({
-  availableCharacters,
-  onChange,
-}) => {
-  const propertySelectValues = availableCharacters.map(item => {
-    return {
-      id: item.textureKey,
-      name: item.name,
-    };
-  });
-
-  const [selectedValue, setSelectedValue] = useState<IPropertiesProps>();
-  const [selectedSpriteKey, setSelectedSpriteKey] = useState('');
-
-  const onSelectedValueChange = () => {
-    const textureKey = selectedValue ? selectedValue.id : '';
-    const spriteKey = textureKey ? textureKey + '/down/standing/0.png' : '';
-
-    if (spriteKey === selectedSpriteKey) {
-      return;
-    }
-
-    setSelectedSpriteKey(spriteKey);
-    onChange(textureKey);
-  };
-
-  useEffect(() => {
-    onSelectedValueChange();
-  }, [selectedValue]);
-
-  useEffect(() => {
-    setSelectedValue(propertySelectValues[0]);
-  }, [availableCharacters]);
-
-  return (
-    <Container>
-      {selectedSpriteKey && (
-        <ErrorBoundary>
-          <SpriteFromAtlas
-            spriteKey={selectedSpriteKey}
-            atlasIMG={entitiesIMG}
-            atlasJSON={entitiesJSON}
-            imgScale={4}
-            height={80}
-            width={64}
-            containerStyle={{
-              display: 'flex',
-              alignItems: 'center',
-              paddingBottom: '15px',
-            }}
-            imgStyle={{
-              left: '22px',
-            }}
-          />
-        </ErrorBoundary>
-      )}
-      <PropertySelect
-        availableProperties={propertySelectValues}
-        onChange={value => {
-          setSelectedValue(value);
-        }}
-      />
-    </Container>
-  );
-};
-
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  image-rendering: pixelated;
-`;
-
-export default CharacterSelection;
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+
+import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
+
+import entitiesJSON from '../../mocks/atlas/entities/entities.json';
+import entitiesIMG from '../../mocks/atlas/entities/entities.png';
+import { ErrorBoundary } from '../Item/Inventory/ErrorBoundary';
+import PropertySelect, {
+  IPropertiesProps,
+} from '../PropertySelect/PropertySelect';
+
+export interface ICharacterProps {
+  name: string;
+  textureKey: string;
+}
+
+export interface ICharacterSelectionProps {
+  availableCharacters: ICharacterProps[];
+  onChange: (textureKey: string) => void;
+}
+
+export const CharacterSelection: React.FC<ICharacterSelectionProps> = ({
+  availableCharacters,
+  onChange,
+}) => {
+  const propertySelectValues = availableCharacters.map(item => {
+    return {
+      id: item.textureKey,
+      name: item.name,
+    };
+  });
+
+  const [selectedValue, setSelectedValue] = useState<IPropertiesProps>();
+  const [selectedSpriteKey, setSelectedSpriteKey] = useState('');
+
+  const onSelectedValueChange = () => {
+    const textureKey = selectedValue ? selectedValue.id : '';
+    const spriteKey = textureKey ? textureKey + '/down/standing/0.png' : '';
+
+    if (spriteKey === selectedSpriteKey) {
+      return;
+    }
+
+    setSelectedSpriteKey(spriteKey);
+    onChange(textureKey);
+  };
+
+  useEffect(() => {
+    onSelectedValueChange();
+  }, [selectedValue]);
+
+  useEffect(() => {
+    setSelectedValue(propertySelectValues[0]);
+  }, [availableCharacters]);
+
+  return (
+    <Container>
+      {selectedSpriteKey && (
+        <ErrorBoundary>
+          <SpriteFromAtlas
+            spriteKey={selectedSpriteKey}
+            atlasIMG={entitiesIMG}
+            atlasJSON={entitiesJSON}
+            imgScale={4}
+            height={80}
+            width={64}
+            containerStyle={{
+              display: 'flex',
+              alignItems: 'center',
+              paddingBottom: '15px',
+            }}
+            imgStyle={{
+              left: '22px',
+            }}
+          />
+        </ErrorBoundary>
+      )}
+      <PropertySelect
+        availableProperties={propertySelectValues}
+        onChange={value => {
+          setSelectedValue(value);
+        }}
+      />
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  image-rendering: pixelated;
+`;
+
+export default CharacterSelection;

package/src/components/Chat/Chat.tsx

@@ -1,194 +1,194 @@
-import { IChatMessage } from '@rpg-engine/shared';
-import dayjs from 'dayjs';
-import React, { useEffect, useState } from 'react';
-import { ErrorBoundary } from 'react-error-boundary';
-import { RxPaperPlane } from 'react-icons/rx';
-import styled from 'styled-components';
-import { Column } from '../shared/Column';
-
-interface IEmitter {
-  _id: string;
-  name: string;
-}
-
-interface IStyles {
-  textColor?: string;
-  buttonColor?: string;
-  buttonBackgroundColor?: string;
-  width?: string;
-  height?: string;
-}
-
-export interface IChatProps {
-  chatMessages: IChatMessage[];
-  onSendChatMessage: (message: string) => void;
-  onCloseButton: () => void;
-  onFocus?: () => void;
-  onBlur?: () => void;
-  opacity?: number;
-  sendMessage: boolean;
-  styles?: IStyles;
-}
-
-export const Chat: React.FC<IChatProps> = ({
-  chatMessages,
-  onSendChatMessage,
-  onFocus,
-  onBlur,
-  styles = {
-    textColor: '#c65102',
-    buttonColor: '#005b96',
-    buttonBackgroundColor: 'rgba(0,0,0,.2)',
-    width: '80%',
-    height: 'auto',
-  },
-}) => {
-  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) => (
-        <Message color={styles?.textColor || '#c65102'} key={`${_id}_${index}`}>
-          {onRenderMessageLines(emitter, createdAt as string, message)}
-        </Message>
-      ))
-    ) : (
-      <Message color={styles?.textColor || '#c65102'}>
-        No messages available.
-      </Message>
-    );
-  };
-
-  return (
-    <ChatContainer
-      width={styles?.width || '80%'}
-      height={styles?.height || 'auto'}
-    >
-      <ErrorBoundary fallback={<p>Oops! Your chat has crashed.</p>}>
-        <MessagesContainer className="chat-body">
-          {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}
-              onTouchStart={onFocus}
-            />
-          </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>
-        </Form>
-      </ErrorBoundary>
-    </ChatContainer>
-  );
-};
-
-interface IContainerProps {
-  width: string;
-  height: string;
-}
-
-interface IMessageProps {
-  color: string;
-}
-
-interface IButtonProps {
-  buttonColor: string;
-  buttonBackgroundColor: string;
-}
-
-const ChatContainer = styled.div<IContainerProps>`
-  height: ${props => props.height};
-  width: ${({ width }) => width};
-  padding: 10px;
-  background-color: rgba(0, 0, 0, 0.2);
-  height: auto;
-`;
-
-const TextField = styled.input`
-  width: 100%;
-  background-color: rgba(0, 0, 0, 0.25) !important;
-  border: none !important;
-  max-height: 28px !important;
-`;
-
-const MessagesContainer = styled.div`
-  height: 70%;
-  margin-bottom: 10px;
-  .chat-body {
-    max-height: auto;
-    overflow-y: auto;
-  }
-`;
-
-const Message = styled.div<IMessageProps>`
-  margin-bottom: 8px;
-  color: ${({ color }) => color};
-`;
-
-const Form = styled.form`
-  display: flex;
-  width: 100%;
-  justify-content: center;
-  align-items: center;
-`;
-
-const Button = styled.button<IButtonProps>`
-  color: ${({ buttonColor }) => buttonColor};
-  background-color: ${({ buttonBackgroundColor }) => buttonBackgroundColor};
-  width: 28px;
-  height: 28px;
-  border: none !important;
-`;
+import { IChatMessage } from '@rpg-engine/shared';
+import dayjs from 'dayjs';
+import React, { useEffect, useState } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { RxPaperPlane } from 'react-icons/rx';
+import styled from 'styled-components';
+import { Column } from '../shared/Column';
+
+interface IEmitter {
+  _id: string;
+  name: string;
+}
+
+interface IStyles {
+  textColor?: string;
+  buttonColor?: string;
+  buttonBackgroundColor?: string;
+  width?: string;
+  height?: string;
+}
+
+export interface IChatProps {
+  chatMessages: IChatMessage[];
+  onSendChatMessage: (message: string) => void;
+  onCloseButton: () => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
+  opacity?: number;
+  sendMessage: boolean;
+  styles?: IStyles;
+}
+
+export const Chat: React.FC<IChatProps> = ({
+  chatMessages,
+  onSendChatMessage,
+  onFocus,
+  onBlur,
+  styles = {
+    textColor: '#c65102',
+    buttonColor: '#005b96',
+    buttonBackgroundColor: 'rgba(0,0,0,.2)',
+    width: '80%',
+    height: 'auto',
+  },
+}) => {
+  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) => (
+        <Message color={styles?.textColor || '#c65102'} key={`${_id}_${index}`}>
+          {onRenderMessageLines(emitter, createdAt as string, message)}
+        </Message>
+      ))
+    ) : (
+      <Message color={styles?.textColor || '#c65102'}>
+        No messages available.
+      </Message>
+    );
+  };
+
+  return (
+    <ChatContainer
+      width={styles?.width || '80%'}
+      height={styles?.height || 'auto'}
+    >
+      <ErrorBoundary fallback={<p>Oops! Your chat has crashed.</p>}>
+        <MessagesContainer className="chat-body">
+          {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}
+              onTouchStart={onFocus}
+            />
+          </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>
+        </Form>
+      </ErrorBoundary>
+    </ChatContainer>
+  );
+};
+
+interface IContainerProps {
+  width: string;
+  height: string;
+}
+
+interface IMessageProps {
+  color: string;
+}
+
+interface IButtonProps {
+  buttonColor: string;
+  buttonBackgroundColor: string;
+}
+
+const ChatContainer = styled.div<IContainerProps>`
+  height: ${props => props.height};
+  width: ${({ width }) => width};
+  padding: 10px;
+  background-color: rgba(0, 0, 0, 0.2);
+  height: auto;
+`;
+
+const TextField = styled.input`
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.25) !important;
+  border: none !important;
+  max-height: 28px !important;
+`;
+
+const MessagesContainer = styled.div`
+  height: 70%;
+  margin-bottom: 10px;
+  .chat-body {
+    max-height: auto;
+    overflow-y: auto;
+  }
+`;
+
+const Message = styled.div<IMessageProps>`
+  margin-bottom: 8px;
+  color: ${({ color }) => color};
+`;
+
+const Form = styled.form`
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+`;
+
+const Button = styled.button<IButtonProps>`
+  color: ${({ buttonColor }) => buttonColor};
+  background-color: ${({ buttonBackgroundColor }) => buttonBackgroundColor};
+  width: 28px;
+  height: 28px;
+  border: none !important;
+`;