Add colored nicks

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}>
-        {this.props.user.renderName}
+      <p style={style} onClick={this.handleClick}>
+        {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;
+}