Add colored nicks

client/package.json

@@ -51,6 +51,7 @@
     "webpack-hot-middleware": "^2.24.2"
   },
   "dependencies": {
+    "@sindresorhus/fnv1a": "^1.0.0",
     "autolinker": "^1.7.1",
     "backo": "^1.1.0",
     "base64-arraybuffer": "^0.1.5",

client/src/js/components/pages/Chat/Message.js

@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react';
 import classnames from 'classnames';
+import stringToHSL from 'utils/color';
 
 export default class Message extends PureComponent {
   handleNickClick = () => this.props.onNickClick(this.props.message.from);
@@ -17,11 +18,16 @@ export default class Message extends PureComponent {
       ...this.props.style
     };
 
+    const senderStyle = {};
+    if (message.from) {
+      senderStyle.color = stringToHSL(message.from);
+    }
+
     return (
       <p className={className} style={style}>
         <span className="message-time">{message.time}</span>
         {message.from && (
-          <span className="message-sender" onClick={this.handleNickClick}>
+          <span className="message-sender" style={senderStyle} onClick={this.handleNickClick}>
             {' '}
             {message.from}
           </span>

client/src/js/components/pages/Chat/UserListItem.js

@@ -1,12 +1,19 @@
 import React, { PureComponent } from 'react';
+import stringToHSL from 'utils/color';
 
 export default class UserListItem extends PureComponent {
   handleClick = () => this.props.onClick(this.props.user.nick);
 
   render() {
+    const { user } = this.props;
+    const style = {
+      color: stringToHSL(user.nick),
+      ...this.props.style
+    };
+
     return (
-      <p style={this.props.style} onClick={this.handleClick}>
+      <p style={style} onClick={this.handleClick}>
-        {this.props.user.renderName}
+        {user.renderName}
       </p>
     );
   }

client/src/js/utils/color.js

@@ -0,0 +1,21 @@
+import fnv1a from '@sindresorhus/fnv1a';
+
+const colors = [];
+
+for (let i = 0; i < 72; i++) {
+  colors[i] = `hsl(${i * 5}, 30%, 40%)`;
+  colors[i + 72] = `hsl(${i * 5}, 60%, 40%)`;
+  colors[i + 144] = `hsl(${i * 5}, 90%, 40%)`;
+}
+
+const cache = {};
+
+export default function stringToHSL(str) {
+  if (cache[str]) {
+    return cache[str];
+  }
+
+  const color = colors[fnv1a(str) % 216];
+  cache[str] = color;
+  return color;
+}

client/yarn.lock

@@ -780,6 +780,11 @@
     lodash "^4.17.10"
     to-fast-properties "^2.0.0"
 
+"@sindresorhus/fnv1a@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@sindresorhus/fnv1a/-/fnv1a-1.0.0.tgz#d419dd111b4d7fc3b87f97d86849bc23316149de"
+  integrity sha512-n+7NAD9vCDb2PaCRFIGrT2UF8WPIfMgGvCiVsYKY1/eBTrZU80N9erKhX9UTdxyvWhNuxQxwZGzdOIOlt8WqsA==
+
 "@webassemblyjs/ast@1.7.8":
   version "1.7.8"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.7.8.tgz#f31f480debeef957f01b623f27eabc695fa4fe8f"