☰

SteinChatBubbles

Create chat bubbles for Stein World.

// ==UserScript==
// @name         SteinChatBubbles
// @namespace    http://tampermonkey.net/
// @version      2025-06-13
// @description  Create chat bubbles for Stein World.
// @author       guydude
// @match        https://*.stein.world/game*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=stein.world
// @grant        none
// @run-at       document-idle
// @license MIT
// ==/UserScript==

(function() {
    'use strict';
// ==UserScript==
// @name         SteinChatBubbles
// @namespace    http://tampermonkey.net/
// @version      2025-06-13
// @description  Create chat bubbles for Stein World.
// @author       guydude
// @match        https://*.stein.world/game*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=stein.world
// @grant        none
// @run-at       document-idle
// @license MIT
// @downloadURL https://update.greasyfork.org/scripts/539439/SteinChatBubbles.user.js
// @updateURL https://update.greasyfork.org/scripts/539439/SteinChatBubbles.meta.js
// ==/UserScript==

(function() {
    'use strict';
let chatHistory = JSON.parse(localStorage.getItem('reload-chat-history')) || [];

chatHistory.forEach((message) => {
    const temp = document.createElement('div');
    temp.innerHTML = message;
    const messageHTML = temp.firstChild;
    messageHTML.classList.add('old-chat-message');
    const interval = setInterval(() => {
        const element = document.getElementById('stein-chat-content-container').querySelector('.stein-chat-content');
        if (element) {
            clearInterval(interval);
            element.appendChild(messageHTML);
        }
    }, 100);
});

window.addEventListener('beforeunload', () => {
    chatHistory = Array.from(document.getElementById('stein-chat-content-container').querySelectorAll(
        '.stein-chat-message-zone, .stein-chat-message-party, .stein-chat-message-guild, .stein-chat-message-whisper-to, .stein-chat-message-whisper-from'
        )).map(el => el.outerHTML);
    if (reload) {
        localStorage.setItem('reload-chat-history', JSON.stringify(chatHistory));
    } else {
        localStorage.setItem('reload-chat-history', JSON.stringify([]));
    }
});

let reload = false;

document.addEventListener('keydown', (event) => {
    if (event.key === 'F5') {
        event.preventDefault();
        reload = true;
        window.location.reload();
    }
});

function getText() {
    const originalFillText = CanvasRenderingContext2D.prototype.fillText;
    CanvasRenderingContext2D.prototype.fillText = function(text, x, y, ...rest) {
        if (text && text.length > 0) {
            findChatter(text, x, y);
        }
        return originalFillText.call(this, text, x, y, ...rest);
    };
}

function findChatter(text, x, y) {
    let nameText = text;
    if (nameText.includes("'")) {
        nameText = nameText.split("'")[1];
    }
    for (let bubble of bubbleContainer.children) {
        if (bubble.classList[0] === nameText) {
            updateBubble(bubble, x, y);
        }
    }
}

function updateBubble(bubble, x, y) {
    const canvas = document.getElementById('stein-ui-canvas');
    const rect = canvas.getBoundingClientRect();

    const offsetX = parseInt(bubble.style.width)/2;
    let offsetY = parseInt(bubble.offsetHeight);
    const prevMessages = document.getElementById('chat-bubbles-container').querySelectorAll(`.${bubble.classList[0]}.chat-bubble`);
    for (const message of prevMessages) {
        const originalY = parseInt(message.style.top);
        message.style.top = `${originalY - offsetY}px`;
    }

    const screenX = rect.left + x - offsetX - 10;
    const screenY = rect.top + y - offsetY - 20;

    bubble.style.left = `${screenX}px`;
    bubble.style.top = `${screenY}px`;
}

function waitForElement(selector) {
    return new Promise((resolve) => {
        const checkExist = setInterval(() => {
            const targetNode = document.querySelector(selector);
            if (targetNode) {
                clearInterval(checkExist);
                resolve(targetNode);
            }
        }, 100);
    });
}

const messageClasses = ['stein-chat-message-zone', 'stein-chat-message-party', 'stein-chat-message-guild', 'stein-chat-message-whisper-from', 'stein-chat-message-whisper-to'];

const chatObserver = new MutationObserver((mutationList, observer) => {
    for (let mutation of mutationList) {
        if (mutation.type === 'childList') {
            for (let message of mutation.addedNodes) {
                if (message.nodeType === Node.ELEMENT_NODE) {
                    if (messageClasses.includes(message.classList[0]) && !message.classList.contains('old-chat-message')) {
                        let className = message.classList[0];
                        let playerName;
                        if (className.includes('-from')) {
                            className = className.slice(0, -5);
                            playerName = message.querySelector(`.${className}-name`).textContent;
                        } else if (className.includes('-to')) {
                            className = className.slice(0, -3);
                            playerName = document.getElementById('stein-player-name-panel').textContent;
                        } else {
                            playerName = message.querySelector(`.${className}-name`).textContent;
                        }
                        const messageText = message.querySelector(`.${className}-text`).textContent;
                        const bubble = createChatBubble(playerName, messageText);

                        if (className === 'stein-chat-message-party') {
                            bubble.style.color = '#b6dc87';
                        } else if (className === 'stein-chat-message-guild') {
                            bubble.style.color = '#afd4f5';
                        } else if (className === 'stein-chat-message-whisper') {
                            bubble.style.color = '#f7a0f3';
                        }

                        const playerMessages = document.getElementById('chat-bubbles-container').querySelectorAll(`.${bubble.classList[0]}.chat-bubble`);

                        const now = Date.now();
                        let lifetime = bubble.textContent.length * 100;
                        if (playerMessages.length === 1) {
                            lifetime += 4000;
                        } else {
                            lifetime += parseInt(playerMessages[playerMessages.length - 2].dataset.expireAt) - now;
                        }
                        const expireAt = now + lifetime;
                        console.log(bubble.textContent);
                        console.log(lifetime);
                        bubble.dataset.expireAt = expireAt;
                    }
                }
            }
        }
    }
});

setInterval(() => {
    document.querySelectorAll('.chat-bubble').forEach(el => {
        if (Date.now() >= parseInt(el.dataset.expireAt)) {
            el.remove();
        }
    });
}, 150);

const config = { childList: true, subtree: false };

(async () => {
    const targetNode = await waitForElement('#stein-chat-content-container .stein-chat-content');
    chatObserver.observe(targetNode, config);
    getText();
})();

const bubbleContainer = document.createElement('div');
bubbleContainer.id = 'chat-bubbles-container';
bubbleContainer.setAttribute('style', "position: absolute; top: 0; left: 0; pointer-events: none; z-index: 10;");
document.body.appendChild(bubbleContainer);

function createChatBubble(playerName, messageText) {
    const bubble = document.createElement('div');
    bubble.className = `${playerName} chat-bubble`;
    bubble.innerText = messageText;
    bubble.setAttribute('style',
    `position: absolute;
    background: rgba(0,0,0,0.6);
    color: white;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 14px;
    text-align: center;
    display: inline-block;
    overflow-wrap: break-word;
    white-space: nowrap;`);

    const canvas = document.getElementById('stein-ui-canvas');
    const ctx = canvas.getContext("2d");

    ctx.font = "14px 'Fira Sans Condensed'";

    const width = ctx.measureText(messageText).width;
    if (width > 200) {
        bubble.style.width = '200px';
        bubble.style.whiteSpace = 'normal';
    } else {
        bubble.style.width = `${width}px`;
    }

    document.getElementById('chat-bubbles-container').appendChild(bubble);
    return bubble;
}
})();
})();