LogalDeveloper/owncast
0
Fork 0
Code Activity

Update chat styling

Browse Source
This commit is contained in:
Gabe Kangas
2020-10-16 17:36:11 -07:00
parent 1b821e4c4e
commit f4815e331c
5 changed files with 49 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
test/userColorsTest.js
View File

@@ -11,8 +11,9 @@ for (var i = 0; i < 20; i++) {
console.log(`</body>`);
function generateElement(string) {
const color = messageBubbleColorForString(string);
return `<div style="color: ${color}">${string}</div>`
const bgColor = messageBubbleColorForString(string);
const fgColor = textColorForString(string);
return `<div style="background-color: ${bgColor}; color: ${fgColor}; padding: 30px;">${string}</div>`;
}
function randomString(length) {
@@ -27,9 +28,25 @@ function messageBubbleColorForString(str) {
}
// Tweak these to adjust the result of the color
const saturation = 75;
const lightness = 65;
const alpha = 1.0;
const saturation = 25;
const lightness = 45;
const alpha = 0.3;
const hue = parseInt(Math.abs(hash), 16) % 360;
return `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha})`;
}
function textColorForString(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 = 80;
const lightness = 80;
const alpha = 0.8;
const hue = parseInt(Math.abs(hash), 16) % 360;
return `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha})`;