consistently coloured usernames

components/chat.js

@@ -10,6 +10,7 @@ const defaultValue = require('default-value')
 const Event = require('./events/Event.js')
 const Info = require('./info.js')
 const Input = require('./input.js')
+const User = require('./events/user.js')
 
 jdenticon.config = {
     lightness: {
@@ -150,7 +151,7 @@ let EventGroup = create({
     return <div className="eventGroup">
       {this.state.avatar}
       <div className="col">
-        <div id="name" className={`fg-palet-${this.state.color}`}>{this.state.user.displayName}</div>
+        <User user={this.state.user}/>
         {events}
       </div>
     </div>

components/events/Event.js

@@ -6,6 +6,8 @@ const defaultValue = require('default-value')
 
 const riot = require('../../lib/riot-utils.js')
 
+const User = require('./user.js')
+
 const elements = {
   "m.text": require('./text.js'),
   "m.image": require('./image.js')
@@ -36,10 +38,13 @@ let Event = create({
       let parsedReply = formattedEvent.parsedReply
       if (parsedReply.isReply) {
         let repliedEvent = this.props.room.findEventById(parsedReply.to)
-        let shortText
+        let shortText, repliedUser
         if (repliedEvent == undefined) {
           shortText = "Can't load this event"
+          repliedUser = {userId: "NEO_UNKNOWN", displayName: "Unknown User"}
+          // fall back on <mx-reply> content?
         } else {
+          repliedUser = this.props.client.getUser(repliedEvent.event.sender)
           shortText = parseEvent(repliedEvent.event)
           if (shortText.html) {
             shortText = <span dangerouslySetInnerHTML={{__html: shortText.body}}/>
@@ -49,6 +54,7 @@ let Event = create({
         }
         reply = (
           <div className="reply">
+            <User user={repliedUser}/>
             {shortText}
           </div>
         )
@@ -90,9 +96,7 @@ function parseReply(event, body) {
     replyTo = event.content['m.relates_to']['m.in_reply_to'].event_id
     if (replyTo) {
       // strip <mx-reply> from message if it exists
-      console.log("STRIPPING FROM", body)
       body = body.replace(mxReplyRegex, "")
-      console.log("TO            ", body)
     }
   } catch(err) {
     // no reply

components/events/user.js

@@ -0,0 +1,51 @@
+'use strict'
+const React = require('react')
+const ReactDOM = require('react-dom')
+const create = require('create-react-class')
+const jdenticon = require('jdenticon')
+
+jdenticon.config = {
+    lightness: {
+        color: [0.58, 0.66],
+        grayscale: [0.30, 0.90]
+    },
+    saturation: {
+        color: 0.66,
+        grayscale: 0.00
+    },
+    backColor: "#00000000"
+};
+
+let User = create({
+  displayName: "user",
+
+  getInitialState: function() {
+    let icon = jdenticon.toSvg(this.props.user.userId, 200)
+    let match = icon.match(/#([a-f0-9]{6})/g)
+    console.log(match, icon)
+    let color = '#ff0000'
+    for(let i=match.length-1; i>= 0; i--) {
+      color = match[i]
+      let r = color.substr(1, 2)
+      let g = color.substr(3, 2)
+      let b = color.substr(5, 2)
+      console.log(r, g, b)
+      if (r != g && g != b) { //greyscale
+        break
+      }
+    }
+    return {
+      color: color
+    }
+  },
+
+  render: function() {
+    return (
+      <div className="user" style={{color: this.state.color}}>
+        {this.props.user.displayName}
+      </div>
+    )
+  }
+})
+
+module.exports = User

public/scss/style.scss

@@ -274,7 +274,7 @@ body {
       grid-template-areas: "avatar content";
       margin-bottom: $spacing/2;
 
-      #name {
+      .name {
         font-weight: bold;
       }
 
@@ -297,6 +297,10 @@ body {
         grid-area: content;
         padding-left: $spacing * 1.2;
 
+        h1, h2, h3, h4, h5, h6 {
+          margin: 0;
+        }
+
         .reply + .event {
           margin-bottom: $spacing;
         }