☰

Talkomatic Visual+

Makes Talkomatic look better and allows you to have a Imagery background

// ==UserScript==
// @name         Talkomatic Visual+
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  Makes Talkomatic look better and allows you to have a Imagery background
// @match        https://classic.talkomatic.co/room.html?roomId=*
// @grant        none
// @license      MIT
// ==/UserScript==

(function () {
    'use strict';
document.body.style.backgroundColor = '#000000fe';
    function setFullscreenBackground(src) {
        const img = document.createElement('img');
        img.src = src;
        Object.assign(img.style, {
            position: 'fixed',
            top: '0',
            left: '0',
            width: '100vw',
            height: '100vh',
            objectFit: 'cover',
            objectPosition: 'center',
            zIndex: '-2147483647',
            pointerEvents: 'none'
        });
        document.body.appendChild(img);
        return img;
    }

    // === Persistent Toggle Flag ===
    let fxEnabled = localStorage.getItem('talkomatic-fx') !== 'false';
    let bgImageEl = null;

    // === Load saved background ===
    const savedImage = localStorage.getItem('talkomatic-background');
    if (savedImage && fxEnabled) {
        bgImageEl = setFullscreenBackground(savedImage);
    }

    // === Styling loop ===
    setInterval(() => {
        if (!fxEnabled) return;

        document.querySelectorAll('*').forEach(el => {
            const tag = el.tagName.toUpperCase();
            const style = getComputedStyle(el);
            const display = style.display;

            const hasText = [...el.childNodes].some(
                n => n.nodeType === 3 && n.textContent.trim().length > 0
            );

            el.style.boxShadow = 'none';
            el.style.textShadow = hasText ? '0 0 3px black, 0 0 6px black' : 'none';

            if (['INPUT', 'TEXTAREA', 'BUTTON', 'SELECT'].includes(tag)) {
                el.style.boxShadow = '0 0 7px rgba(0,0,0,0.9)';
            }
        });

        document.querySelectorAll('*:not(button):not(input):not(textarea):not(.chat-row > *):not(.bg-upload-ignore)').forEach(el => {
            const bg = getComputedStyle(el).backgroundColor;
            if (!bg || bg === 'transparent' || bg === 'rgba(0, 0, 0, 0)') return;
            if (!el.dataset.originalBg) {
                el.dataset.originalBg = bg;
            }
            const match = bg.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
            if (match) {
                const [_, r, g, b] = match;
                el.style.backgroundColor = `rgba(${r},${g},${b},0.4)`;
            }
        });

        document.querySelectorAll('.chat-row').forEach(row => {
            [...row.children].forEach(child => {
                child.style.opacity = '0.7';
            });
        });

        document.querySelectorAll('input[type="text"], textarea').forEach(el => {
            el.style.backgroundColor = 'transparent';
            el.style.color = 'inherit';
            el.style.border = '1px solid black';
            el.style.boxShadow = '0 0 5px black';
            el.style.caretColor = 'black';
        });
    }, 50);

    // === Upload button ===
    const uploadInput = document.createElement('input');
    uploadInput.type = 'file';
    uploadInput.accept = 'image/*';
    uploadInput.style.display = 'none';
    uploadInput.id = 'bg-upload-button';

    const uploadButton = document.createElement('label');
    uploadButton.setAttribute('for', 'bg-upload-button');
    uploadButton.textContent = '📁 Upload Background';
    uploadButton.classList.add('bg-upload-ignore');
    Object.assign(uploadButton.style, {
        position: 'fixed',
        bottom: '10px',
        left: '10px',
        zIndex: '9999',
        fontSize: '14px',
        fontFamily: 'Arial, sans-serif',
        padding: '6px 14px',
        background: '#222',
        color: '#fff',
        border: '1px solid orange',
        borderRadius: '4px',
        cursor: 'pointer'
    });

    document.body.append(uploadInput, uploadButton);

    uploadInput.addEventListener('change', function (e) {
        const file = e.target.files[0];
        if (!file) return;

        const reader = new FileReader();
        reader.onload = function (event) {
            const dataURL = event.target.result;
            localStorage.setItem('talkomatic-background', dataURL);

            if (fxEnabled) {
                if (bgImageEl) bgImageEl.remove();
                bgImageEl = setFullscreenBackground(dataURL);
            }
        };
        reader.readAsDataURL(file);
    });

    // === Toggle FX button ===
    const toggleFX = document.createElement('button');
    toggleFX.textContent = fxEnabled ? '🌓 Disable Visual FX' : '🌕 Enable Visual FX';
    toggleFX.classList.add('bg-upload-ignore');
    Object.assign(toggleFX.style, {
        position: 'fixed',
        bottom: '10px',
        left: '180px',
        zIndex: '9999',
        fontSize: '14px',
        fontFamily: 'Arial, sans-serif',
        padding: '6px 14px',
        background: '#222',
        color: '#fff',
        border: '1px solid orange',
        borderRadius: '4px',
        cursor: 'pointer'
    });

    toggleFX.onclick = () => {
        fxEnabled = !fxEnabled;
        localStorage.setItem('talkomatic-fx', fxEnabled);
        toggleFX.textContent = fxEnabled ? '🌓 Disable Visual FX' : '🌕 Enable Visual FX';

        if (!fxEnabled) {
            document.querySelectorAll('*').forEach(el => {
                if (!el.classList.contains('bg-upload-ignore')) {
                    el.style.boxShadow = '';
                    el.style.textShadow = '';
                    el.style.opacity = '';
                    if (el.dataset.originalBg) {
                        el.style.backgroundColor = el.dataset.originalBg;
                    }
                }
            });
            document.querySelectorAll('input[type="text"], textarea').forEach(el => {
                el.style.backgroundColor = '';
                el.style.color = '';
                el.style.border = '';
                el.style.boxShadow = '';
                el.style.caretColor = '';
            });
            if (bgImageEl) bgImageEl.remove();
        } else {
            const bg = localStorage.getItem('talkomatic-background');
            if (bg) bgImageEl = setFullscreenBackground(bg);
        }
    };

    document.body.append(toggleFX);
})();