Update FC2 Emote Replacer.user.js - add colors to >names

Author: ling-mjg

others/userscripts/4chan/FC2 Emote Replacer.user.js

@@ -1,33 +1,71 @@
 // ==UserScript==
 // @name         FC2 Mahjong Soul Emote Name Replacer
-// @namespace    https://live.fc2.com/
-// @version      0.2
+// @version      0.3
 // @description  Replaces "charname-nn.png" text with the actual emote in the FC2 chatbox
 // @author       Ling (and Anon)
 // @match        https://live.fc2.com/*
 // @grant        none
 // ==/UserScript==
 
 // Use with your -monkey browser extension of choice
-// This version (v0.2) fixes the bug where the chatbox doesn't automatically fully scroll down when a new message containing an emote is posted
+// This version (v0.3) adds optional colors to user >names for better readability
 
 (function() {
     'use strict';
 
     // Set emote size here. 64 works pretty good, 120 too.
-    const emoteSize = 64
+    const EMOTE_SIZE = 64;
+    // Colorize >names? Set to false to disable this feature.
+    const COLORIZE_NAMES = true;
     const chatboxSelector = '#js-commentListContainer';
     const chatboxDisplaySelector = '.chat_display'
     const messageSelector = '.js-commentText';
+
     const messageContainerSelector = '.js-commentLine';
+    const userNameSelector = '.js-commentUserName';
+    const uidSelector = '.js-commentId';
     const imageRegex = /(\w+)-(\d+)\.png/i;
     const imageBaseUrl = 'https://files.riichi.moe/mjg/game%20resources%20and%20tools/Mahjong%20Soul/game%20files/emotes/';
 
+
+    function colorizeUserName(messageContainer) {
+        const userNameElement = messageContainer.querySelector(userNameSelector);
+        const uidElement = messageContainer.querySelector(uidSelector);
+
+        if (userNameElement && uidElement && !userNameElement.dataset.nameColorized) {
+            const uid = uidElement.textContent.trim();
+            if (uid) {
+                var color = '#' + uid.substring(0, 6);
+
+                var r = parseInt(color.slice(1, 3), 16);
+                var g = parseInt(color.slice(3, 5), 16);
+                var b = parseInt(color.slice(5, 7), 16);
+
+                // Ensure correct contrast against white bg and darken if it's too bright (https://www.w3.org/TR/AERT/#color-contrast)
+                const brightness = ((r * 299) + (g * 587) + (b * 114)) / 1000;
+                if (brightness > 220) {
+                    r = Math.floor(r * 0.90);
+                    g = Math.floor(g * 0.90);
+                    b = Math.floor(b * 0.90);
+                }
+
+                const finalColor = `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+
+                userNameElement.style.color = finalColor;
+                userNameElement.dataset.nameColorized = true;
+            }
+        }
+    }
+
+    function toHex(c) {
+        return ('0' + c.toString(16)).slice(-2);
+    }
+
     function replaceImagesInMessage(messageElement) {
         const messageText = messageElement.textContent;
         const newMessageText = messageText.replace(imageRegex, (match, charname, number) => {
             const imageUrl = `${imageBaseUrl}${charname}-${number}.png`;
-            return `<img src="${imageUrl}" alt="${charname}-${number}" width="${emoteSize}" height="${emoteSize}">`;
+            return `<img src="${imageUrl}" alt="${charname}-${number}" width="${EMOTE_SIZE}" height="${EMOTE_SIZE}">`;
         });
 
         messageElement.innerHTML = newMessageText;
@@ -41,13 +79,18 @@
             return;
         }
 
-        const messages = chatbox.querySelectorAll(messageSelector);
-        messages.forEach(message => {
-            if (!message.dataset.hasImagesReplaced) {
+        const messageContainers = chatbox.querySelectorAll(messageContainerSelector);
+        messageContainers.forEach(container => {
+            const message = container.querySelector(messageSelector);
+            if (message && !message.dataset.hasImagesReplaced) {
                 replaceImagesInMessage(message);
                 message.dataset.hasImagesReplaced = true;
             }
+            if (COLORIZE_NAMES) {
+              colorizeUserName(container);
+            }
         });
+
         const chatboxDisplay = document.querySelector(chatboxDisplaySelector);
         chatboxDisplay.scrollTop = chatboxDisplay.scrollHeight;
     }
@@ -64,6 +107,9 @@
                                 message.dataset.hasImagesReplaced = true;
                             }
                         });
+                        if (COLORIZE_NAMES) {
+                          colorizeUserName(node);
+                        }
                     }
                 });
             }
@@ -72,6 +118,7 @@
         chatboxDisplay.scrollTop = chatboxDisplay.scrollHeight;
     }
 
+
     function startObservingChatbox() {
         const chatbox = document.querySelector(chatboxSelector);
         if (!chatbox) {
@@ -89,4 +136,4 @@
         processChatbox();
         startObservingChatbox();
     }, 2500);
-})();
+})();