@rpg-engine/long-bow 0.1.92 → 0.1.96

package/src/components/Chat/Chat.tsx

@@ -1,193 +1,193 @@
-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 { colors } from '../../constants/uiColors';
-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;
-  onCloseButton: () => void;
-  opacity?: number;
-  width?: string;
-  height?: string;
-}
-
-export const Chat: React.FC<IChatProps> = ({
-  chatMessages,
-  onSendChatMessage,
-  opacity = 1,
-  width = '100%',
-  height = '250px',
-  onCloseButton,
-}) => {
-  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"
-              />
-            </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: ${colors.darkGrey} !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: 0.7rem !important;
-  overflow-y: auto;
-  margin: 0;
-`;
+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 { colors } from '../../constants/uiColors';
+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;
+  onCloseButton: () => void;
+  opacity?: number;
+  width?: string;
+  height?: string;
+}
+
+export const Chat: React.FC<IChatProps> = ({
+  chatMessages,
+  onSendChatMessage,
+  opacity = 1,
+  width = '100%',
+  height = '250px',
+  onCloseButton,
+}) => {
+  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"
+              />
+            </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: ${colors.darkGrey} !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: 0.7rem !important;
+  overflow-y: auto;
+  margin: 0;
+`;

package/src/components/CheckButton.tsx

@@ -1,65 +1,65 @@
-import React, { useEffect, useState } from 'react';
-
-export interface ICheckItems {
-  label: string;
-  value: string;
-}
-
-export interface ICheckProps {
-  items: ICheckItems[];
-  onChange: (selectedValues: IChecklistSelectedValues) => void;
-}
-
-interface IChecklistSelectedValues {
-  [label: string]: boolean;
-}
-
-export const CheckButton: React.FC<ICheckProps> = ({ items, onChange }) => {
-  const generateSelectedValuesList = () => {
-    const selectedValues: IChecklistSelectedValues = {};
-
-    items.forEach(item => {
-      selectedValues[item.label] = false;
-    });
-
-    return selectedValues;
-  };
-
-  const [selectedValues, setSelectedValues] = useState<
-    IChecklistSelectedValues
-  >(generateSelectedValuesList());
-
-  const handleClick = (label: string) => {
-    setSelectedValues({
-      ...selectedValues,
-      [label]: !selectedValues[label],
-    });
-  };
-
-  useEffect(() => {
-    if (selectedValues) {
-      onChange(selectedValues);
-    }
-  }, [selectedValues]);
-
-  return (
-    <div id="elemento-checkbox">
-      {items?.map((element, index) => {
-        return (
-          <div key={`${element.label}_${index}`}>
-            <input
-              className="rpgui-checkbox"
-              type="checkbox"
-              checked={selectedValues[element.label]}
-              onChange={() => {}}
-            />
-            <label onClick={() => handleClick(element.label)}>
-              {element.label}
-            </label>
-            <br />
-          </div>
-        );
-      })}
-    </div>
-  );
-};
+import React, { useEffect, useState } from 'react';
+
+export interface ICheckItems {
+  label: string;
+  value: string;
+}
+
+export interface ICheckProps {
+  items: ICheckItems[];
+  onChange: (selectedValues: IChecklistSelectedValues) => void;
+}
+
+interface IChecklistSelectedValues {
+  [label: string]: boolean;
+}
+
+export const CheckButton: React.FC<ICheckProps> = ({ items, onChange }) => {
+  const generateSelectedValuesList = () => {
+    const selectedValues: IChecklistSelectedValues = {};
+
+    items.forEach(item => {
+      selectedValues[item.label] = false;
+    });
+
+    return selectedValues;
+  };
+
+  const [selectedValues, setSelectedValues] = useState<
+    IChecklistSelectedValues
+  >(generateSelectedValuesList());
+
+  const handleClick = (label: string) => {
+    setSelectedValues({
+      ...selectedValues,
+      [label]: !selectedValues[label],
+    });
+  };
+
+  useEffect(() => {
+    if (selectedValues) {
+      onChange(selectedValues);
+    }
+  }, [selectedValues]);
+
+  return (
+    <div id="elemento-checkbox">
+      {items?.map((element, index) => {
+        return (
+          <div key={`${element.label}_${index}`}>
+            <input
+              className="rpgui-checkbox"
+              type="checkbox"
+              checked={selectedValues[element.label]}
+              onChange={() => {}}
+            />
+            <label onClick={() => handleClick(element.label)}>
+              {element.label}
+            </label>
+            <br />
+          </div>
+        );
+      })}
+    </div>
+  );
+};