set colors in chat according to theme

fix default color on refresh

src/components/Chat.jsx

@@ -33,13 +33,14 @@ const Chat = ({
   const [nameRegExp, setNameRegExp] = useState(null);
   const { stayScrolled } = useStayScrolled(listRef, {
     initialScroll: Infinity,
+    inaccuracy: 10,
   });
 
   const channelMessages = chatMessages[chatChannel];
 
   useLayoutEffect(() => {
     stayScrolled();
-  }, [channelMessages]);
+  }, [channelMessages.length]);
 
   useEffect(() => {
     if (channelMessages.length === MAX_CHAT_MESSAGES) {
@@ -66,9 +67,10 @@ const Chat = ({
 
   function handleSubmit(e) {
     e.preventDefault();
-    if (!inputMessage) return;
+    const msg = inputMessage.trim();
+    if (!msg) return;
     // send message via websocket
-    ProtocolClient.sendChatMessage(inputMessage, chatChannel);
+    ProtocolClient.sendChatMessage(msg, chatChannel);
     setInputMessage('');
   }
 

src/components/ChatMessage.jsx

@@ -3,8 +3,9 @@
  * @flow
  */
 import React from 'react';
+import { connect } from 'react-redux';
 
-import { colorFromText } from '../core/utils';
+import { colorFromText, setBrightness } from '../core/utils';
 
 
 function ChatMessage({
@@ -12,6 +13,7 @@ function ChatMessage({
   msgArray,
   country,
   insertText,
+  darkMode,
 }) {
   if (!name || !msgArray) {
     return null;
@@ -44,7 +46,7 @@ function ChatMessage({
           <span
             className="chatname"
             style={{
-              color: colorFromText(name),
+              color: setBrightness(colorFromText(name), darkMode),
               cursor: 'pointer',
             }}
             role="button"
@@ -71,7 +73,7 @@ function ChatMessage({
               <span
                 className="ping"
                 style={{
-                  color: colorFromText(txt.substr(1)),
+                  color: setBrightness(colorFromText(txt.substr(1)), darkMode),
                 }}
               >{txt}</span>
             );
@@ -80,7 +82,7 @@ function ChatMessage({
               <span
                 className="mention"
                 style={{
-                  color: colorFromText(txt.substr(1)),
+                  color: setBrightness(colorFromText(txt.substr(1)), darkMode),
                 }}
               >{txt}</span>
             );
@@ -92,4 +94,10 @@ function ChatMessage({
   );
 }
 
-export default ChatMessage;
+function mapStateToProps(state: State) {
+  const { style } = state.gui;
+  const darkMode = style.indexOf('dark') !== -1;
+  return { darkMode };
+}
+
+export default connect(mapStateToProps)(ChatMessage);

src/core/utils.js

@@ -199,6 +199,9 @@ export function numberToString(num: number): string {
   return '';
 }
 
+/*
+ * generates a color based on a given string
+ */
 export function numberToStringFull(num: number): string {
   if (num < 0) {
     return `${num} :-(`;
@@ -226,3 +229,24 @@ export function colorFromText(str: string) {
 
   return `#${'00000'.substring(0, 6 - c.length)}${c}`;
 }
+
+/*
+ * sets a color into bright or dark mode
+ */
+export function setBrightness(hex, dark: boolean = false) {
+  hex = hex.replace(/^\s*#|\s*$/g, '');
+
+  if (hex.length === 3) {
+    hex = hex.replace(/(.)/g, '$1$1');
+  }
+
+  let r = Math.floor(parseInt(hex.substr(0, 2), 16) / 2);
+  let g = Math.floor(parseInt(hex.substr(2, 2), 16) / 2);
+  let b = Math.floor(parseInt(hex.substr(4, 2), 16) / 2);
+  if (dark) {
+    r += 128;
+    g += 128;
+    b += 128;
+  }
+  return `#${r.toString(16)}${g.toString(16)}${b.toString(16)}`;
+}

src/reducers/canvas.js

@@ -109,6 +109,7 @@ function getViewFromURL(canvases: Object) {
       canvasMaxTiledZoom: getMaxTiledZoom(canvasSize),
       palette: new Palette(colors, 0),
       clrIgnore,
+      selectedColor: clrIgnore,
       view,
       viewscale: scale,
       scale,
@@ -125,6 +126,7 @@ function getViewFromURL(canvases: Object) {
       canvasMaxTiledZoom: getMaxTiledZoom(canvasd.size),
       palette: new Palette(canvasd.colors, 0),
       clrIgnore: canvasd.cli,
+      selectedColor: canvasd.cli,
       view: getGivenCoords(),
       viewscale: DEFAULT_SCALE,
       scale: DEFAULT_SCALE,
@@ -135,7 +137,6 @@ function getViewFromURL(canvases: Object) {
 const initialState: CanvasState = {
   ...getViewFromURL(DEFAULT_CANVASES),
   fetchs: 0,
-  selectedColor: 3,
   isHistoricalView: false,
   historicalDate: null,
   historicalTime: null,

src/socket/SocketServer.js

@@ -228,6 +228,7 @@ class SocketServer extends WebSocketEvents {
   }
 
   static async onTextMessage(text, ws) {
+    try {
       let message;
       let channelId;
       try {
@@ -243,6 +244,7 @@ class SocketServer extends WebSocketEvents {
         );
         return;
       }
+      message = message.trim();
 
       if (ws.name && message) {
         const waitLeft = ws.rateLimiter.tick();
@@ -283,6 +285,9 @@ class SocketServer extends WebSocketEvents {
       } else {
         logger.info('Got empty message or message from unidentified ws');
       }
+    } catch {
+      logger.info('Got invalid ws message');
+    }
   }
 
   async onBinaryMessage(buffer, ws) {