Steamlabs OBS ChatBox Customize

common.js

const strToRgb = function(str) {
	const hslToRgb = function(hue, saturation, lightness) {
		const chroma = (1 - Math.abs((2 * lightness) - 1)) * saturation;
		let huePrime = hue / 60;
		const secondComponent = chroma * (1 - Math.abs((huePrime % 2) - 1));
	
		huePrime = Math.floor(huePrime);
	
		let red;
		let green;
		let blue;
	
		if (huePrime === 0) {
			red = chroma;
			green = secondComponent;
			blue = 0;
	
		} else if (huePrime === 1) {
			red = secondComponent;
			green = chroma;
			blue = 0;
	
		} else if (huePrime === 2) {
			red = 0;
			green = chroma;
			blue = secondComponent;
	
		} else if (huePrime === 3) {
			red = 0;
			green = secondComponent;
			blue = chroma;
	
		} else if (huePrime === 4) {
			red = secondComponent;
			green = 0;
			blue = chroma;
	
		} else if (huePrime === 5) {
			red = chroma;
			green = 0;
			blue = secondComponent;
		}
	
		const lightnessAdjustment = lightness - (chroma / 2);
	
		red += lightnessAdjustment;
		green += lightnessAdjustment;
		blue += lightnessAdjustment;
	
		return [Math.round(red * 255), Math.round(green * 255), Math.round(blue * 255)];
	};
	
	const hashCode = function(str) {
		let hash = 0;
	
		for (var i = 0; i < str.length; i++) {
			hash = str.charCodeAt(i) + ((hash << 5) - hash);
		}
	
		return hash;
	}

	return hslToRgb(Math.abs(hashCode(str) % 360), 1, 0.65);
}

const getBright = function(r, g, b) {
	const rmod = 0.9
	const gmod = 0.8;
	const bmod = 0.5;

	return Math.max(r * rmod, g * gmod, b * bmod) / 255;
};

// log area element
const logArea = document.getElementById('log');

document.addEventListener('onLoad', function(obj) {
  console.log(obj);
});

// Please use event listeners to run functions.
document.addEventListener('onEventReceived', function(obj) {
	// get last item
	const item = logArea.querySelector('[data-id]:last-child');

	// get meta element
	const meta = item.querySelector('.meta');
  
	// get name element
	const name = item.querySelector('.name');

	// calc color code from user name
	const rgb = strToRgb(obj.detail.from);

	// calc bright from color code
	const bright = getBright(rgb[0], rgb[1], rgb[2]);

	// set color to user name
	name.style.setProperty('color', `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 1)`);

	meta.dataset['bright'] = bright;

	if (bright < 0.5) {
		// set 'dark' class to meta element if color is dark
		meta.classList.add('dark');
	}

	// check the profile image url
	if ('profileImageUrl' in obj.detail.tags) {
		const img = document.createElement('img');
		const badge = meta.querySelector('.badges');

		img.setAttribute('src', obj.detail.tags.profileImageUrl);
		img.setAttribute('alt', obj.detail.from);
		img.classList.add('profile');

		badge.appendChild(img);
	}
});

index.html

<!-- item will be appened to this layout -->
<div id="log" class="sl__chat__layout">
</div>

<!-- chat item -->
<script type="text/template" id="chatlist_item">
  <div data-from="{from}" data-id="{messageId}">
    <span class="meta" style="color: {color}">
      <span class="badges">
      </span>
      <span class="name">{from}</span>
    </span>

    <span class="message">
      {message}
    </span>
  </div>
</script>

style.css

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@900&family=Roboto:wght@900&display=swap');

* {
	box-sizing: border-box;
}

html,
body {
	height: 100%;
	overflow: hidden;
}

body {
	background: {background_color};
	font-family: Roboto, 'Noto Sans JP', sans-serif;
	font-weight: 400;
	font-size: {font_size};
	line-height: 1.33em;
	color: {text_color};
}

#log > div {
	animation: fadeInUp .3s ease forwards, fadeOut 0.5s ease {message_hide_delay} forwards;
	-webkit-animation: fadeInUp .3s ease forwards, fadeOut 0.5s ease {message_hide_delay} forwards;
}

.colon {
	display: none;
}

#log {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 0 10px 10px;
	width: 100%;
}

#log > div {
	display: block;
	padding-bottom: 0.3em;
}

#log > div.deleted {
	visibility: hidden;
}

#log .emote {
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	padding: 0.4em 0.2em;
	position: relative;
}

#log .emote img {
	display: inline-block;
	height: 1em;
	opacity: 0;
}

#log .message,
#log .meta {
	display: block;
}

#log .meta {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	padding-left: 0.1em;
	text-shadow: rgba(0, 0, 0, 0.4) 2px 0px, rgba(0, 0, 0, 0.4) -2px 0px,
		rgba(0, 0, 0, 0.4) 0px -2px, rgba(0, 0, 0, 0.4) 0px 2px,
		rgba(0, 0, 0, 0.4) 2px 2px, rgba(0, 0, 0, 0.4) -2px 2px,
		rgba(0, 0, 0, 0.4) 2px -2px, rgba(0, 0, 0, 0.4) -2px -2px,
		rgba(0, 0, 0, 0.4) 1px 2px, rgba(0, 0, 0, 0.4) -1px 2px,
		rgba(0, 0, 0, 0.4) 1px -2px, rgba(0, 0, 0, 0.4) -1px -2px,
		rgba(0, 0, 0, 0.4) 2px 1px, rgba(0, 0, 0, 0.4) -2px 1px,
		rgba(0, 0, 0, 0.4) 2px -1px, rgba(0, 0, 0, 0.4) -2px -1px;
}

#log .meta.dark {
	text-shadow: rgba(255, 255, 255, 0.4) 2px 0px, rgba(255, 255, 255, 0.4) -2px 0px,
		rgba(255, 255, 255, 0.4) 0px -2px, rgba(255, 255, 255, 0.4) 0px 2px,
		rgba(255, 255, 255, 0.4) 2px 2px, rgba(255, 255, 255, 0.4) -2px 2px,
		rgba(255, 255, 255, 0.4) 2px -2px, rgba(255, 255, 255, 0.4) -2px -2px,
		rgba(255, 255, 255, 0.4) 1px 2px, rgba(255, 255, 255, 0.4) -1px 2px,
		rgba(255, 255, 255, 0.4) 1px -2px, rgba(255, 255, 255, 0.4) -1px -2px,
		rgba(255, 255, 255, 0.4) 2px 1px, rgba(255, 255, 255, 0.4) -2px 1px,
		rgba(255, 255, 255, 0.4) 2px -1px, rgba(255, 255, 255, 0.4) -2px -1px;
}

#log .message {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-wrap: break-word;
	font-weight: 900;
	padding-top: 0.2em;
	padding-left: 0.1em;
	text-shadow: rgba(0, 0, 0, 0.8) 2px 0px, rgba(0, 0, 0, 0.8) -2px 0px,
		rgba(0, 0, 0, 0.8) 0px -2px, rgba(0, 0, 0, 0.8) 0px 2px,
		rgba(0, 0, 0, 0.8) 2px 2px, rgba(0, 0, 0, 0.8) -2px 2px,
		rgba(0, 0, 0, 0.8) 2px -2px, rgba(0, 0, 0, 0.8) -2px -2px,
		rgba(0, 0, 0, 0.8) 1px 2px, rgba(0, 0, 0, 0.8) -1px 2px,
		rgba(0, 0, 0, 0.8) 1px -2px, rgba(0, 0, 0, 0.8) -1px -2px,
		rgba(0, 0, 0, 0.8) 2px 1px, rgba(0, 0, 0, 0.8) -2px 1px,
		rgba(0, 0, 0, 0.8) 2px -1px, rgba(0, 0, 0, 0.8) -2px -1px;
}

.badges > *:last-child {
	margin-right: 0.2em;
}

.badge,
.profile {
	display: inline-block;
	position: relative;
	height: 1.2em;
	vertical-align: middle;
	top: -0.1em;
	margin-right: 0.1em;
	border-radius: 100%;
}

.name {
	font-weight: 900;
  color: #fd3e98;
}