package-lock.json

@@ -14,7 +14,6 @@
         "polished": "^4.1.3",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
-        "react-router-dom": "^6.2.1",
         "react-scripts": "5.0.0",
         "styled-components": "^5.3.3"
       }
@@ -7933,14 +7932,6 @@
         "he": "bin/he"
       }
     },
-    "node_modules/history": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/history/-/history-5.2.0.tgz",
-      "integrity": "sha512-uPSF6lAJb3nSePJ43hN3eKj1dTWpN9gMod0ZssbFTIsen+WehTmEadgL+kg78xLJFdRfrrC//SavDzmRVdE+Ig==",
-      "dependencies": {
-        "@babel/runtime": "^7.7.6"
-      }
-    },
     "node_modules/hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -13288,30 +13279,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/react-router": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.2.1.tgz",
-      "integrity": "sha512-2fG0udBtxou9lXtK97eJeET2ki5//UWfQSl1rlJ7quwe6jrktK9FCCc8dQb5QY6jAv3jua8bBQRhhDOM/kVRsg==",
-      "dependencies": {
-        "history": "^5.2.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.8"
-      }
-    },
-    "node_modules/react-router-dom": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.2.1.tgz",
-      "integrity": "sha512-I6Zax+/TH/cZMDpj3/4Fl2eaNdcvoxxHoH1tYOREsQ22OKDYofGebrNm6CTPUcvLvZm63NL/vzCYdjf9CUhqmA==",
-      "dependencies": {
-        "history": "^5.2.0",
-        "react-router": "6.2.1"
-      },
-      "peerDependencies": {
-        "react": ">=16.8",
-        "react-dom": ">=16.8"
-      }
-    },
     "node_modules/react-scripts": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.0.tgz",
@@ -21911,14 +21878,6 @@
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
     },
-    "history": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/history/-/history-5.2.0.tgz",
-      "integrity": "sha512-uPSF6lAJb3nSePJ43hN3eKj1dTWpN9gMod0ZssbFTIsen+WehTmEadgL+kg78xLJFdRfrrC//SavDzmRVdE+Ig==",
-      "requires": {
-        "@babel/runtime": "^7.7.6"
-      }
-    },
     "hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -25641,23 +25600,6 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
     },
-    "react-router": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.2.1.tgz",
-      "integrity": "sha512-2fG0udBtxou9lXtK97eJeET2ki5//UWfQSl1rlJ7quwe6jrktK9FCCc8dQb5QY6jAv3jua8bBQRhhDOM/kVRsg==",
-      "requires": {
-        "history": "^5.2.0"
-      }
-    },
-    "react-router-dom": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.2.1.tgz",
-      "integrity": "sha512-I6Zax+/TH/cZMDpj3/4Fl2eaNdcvoxxHoH1tYOREsQ22OKDYofGebrNm6CTPUcvLvZm63NL/vzCYdjf9CUhqmA==",
-      "requires": {
-        "history": "^5.2.0",
-        "react-router": "6.2.1"
-      }
-    },
     "react-scripts": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.0.tgz",

package.json

@@ -9,7 +9,6 @@
     "polished": "^4.1.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-router-dom": "^6.2.1",
     "react-scripts": "5.0.0",
     "styled-components": "^5.3.3"
   },

src/components/app/app.jsx

@@ -1,34 +1,14 @@
 import { useEffect, useState, useRef } from 'react';
-import { useQuery } from '../../hooks';
 
 import ChatLog from '../chat-log';
 
 const maxsize = 25;
 
-const retryLoop = async (func) => {
-  try {
-    return await func();
-  } catch (error) {
-    retryLoop(func);
-  }
-};
-
 function App() {
   const [messages, setMessages] = useState(Array(maxsize).fill(null));
-  const query = useQuery();
-
   const socket = useRef(null);
 
   useEffect(() => {
-    const websocketAddress = query.get('ws') ?? 'ws://127.0.0.1:8080';
-    const attemptConnect = async () => {
-      const ws = new WebSocket(websocketAddress);
-      ws.addEventListener('message', onEvent);
-      ws.addEventListener('error', onDiscconect);
-      ws.addEventListener('close', onDiscconect);
-      socket.current = ws
-    };
-
     const onEvent = function (event) {
       setMessages((state) => {
         const newState = [...state];
@@ -37,19 +17,20 @@ function App() {
         return newState;
       });
     };
-    const onDiscconect = function (event) {
-      retryLoop(attemptConnect);
-    }
 
-    onDiscconect();
+    const attemptConnect = () => {
+      socket.current = new WebSocket('ws://127.0.0.1:13337');
+      const onError = () => setTimeout(attemptConnect, 1000);
+      socket.current.addEventListener('error', onError);
+      socket.current.addEventListener('message', onEvent);
+    };
+    attemptConnect();
 
     return () => {
       socket.current.removeEventListener('message', onEvent);
-      socket.current.removeEventListener('error', onDiscconect);
-      socket.current.removeEventListener('close', onDiscconect);
       socket.current.close();
     }
-  }, [socket, maxsize, setMessages, query]);
+  }, [socket, maxsize, setMessages]);
 
   return (
     <ChatLog log={messages} />

src/components/chat-log/chat-log.jsx

@@ -9,8 +9,6 @@ const elementMap = {
   null: Spacer,
 };
 
-const selfChats = ['self', 'birbspace'];
-
 function ChatLog({
   log,
 }) {
@@ -21,9 +19,8 @@ function ChatLog({
     }
     const bestRenderableInterface = event.type.find((interfaceName) => Object.keys(elementMap).includes(interfaceName));
     const renderer = elementMap[bestRenderableInterface];
-    const deemphasize = !selfChats.includes(event.data.via ?? 'unknown');
+    return [event, renderer];
-    return [event, renderer, deemphasize];
+  }).filter(([event, renderer]) => !!renderer);
-  }).filter(([event, renderer, deemphasize]) => !!renderer);
 
   useEffect(() => {
     listRef.current.scrollTop = -1;
@@ -31,8 +28,8 @@ function ChatLog({
 
   return (
     <List ref={listRef}>
-      {renderableEvents.map(([event, Element, deemphasize]) => (
+      {renderableEvents.map(([event, Element]) => (
-        <Element key={event.data.id} deemphasize={deemphasize} {...event.data} />
+        <Element key={event.data.id} {...event.data} />
       ))}
     </List>
   );

src/components/chat-log/chat-log.style.js

@@ -19,9 +19,6 @@ export const List = styled.div`
     width: 0px;
     background: transparent;
   }
-
-  font-family: 'Source Code Pro', monospace;
-  font-size: 24px;
 `;
 
 export const Spacer = styled.div`

src/components/chat-log/message/message.jsx

@@ -1,9 +1,8 @@
-import { useMemo } from 'react';
 import PropTypes from 'prop-types';
 
 import { XTERM_COLORS } from '../../../index.style';
 
-import { Wrapper, Author, Body, Emote, Attachments } from './message.style';
+import { Wrapper, Author, Body, Emote } from './message.style';
 
 const stringHashcode = (str) => {
   var hash = 0, i, chr;
@@ -18,49 +17,27 @@ const stringHashcode = (str) => {
 
 const emoteRegex = /:([^:\s]+):/g;
 
-const elForType = {
-  image: (src) => <img src={src} />,
-  audio: (src) => <audio src={src} />,
-  video: (src) => <video src={src} />,
-};
-
 function Message({
-  user_id, user_name, user_type, user_color, text, emotes, attachments,
+  user_id, user_name, user_type, user_color, text, emotes,
   deemphasize,
 }) {
   const fallbackColor = XTERM_COLORS[(stringHashcode(user_id.toString()) % 144) + 88];
-  const displayFiles = useMemo(() => {
-    if (attachments) {
-      const filtered = attachments
-        .map(([type, url]) => [type.split('/')[0], url])
-        .filter(([type, url]) => Object.keys(elForType).includes(type));
-      return filtered;
-    }
-    return null;
-  }, [attachments]);
 
   return (
     <Wrapper type={user_type} color={user_color ?? fallbackColor} deemphasize={deemphasize}>
       <Author>
         [ {user_name} ]
       </Author>
-      {!!text && (
+      <Body>
-        <Body>
+        {text.split(emoteRegex).map((textOrEmote, index) => {
-          {text.split(emoteRegex).map((textOrEmote, index) => {
+          if (textOrEmote === "") return null;
-            if (textOrEmote === "") return null;
+          if (index % 2 === 0) {
-            if (index % 2 === 0) {
+            return <span>{textOrEmote}</span>;
-              return <span>{textOrEmote}</span>;
+          } else {
-            } else {
+            return <Emote src={emotes?.[textOrEmote]} />;
-              return <Emote src={emotes?.[textOrEmote]} title={textOrEmote} />;
+          }
-            }
+        }).filter((item) => item !== null)}
-          }).filter((item) => item !== null)}
+      </Body>
-        </Body>
-      )}
-      {!!displayFiles && (
-        <Attachments>
-          {displayFiles.map(([type, url]) => elForType[type](url))}
-        </Attachments>
-      )}
     </Wrapper>
   );
 }
@@ -70,20 +47,17 @@ Message.propTypes = {
   user_name: PropTypes.node.isRequired,
   user_type: PropTypes.string.isRequired,
   user_color: PropTypes.string,
-  text: PropTypes.node,
+  text: PropTypes.node.isRequired,
   emotes: PropTypes.shape({
     [PropTypes.string]: PropTypes.string,
   }),
   deemphasize: PropTypes.bool,
-  attachments: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)),
 };
 
 Message.defaultProps = {
-  text: '',
   user_color: undefined,
   emotes: {},
   deemphasize: false,
-  attachments: null,
 };
 
 export default Message;

src/components/chat-log/message/message.style.js

@@ -65,6 +65,8 @@ const setColors = ({ type, color, deemphasize }) => {
 
 export const Wrapper = styled.div`
   ${setColors}
+  font-family: 'Source Code Pro', monospace;
+  font-size: 18px;
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -91,19 +93,3 @@ export const Wrapper = styled.div`
   animation: 160s fade cubic-bezier(.6,.04,.98,.34), 0.3s slide cubic-bezier(.08,.82,.17,1);
   animation-fill-mode: forwards;
 `;
-
-export const Attachments = styled.div`
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: 8px 6px;
-  padding: 8px;
-
-  img {
-    flex: 1;
-    min-width: 33%;
-    max-width: 100%;
-    max-height: 300px;
-    object-fit: scale-down;
-  }
-`;

src/hooks/index.js

@@ -1 +0,0 @@
-export { default as useQuery } from './useQuery';

src/hooks/useQuery.js

@@ -1,5 +0,0 @@
-import { useLocation } from 'react-router-dom';
-
-export default function useQuery() {
-  return new URLSearchParams(useLocation().search);
-}

src/index.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { BrowserRouter } from "react-router-dom";
 import App from './components/app/app';
 
 import { GlobalStyle } from './index.style';
@@ -8,9 +7,7 @@ import { GlobalStyle } from './index.style';
 ReactDOM.render(
   <React.StrictMode>
     <GlobalStyle />
-    <BrowserRouter>
+    <App />
-      <App />
-    </BrowserRouter>
   </React.StrictMode>,
   document.getElementById('root')
 );