Tweak user colors and add a little testing script for future experimenting. Closes #170

6 years ago · 38d93a549a
2 changed files with 38 additions and 2 deletions
--- a/test/userColorsTest.js
+++ b/test/userColorsTest.js
@ -0,0 +1,36 @@
				@@ -0,0 +1,36 @@
+// Run on the command line to test colors.
+// node userColorsTest.js > colorTest.html
+
+console.log(`<body style="background: #2d3748">`);
+
+for (var i = 0; i < 20; i++) {
+  const element = generateElement(randomString(6));
+  console.log(element);
+}
+
+console.log(`</body>`);
+
+function generateElement(string) {
+  const color = messageBubbleColorForString(string);
+  return `<div style="color: ${color}">${string}</div>`
+}
+
+function randomString(length) {
+  return Math.random().toString(36).substring(length);
+}
+
+function messageBubbleColorForString(str) {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    // eslint-disable-next-line
+    hash = str.charCodeAt(i) + ((hash << 5) - hash);
+  }
+
+  // Tweak these to adjust the result of the color
+  const saturation = 75;
+  const lightness = 65;
+  const alpha = 1.0;
+  const hue = parseInt(Math.abs(hash), 16) % 300;
+
+  return `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha})`;
+}
--- a/webroot/js/utils/user-colors.js
+++ b/webroot/js/utils/user-colors.js
@ -6,8 +6,8 @@ export function messageBubbleColorForString(str) {
				@@ -6,8 +6,8 @@ export function messageBubbleColorForString(str) {
  }

  // Tweak these to adjust the result of the color
-  const saturation = 70;
-  const lightness = 50;
+  const saturation = 75;
+  const lightness = 65;
  const alpha = 1.0;
  const hue = parseInt(Math.abs(hash), 16) % 300;