☰

Blubbled's UI Mod v1

Adds some QoL features, such as always showing kill count, green health bar, etc

  1. // ==UserScript==
  2. // @name         Blubbled's UI Mod v1
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1
  5. // @description  Adds some QoL features, such as always showing kill count, green health bar, etc
  6. // @author       Blubbled
  7. // @match        https://suroi.io/*
  8. // @grant        none
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     'use strict';
  13.     function periodicallyShowKillCounter() {
  14.  
  15.         showKillCounter();
  16.  
  17.  
  18.         setTimeout(periodicallyShowKillCounter, 200);
  19.     }
  20.  
  21.  
  22.     function showKillCounter() {
  23.  
  24.         var killCounter = document.getElementById('kill-counter');
  25.  
  26.  
  27.         if (killCounter) {
  28.  
  29.             killCounter.style.display = 'flex';
  30.             killCounter.style.alignItems = 'center';
  31.  
  32.  
  33.             var skullIcon = killCounter.querySelector('img');
  34.             if (skullIcon) {
  35.  
  36.                 skullIcon.style.marginRight = '5px';
  37.             }
  38.  
  39.  
  40.             var counterText = killCounter.querySelector('.counter-text');
  41.             if (counterText) {
  42.  
  43.                 counterText.style.minWidth = '30px';
  44.             }
  45.         }
  46.     }
  47.  
  48.  
  49.     function addAdditionalUI() {
  50.  
  51.         var additionalText = document.createElement('h1');
  52.         additionalText.textContent = "Technical UI pack by Blubbled ";
  53.  
  54.  
  55.         var joinLink = document.createElement('a');
  56.         joinLink.textContent = "[JOIN ZESK]";
  57.         joinLink.href = "https://discord.gg/msNbP9Nt2r";
  58.         joinLink.style.color = 'blue';
  59.         joinLink.style.textDecoration = 'underline';
  60.         joinLink.style.marginLeft = '5px';
  61.  
  62.  
  63.         additionalText.appendChild(joinLink);
  64.  
  65.  
  66.         additionalText.style.position = 'fixed';
  67.         additionalText.style.top = '10px';
  68.         additionalText.style.right = '10px';
  69.         additionalText.style.color = '#ffffff';
  70.         additionalText.style.zIndex = '9999';
  71.         additionalText.style.display = 'none';
  72.  
  73.  
  74.         document.body.appendChild(additionalText);
  75.  
  76.         var masterVolumeSlider = document.getElementById('slider-master-volume');
  77.         var sfxVolumeSlider = document.getElementById('slider-sfx-volume');
  78.         var musicVolumeSlider = document.getElementById('slider-music-volume');
  79.         var uiScaleSlider = document.getElementById('slider-ui-scale');
  80.         var minimapTransparencySlider = document.getElementById('slider-minimap-transparency');
  81.         var bigMapTransparencySlider = document.getElementById('slider-big-map-transparency');
  82.  
  83.  
  84.         if (masterVolumeSlider && sfxVolumeSlider && musicVolumeSlider && uiScaleSlider && minimapTransparencySlider && bigMapTransparencySlider) {
  85.             masterVolumeSlider.step = 0.01;
  86.             sfxVolumeSlider.step = 0.01;
  87.             musicVolumeSlider.step = 0.01;
  88.             uiScaleSlider.step = 0.01;
  89.             minimapTransparencySlider.step = 0.01;
  90.             bigMapTransparencySlider.step = 0.01;
  91.         }
  92.  
  93.  
  94.     }
  95.  
  96.  
  97.     function replaceWithHeader() {
  98.  
  99.         var customHeader = document.createElement('h1');
  100.         customHeader.textContent = "Technical UI pack by Blubbled ";
  101.  
  102.  
  103.         var joinLink = document.createElement('a');
  104.         joinLink.textContent = "[JOIN ZESK]";
  105.         joinLink.href = "https://discord.gg/msNbP9Nt2r";
  106.         joinLink.style.color = 'blue';
  107.         joinLink.style.textDecoration = 'underline';
  108.         joinLink.style.marginLeft = '5px'; // Adjust spacing as needed
  109.  
  110.  
  111.         customHeader.appendChild(joinLink);
  112.  
  113.  
  114.         customHeader.style.position = 'fixed';
  115.         customHeader.style.top = '10px';
  116.         customHeader.style.right = '10px';
  117.         customHeader.style.color = '#ffffff';
  118.         customHeader.style.zIndex = '9999';
  119.  
  120.  
  121.         var elementToReplace = document.querySelector('a[href="./changelog/"][target="_blank"][rel="noopener noreferrer"]');
  122.  
  123.         if (elementToReplace) {
  124.  
  125.             elementToReplace.parentNode.replaceChild(customHeader, elementToReplace);
  126.         }
  127.     }
  128.  
  129.  
  130.     function updateHealthBarColor() {
  131.  
  132.         var healthBar = document.getElementById('health-bar');
  133.  
  134.         var healthPercentage = document.getElementById('health-bar-percentage');
  135.  
  136.         var percentage = parseInt(healthPercentage.textContent);
  137.  
  138.         var redValue = Math.round(255 - (percentage * 2.55));
  139.         var greenValue = Math.round(percentage * 2.55);
  140.  
  141.  
  142.         healthBar.style.backgroundColor = 'rgb(' + redValue + ',' + greenValue + ',0)';
  143.     }
  144.  
  145.  
  146.     showKillCounter();
  147.     addAdditionalUI();
  148.     updateHealthBarColor();
  149.  
  150.  
  151.     var healthPercentage = document.getElementById('health-bar-percentage');
  152.     healthPercentage.addEventListener('DOMSubtreeModified', updateHealthBarColor);
  153.  
  154.  
  155.     periodicallyShowKillCounter();
  156.  
  157.     document.addEventListener('DOMContentLoaded', addAdditionalUI);
  158.  
  159.  
  160.     window.addEventListener('popstate', showKillCounter);
  161.  
  162.     replaceWithHeader();
  163. })();