From 003db47b9c4020e3fcfaf5c2c2eecb9419f650c1 Mon Sep 17 00:00:00 2001
From: Max Goodhart <c@chromakode.com>
Date: Mon, 6 Jul 2020 19:16:36 -0700
Subject: [PATCH] Color stream ids to make them easier to differentiate

---
 src/web/colors.js  | 32 ++++++++++++++++++++++++++++++++
 src/web/control.js | 11 ++++++++---
 2 files changed, 40 insertions(+), 3 deletions(-)
 create mode 100644 src/web/colors.js

diff --git a/src/web/colors.js b/src/web/colors.js
new file mode 100644
index 0000000..448e047
--- /dev/null
+++ b/src/web/colors.js
@@ -0,0 +1,32 @@
+import Color from 'color'
+
+export function hashText(text, range) {
+  // DJBX33A-ish
+  // based on https://github.com/euphoria-io/heim/blob/978c921063e6b06012fc8d16d9fbf1b3a0be1191/client/lib/hueHash.js#L16-L45
+  let val = 0
+  for (let i = 0; i < text.length; i++) {
+    // Multiply by an arbitrary prime number to spread out similar letters.
+    const charVal = (text.charCodeAt(i) * 401) % range
+
+    // Multiply val by 33 while constraining within signed 32 bit int range.
+    // this keeps the value within Number.MAX_SAFE_INTEGER without throwing out
+    // information.
+    const origVal = val
+    val = val << 5
+    val += origVal
+
+    // Add the character to the hash.
+    val += charVal
+  }
+
+  return (val + range) % range
+}
+
+export function idColor(id) {
+  if (!id) {
+    return Color('white')
+  }
+  const h = hashText(id, 360)
+  const sPart = hashText(id, 40)
+  return Color({ h, s: 20 + sPart, l: 50 })
+}
diff --git a/src/web/control.js b/src/web/control.js
index 9bfb080..47a5ecd 100644
--- a/src/web/control.js
+++ b/src/web/control.js
@@ -17,6 +17,7 @@ import NoVideoIcon from '../static/video-slash-solid.svg'
 import ReloadIcon from '../static/redo-alt-solid.svg'
 import LifeRingIcon from '../static/life-ring-regular.svg'
 import WindowIcon from '../static/window-maximize-regular.svg'
+import { idColor } from './colors'
 
 const hotkeyTriggers = [
   '1',
@@ -479,7 +480,9 @@ function StreamLine({
   }
   return (
     <StyledStreamLine>
-      <StyledId onClick={handleClickId}>{id}</StyledId>
+      <StyledId onClick={handleClickId} color={idColor(id)}>
+        {id}
+      </StyledId>
       <div>
         {label ? (
           label
@@ -593,6 +596,7 @@ function GridInput({
       <StyledGridInput
         name={idx}
         value={editingValue || spaceValue || ''}
+        color={idColor(spaceValue)}
         isError={isError}
         isHighlighted={isHighlighted}
         onFocus={handleFocus}
@@ -719,7 +723,8 @@ const StyledGridInput = styled.input`
   height: 50px;
   padding: 20px;
   border: 2px solid ${({ isError }) => (isError ? 'red' : 'black')};
-  background: ${({ isHighlighted }) => (isHighlighted ? '#dfd' : 'white')};
+  background: ${({ color, isHighlighted }) =>
+    isHighlighted ? color.lightness(90) : color.lightness(75)};
   font-size: 20px;
   text-align: center;
 
@@ -732,7 +737,7 @@ const StyledGridInput = styled.input`
 const StyledId = styled.div`
   flex-shrink: 0;
   margin-right: 5px;
-  background: #333;
+  background: ${({ color }) => color.lightness(50) || '#333'};
   color: white;
   padding: 3px;
   border-radius: 5px;