Blubbled's UI Mod v1.3

Adds some QoL features, such as always showing kill count, green health bar, etc
换行
// ==UserScript==
// @name         Blubbled's UI Mod v1.3
// @namespace    http://tampermonkey.net/
// @version      1.3
// @description  Adds some QoL features, such as always showing kill count, green health bar, etc
// @author       Blubbled
// @match        https://suroi.io/*
// @grant        none
// ==/UserScript==
(function() {
    'use strict';
 
    function periodicallyShowKillCounter() {
        showKillCounter();
        setTimeout(periodicallyShowKillCounter, 200);
    }
 
    function showKillCounter() {
        var killCounter = document.getElementById('kill-counter');
        if (killCounter) {
            killCounter.style.display = 'flex';
            killCounter.style.alignItems = 'center';
            var skullIcon = killCounter.querySelector('img');
            if (skullIcon) {
                skullIcon.style.marginRight = '5px';
            }
            var counterText = killCounter.querySelector('.counter-text');
            if (counterText) {
                counterText.style.minWidth = '30px';
            }
        }
    }
 
    function addAdditionalUI() {
        var additionalText = document.createElement('h1');
        additionalText.textContent = "Technical UI pack by Blubbled ";
        var joinLink = document.createElement('a');
        joinLink.textContent = "[JOIN ZESK]";
        joinLink.href = "https://discord.gg/msNbP9Nt2r";
        joinLink.style.color = 'blue';
        joinLink.style.textDecoration = 'underline';
        joinLink.style.marginLeft = '5px';
        additionalText.appendChild(joinLink);
        additionalText.style.position = 'fixed';
        additionalText.style.top = '10px';
        additionalText.style.right = '10px';
        additionalText.style.color = '#ffffff';
        additionalText.style.zIndex = '9999';
        additionalText.style.display = 'none';
        document.body.appendChild(additionalText);
 
        var masterVolumeSlider = document.getElementById('slider-master-volume');
        var sfxVolumeSlider = document.getElementById('slider-sfx-volume');
        var musicVolumeSlider = document.getElementById('slider-music-volume');
        var uiScaleSlider = document.getElementById('slider-ui-scale');
        var minimapTransparencySlider = document.getElementById('slider-minimap-transparency');
        var bigMapTransparencySlider = document.getElementById('slider-big-map-transparency');
 
        if (masterVolumeSlider && sfxVolumeSlider && musicVolumeSlider && uiScaleSlider && minimapTransparencySlider && bigMapTransparencySlider) {
            masterVolumeSlider.step = 0.01;
            sfxVolumeSlider.step = 0.01;
            musicVolumeSlider.step = 0.01;
            uiScaleSlider.step = 0.01;
            minimapTransparencySlider.step = 0.01;
            bigMapTransparencySlider.step = 0.01;
        }
    }
 
    function replaceWithHeader() {
        var customHeader = document.createElement('h1');
        customHeader.textContent = "Technical UI pack by Blubbled ";
        var joinLink = document.createElement('a');
        joinLink.textContent = "[JOIN ZESK]";
        joinLink.href = "https://discord.gg/msNbP9Nt2r";
        joinLink.style.color = 'blue';
        joinLink.style.textDecoration = 'underline';
        joinLink.style.marginLeft = '5px'; // Adjust spacing as needed
        customHeader.appendChild(joinLink);
        customHeader.style.position = 'fixed';
        customHeader.style.top = '10px';
        customHeader.style.right = '10px';
        customHeader.style.color = '#ffffff';
        customHeader.style.zIndex = '9999';
        var elementToReplace = document.querySelector('a[href="./changelog/"][target="_blank"][rel="noopener noreferrer"]');
        if (elementToReplace) {
            elementToReplace.parentNode.replaceChild(customHeader, elementToReplace);
        }
    }
 
    function updateHealthBarColor() {
        var healthBar = document.getElementById('health-bar');
        var healthPercentage = document.getElementById('health-bar-percentage');
        var percentage = parseInt(healthPercentage.textContent);
 
        var colorPicker = document.getElementById('health-bar-color');
        var selectedColor = colorPicker.value;
 
        var degradationColorPicker = document.getElementById('health-bar-degradation-color');
        var degradationColor = degradationColorPicker.value;
 
        var redValue = Math.round((100 - percentage) * 2.55);
        var blendFactor = percentage / 100;
        var finalRed = Math.round((1 - blendFactor) * parseInt(degradationColor.substr(1, 2), 16) + blendFactor * parseInt(selectedColor.substr(1, 2), 16));
        var finalGreen = Math.round((1 - blendFactor) * parseInt(degradationColor.substr(3, 2), 16) + blendFactor * parseInt(selectedColor.substr(3, 2), 16));
        var finalBlue = Math.round((1 - blendFactor) * parseInt(degradationColor.substr(5, 2), 16) + blendFactor * parseInt(selectedColor.substr(5, 2), 16));
        var updatedColor = 'rgb(' + finalRed + ',' + finalGreen + ',' + finalBlue + ')';
        healthBar.style.backgroundColor = updatedColor;
    }
    function saveSettings() {
        var healthBarColor = document.getElementById('health-bar-color').value;
        var healthBarDegradationColor = document.getElementById('health-bar-degradation-color').value;
        localStorage.setItem('healthBarColor', healthBarColor);
        localStorage.setItem('healthBarDegradationColor', healthBarDegradationColor);
    }
 
    // Function to load settings from localStorage
    function loadSettings() {
        var healthBarColor = localStorage.getItem('healthBarColor');
        var healthBarDegradationColor = localStorage.getItem('healthBarDegradationColor');
        if (healthBarColor) {
            document.getElementById('health-bar-color').value = healthBarColor;
        }
        if (healthBarDegradationColor) {
            document.getElementById('health-bar-degradation-color').value = healthBarDegradationColor;
        }
    }
 
 
    var settingsTabsContainer = document.getElementById('settings-tabs-container');
    var modSettingsTabButton = document.createElement('button');
    modSettingsTabButton.className = 'tab';
    modSettingsTabButton.id = 'tab-mod-settings';
    modSettingsTabButton.innerHTML = '<i class="fa-solid fa-gear"></i>Mod Settings';
    settingsTabsContainer.querySelector('#settings-tab-bar').appendChild(modSettingsTabButton);
 
    var modSettingsTabContent = document.createElement('div');
    modSettingsTabContent.className = 'tab-content';
    modSettingsTabContent.id = 'tab-mod-settings-content';
    modSettingsTabContent.style.display = 'none';
 
    var modSettingsContent = document.createElement('div');
 
    var healthBarColorSetting = document.createElement('div');
    healthBarColorSetting.className = 'modal-item';
    healthBarColorSetting.style.marginBottom = '25px';
    healthBarColorSetting.innerHTML = `
<label>
    <span class="setting-title">Health bar color</span>
    <input type="color" id="health-bar-color" value="#FFFFFF"> <!-- Default color: white -->
</label>
`;
    modSettingsContent.appendChild(healthBarColorSetting);
 
    var healthBarDegradationColorSetting = document.createElement('div');
    healthBarDegradationColorSetting.className = 'modal-item';
    healthBarDegradationColorSetting.style.marginBottom = '10px';
    healthBarDegradationColorSetting.innerHTML = `
<label>
    <span class="setting-title">Health bar degradation color</span>
    <input type="color" id="health-bar-degradation-color" value="#FF0000"> <!-- Default color: red -->
</label>`;
    modSettingsContent.appendChild(healthBarDegradationColorSetting);
 
    modSettingsTabContent.appendChild(modSettingsContent);
    settingsTabsContainer.querySelector('#settings-tabs').appendChild(modSettingsTabContent);
 
 
 
    var healthBarSettings = document.querySelectorAll('#health-bar-color, #health-bar-degradation-color');
    healthBarSettings.forEach(function(setting) {
        setting.addEventListener('input', function() {
            updateHealthBarColor();
            saveSettings();
        });
    });
 
    function toggleUncappedFPS(enabled) {
        if (enabled) {
            window.requestAnimationFrame = function(callback) {
                return setTimeout(callback, 1);
            };
        } else {
            window.requestAnimationFrame = function(callback) {
                return setTimeout(callback, 1000 / 60);
            };
        }
    }
 
 
    var uncappedFPSEnabled = localStorage.getItem('uncappedFPSEnabled') === 'true';
    toggleUncappedFPS(uncappedFPSEnabled);
 
 
    function updateUncappedFPSSetting(enabled) {
        localStorage.setItem('uncappedFPSEnabled', enabled);
        toggleUncappedFPS(enabled);
    }
 
 
    function createUncappedFPSSetting() {
        var uncappedFPSSetting = document.createElement('div');
        uncappedFPSSetting.className = 'modal-item checkbox-setting';
        uncappedFPSSetting.style.marginBottom = '10px';
        uncappedFPSSetting.innerHTML = `
            <label>
                <span class="setting-title" style="margin-right: 10px;">Uncapped FPS</span>
                <input type="checkbox" id="toggle-uncapped-fps" ${uncappedFPSEnabled ? 'checked' : ''} style="margin-left: auto; margin-right: -40px; ">
            </label>
        `;
        uncappedFPSSetting.querySelector('#toggle-uncapped-fps').addEventListener('change', function() {
            updateUncappedFPSSetting(this.checked);
        });
        return uncappedFPSSetting;
    }
 
 
    modSettingsContent.appendChild(createUncappedFPSSetting());
 
    var graphicsSettingsTabContent = document.getElementById('tab-graphics-content');
    graphicsSettingsTabContent.appendChild(createUncappedFPSSetting());
 
 
    showKillCounter();
    addAdditionalUI();
    updateHealthBarColor();
    loadSettings();
    createUncappedFPSSetting()
    var healthPercentage = document.getElementById('health-bar-percentage');
    healthPercentage.addEventListener('DOMSubtreeModified', updateHealthBarColor);
 
    periodicallyShowKillCounter();
    document.addEventListener('DOMContentLoaded', addAdditionalUI);
    window.addEventListener('popstate', showKillCounter);
    replaceWithHeader();
})();