From 7e959e3ba1c94024cf3ce76e1bd2fe1567a85b30 Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Mon, 15 Jun 2020 13:41:37 -0700
Subject: [PATCH] Add color hash for user avatar backgrounds

---
 webroot/index.html       |  2 +
 webroot/js/message.js    |  3 ++
 webroot/js/usercolors.js | 88 ++++++++++++++++++++++++++++++++++++++++
 3 files changed, 93 insertions(+)
 create mode 100644 webroot/js/usercolors.js

diff --git a/webroot/index.html b/webroot/index.html
index fbee04ea8..5bc4b9d57 100644
--- a/webroot/index.html
+++ b/webroot/index.html
@@ -100,6 +100,7 @@
                   <img
                     v-bind:src="message.image"
                     class="message-avatar rounded-full bg-black bg-opacity-50"
+                    v-bind:style="{ backgroundColor: message.userColor() }"
                   />
                   <div class="message-content">
                     <p class="message-author text-white font-bold">{{ message.author }}</p>
@@ -137,6 +138,7 @@
     </div>
   </div>
 
+  <script src="js/usercolors.js"></script>
   <script src="js/config.js"></script>
   <script src="js/utils.js"></script>
   <script src="js/message.js"></script>
diff --git a/webroot/js/message.js b/webroot/js/message.js
index 09e1164bb..f5eae4551 100644
--- a/webroot/js/message.js
+++ b/webroot/js/message.js
@@ -19,6 +19,9 @@ class Message {
 		var linked = autoLink(this.body, { embed: true });
 		return this.addNewlines(linked);
 	}
+	userColor() {
+		return colorForString(this.author);
+	}
 
 	toModel() {
 		return {
diff --git a/webroot/js/usercolors.js b/webroot/js/usercolors.js
new file mode 100644
index 000000000..238e947fc
--- /dev/null
+++ b/webroot/js/usercolors.js
@@ -0,0 +1,88 @@
+function getHashFromString(string) {
+  let hash = 1;
+  for (let i = 0; i < string.length; i++) {
+    const codepoint = string.charCodeAt(i);
+    hash *= codepoint;
+  }
+
+  return Math.abs(hash);
+}
+
+function digitsFromNumber(number) {
+  const numberString = number.toString();
+  let digits = [];
+
+  for (let i = 0, len = numberString.length; i < len; i += 1) {
+    digits.push(numberString.charAt(i));
+  }
+
+  return digits;
+}
+
+// function avatarFromString(string) {
+//   const hash = getHashFromString(string);
+//   const digits = digitsFromNumber(hash);
+//   // eslint-disable-next-line
+//   const sum = digits.reduce(function (total, number) {
+//     return total + number;
+//   });
+//   const sumDigits = digitsFromNumber(sum);
+//   const first = sumDigits[0];
+//   const second = sumDigits[1];
+//   let filename = '/avatars/';
+
+//   // eslint-disable-next-line
+//   if (first == 1 || first == 2) {
+//     filename += '1' + second.toString();
+//     // eslint-disable-next-line
+//   } else if (first == 3 || first == 4) {
+//     filename += '2' + second.toString();
+//     // eslint-disable-next-line
+//   } else if (first == 5 || first == 6) {
+//     filename += '3' + second.toString();
+//     // eslint-disable-next-line
+//   } else if (first == 7 || first == 8) {
+//     filename += '4' + second.toString();
+//   } else {
+//     filename += '5';
+//   }
+
+//   return filename + '.svg';
+// }
+
+function colorForString(str) {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    // eslint-disable-next-line
+    hash = str.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  let colour = '#';
+  for (let i = 0; i < 3; i++) {
+    // eslint-disable-next-line
+    let value = (hash >> (i * 8)) & 0xff;
+    colour += ('00' + value.toString(16)).substr(-2);
+  }
+  return colour;
+}
+
+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);
+  }
+  let colour = '#';
+  for (let i = 0; i < 3; i++) {
+    // eslint-disable-next-line
+    let value = (hash >> (i * 8)) & 0xff;
+    colour += ('00' + value.toString(16)).substr(-2);
+  }
+  // Convert to RGBA
+  let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(colour);
+  let rgb = result ? {
+    r: parseInt(result[1], 16),
+    g: parseInt(result[2], 16),
+    b: parseInt(result[3], 16),
+  } : null;
+  return 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ', 0.3)';
+}
\ No newline at end of file