From d89d2ffc7b0f06ebdb49eb128b3ed7025d2f5fad Mon Sep 17 00:00:00 2001
From: Henri Bergius <henri.bergius@iki.fi>
Date: Mon, 4 Dec 2017 19:53:58 +0100
Subject: [PATCH] Use heatmap color for user list

---
 elements/userlist.js | 7 +++++--
 package.json         | 1 +
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/elements/userlist.js b/elements/userlist.js
index 5ba3b06..6da2cd8 100644
--- a/elements/userlist.js
+++ b/elements/userlist.js
@@ -1,4 +1,5 @@
 import { withComponent, props } from 'skatejs';
+import interpolate from 'color-interpolate';
 
 const Component = withComponent();
 class UserList extends Component {
@@ -71,11 +72,13 @@ class UserList extends Component {
 
   render({ data }) {
     const el = document.createElement('div');
+    const colormap = interpolate(['blue', 'green', 'yellow', 'red']);
+    const colorIndex = Math.min(data.length / 22, 22);
     el.className = 'terminal';
     el.innerHTML = `
       <div class="deco"><span class="prompt">user@c-beam&gt;</span> #who</div>
-      <div><span class="output">${data.join(', ')}</span></div>
-      <div>total: <span class="output">${data.length}</span></div>
+      <div><span class="output" style="color: ${colormap(colorIndex)}">${data.join(', ')}</span></div>
+      <div>total: <span class="output" style="color: ${colormap(colorIndex)}">${data.length}</span></div>
       <div class="deco"><span class="prompt">user@c-beam&gt;</span> <blink>_</blink></div>
     `;
     if (data.join(', ').length > 100) {
diff --git a/package.json b/package.json
index baba51e..1a1ae1b 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
   "license": "MIT",
   "dependencies": {
     "@webcomponents/webcomponentsjs": "^1.0.19",
+    "color-interpolate": "^1.0.2",
     "d3": "^4.12.0",
     "dateformat": "^3.0.2",
     "msgflo-browser": "^0.2.0",