add random color

package.json

@@ -9,6 +9,7 @@
     "react-linkify": "^0.2.2",
     "react-scripts": "1.1.4",
     "react-timeago": "^4.1.9",
+    "react-lazyload": "latest"
   },
   "scripts": {
     "start": "react-scripts start",

src/Flows.css

@@ -3,13 +3,13 @@
     border-radius: 5px;
     margin: 1em 0;
     padding: .5em;
-    box-shadow: 0 5px 20px #999;
+    box-shadow: 0 5px 20px rgba(0,0,0,.4);
 }
 
 .flow-item {
     flex: 0 0 600px;
 }
-:not(.sidebar-flow-item) .flow-reply {
+.left-container .flow-reply {
     flex: 0 0 300px;
     max-height: 15em;
     margin-left: -5px;
@@ -66,8 +66,4 @@
 .box-id {
     font-family: Consolas, Courier, monospace;
     opacity: .6;
-}
-
-.flow-reply-gray {
-    background-color: #eee;
 }

src/Flows.js

@@ -1,4 +1,5 @@
 import React, {Component} from 'react';
+import {ColorPicker} from './color_picker';
 import {Time, TitleLine, AutoLink} from './Common.js';
 import './Flows.css';
 import LazyLoad from 'react-lazyload';
@@ -9,7 +10,9 @@ const SEARCH_PAGESIZE=50;
 
 function Reply(props) {
     return (
-        <div className={'flow-reply box '+(props.info.islz ? '' : 'flow-reply-gray')}>
+        <div className={'flow-reply box'} style={{
+            backgroundColor: props.info._display_color,
+        }}>
             <div className="box-header">
                 <span className="box-id">#{props.info.cid}</span>&nbsp;
                 <Time stamp={props.info.timestamp} />
@@ -51,6 +54,7 @@ class FlowItemRow extends Component {
             reply_loading: false,
         };
         this.info=props.info;
+        this.color_picker=new ColorPicker();
     }
 
     componentDidMount() {
@@ -70,7 +74,10 @@ class FlowItemRow extends Component {
                 if(json.code!==0)
                     throw new Error(json.code);
                 this.setState({
-                    replies: json.data.slice(0,10),
+                    replies: json.data.map((info)=>{
+                        info._display_color=info.islz ? '#fff' : this.color_picker.get(info.name)
+                        return info;
+                    }),
                     reply_loading: false,
                 });
             });
@@ -91,7 +98,7 @@ class FlowItemRow extends Component {
             }}>
                 <FlowItem info={this.info} />
                 {!!this.state.reply_loading && <ReplyPlaceholder count={this.info.reply} />}
-                {this.state.replies.map((reply)=><Reply info={reply} key={reply.cid} />)}
+                {this.state.replies.slice(0,10).map((reply)=><Reply info={reply} key={reply.cid} />)}
             </div>
         );
     }

src/Title.css

@@ -6,7 +6,7 @@
     width: 100%;
     height: 9em;
     background-color: rgba(255,255,255,.8);
-    box-shadow: 0 0 25px #999;
+    box-shadow: 0 0 25px rgba(0,0,0,.4);
     margin-bottom: 1em;
 }
 

src/color_picker.js

@@ -0,0 +1,19 @@
+// https://martin.ankerl.com/2009/12/09/how-to-create-random-colors-programmatically/
+
+const golden_ratio_conjugate=0.618033988749895;
+
+export class ColorPicker {
+    constructor() {
+        this.names={};
+        this.current_h=Math.random();
+    }
+
+    get(name) {
+        if(!this.names[name]) {
+            this.current_h+=golden_ratio_conjugate;
+            this.current_h%=1;
+            this.names[name]=`hsl(${this.current_h*360}, 40%, 80%)`;
+        }
+        return this.names[name];
+    }
+}