☰

!! ~ Player Joined Notifications &&& Server's Player List ~ !!

Find your friends easily in sploop.io! The first script of its type 🤯😁😎✌️. Press Semicolum " ; " to toggle the aesthetic player list and select the theme of your choice!

  1. // ==UserScript==
  2. // @name         !! ~ Player Joined Notifications &&& Server's Player List ~ !!
  3. // @name:ru      !! ~ Уведомления о присоединении игроков []И[] Список игроков на сервере ~ !!
  4. // @name:vi      !! ~ Thông báo Người chơi tham gia []VÀ[] Danh sách Người chơi trên Máy chủ ~ !!
  5. // @name:zh      !! ~ 玩家加入通知 []和[] 服务器的玩家列表 ~ !!
  6. // @namespace    http://tampermonkey.net/
  7. // @version      2024-04-23
  8. // @description  Find your friends easily in sploop.io! The first script of its type 🤯😁😎✌️. Press Semicolum " ; " to toggle the aesthetic player list and select the theme of your choice!
  9. // @description:ru  Легко находите своих друзей в sploop.io! Первый скрипт такого типа 🤯😁😎✌️. Нажмите точку с запятой " ; ", чтобы переключить эстетический список игроков и выбрать тему по вашему выбору!
  10. // @description:vi  Tìm bạn dễ dàng trong sploop.io! Đây là kịch bản đầu tiên của loại này 🤯😁😎✌️. Nhấn chấm phẩy " ; " để chuyển đổi danh sách người chơi thẩm mỹ và chọn chủ đề theo ý muốn!
  11. // @description:zh  在 sploop.io 中轻松找到你的朋友！这是这种类型的第一个脚本 🤯😁😎✌️。按分号 " ; " 切换美观的玩家列表并选择您喜欢的主题！
  12. // @author       fizzixww
  13. // @match        https://sploop.io/
  14. // @icon         https://i.postimg.cc/Z5WBHzhP/8-d-Sov4iq-FMua-At-VE.png
  15. // @grant        none
  16. // @license      All Rights Reserved
  17. // ==/UserScript==
  18.  
  19. /*
  20. I wish I could live in a snowy boreal forest and watch the beautiful northern lights every night....
  21.     ` : | | | |:  ||  :     `  :  |  |+|: | : : :|   .        `              .
  22.         ` : | :|  ||  |:  :    `  |  | :| : | : |:   |  .                    :
  23.            .' ':  ||  |:  |  '       ` || | : | |: : |   .  `           .   :.
  24.                   `'  ||  |  ' |   *    ` : | | :| |*|  :   :               :|
  25.           *    *       `  |  : :  |  .      ` ' :| | :| . : :         *   :.||
  26.                .`            | |  |  : .:|       ` | || | : |: |          | ||
  27.         '          .         + `  |  :  .: .         '| | : :| :    .   |:| ||
  28.            .                 .    ` *|  || :       `    | | :| | :      |:| |
  29.    .                .          .        || |.: *          | || : :     :|||
  30.           .            .   . *    .   .  ` |||.  +        + '| |||  .  ||`
  31.        .             *              .     +:`|!             . ||||  :.||`
  32.    +                      .                ..!|*          . | :`||+ |||`
  33.        .                         +      : |||`        .| :| | | |.| ||`     .
  34.          *     +   '               +  :|| |`     :.+. || || | |:`|| `
  35.                               .      .||` .    ..|| | |: '` `| | |`  +
  36.     .       +++                      ||        !|!: `       :| |
  37.                 +         .      .    | .      `|||.:      .||    .      .    `
  38.             '                           `|.   .  `:|||   + ||'     `
  39.     __    +      *                         `'       `'|.    `:
  40.   "'  `---"""----....____,..^---`^``----.,.___          `.    `.  .    ____,.,-
  41.       ___,--'""`---"'   ^  ^ ^        ^       """'---,..___ __,..---""'
  42.   --"'                           ^                         ``--..,__
  43. https://i.postimg.cc/kgLVhYn0/8-jo1z9twm6-Kyo-SJf.png
  44. https://i.postimg.cc/Z5WBHzhP/8-d-Sov4iq-FMua-At-VE.png
  45. */
  46.  
  47. /*disclaimers:
  48. users with the exact same name will only be written down once. this is why the player list size is smaller than the server size.
  49. When a player leaves, their name will remain on the player list.
  50. If you have any script ideas, dm me on discord: fizzixww
  51. */
  52.  
  53. (function() {
  54.     'use strict';
  55.  
  56.     const fizzixwwsCssVariables = `
  57.         :root {
  58.             --bg-gradient-start: #7CCD7C;
  59.             --bg-gradient-end: #3F7A3F;
  60.             --border-color: #4CAF50;
  61.             --scrollbar-color: #4CAF50;
  62.             --text-color: #ffffff;
  63.             --shadow-color: rgba(0, 0, 0, 0.7);
  64.         }
  65.     `;
  66.  
  67.     var fizzixwwsCssVariablesStyle = document.createElement('style');
  68.     fizzixwwsCssVariablesStyle.textContent = fizzixwwsCssVariables;
  69.     document.head.appendChild(fizzixwwsCssVariablesStyle);
  70.  
  71.     var xXplayerList = document.createElement('div');
  72.     xXplayerList.className = 'player-list';
  73.     document.body.appendChild(xXplayerList);
  74.  
  75.     var xXplayerNames = new Set();
  76.  
  77.     function xXaddPlayerName(name) {
  78.         if (!xXplayerNames.has(name)) {
  79.             var xXplayerNameElement = document.createElement('div');
  80.             xXplayerNameElement.textContent = name;
  81.             xXplayerNameElement.className = 'player-name';
  82.             xXplayerNameElement.style.opacity = '0';
  83.             xXplayerNameElement.style.animationDelay = Math.random() + 's';
  84.             xXplayerList.appendChild(xXplayerNameElement);
  85.             xXplayerNames.add(name);
  86.  
  87.             setTimeout(() => {
  88.                 xXplayerNameElement.style.opacity = '1';
  89.             }, 100);
  90.  
  91.             xXdisplayJoinNotification(name);
  92.         }
  93.     }
  94.  
  95.     function xXdisplayJoinNotification(name) {
  96.         var xXnotification = document.createElement('div');
  97.         xXnotification.textContent = `${name} has joined the server!`;
  98.         xXnotification.className = 'join-notification';
  99.         document.body.appendChild(xXnotification);
  100.  
  101.         var existingNotifications = document.querySelectorAll('.join-notification');
  102.         var topPosition = 20 + existingNotifications.length * 50;
  103.         xXnotification.style.top = `${topPosition}px`;
  104.  
  105.         setTimeout(() => {
  106.             xXnotification.style.opacity = '1';
  107.         }, 100);
  108.  
  109.         setTimeout(() => {
  110.  
  111.             xXnotification.style.opacity = '0';
  112.  
  113.             existingNotifications.forEach((existingNotification, index) => {
  114.                 var newPosition = 20 + index * 50;
  115.                 existingNotification.style.transition = 'top 0.3s, opacity 0.5s';
  116.                 existingNotification.style.top = `${newPosition}px`;
  117.             });
  118.  
  119.             setTimeout(() => {
  120.                 xXnotification.remove();
  121.             }, 500);
  122.         }, 3000);
  123.     }
  124.  
  125.     WebSocket.prototype.fizzixwwsRealSend = WebSocket.prototype.send;
  126.     WebSocket.prototype.send = function(data) {
  127.         this.fizzixwwsRealSend(data);
  128.     };
  129.  
  130.     function fizzixwwsHandleWebSocketMessages(event) {
  131.         try {
  132.             var fizzixwwsMessageData = JSON.parse(event.data);
  133.             if (fizzixwwsMessageData[0] === 33) {
  134.  
  135.                 xXplayerList.innerHTML = '';
  136.                 xXplayerNames.clear();
  137.  
  138.                 var players = fizzixwwsMessageData[3];
  139.                 if (players.length === 0) {
  140.                     xXaddPlayerName("Server Joined");
  141.                 } else {
  142.                     players.forEach(function(player) {
  143.                         var name = player[1];
  144.                         xXaddPlayerName(name);
  145.                     });
  146.                 }
  147.  
  148.                 fizzixwwsApplyScrollbarStyling();
  149.             } else if (fizzixwwsMessageData[0] === 32 || fizzixwwsMessageData[0] === 35) {
  150.                 var playerName = fizzixwwsMessageData[2];
  151.                 xXaddPlayerName(playerName);
  152.             }
  153.         } catch (error) {
  154.             console.error('Error parsing WebSocket message:', error);
  155.         }
  156.     }
  157.  
  158.     var fizzixwwsWsProto = WebSocket.prototype;
  159.     var fizzixwwsOrigSend = fizzixwwsWsProto.send;
  160.     var fizzixwwsOrigAddEventListener = fizzixwwsWsProto.addEventListener;
  161.  
  162.     fizzixwwsWsProto.send = function(data) {
  163.         fizzixwwsOrigSend.apply(this, arguments);
  164.         fizzixwwsOrigAddEventListener.call(this, 'message', fizzixwwsHandleWebSocketMessages);
  165.     };
  166.  
  167.     setInterval(() => {
  168.         xXplayerList.scrollTop += 1;
  169.     }, 50);
  170.  
  171.     function fizzixwwsSetPinkTheme() {
  172.         document.documentElement.style.setProperty('--bg-gradient-start', '#FFC6D9');
  173.         document.documentElement.style.setProperty('--bg-gradient-end', '#FF9494');
  174.         document.documentElement.style.setProperty('--border-color', '#FF69B4');
  175.         document.documentElement.style.setProperty('--scrollbar-color', '#FF69B4');
  176.         document.documentElement.style.setProperty('--text-color', '#ffe6fb');
  177.         document.documentElement.style.setProperty('--shadow-color', 'rgba(0, 0, 0, 0.7)');
  178.     }
  179.  
  180.     function fizzixwwsSetLightOrangeTheme() {
  181.         document.documentElement.style.setProperty('--bg-gradient-start', '#FFD699');
  182.         document.documentElement.style.setProperty('--bg-gradient-end', '#FFB74D');
  183.         document.documentElement.style.setProperty('--border-color', '#FF9800');
  184.         document.documentElement.style.setProperty('--scrollbar-color', '#FF9800');
  185.         document.documentElement.style.setProperty('--text-color', '#fff1c7');
  186.         document.documentElement.style.setProperty('--shadow-color', 'rgba(0, 0, 0, 0.7)');
  187.     }
  188.  
  189.     function fizzixwwsSetSkyeBlueTheme() {
  190.         document.documentElement.style.setProperty('--bg-gradient-start', '#A6DAFF');
  191.         document.documentElement.style.setProperty('--bg-gradient-end', '#77BDFE');
  192.         document.documentElement.style.setProperty('--border-color', '#4FC3F7');
  193.         document.documentElement.style.setProperty('--scrollbar-color', '#4FC3F7');
  194.         document.documentElement.style.setProperty('--text-color', '#cffdff');
  195.         document.documentElement.style.setProperty('--shadow-color', 'rgba(0, 0, 0, 0.7)');
  196.     }
  197.  
  198.     function fizzixwwsSetGreenTheme() {
  199.         document.documentElement.style.setProperty('--bg-gradient-start', '#7CCD7C');
  200.         document.documentElement.style.setProperty('--bg-gradient-end', '#3F7A3F');
  201.         document.documentElement.style.setProperty('--border-color', '#4CAF50');
  202.         document.documentElement.style.setProperty('--scrollbar-color', '#4CAF50');
  203.         document.documentElement.style.setProperty('--text-color', '#ddffdb');
  204.         document.documentElement.style.setProperty('--shadow-color', 'rgba(0, 0, 0, 0.7)');
  205.     }
  206.  
  207.     var fizzixwwsThemeButtonsContainer = document.createElement('div');
  208.     fizzixwwsThemeButtonsContainer.className = 'theme-buttons-container';
  209.     var pinkButton = fizzixwwsCreateThemeButton('pink-button', fizzixwwsSetPinkTheme);
  210.     var lightOrangeButton = fizzixwwsCreateThemeButton('light-orange-button', fizzixwwsSetLightOrangeTheme);
  211.     var skyeBlueButton = fizzixwwsCreateThemeButton('skye-blue-button', fizzixwwsSetSkyeBlueTheme);
  212.     var greenButton = fizzixwwsCreateThemeButton('green-button', fizzixwwsSetGreenTheme);
  213.  
  214.     fizzixwwsThemeButtonsContainer.appendChild(pinkButton);
  215.     fizzixwwsThemeButtonsContainer.appendChild(lightOrangeButton);
  216.     fizzixwwsThemeButtonsContainer.appendChild(skyeBlueButton);
  217.     fizzixwwsThemeButtonsContainer.appendChild(greenButton);
  218.     document.body.appendChild(fizzixwwsThemeButtonsContainer);
  219.  
  220.     function fizzixwwsCreateThemeButton(className, onClick) {
  221.         var button = document.createElement('div');
  222.         button.className = 'theme-button ' + className;
  223.         button.onclick = onClick;
  224.         return button;
  225.     }
  226.     var fizzixwwsTextElement = document.createElement('span');
  227.     var fizzixwwsData = atob('YnkgZml6eml4d3c=');
  228.     fizzixwwsTextElement.textContent = fizzixwwsData;
  229.     fizzixwwsTextElement.style.position = 'absolute';
  230.     fizzixwwsTextElement.style.top = '0';
  231.     fizzixwwsTextElement.style.left = '80px';
  232.     fizzixwwsTextElement.style.zIndex = '9999';
  233.     fizzixwwsTextElement.style.color = 'rgba(0, 0, 0, 0.07)';
  234.     document.body.appendChild(fizzixwwsTextElement);
  235.     var fizzixwwsDisplayToggled = false;
  236.     document.addEventListener('keydown', function(event) {
  237.         if (event.key === ';') {
  238.             if (fizzixwwsDisplayToggled) {
  239.                 xXplayerList.style.display = 'block';
  240.                 fizzixwwsThemeButtonsContainer.style.display = 'flex';
  241.             } else {
  242.                 xXplayerList.style.display = 'none';
  243.                 fizzixwwsThemeButtonsContainer.style.display = 'none';
  244.             }
  245.             fizzixwwsDisplayToggled = !fizzixwwsDisplayToggled;
  246.         }
  247.     });
  248.  
  249.     // Function to apply scrollbar styling only when needed
  250.     function fizzixwwsApplyScrollbarStyling() {
  251.         if (xXplayerList.scrollHeight > xXplayerList.clientHeight) {
  252.             var style = document.createElement('style');
  253.             style.textContent = `
  254.                 .player-list::-webkit-scrollbar {
  255.                     width: 10px;
  256.                 }
  257.  
  258.                 .player-list::-webkit-scrollbar-thumb {
  259.                     background-color: var(--scrollbar-color);
  260.                     border-radius: 5px;
  261.                 }
  262.             `;
  263.             document.head.appendChild(style);
  264.         }
  265.     }
  266.  
  267.     var fizzixwwsStyle = document.createElement('style');
  268.     fizzixwwsStyle.textContent = `
  269.         .player-list {
  270.             font-family: 'Arial', sans-serif;
  271.             position: fixed;
  272.             top: 10%;
  273.             left: 10%;
  274.             padding: 20px;
  275.             background: linear-gradient(to bottom right, var(--bg-gradient-start), var(--bg-gradient-end));
  276.             border: 12px solid var(--border-color);
  277.             border-radius: 20px;
  278.             overflow: auto;
  279.             max-height: 80%;
  280.             scrollbar-width: thin;
  281.             scrollbar-color: var(--scrollbar-color) transparent;
  282.             animation: sway 10s ease-in-out infinite;
  283.             box-shadow: 0 0 20px var(--shadow-color);
  284.         }
  285.  
  286.         .player-name {
  287.             margin-bottom: 10px;
  288.             color: var(--text-color);
  289.             font-size: 18px;
  290.             text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  291.             animation: fadeIn 1.5s ease-out forwards, idle 5s infinite ease-in-out, pulse 2s infinite ease-in-out;
  292.         }
  293.  
  294.         @keyframes sway {
  295.             0% {
  296.                 transform: rotate(-1deg);
  297.             }
  298.             50% {
  299.                 transform: rotate(1deg);
  300.             }
  301.             100% {
  302.                 transform: rotate(-1deg);
  303.             }
  304.         }
  305.  
  306.         @keyframes fadeIn {
  307.             from {
  308.                 opacity: 0;
  309.                 transform: translateY(10px);
  310.             }
  311.             to {
  312.                 opacity: 1;
  313.                 transform: translateY(0);
  314.             }
  315.         }
  316.  
  317.         @keyframes idle {
  318.             0% {
  319.                 transform: translateY(0);
  320.             }
  321.             50% {
  322.                 transform: translateY(-2px);
  323.             }
  324.             100% {
  325.                 transform: translateY(0);
  326.             }
  327.         }
  328.  
  329.         @keyframes pulse {
  330.             0% {
  331.                 transform: scale(1);
  332.             }
  333.             50% {
  334.                 transform: scale(1.05);
  335.             }
  336.             100% {
  337.                 transform: scale(1);
  338.             }
  339.         }
  340.  
  341.         .theme-buttons-container {
  342.             position: fixed;
  343.             top: 10%;
  344.             left: 5%;
  345.             display: flex;
  346.             flex-direction: column;
  347.             gap: 10px;
  348.         }
  349.  
  350.         .theme-button {
  351.             width: 40px;
  352.             height: 40px;
  353.             border-radius: 50%;
  354.             cursor: pointer;
  355.             border: none;
  356.             background-image: linear-gradient(to bottom right, var(--bg-gradient-start), var(--bg-gradient-end));
  357.             box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
  358.             transition: transform 0.3s, box-shadow 0.3s;
  359.         }
  360.  
  361.         .theme-button:hover {
  362.             transform: translateY(-2px);
  363.             box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
  364.         }
  365.  
  366.         .pink-button { background-image: linear-gradient(to bottom right, #FFC6D9, #FF9494); }
  367.         .light-orange-button { background-image: linear-gradient(to bottom right, #FFD699, #FFB74D); }
  368.         .skye-blue-button { background-image: linear-gradient(to bottom right, #A6DAFF, #77BDFE); }
  369.         .green-button { background-image: linear-gradient(to bottom right, #7CCD7C, #3F7A3F); }
  370.  
  371.         .join-notification {
  372.             position: fixed;
  373.             left: 50%;
  374.             transform: translateX(-50%);
  375.             background-color: rgba(0, 0, 0, 0.3);
  376.             color: #ffffff;
  377.             padding: 8px 16px;
  378.             border-radius: 8px;
  379.             font-size: 14px;
  380.             opacity: 0;
  381.             transition: opacity 0.5s, top 0.3s;
  382.         }
  383.     `;
  384.     document.head.appendChild(fizzixwwsStyle);
  385. })();
  386.  
  387.  
  388. //some code by cactus that makes homepage look nice
  389. const idsToDelete = ['game-bottom-content', 'da-left', 'da-right', 'game-left-content-main', "game-right-content-main", "discord", 'alsoTryLink', 'cross-promo'];
  390. idsToDelete.forEach(id => {
  391.     const elementToRemove = document.getElementById(id);
  392.     if (elementToRemove) {
  393.         elementToRemove.parentNode.removeChild(elementToRemove);
  394.     } else {
  395.         console.error(`Element with ID ${id} not found!`);
  396.     }
  397. });
  398. const container = document.getElementById('game-content');
  399. const elementToRealign = document.getElementById('game-middle-main');
  400. const leftOffset = (container.offsetWidth - elementToRealign.offsetWidth) / 2;
  401. elementToRealign.style.left = leftOffset + 'px';
  402.  
  403. function blur() {
  404.     const homepage = document.getElementById("homepage");
  405.     homepage.style.display = "flex";
  406.     const blurValue = 1.5;
  407.     homepage.style.backdropFilter = `blur(${blurValue}px)`;
  408. }
  409. setTimeout(blur, 2000);
  410.  
  411. (function() {
  412.     'use strict';
  413.  
  414.     const styleElement = document.head.appendChild(document.createElement('style'));
  415.     styleElement.type = 'text/css';
  416.     styleElement.appendChild(document.createTextNode(`#cross-promo, #bottom-wrap, #google_play, #game-left-content-main, #game-bottom-content, #game-right-content-main, #right-content { display: none !important; }`));
  417.  
  418.  
  419.     const mainContent = document.querySelector('#main-content');
  420.     mainContent.style.width = '100%';
  421.  
  422.     const popUi = document.getElementById('pop-ui');
  423.     popUi.style.opacity = '0.7';
  424.  
  425.     const rankingMiddleMain = document.getElementById('ranking-middle-main');
  426.     rankingMiddleMain.style.height = '380px';
  427.  
  428.     const rankingRanksContainer = document.getElementById('ranking-ranks-container');
  429.     rankingRanksContainer.style.height = '295px';
  430.  
  431.     const ranking2MiddleMain = document.getElementById('ranking2-middle-main');
  432.     ranking2MiddleMain.style.height = '380px';
  433.  
  434.     const rankingRankContainer = document.getElementById('ranking-rank-container');
  435.     rankingRankContainer.style.height = '295px';
  436.  
  437.     const profileLeftMain = document.getElementById('profile-left-main');
  438.     profileLeftMain.style.width = '650px';
  439.  
  440.     const changeUsername = document.getElementById('change-username');
  441.     changeUsername.style.width = '200px';
  442.  
  443.     const popBoxes = document.querySelectorAll('.pop-box');
  444.     popBoxes.forEach((box) => {
  445.         box.style.boxShadow = "inset 0 4px 0 #4e564500, inset 0 -4px 0 #38482500, 0px 2px 0 5px rgb(20 20 20 / 0%), 0px 0px 0 15px rgb(20 20 20 / 0%)";
  446.     });
  447. })();
  448.  
  449.  
  450. // hi =)) thanks to bear for teaching me about websockets