☰

Greasy Fork is available in English.

BLF Voice Chat Script

Allows you to use voice chat on Bullet Force

// ==UserScript==
// @name         BLF Voice Chat Script
// @namespace    http://tampermonkey.net/
// @license      GPL-3
// @version      2024-09-09
// @description  Allows you to use voice chat on Bullet Force
// @author       You
// @match        https://games.crazygames.com/en_US/bullet-force-multiplayer/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=crazygames.com
// @grant        none
// ==/UserScript==

let ws = undefined;

class UIManager {
    constructor() {
        this.UIContext = null;
        this.UIMenus = [];
        this.tabs = [];
        this.notificationStack = [];
        this.notificationHeight = 100;
        this.notificationMargin = 10;
    }

    getAllTabs() {
        return this.tabs;
    }

    createNotification(titleText, descriptionText) {
        const notificationContainer = document.createElement('div');
        notificationContainer.className = 'notification-popup';
        notificationContainer.style.position = 'fixed';
        notificationContainer.style.left = '10px';
        notificationContainer.style.bottom = this.calculateNotificationBottom() + 'px';
        notificationContainer.style.transform = 'translateY(100%)';
        notificationContainer.style.backgroundColor = '#0e0e0e';
        notificationContainer.style.color = '#ffffff';
        notificationContainer.style.width = '300px';
        notificationContainer.style.padding = '20px';
        notificationContainer.style.borderRadius = '8px';
        notificationContainer.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.5)';
        notificationContainer.style.zIndex = '9999';
        notificationContainer.style.transition = 'transform 0.3s ease-in-out';

        const title = document.createElement('h2');
        title.textContent = titleText;
        title.style.fontSize = '22px';
        title.style.textAlign = 'center';
        title.style.marginBottom = '10px';
        title.classList.add('rainbow-animation');

        const description = document.createElement('p');
        description.textContent = descriptionText;
        description.style.fontSize = '16px';
        description.style.textAlign = 'center';
        description.classList.add('rainbow-animation');

        notificationContainer.appendChild(title);
        notificationContainer.appendChild(description);

        document.body.appendChild(notificationContainer);

        setTimeout(() => {
            notificationContainer.style.transform = 'translateY(0)';
        }, 50);

        setTimeout(() => {
            notificationContainer.style.transform = 'translateY(100%)';
            setTimeout(() => {
                this.removeNotification(notificationContainer);
                document.body.removeChild(notificationContainer);
            }, 300);
        }, 5000);

        this.makeDraggable(notificationContainer);

        this.notificationStack.push(notificationContainer);
    }

    calculateNotificationBottom() {
        let totalHeight = this.notificationMargin;
        this.notificationStack.forEach(notification => {
            totalHeight += notification.offsetHeight + this.notificationMargin;
        });
        return totalHeight;
    }

    removeNotification(notification) {
        const index = this.notificationStack.indexOf(notification);
        if (index !== -1) {
            this.notificationStack.splice(index, 1);
        }
        this.repositionNotifications();
    }

    repositionNotifications() {
        let totalHeight = this.notificationMargin;
        this.notificationStack.forEach(notification => {
            notification.style.bottom = totalHeight + 'px';
            totalHeight += notification.offsetHeight + this.notificationMargin;
        });
    }

    createMenu(elementId, titleText, width = '300px', height = 'auto') {
        const container = document.createElement('div');
        container.id = elementId;
        container.style.position = 'fixed';
        container.style.backgroundColor = '#0e0e0e';
        container.style.borderRadius = '8px';
        container.style.padding = '20px';
        container.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.5)';
        container.style.zIndex = '9999';
        container.style.width = width;
        container.style.height = height;

        container.style.top = `calc(50% - (${height} / 2))`;
        container.style.left = `calc(50% - (${width} / 2))`;

        container.style.userSelect = 'none';

        container.style.overflowY = 'auto';
        container.className = 'custom-scrollbar';

        const title = document.createElement('h2');
        title.textContent = titleText;
        title.style.color = '#ffffff';
        title.style.marginBottom = '20px';
        title.style.fontSize = '22px';
        title.style.textAlign = 'center';
        title.style.marginTop = '0px';
        title.classList.add('rainbow-animation');

        container.appendChild(title);

        document.body.appendChild(container);

        this.UIContext = container;

        return container;
    }

    makeDraggable(element) {
        let offsetX, offsetY;

        function handleMouseDown(event) {
            event.preventDefault();
            const boundingRect = element.getBoundingClientRect();
            offsetX = event.clientX - boundingRect.left;
            offsetY = event.clientY - boundingRect.top;

            console.log(`x: ${event.clientX}, y: ${event.clientY}, Offsetx: ${offsetX}, Offsety: ${offsetY}`)

            document.addEventListener('mousemove', handleMouseMove);
            document.addEventListener('mouseup', handleMouseUp);
        }

        function handleMouseMove(event) {
            moveElement(event.clientX, event.clientY);
        }

        function moveElement(clientX, clientY) {
            element.style.left = clientX - offsetX + 'px';
            element.style.top = clientY - offsetY + 'px';
        }

        function handleMouseUp() {
            cleanupListeners();
        }

        function handleTouchEnd() {
            cleanupListeners();
        }

        function cleanupListeners() {
            document.removeEventListener('mousemove', handleMouseMove);
            document.removeEventListener('mouseup', handleMouseUp);
        }

        const titleBar = element.querySelector('h2');
        titleBar.addEventListener('mousedown', handleMouseDown);

        element.style.position = 'absolute';
        titleBar.style.cursor = 'move';
        titleBar.style.userSelect = 'none';
    }

    addButton(buttonText, buttonAction) {
        const button = document.createElement('button');
        button.style.width = '100%';
        button.style.padding = '10px';
        button.style.backgroundColor = '#1c1c1c';
        button.style.color = '#ffffff';
        button.style.border = 'none';
        button.style.borderRadius = '5px';
        button.style.cursor = 'pointer';
        button.style.marginBottom = '10px';
        button.style.fontWeight = 'bold';
        button.style.fontSize = '16px';
        button.addEventListener('click', buttonAction);
        button.classList.add('rainbow-animation');

        const buttonTextSpan = document.createElement('span');
        buttonTextSpan.textContent = buttonText;
        button.appendChild(buttonTextSpan);

        this.UIContext.appendChild(button);

        return button;
    }

    addLabel(labelText) {
        const label = document.createElement('h3');
        label.textContent = labelText;
        label.style.color = '#ffffff';
        label.style.marginBottom = '20px';
        label.style.fontSize = '18px';
        label.style.textAlign = 'center';
        label.classList.add('rainbow-animation');

        this.UIContext.appendChild(label);

        return label;
    }

    addSpacer(height) {
        const spacer = document.createElement('div');
        spacer.style.width = '100%';
        spacer.style.height = `${height}px`;
        spacer.style.marginBottom = `${height}px`;

        this.UIContext.appendChild(spacer);

        return spacer;
    }

    addTextInput(placeholderText, valueChangeAction) {
        const input = document.createElement('input');
        input.type = 'text';
        input.placeholder = placeholderText;
        input.style.width = 'calc(100% - 1px)';
        input.style.padding = '10px';
        input.style.marginBottom = '20px';
        input.style.borderRadius = '5px';
        input.addEventListener('input', valueChangeAction);
        input.style.backgroundColor = '#0e0e0e';
        input.classList.add('rainbow-animation');
        input.focus();

        this.UIContext.appendChild(input);
        input.focus();

        return input;
    }

    addSlider(min, max, step, currentValue, customText, valueChangeAction) {
        let textBubble = undefined;
        let hideTimeout = null;

        const sliderContainer = document.createElement('div');
        sliderContainer.style.width = 'calc(100% - 1px)';
        sliderContainer.style.marginBottom = '20px';
        sliderContainer.style.position = 'relative';

        const slider = document.createElement('input');
        slider.type = 'range';
        slider.min = min;
        slider.max = max;
        slider.value = currentValue;
        slider.step = step;
        slider.style.width = '100%';
        slider.style.borderRadius = '5px';

        const showBubble = () => {
            clearTimeout(hideTimeout);
            textBubble.style.opacity = 1;
            hideTimeout = setTimeout(() => {
                textBubble.style.opacity = 0;
            }, 3000);
        };

        slider.addEventListener('input', () => {
            valueChangeAction(slider.value);
            textBubble.textContent = `${customText}: ${slider.value}`;
            const sliderWidth = slider.offsetWidth;
            const bubbleWidth = textBubble.offsetWidth;
            const sliderValue = slider.value;
            const newPosition = (sliderValue / (max - min)) * sliderWidth;
            const adjustedPosition = Math.min(Math.max(newPosition, bubbleWidth / 2), sliderWidth - bubbleWidth / 2);
            textBubble.style.left = `${adjustedPosition}px`;
            showBubble();
        });

        slider.addEventListener('mousedown', showBubble);
        slider.addEventListener('touchstart', showBubble);

        slider.classList.add('rainbow-animation');

        const bubble = document.createElement('div');
        bubble.style.position = 'absolute';
        bubble.style.top = 'calc(100% + 10px)';
        bubble.style.left = '50%';
        bubble.style.transform = 'translateX(-50%)';
        bubble.style.backgroundColor = '#f0f0f0';
        bubble.style.padding = '5px 10px';
        bubble.style.borderRadius = '5px';
        bubble.style.backgroundColor = '#181818';
        bubble.style.whiteSpace = 'nowrap';
        bubble.style.minWidth = '100px';
        bubble.style.transition = 'opacity 0.5s';
        bubble.style.opacity = 0;
        bubble.textContent = `${customText}: ${currentValue}`;
        textBubble = bubble;

        sliderContainer.appendChild(bubble);
        sliderContainer.appendChild(slider);

        this.contentContainer.appendChild(sliderContainer);

        return slider;
    }

    addLogo() {
        const logo = document.createElement('img');
        logo.src = 'https://github.com/Snoofz/Hailware-Assets/blob/main/snowly-icon.png?raw=true';
        logo.className = 'logo';
        logo.alt = 'Logo';
        logo.style.marginLeft = '35%';
        logo.classList.add('hue-shift-animation');

        this.UIContext.insertBefore(logo, this.UIContext.firstChild);

        return logo;
    }

    createTabMenu(tabs) {
        const tabContainer = document.createElement('div');
        tabContainer.style.display = 'flex';
        tabContainer.style.borderBottom = '1px solid #cc0000';
        tabContainer.style.marginBottom = '20px';
        tabContainer.classList.add('rainbow-animation')

        const contentContainers = tabs.map(() => document.createElement('div'));

        tabs.forEach((tab, index) => {
            const tabButton = document.createElement('button');
            tabButton.textContent = tab.title;
            tabButton.style.flex = '1';
            tabButton.style.padding = '10px';
            tabButton.style.backgroundColor = '#1c1c1c';
            tabButton.style.color = '#ffffff';
            tabButton.style.border = 'none';
            tabButton.style.cursor = 'pointer';
            tabButton.style.fontWeight = 'bold';
            tabButton.style.fontSize = '16px';
            tabButton.classList.add('rainbow-animation');

            tabButton.addEventListener('click', () => {
                contentContainers.forEach((container, idx) => {
                    if (idx !== index) {
                        container.style.display = 'none';
                    }
                });
                contentContainers[index].style.display = 'block';
            });

            this.tabs.push(tabButton);
            tabContainer.appendChild(tabButton);

            const uiTab = new UITab(tab.title, contentContainers[index], document.createElement('div'));
            uiTab.content.innerHTML = tab.content;
            tab.uiTab = uiTab;
        });

        this.UIContext.appendChild(tabContainer);

        contentContainers.forEach(container => {
            container.style.display = 'none';
            this.UIContext.appendChild(container);
        });

        if (contentContainers.length > 0) {
            contentContainers[0].style.display = 'block';
        }

        return {
            UITabs: tabs,
            Containers: contentContainers
        };
    }

    addTabsToTabMenu(existingTabs, newTabs) {
        const contentContainers = newTabs.map(() => document.createElement('div'));

        newTabs.forEach((tab, index) => {
            const tabButton = document.createElement('button');
            tabButton.textContent = tab.title;
            tabButton.style.flex = '1';
            tabButton.style.padding = '10px';
            tabButton.style.backgroundColor = '#1c1c1c';
            tabButton.style.color = '#ffffff';
            tabButton.style.border = 'none';
            tabButton.style.cursor = 'pointer';
            tabButton.style.fontWeight = 'bold';
            tabButton.style.fontSize = '16px';
            tabButton.classList.add('rainbow-animation');

            tabButton.addEventListener('click', () => {
                contentContainers.forEach((container, idx) => {
                    if (idx !== index) {
                        container.style.display = 'none';
                    }
                });
                contentContainers[index].style.display = 'block';
            });

            existingTabs.push(tabButton);
            const uiTab = new UITab(tab.title, contentContainers[index], document.createElement('div'));
            uiTab.content.innerHTML = tab.content;
            tab.uiTab = uiTab;
        });

        existingTabs.forEach(tab => {
            this.UIContext.appendChild(tab);
        });

        contentContainers.forEach(container => {
            container.style.display = 'none';
            this.UIContext.appendChild(container);
        });

        if (contentContainers.length > 0) {
            contentContainers[0].style.display = 'block';
        }
    }

    showTabContent(index, tabs, contentContainer) {
        contentContainer.innerHTML = '';

        const content = document.createElement('div');
        content.innerHTML = tabs[index].content;
        content.style.color = '#ffffff';
        content.style.fontSize = '16px';
        contentContainer.appendChild(content);

        this.activeTabContent = content;
    }
}

class UITab {
    constructor(title, contentContainer, content) {
        this.title = title;
        this.contentContainer = contentContainer;
        this.content = content;
        this.isHidden = true;
    }

    static getContentContainer() {
        return this.contentContainer;
    }

    clear() {
        while (this.contentContainer.firstChild) {
            this.contentContainer.removeChild(this.contentContainer.firstChild);
        }
    }

    addButton(buttonText, buttonAction) {
        const button = document.createElement('button');
        button.style.width = '100%';
        button.style.padding = '10px';
        button.style.backgroundColor = '#1c1c1c';
        button.style.color = '#ffffff';
        button.style.border = 'none';
        button.style.borderRadius = '5px';
        button.style.cursor = 'pointer';
        button.style.marginBottom = '10px';
        button.style.fontWeight = 'bold';
        button.style.fontSize = '16px';
        button.addEventListener('click', buttonAction);
        button.classList.add('rainbow-animation');

        const buttonTextSpan = document.createElement('span');
        buttonTextSpan.textContent = buttonText;
        button.appendChild(buttonTextSpan);

        this.contentContainer.appendChild(button);

        return button;
    }

    addLabel(labelText) {
        const label = document.createElement('h3');
        label.innerHTML = labelText;
        label.style.color = '#ffffff';
        label.style.marginBottom = '20px';
        label.style.fontSize = '18px';
        label.style.textAlign = 'center';
        label.classList.add('rainbow-animation');

        this.contentContainer.appendChild(label);

        return label;
    }

    addTextInput(placeholderText, valueChangeAction) {
        const input = document.createElement('input');
        input.type = 'text';
        input.placeholder = placeholderText;
        input.style.width = 'calc(100% - 1px)';
        input.style.padding = '10px';
        input.style.marginBottom = '20px';
        input.style.borderRadius = '5px';
        input.addEventListener('input', valueChangeAction);
        input.style.backgroundColor = '#0e0e0e';
        input.classList.add('rainbow-animation');
        input.focus();
        this.contentContainer.appendChild(input);
        input.focus();
        return input;
    }

    addSpacer(height) {
        const spacer = document.createElement('div');
        spacer.style.width = '100%';
        spacer.style.height = `${height}px`;
        spacer.style.marginBottom = `${height}px`;

        this.contentContainer.appendChild(spacer);

        return spacer;
    }

    addSlider(min, max, step, currentValue, customText, valueChangeAction) {
        let textBubble = undefined;
        let hideTimeout = null;

        const sliderContainer = document.createElement('div');
        sliderContainer.style.width = 'calc(100% - 1px)';
        sliderContainer.style.marginBottom = '20px';
        sliderContainer.style.position = 'relative';

        const slider = document.createElement('input');
        slider.type = 'range';
        slider.min = min;
        slider.max = max;
        slider.value = currentValue;
        slider.step = step;
        slider.style.width = '100%';
        slider.style.borderRadius = '5px';

        const showBubble = () => {
            clearTimeout(hideTimeout);
            textBubble.style.opacity = 1;
            hideTimeout = setTimeout(() => {
                textBubble.style.opacity = 0;
            }, 3000);
        };

        slider.addEventListener('input', () => {
            valueChangeAction(slider.value);
            textBubble.textContent = `${customText}: ${slider.value}`;
            const sliderWidth = slider.offsetWidth;
            const bubbleWidth = textBubble.offsetWidth;
            const sliderValue = slider.value;
            const newPosition = (sliderValue / (max - min)) * sliderWidth;
            const adjustedPosition = Math.min(Math.max(newPosition, bubbleWidth / 2), sliderWidth - bubbleWidth / 2);
            textBubble.style.left = `${adjustedPosition}px`;
            showBubble();
        });

        slider.addEventListener('mousedown', showBubble);
        slider.addEventListener('touchstart', showBubble);

        slider.classList.add('rainbow-animation');

        const bubble = document.createElement('div');
        bubble.style.position = 'absolute';
        bubble.style.top = 'calc(100% + 10px)';
        bubble.style.left = '50%';
        bubble.style.transform = 'translateX(-50%)';
        bubble.style.backgroundColor = '#f0f0f0';
        bubble.style.padding = '5px 10px';
        bubble.style.borderRadius = '5px';
        bubble.style.backgroundColor = '#181818';
        bubble.style.whiteSpace = 'nowrap';
        bubble.style.minWidth = '100px';
        bubble.style.transition = 'opacity 0.5s';
        bubble.style.opacity = 0;
        bubble.textContent = `${customText}: ${currentValue}`;
        textBubble = bubble;

        sliderContainer.appendChild(bubble);
        sliderContainer.appendChild(slider);

        this.contentContainer.appendChild(sliderContainer);

        return slider;
    }

    showContent() {
        const allTabs = this.contentContainer.parentElement.querySelectorAll('.tab-content');
        allTabs.forEach(tab => {
            tab.style.display = 'none';
        });

        if (this.isHidden) {
            this.contentContainer.style.display = 'block';
            this.isHidden = false;
        }
    }
}

class Log {
    static info(message) {
        console.log(`%c${message.toUpperCase()}`, 'font-size: 18px; color: #7289da;');
    }

    static tool(message) {
        console.log(`%c${message.toUpperCase()}`, 'font-size: 18px; color: #FFB6C1;');
    }

    static welcome(message) {
        console.log(`%c${message.toUpperCase()}`, 'font-size: 25px; color: #ff0000;');
    }

    static error(message) {
        console.error(`%c${message.toUpperCase()}`, 'font-size: 18px; color: #dc3545;');
    }

    static success(message) {
        console.log(`%c${message.toUpperCase()}`, 'font-size: 18px; color: #28a745;');
    }
}

let isRecording = false;
let mediaRecorder;
let audioChunks = [];
let audioContext = new AudioContext();

function waitForUnityInstance(callback) {
    const interval = setInterval(() => {
        const unityInstance = Crazygames.getUnityInstance();
        if (unityInstance && unityInstance.SendMessage) {
            clearInterval(interval);
            setTimeout(() => {
                callback();
            }, 3500);
        }
    }, 1000);
}

function generateRandomChannelId() {
    return "Lobby" + Math.floor(Math.random() * 42992);
}

function generateRandomPartyId(username) {
    return username + "'s Party" + Math.floor(Math.random() * 42992);
}

let uiManager = new UIManager();

let reconnectInterval = 1000;
const maxReconnectInterval = 30000;
let currentChannel = generateRandomChannelId();


function switchChannel(newChannelId) {
    ws.send(JSON.stringify({
        type: 'join',
        channelId: newChannelId
    }));
    currentChannel = newChannelId;
}

function setUsername(newUsername) {
    ws.send(JSON.stringify({
        "type": "setusername",
        "username": newUsername
    }));
}

let mutes = [];
let userVolumes = [];
let selfUsername = "";
let isInParty = false;
let tabs = undefined;
let updatedVolumes = [];

waitForUnityInstance(() => {
   (function() {
    const originalFetch = window.fetch;

    window.fetch = async function(...args) {
        const options = args[1] || {};

        if (args[0].includes("https://server.blayzegames.com/OnlineAccountSystem/leftV2.php")) {
            if (isInParty) return;
            switchChannel(generateRandomChannelId());
            tabs[1].uiTab.clear();
        }

        if (args[0].includes('https://server.blayzegames.com/OnlineAccountSystem/community/is_live_now.php') && options.body instanceof Blob) {
            console.log('Body is a Blob for account roles:');

            const reader = new FileReader();
            reader.onloadend = function() {
                const blobContent = reader.result;

                const params = new URLSearchParams(blobContent);
                const username = params.get('username');

                if (username) {
                    console.log('Parsed Username:', username);
                    selfUsername = username;
                    setUsername(username);
                } else {
                    console.log('Username not found in the request body.');
                }
            };
            reader.readAsText(options.body);
        }

        else if (args[0].includes('https://server.blayzegames.com/OnlineAccountSystem/store-match/register_in_store_match.php') && options.body instanceof Blob) {
            console.log('Body is a Blob for store match:');

            const reader = new FileReader();
            reader.onloadend = function() {
                const blobContent = reader.result;

                const params = new URLSearchParams(blobContent);
                const gameName = params.get('game_name');

                if (gameName) {
                    console.log('Parsed Game Name:', decodeURIComponent(gameName));
                    switchChannel(decodeURIComponent(gameName));
                } else {
                    console.log('Game name not found in the request body.');
                }
            };
            reader.readAsText(options.body);
        }

        else if (options.body) {
            if (options.headers && options.headers['Content-Type'] && options.headers['Content-Type'].includes('application/json')) {
                console.log('Body (JSON):', JSON.parse(options.body));
            } else {
                console.log('Body:', options.body);
            }
        } else {
            console.log('No body in request.');
        }

        // Intercept and modify the response for "get-account-rolesV2.php"
        if (args[0].includes('https://server.blayzegames.com/OnlineAccountSystem/get-account-rolesV2.php')) {
            const response = await originalFetch.apply(this, args);

            const modifiedBody = {
                status: 3,
                role: 6,
                creator: 1
            };

            // Create a new response with the modified body
            const modifiedResponse = new Response(JSON.stringify(modifiedBody), {
                status: response.status,
                statusText: response.statusText,
                headers: response.headers
            });

            return modifiedResponse; // Return the modified response
        }

        // For other requests, just return the original fetch
        return originalFetch.apply(this, args);
    };
})();

    function setUpVC() {
        let mainMenu = uiManager.createMenu("epicUI", "Bullet Force VC Module", "400px", "500px");
        uiManager.makeDraggable(mainMenu);

        tabs = uiManager.createTabMenu([{
                title: 'Devices',
                content: '<p>This is the content of Tab 1</p>'
            },
            {
                title: 'Users',
                content: '<p>This is the content of Tab 2</p>'
            },
            {
                title: 'Invites',
                content: '<p>This is the content of Tab 3</p>'
            },
            {
                title: 'Recent Users',
                content: '<p>This is the content of Tab 3</p>'
            },
        ]);

        tabs = tabs.UITabs;

        let recentUsers = JSON.parse(localStorage.getItem('recentUsers')) || [];

        tabs[3].uiTab.clear();
        recentUsers.forEach(username => {
            tabs[3].uiTab.addLabel(`${username}`);

            tabs[3].uiTab.addButton(`Invite ${username} to party`, () => {
                let party = generateRandomPartyId(selfUsername);
                ws.send(JSON.stringify({
                    type: 'invite',
                    username: username,
                    channelId: party,
                    inviterName: selfUsername
                }));
                switchChannel(party);
                isInParty = true;
            });
        });

        navigator.mediaDevices.enumerateDevices()
            .then(devices => {
                devices.forEach(device => {
                    console.log(`${device.kind}: ${device.label} (ID: ${device.deviceId})`);
                    tabs[0].uiTab.addButton(`${device.label}`, () => {
                        setDefaultDevice(device.deviceId, device.kind);
                    });
                });
            })
            .catch(err => {
                console.error("Error accessing devices: ", err);
            });

        ws = new WebSocket('wss://finger.hri7566.info');

        ws.addEventListener("open", () => {
            console.log("Connected to WebSocket server");
            switchChannel(currentChannel);
        });

        ws.addEventListener("message", async (e) => {
            try {
                let data = JSON.parse(e.data);
                console.log(data);

                if (data.type === "receiveInvite") {
                    uiManager.createNotification("VC", `You've been invited to ${data.inviterName}'s party!`);
                    tabs[2].uiTab.addButton(`Join ${data.inviterName}'s Party`, () => {
                        switchChannel(data.channelId);
                        isInParty = true;
                        tabs[2].uiTab.clear();
                    });
                }

                if (data.type === "inviteConfirmation") {
                    uiManager.createNotification("VC", `You've invited ${data.userInvited} to a party!`);
                }

                if (data.type === "userJoin") {
                    const user = { username: data.username, volume: 100 };
                    userVolumes.push(user);

                    tabs[1].uiTab.addLabel(`${data.username}`);

                    let storedMutes = JSON.parse(localStorage.getItem('mutes')) || [];
                    let isMuted = storedMutes.includes(data.username);
                    let muteButtonLabel = isMuted ? `Unmute ${data.username}` : `Mute ${data.username}`;

                    let muteButton = tabs[1].uiTab.addButton(muteButtonLabel, () => {
                        if (isMuted) {
                            storedMutes = storedMutes.filter(username => username !== data.username);
                            localStorage.setItem('mutes', JSON.stringify(storedMutes));
                            isMuted = false;
                            muteButton.textContent = `Mute ${data.username}`;
                            console.log(`${data.username} has been unmuted`);
                            mutes = mutes.filter(username => username !== data.username);
                        } else {
                            storedMutes.push(data.username);
                            localStorage.setItem('mutes', JSON.stringify(storedMutes));
                            isMuted = true;
                            muteButton.textContent = `Unmute ${data.username}`;
                            console.log(`${data.username} has been muted`);
                            mutes.push(data.username);
                        }
                    });

                    let storedVolumes = JSON.parse(localStorage.getItem('userVolumes')) || [];
                    let userVolume = (storedVolumes.find(u => u.username === data.username) || { volume: 100 }).volume;

                    tabs[1].uiTab.addSlider(0, 1, 0.1, userVolume, `Volume for ${data.username}`, (newValue) => {
                        user.volume = newValue;
                        updatedVolumes = storedVolumes.filter(u => u.username !== data.username);
                        updatedVolumes.push({ username: data.username, volume: newValue });
                        localStorage.setItem('userVolumes', JSON.stringify(updatedVolumes));
                        console.log(`Updated volume for ${data.username}: ${newValue}`);
                    });

                    let recentUsers = JSON.parse(localStorage.getItem('recentUsers')) || [];

                    recentUsers = recentUsers.filter(u => u !== data.username);

                    recentUsers.unshift(data.username);

                    if (recentUsers.length > 10) recentUsers = recentUsers.slice(0, 10);

                    localStorage.setItem('recentUsers', JSON.stringify(recentUsers));

                    tabs[3].uiTab.clear();
                    recentUsers.forEach(username => {
                        tabs[3].uiTab.addLabel(`${username}`);

                        tabs[3].uiTab.addButton(`Invite ${username} to party`, () => {
                            let party = generateRandomPartyId(selfUsername);
                            ws.send(JSON.stringify({
                                type: 'invite',
                                username: username,
                                channelId: party,
                                inviterName: selfUsername
                            }));
                            switchChannel(party);
                            isInParty = true;
                        });
                    });
                }

                if (data.type === 'voice') {
                    if (mutes.includes(data.username)) return;

                    const userVolume = updatedVolumes.find(user => user.username === data.username)?.volume || 1.0;

                    let base64Audio = data.voiceData;
                    if (base64Audio && base64Audio.startsWith("data:audio")) {
                        playAudioFromBase64(base64Audio, userVolume);
                    }
                }

            } catch (error) {
                console.error("Error in message event:", error);
            }
        });

        let mediaRecorder;
        let isRecording = false;
        let sendInterval;

        let captureInterval;
        const captureIntervalMs = 1000;

        async function startVoiceCapture() {
            if (!isRecording) {
                const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
                mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/webm' });

                mediaRecorder.ondataavailable = (event) => {
                    if (event.data.size > 0) {
                        audioChunks.push(event.data);
                    }
                };

                mediaRecorder.onstop = () => {
                    const audioBlob = new Blob(audioChunks, { type: 'audio/webm' });
                    let reader = new FileReader();
                    reader.onloadend = () => {
                        let base64AudioMessage = reader.result;
                        ws.send(JSON.stringify({
                            type: 'voice',
                            channelId: currentChannel,
                            voiceData: base64AudioMessage
                        }));
                        audioChunks = [];
                    };
                    reader.readAsDataURL(audioBlob);
                };

                mediaRecorder.start();

                captureInterval = setInterval(() => {
                    if (isRecording) {
                        mediaRecorder.stop();
                        mediaRecorder.start();
                    }
                }, captureIntervalMs);

                isRecording = true;
                console.log("Voice recording started");
                uiManager.createNotification("VC", "Voice chat was enabled");
            }
        }

        function stopVoiceCapture() {
            if (isRecording) {
                clearInterval(captureInterval);
                captureInterval = null;
                mediaRecorder.stop();
                isRecording = false;
                console.log("Voice recording stopped");
                uiManager.createNotification("VC", "Voice chat was disabled");
            }
        }

        let audioContext = new AudioContext();

        function playAudioFromBase64(base64Audio, volume) {
            let audio = new Audio(base64Audio);
            audio.volume = volume;
            audio.play().catch(error => console.error('Playback error:', error));
        }


        function toggleVoiceCapture() {
            if (!isRecording) {
                startVoiceCapture();
            } else {
                stopVoiceCapture();
            }
        }

        function toggleMainMenu() {
            if (mainMenu.style.display === 'none') {
                mainMenu.style.display = 'block';
            } else {
                mainMenu.style.display = 'none';
            }
        }

        function resetMenuPosition() {
            mainMenu.style.top = `calc(50% - (${mainMenu.style.height} / 2))`;
            mainMenu.style.left = `calc(50% - (${mainMenu.style.width} / 2))`;
        }

        document.addEventListener('keydown', function (event) {
            if (event.key === "/") {
                toggleVoiceCapture();
            }
            if (event.key === 'Insert') {
                toggleMainMenu();
            } else if (event.key === 'Delete') {
                resetMenuPosition();
            }
        });

        function setDefaultDevice(deviceId, kind) {
            const constraints = {};

            if (kind === 'audioinput') {
                constraints.audio = { deviceId: { exact: deviceId } };
            } else if (kind === 'videoinput') {
                constraints.video = { deviceId: { exact: deviceId } };
            }

            navigator.mediaDevices.getUserMedia(constraints)
                .then(stream => {
                    console.log(`Default ${kind} set to device with ID: ${deviceId}`);
                })
                .catch(err => {
                    console.error(`Error setting default ${kind}: `, err);
                });
        }
    }
    setUpVC();
});