ClubWPT chat - split dealer and player messages

instructions.md

1. After you go to a table, right click on the table and click "Inspect".
2. On the right (usually), click on the "Console" tab.
3. Copy and paste the file above into the console and hit enter.
4. You can close the inspector by clicking the X on the top right.

You'll need to do this every time you go to a new table for now. I'll eventually turn this into an extension for chrome with a lot more enhancements. If you have any suggestions for more featues, please comment them below.

Future Features: Ignore specific user in chat.

split.js

const chatInput = document.getElementById('chatinput')
chatInput?.setAttribute('autocomplete', 'off')

// Get the element by ID
const chatArea = document.getElementById('chatarea');

// Arrays to store spans
const dealerMessages = [];
const nonDealerMessages = [];

// Function to create and manage the chat display container
function setupChatBottomContainer() {
    const chatBottomContainer = document.getElementById('chat-bottom-container');
    if (!chatBottomContainer) {
        console.error('Element with ID "chat-bottom-container" not found.');
        return;
    }

    // Change the container's position to relative
    chatBottomContainer.style.position = 'relative';

    // Create an overlay element
    const overlay = document.createElement('div');
    overlay.style.position = 'absolute';
    overlay.style.top = '0';
    overlay.style.left = '0';
    overlay.style.right = '0';
    overlay.style.bottom = '0';
    overlay.style.overflowY = 'auto';
    overlay.style.backgroundColor = 'white';
    overlay.style.border = '1px solid #ccc';
  

    // Create tab buttons
    const tabContainer = document.createElement('div');
    tabContainer.style.position = 'absolute';
    tabContainer.style.top = '10px';
    tabContainer.style.right = '10px';
    tabContainer.style.display = 'flex';
    tabContainer.style.flexDirection = 'column';

    const dealerTab = document.createElement('button');
    dealerTab.textContent = 'D';
    dealerTab.style.marginBottom = '5px';
    const nonDealerTab = document.createElement('button');
    nonDealerTab.textContent = 'P';

    tabContainer.appendChild(dealerTab);
    tabContainer.appendChild(nonDealerTab);
    overlay.appendChild(tabContainer);

    // Create message display areas
    const dealerMessageArea = document.createElement('div');
    dealerMessageArea.style.display = 'none';
    dealerMessageArea.style.maxHeight = '100%';
    dealerMessageArea.style.overflowY = 'auto';
    dealerMessageArea.style.paddingRight = '30px'

    const nonDealerMessageArea = document.createElement('div');
    nonDealerMessageArea.style.display = 'none';
    nonDealerMessageArea.style.maxHeight = '100%';
    nonDealerMessageArea.style.overflowY = 'auto';
    nonDealerMessageArea.style.paddingRight = '30px'
    nonDealerMessageArea.style.color = '00f'

    overlay.appendChild(dealerMessageArea);
    overlay.appendChild(nonDealerMessageArea);

    chatBottomContainer.appendChild(overlay);

    // Tab click event listeners
    dealerTab.addEventListener('click', () => {
        dealerMessageArea.style.display = 'block';
        nonDealerMessageArea.style.display = 'none';
        dealerMessageArea.scrollTop = dealerMessageArea.scrollHeight;
    });

    nonDealerTab.addEventListener('click', () => {
        dealerMessageArea.style.display = 'none';
        nonDealerMessageArea.style.display = 'block';
        nonDealerMessageArea.scrollTop = nonDealerMessageArea.scrollHeight;
        nonDealerTab.style.backgroundColor = ''; // Remove highlight when viewing
    });

    // Scroll event listeners to detect if the user has scrolled up
    let dealerUserScrolledUp = false;
    let nonDealerUserScrolledUp = false;

    dealerMessageArea.addEventListener('scroll', () => {
        dealerUserScrolledUp = dealerMessageArea.scrollTop < dealerMessageArea.scrollHeight - dealerMessageArea.clientHeight - 10;
    });

    nonDealerMessageArea.addEventListener('scroll', () => {
        nonDealerUserScrolledUp = nonDealerMessageArea.scrollTop < nonDealerMessageArea.scrollHeight - nonDealerMessageArea.clientHeight - 10;
    });

    return { dealerMessageArea, nonDealerMessageArea, dealerUserScrolledUp, nonDealerUserScrolledUp, nonDealerTab };
}

const chatAreas = setupChatBottomContainer();
let nonDealerHighlighted = false; // Flag to track if the non-dealer tab is highlighted

// Function to check and classify the last span's content
function classifyLastSpan() {
    const spans = chatArea.getElementsByTagName('span');
    if (spans.length > 0) {
        const lastSpan = spans[spans.length - 1];
        if (lastSpan.textContent.startsWith('Dealer:')) {
            if (dealerMessages.length >= 250) {
                dealerMessages.shift();
                chatAreas.dealerMessageArea.removeChild(chatAreas.dealerMessageArea.firstChild);
            }
            lastSpan.innerHTML?.replace('Dealer:', '<span style="font-weight: bold;">Dealer:</span>')
            dealerMessages.push(lastSpan);
            const newElement = document.createElement('div');
            newElement.textContent = lastSpan.textContent;
            newElement.style.fontSize = '0.7em'
            newElement.innerHTML = newElement.innerHTML.replace('Dealer: ', '<span style="font-weight: bold; color: "#000">Dealer: </span>')
            chatAreas.dealerMessageArea.appendChild(newElement);
            if (!chatAreas.dealerUserScrolledUp) {
                chatAreas.dealerMessageArea.scrollTop = chatAreas.dealerMessageArea.scrollHeight;
            }
        } else {
            if (nonDealerMessages.length >= 250) {
                nonDealerMessages.shift();
                chatAreas.nonDealerMessageArea.removeChild(chatAreas.nonDealerMessageArea.firstChild);
            }
            nonDealerMessages.push(lastSpan);
            const newElement = document.createElement('div');
            newElement.textContent = lastSpan.textContent;
            const index = newElement.textContent.indexOf(':')
            const text = newElement.textContent.substring(0, index + 1)
            newElement.innerHTML = newElement.innerHTML.replace(text, '<span style="font-weight: bold; color: "#000">' + text + '</span>')
            newElement.style.color = '#00f'
            newElement.style.fontSize = '0.7em'

            chatAreas.nonDealerMessageArea.appendChild(newElement);
            if (!chatAreas.nonDealerUserScrolledUp) {
                chatAreas.nonDealerMessageArea.scrollTop = chatAreas.nonDealerMessageArea.scrollHeight;
            }
            
            // Highlight the non-dealer tab if it is not being viewed
            if (chatAreas.nonDealerMessageArea.style.display === 'none' && !nonDealerHighlighted) {
                chatAreas.nonDealerTab.style.backgroundColor = 'yellow';
                nonDealerHighlighted = true;
            }
        }
    }
}

// Create a MutationObserver to watch for changes in the chat area
const observer = new MutationObserver((mutationsList) => {
    for (const mutation of mutationsList) {
        if (mutation.type === 'childList') {
            // Check if new nodes were added
            classifyLastSpan();
        }
    }
});

// Configuration object for the observer
const observerConfig = { childList: true, subtree: true };

// Start observing the target element
if (chatArea) {
    observer.observe(chatArea, observerConfig);
} else {
    console.error('Element with ID "chatarea" not found.');
}