streamlabs

////////////// 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="name">{from}</span>
      <span class="badges">
      </span>
    </span>

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

////////////// CSS //////////////
body {
  font-family: 'MonoLisa', monospace;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.5;
}

#log {
  padding: 15px;
  background: white;
  box-sizing: border-box;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;

}

#log div {
  margin-bottom: 20px;
}

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

.name {
  font-style: italic;
}

.message {
  font-weight: 600;
}

////////////// JS //////////////

const setup = () => {
  const nearestColorScript = document.createElement('script');
  document.body.appendChild(nearestColorScript);
  
  nearestColorScript.onload = onScriptLoad;
  nearestColorScript.src = 'https://cdn.rawgit.com/dtao/nearest-color/a017c25b/nearestColor.js';
}

const onScriptLoad = () => {
  console.log('nearest color script loaded');
    
  self._colors = {
    'green': '#24d05a',
    'pink': '#eb4888',
    'blue': '#10a2f5',
    'yellow': '#e9bc3f'
  };

  self._replaceColor = nearestColor.from(self._colors);

  const chatlog = document.querySelector('#log');
  const config = { childList: true };
  const observer = new MutationObserver(onMutation);
  observer.observe(chatlog, config);
}

const onMutation = (mutationsList) => {
  for (let mutation of mutationsList) {
    if (mutation.addedNodes.length) {
      const addedNodesArray = [...mutation.addedNodes];
      const addedDivs = addedNodesArray.filter((node) => node.nodeName === 'DIV');
      
      if (addedDivs.length) {
        const chatDiv = addedDivs.pop();
        const chatNick = chatDiv.querySelector('.meta');
        const oldColor = chatNick.style.color;
        const newColor = self._replaceColor(oldColor).value || self._colors.pink;

        chatNick.style.color = newColor;
      }
    }
  }
};

document.addEventListener('onLoad', setup);