Encrypt Chat and styling (#342)

README.md

@@ -84,6 +84,10 @@ This will run a demo version, which you can turn into a fully licenced version b
 
 ## Versions History
 
+### Version 4.12.0 (not released)
+
+- Encrypt chat
+
 ### Version 4.11.1 (hotfix)
 
 - Reverting the migration from react-scripts (create-react-app) 5.0.0 to 4.0.3. The new version includes Webpack 5, which causes issues with polyfills. The issue should be fixed in 5.0.1 which is not available yet.

frontend/src/views/game/chat/Chat.tsx

@@ -3,9 +3,10 @@ import ScrollToBottom from 'react-scroll-to-bottom';
 import styled from '@emotion/styled';
 import Input from './Input';
 import ChatMessage from './Message';
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { sortBy } from 'lodash';
 import useTranslations from 'translations';
+import useCrypto from 'crypto/useCrypto';
 
 type ChatProps = {
   messages: Message[];
@@ -14,9 +15,16 @@ type ChatProps = {
 
 export default function Chat({ messages, onMessage }: ChatProps) {
   const { Chat: translations } = useTranslations();
+  const { encrypt } = useCrypto();
   const sortedMessages = useMemo(() => {
     return sortBy(messages, (m) => m.created);
   }, [messages]);
+  const handleInput = useCallback(
+    (msg: string) => {
+      onMessage(encrypt(msg));
+    },
+    [encrypt, onMessage]
+  );
   return (
     <Container>
       <ScrollContainer>
@@ -28,7 +36,7 @@ export default function Chat({ messages, onMessage }: ChatProps) {
       </ScrollContainer>
       <Input
         placeholder={translations.writeAMessage}
-        onNewMessage={onMessage}
+        onNewMessage={handleInput}
       />
     </Container>
   );

frontend/src/views/game/chat/Message.tsx

@@ -3,13 +3,15 @@ import styled from '@emotion/styled';
 import { colors } from '@mui/material';
 import { formatRelative } from 'date-fns';
 import { useDateLocale } from 'hooks/useFormatDate';
+import useCrypto from 'crypto/useCrypto';
 
 type ChatMessageProps = {
   message: Message;
 };
 
 export default function ChatMessage({ message }: ChatMessageProps) {
   const locale = useDateLocale();
+  const { decrypt } = useCrypto();
   return (
     <Container>
       <Photo>
@@ -24,7 +26,7 @@ export default function ChatMessage({ message }: ChatMessageProps) {
             {formatRelative(new Date(message.created), new Date(), { locale })}
           </Time>
         </Header>
-        <Content>{message.content}</Content>
+        <Content>{decrypt(message.content)}</Content>
       </Inner>
     </Container>
   );
@@ -43,6 +45,7 @@ const Inner = styled.div`
 
 const Photo = styled.div`
   width: 30px;
+  padding-top: 3px;
   > img {
     width: 30px;
     height: 30px;
@@ -53,7 +56,8 @@ const Photo = styled.div`
 
 const Header = styled.div`
   display: flex;
-  align-items: center;
+  align-items: baseline;
+  padding-bottom: 4px;
 `;
 
 const Name = styled.span`
@@ -63,10 +67,11 @@ const Name = styled.span`
 
 const Time = styled.span`
   color: ${colors.grey[500]};
+  font-size: 0.8rem;
 `;
 
 const Content = styled.div`
   margin: 0;
   padding: 0;
-  white-space: pre;
+  white-space: pre-wrap;
 `;