// ==UserScript==
// @name         Intercept StumbleChat WebSocket Messages
// @namespace    http://tampermonkey.net/
// @version      2024-01-28
// @description  Intercept WebSocket messages on StumbleChat and display them
// @author       You
// @match        https://stumblechat.com/room/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=stumblechat.com
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Create a function to display WebSocket messages
    function displayWebSocketMessage(message) {
        const webSocketMessagesDiv = document.getElementById("webSocketMessages");
        if (webSocketMessagesDiv) {
            webSocketMessagesDiv.innerHTML += message + "<br>";
            webSocketMessagesDiv.scrollTop = webSocketMessagesDiv.scrollHeight;
        }
    }

    // Override WebSocket constructor to intercept WebSocket creation
    const originalWebSocket = window.WebSocket;
    window.WebSocket = function(url, protocols) {
        console.log('WebSocket URL:', url);

        // Call original WebSocket constructor
        const ws = new originalWebSocket(url, protocols);

        // Event listener for receiving messages
        ws.addEventListener('message', event => {
            displayWebSocketMessage(event.data);
        });

        return ws;
    };

    // Method to create the div for displaying WebSocket messages
    function createWebSocketMessagesDiv() {
        const div = document.createElement("div");
        div.id = "webSocketMessages";
        div.style.border = "1px solid #ccc";
        div.style.overflow = "auto";
        div.style.maxHeight = "200px";
        // Set font color to white
        div.style.color = "#ffffff";

        // Locate the chat-position div
        const chatPositionDiv = document.getElementById("chat-position");

        // Append your custom div to the chat-position div
        if (chatPositionDiv) {
            chatPositionDiv.appendChild(div);
        } else {
            // If chat-position div not found, append to document body
            document.body.appendChild(div);
        }
    }

    // Call the function to create the WebSocket messages div
    createWebSocketMessagesDiv();
})();