Color stream ids to make them easier to differentiate

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 })
+}

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;