diff --git a/test/userColorsTest.js b/test/userColorsTest.js new file mode 100644 index 000000000..59a34f053 --- /dev/null +++ b/test/userColorsTest.js @@ -0,0 +1,36 @@ +// Run on the command line to test colors. +// node userColorsTest.js > colorTest.html + +console.log(``); + +for (var i = 0; i < 20; i++) { + const element = generateElement(randomString(6)); + console.log(element); +} + +console.log(``); + +function generateElement(string) { + const color = messageBubbleColorForString(string); + return `
${string}
` +} + +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})`; +} diff --git a/webroot/js/utils/user-colors.js b/webroot/js/utils/user-colors.js index 9dac505c4..dbb413dac 100644 --- a/webroot/js/utils/user-colors.js +++ b/webroot/js/utils/user-colors.js @@ -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;