// ==UserScript==
// @name         SB-AUI
// @namespace    http://tampermonkey.net/
// @version      1.1.0
// @description  Advanced UI for Starblast with extra features
// @author       Halcyon
// @license      All rights reserved, this code may not be reproduced or used in any way without the express written consent of the author.
// @match        https://starblast.io/
// @icon         https://www.google.com/s2/favicons?sz=64&domain=starblast.io
// @grant        none
// @downloadURL none
// ==/UserScript==

'use strict';

const API_LINK = "https://starblast.dankdmitron.dev/api/simstatus.json";


const applyBaseStyles = (element, includeFont = true) => {
    element.style.boxShadow = "black 0px 0px 0px";
    element.style.textShadow = "black 0px 0px 0px";
    if (includeFont) {
        element.style.fontFamily = `"DM Sans", sans-serif`;
    }
    element.style.fontWeight = "400";
    element.style.background = "#0b0b0b";
    element.style.border = "1px solid #1a1a1a"
    element.style.color = "#FFF";
    element.style.borderRadius = "10px";
}

const applyStyles = (styles, element) => {
    if (!element) {
        return;
    }
    if (!styles) {
        return;
    }
    for (let key of Object.keys(styles)) {
        try {
            element.style[key] = styles[key]
        } catch (ex) {console.error(`applyStyles: Cannot apply style '${key}' to ${element}`)}
    }
    return;
}


try {
    var styleElement = document.createElement('style');
    var importRule = `
        @import url('https://fonts.googleapis.com/css2?family=Abel&family=DM+Sans:wght@400;500;700&display=swap');
    `;
    styleElement.textContent = importRule;
    document.head.appendChild(styleElement);
    document.addEventListener("DOMContentLoaded", function() {
        var elementsToStyle = document.querySelectorAll("body");

        elementsToStyle.forEach(function(element) {
            element.style.fontFamily = '"DM Sans", sans-serif';
        });
    });
} catch (ex) {}

try {
    var style = document.createElement('style');
    var fontFaceRule = `
    @font-face {
        font-family: 'Ships'; /* Name your font */
        src: url('https://starblast.dankdmitron.dev/fonts/Starblast/starblast-vanilla-ships.ttf') format('truetype');
    }
    `;
    style.textContent = fontFaceRule;
    document.head.appendChild(style);
} catch (ex) {}

for (let el of document.querySelectorAll('button')) {
    applyBaseStyles(el)
}

document.documentElement.style.scrollbarWidth = 'thin';

  // Internet Explorer and Microsoft Edge (legacy)
  document.documentElement.style.msOverflowStyle = 'none';

  // For Microsoft Edge (Chromium-based) and modern browsers with standard scrollbar support
  var style = document.createElement('style');
  var css = `
    /* Webkit and Blink */
    ::-webkit-scrollbar {
      width: 0.2em;
    }
    ::-webkit-scrollbar-thumb {
      background-color: #1a1a1a;
      border: none;
      border-radius: 0.1em;
    }
    ::-webkit-scrollbar-track {
      background-color: transparent;
      border: none;
    }
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    `;
  style.appendChild(document.createTextNode(css));
  document.head.appendChild(style);

//document.querySelector("body").style.backgroundImage = "url(https://www.wallpaperflare.com/static/760/797/225/galaxy-space-stars-universe-wallpaper.jpg)";
document.querySelector("body").style.backgroundColor = "#0b0b0b";

let overlayStyles = {
    backgroundColor: "#1a1a1a",
    background: "repeating-linear-gradient(45deg, #1a1a1a 0, #131313 1px, #0b0b0b 0, #0b0b0b 50%)",
    backgroundSize: "10px 10px",
    maxWidth: "calc(100% - 60px)",
    maxHeight: "calc(100% - 60px)",
    margin: "auto auto",
    boxSizing: "content-box",
    boxShadow: "black 0px 0px 0px",
    border: "6px solid #131313",
    outline: "54px solid #0b0b0b",
};
applyStyles(overlayStyles, document.querySelector("#overlay"));


try {
    document.querySelector("#logo > img").src = "https://i.ibb.co/t25sFmR/SBAUI.png";
} catch (ex) {
    try {
        setTimeout(() => {
            document.querySelector("#logo > img").src = "https://i.ibb.co/t25sFmR/SBAUI.png";
        }, 500)
    } catch (ex) {
        setTimeout(() => {
            document.querySelector("#logo > img").src = "https://i.ibb.co/t25sFmR/SBAUI.png";
        }, 1000)
    }
}
document.querySelector("body").style.height = "100dvh";
document.querySelector("body").style.width = "100vw";
document.querySelector("#play").style.fontFamily = `"DM Sans", sans-serif`;
document.querySelector("#play").style.letterSpacing = "4px"
document.querySelector("#play").style.fontSize = "2.2rem"
document.querySelector("#play").style.fontWeight = "600";
document.querySelector("#game_modes").style.background = `transparent`;
document.querySelector("#game_modes").style.textShadow = `black 0px 0px 0px`;
document.querySelector("#game_modes").style.fontFamily = `'Abel', sans-serif`;
document.querySelector("#game_modes").style.fontSize = `1rem`;
document.querySelector("#game_modes").style.letterSpacing = `0px`;
document.querySelector("#game_modes").style.marginTop = `5px`;
document.querySelector("#game_modes").style.marginLeft = `auto`;
document.querySelector("#game_modes").style.marginRight = `auto`;
document.querySelector("#game_modes").style.width = `80%`;
document.querySelector("#game_modes").style.borderTop = `1px solid #1a1a1a`;

document.querySelector("#game_modes").style.color = `gray`;
document.querySelector(".changelog-new").style.fontFamily = `"DM Sans", sans-serif`;

let removalQueries = ['[data-translate-base="music"]','[data-translate-base="community"]'];
for (let query of removalQueries) {
    for (let el of document.querySelectorAll(query)) {
        el.style.display = "none"
    }
}
//followtools bottom-left
document.querySelector('.followtools').style.left = '0';
document.querySelector('.followtools').style.width = 'max-content';
document.querySelector('.followtools').style.zIndex = '500';
document.querySelector('.bottom-left').style.top = '0';
document.querySelector('.bottom-left').style.height = 'max-content';
document.querySelector('.inputwrapper').style.background = '#0b0b0b';
document.querySelector('.inputwrapper').style.border = '1px solid #1a1a1a';
document.querySelector('.inputwrapper').style.fontFamily = 'DM Sans';
document.querySelector('.inputwrapper').style.boxShadow = 'black 0px 0px 0px';
document.querySelector('.inputwrapper').style.borderRadius = '10px';


const leftRight = [document.querySelector('#prevMode'),document.querySelector('#nextMode')];
for (let el of leftRight) {
    el.style.color = '#FFFFFF';
    el.style.textShadow = 'black 0px 0px 0px';
}

const baseStyleQueries = ['.changelog-new', '#moddingspace', "#donate", "#rankings", "#training"];
for (let query of baseStyleQueries) {
    applyBaseStyles(document.querySelector(query));
}

const ml = ['#moddingspace', "#donate", "#rankings", "#training"]
for (let query of ml) {
    let item = document.querySelector(query);
    item.style.paddingBottom = "0.5rem";
    let icon = document.querySelector(`${query} > i`);
    icon.style.margin = "0.5rem auto 0.5rem auto";
    icon.style.paddingBottom = '0.5rem';
    icon.style.width = '80%';
    icon.style.borderBottom = '1px solid #1a1a1a';
    let span = document.querySelector(`${query} > span`);
    span.style.color = "#FFF";
    span.style.letterSpacing = '1px';
    span.style.textShadow = 'black 0px 0px 0px';
    span.style.fontWeight = '500';
}

for (let el of document.querySelectorAll('.modal')) {
    applyBaseStyles(el);
}

for (let el of document.querySelectorAll('.social i')) {
    applyBaseStyles(el, false);
}

var J = document.createElement("div");

J.id = "SL_INTEGRATION";

document.querySelector('#overlay').appendChild(J);

const SL_INTEGRATION = document.querySelector('#SL_INTEGRATION');

let styles = {
    position: 'absolute',
    height: '100%',
    width: '25%',
    top: '0',
    right: '0',
    display: 'flex',
    flexDirection: 'column'
}

for (let key of Object.keys(styles)) {
    SL_INTEGRATION.style[key] = styles[key]
}


let options = {
    activePanel: "listing",
    activeRegion: "europe",
    modes: {
        team: true,
        survival: false,
        deathmatch: false,
        modded: false,
        invasion: false
    }
};
let filteredSystems = [];
let statusReportActive = false;

let statusReportData = {
    name: "",
    id: "",
    team_1: {
        hue: null,
        gems: 0,
        level: 0,
        potentialOutput: 0,
        PBS: 0,
        PPBS: 0,
        players: []
    },
    team_2: {
        hue: null,
        gems: 0,
        level: 0,
        potentialOutput: 0,
        PBS: 0,
        PPBS: 0,
        players: []
    },
    team_3: {
        hue: null,
        gems: 0,
        level: 0,
        potentialOutput: 0,
        PBS: 0,
        PPBS: 0,
        players: []
    }
};

const templateStatusData = () => ({name: "",team_1: {hue: null,players: []},team_2: {hue: null,players: []},team_3: {hue: null,players: []}})

window.switchActivePanel = (panel) => {
    options.activePanel = panel;
    refreshSL();
}

window.switchActiveRegion = (region) => {
    options.activeRegion = region;
    refreshSL();
}

window.toggleMode = (mode) => {
    options.modes[mode] = !options.modes[mode];
    refreshSL();
}

let API_TIMER = setInterval(async () => {
    if (options.activePanel !== 'listing') {
        return;
    }
    let raw = await(await fetch(API_LINK)).json();
    let allSystems = [];
    for (let item of raw) {
        if (item.hasOwnProperty("modding") && item.modding) {
            if (!options.modes.modding) {
                continue;
            } 
        }
        if (item.location.toLowerCase() !== options.activeRegion) {
            continue;
        }
        for (let system of item.systems) {
            if (options.modes[system.mode]) {
                allSystems.push({
                    ...system,
                    IP_ADDR: item.address
                });
            }
        }
    }
    filteredSystems = allSystems.sort((a, b) => a.time - b.time);
    refreshSL();
    
}, 3000)

const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1);

let STATUS_TIMER = null;

window.statusReport = async (query) => {
    if (STATUS_TIMER) {return};
    STATUS_TIMER = setInterval(async () => {
        statusReportActive = true;
        refreshSL();
        let raw = await (await fetch(`https://starblast.dankdmitron.dev/api/status/${query}`)).json();
        statusReportData = templateStatusData();
        statusReportData.name = raw.name;
        statusReportData.id = query.split('@')[0];
        for (let key of Object.keys(raw.players)) {
            let player = raw.players[key];
            statusReportData[`team_${player.friendly + 1}`].players.push({
                name: player.player_name,
                ecp: !!player.custom,
                score: player.score,
                type: player.type,
                PBS: calculatePlayerScore(player.type, !!player.custom)
            })
            statusReportData[`team_${player.friendly + 1}`].hue = player.hue;
        }
        for (let team of raw.mode.teams) {
            for (let num of ["team_1", "team_2", "team_3"]) {
                if (team.hue === statusReportData[num].hue) {
                    statusReportData[num].gems = team.crystals
                    statusReportData[num].level = team.level
                    break
                }
            }
        }
        for (let team of ["team_1", "team_2", "team_3"]) {
            let sPBS = 0, sPPBS = 0, potentialOutput = 0;
            for (let i = 0; i < statusReportData[team].players.length; i++) {
                sPBS += Number(statusReportData[team].players[i].PBS.currentScore);
                sPPBS += Number(statusReportData[team].players[i].PBS.potentialScore);
                potentialOutput += statusReportData[team].players[i].PBS.energyOutput;
            }
            statusReportData[team].PBS = sPBS.toFixed(2);
            statusReportData[team].PPBS = sPPBS.toFixed(2);
            statusReportData[team].potentialOutput = potentialOutput;
        }
        statusReportData.team_1.players = statusReportData.team_1.players.sort((a, b) => a.score - b.score).reverse();
        statusReportData.team_2.players = statusReportData.team_2.players.sort((a, b) => a.score - b.score).reverse();
        statusReportData.team_3.players = statusReportData.team_3.players.sort((a, b) => a.score - b.score).reverse();
    }, 2000)
}

window.closeStatusReport = () => {
    statusReportActive = false;
    clearInterval(STATUS_TIMER);
    STATUS_TIMER = null;
    refreshSL();
}

document.querySelector('#play').addEventListener('click', () => {
    clearInterval(API_TIMER);
    clearInterval(STATUS_TIMER);
    SL_INTEGRATION.style.display = 'none';
});

const refreshSL = () => {
    SL_INTEGRATION.innerHTML = `
        ${
            !statusReportActive
            ?
            ""
            :
            `
                <div id="MODAL_WRAPPER" style="position:fixed; top:0; left:0; width: 100%; height: 100%; display: grid; place-items:center; z-index: 999; background: rgba(0,0,0,0.4)">
                    <div style="padding:1vw;display:flex;flex-direction:column;align-items:center;background:#0b0b0b;border:1px solid #1a1a1a;border-radius:12px">
                        <div style="height:3vh; border-bottom: 1px solid #1a1a1a; width:50vw; color: white; font-family: 'DM Sans',sans-serif; font-size: 1.7vw; display: flex; justify-content: space-between; fill: white; align-items: center; padding-bottom: 2vh">
                            <div>${statusReportData.name}</div>
                            <div style="display:flex;gap:1vw;align-items:center;">
                                <a target="_blank" href="https://starblast.io/#${statusReportData.id}">
                                    <div style="height:1.4vw;display:grid;place-items:center;font-weight:400;font-size:1vw;border:1px solid white;border-radius:0.2vw;padding:0.4vw 1vw 0.4vw 1vw;color:white;">
                                        JOIN
                                    </div>
                                </a>
                                <svg onclick="window.closeStatusReport()" style="cursor: pointer;" xmlns="http://www.w3.org/2000/svg" height="2.5vh" viewBox="0 -960 960 960"><path d="m249-207-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z"/></svg>
                            </div>
                        </div>
                        <div style="display:flex;height:55vh;width: 100%; margin-top: 2vh;justify-content:space-between;">
                            ${
                                (() => {
                                    let arr = [];
                                    for (let CUR_TEAM of ["team_1", "team_2", "team_3"]) {
                                        arr.push(`
                                        <div style="width:30%;height:100%;overflow-y: auto; display: flex; flex-direction: column; justify-content: flex-start; align-items: center">
                                            <div style="margin-bottom: 1vh;border-radius: 0.25vw;border:1px solid hsla(${statusReportData[CUR_TEAM].hue}, 100%, 50%, 1); background-color: hsla(${statusReportData[CUR_TEAM].hue}, 100%, 50%, 0.25); color: hsla(${statusReportData[CUR_TEAM].hue}, 100%, 50%, 1); width:80%;padding: 1vh 0 1vh 0; font-family: 'DM Sans',sans-serif; font-weight: 600; text-align: center;">
                                                ${hueToColorName(statusReportData[CUR_TEAM].hue)}
                                            </div>
                                            <div style="width:100%;margin: 1vh 0 1vh 0; padding-bottom:1vh;border-bottom: 1px solid #1a1a1a;">
                                                <div style="font-family:'Abel',sans-serif;font-size:0.8vw;display:flex;width:100%;justify-content:space-between">
                                                    <div style="color:gray">Player count</div>
                                                    <div style="color:white">${statusReportData[CUR_TEAM].players.length}</div>
                                                </div>
                                                <div style="font-family:'Abel',sans-serif;font-size:0.8vw;display:flex;width:100%;justify-content:space-between">
                                                    <div style="color:gray">Gems</div>
                                                    <div style="color:white">${statusReportData[CUR_TEAM].gems}</div>
                                                </div>
                                                <div style="font-family:'Abel',sans-serif;font-size:0.8vw;display:flex;width:100%;justify-content:space-between">
                                                    <div style="color:gray">Level</div>
                                                    <div style="color:white">${statusReportData[CUR_TEAM].level}</div>
                                                </div>
                                                <div style="font-family:'Abel',sans-serif;font-size:0.8vw;display:flex;width:100%;justify-content:space-between;font-weight:500;">
                                                    <div style="color:gray">Playerbase strength score</div>
                                                    <div style="color:#A4D8D8;font-weight:bold;">${statusReportData[CUR_TEAM].PBS}</div>
                                                </div>
                                                <div style="font-family:'Abel',sans-serif;font-size:0.8vw;display:flex;width:100%;justify-content:space-between;font-weight:500;">
                                                    <div style="color:gray">Potential playerbase strength score</div>
                                                    <div style="color:#F49AC2;font-weight:bold;">${statusReportData[CUR_TEAM].PPBS}</div>
                                                </div>
                                                <div style="font-family:'Abel',sans-serif;font-size:0.8vw;display:flex;width:100%;justify-content:space-between;font-weight:500;">
                                                    <div style="color:gray">Maximum damage output (DPS)</div>
                                                    <div style="color:#FDFD96;font-weight:bold;">${statusReportData[CUR_TEAM].potentialOutput}</div>
                                                </div>
                                            </div>
                                            <div style="height:max-content;width:100%;display:flex;justify-content:space-between;color:gray;font-family:'Abel',sans-serif;font-size:0.8vw;padding-bottom:0.5vh;border-bottom:1px solid #1a1a1a;margin-bottom: 0.5vh">
                                                <div>ECP | NAME</div>
                                                <div>SCORE | SHIP</div>
                                            </div>
                                            ${
                                                statusReportData[CUR_TEAM].players.length === 0
                                                ?
                                                ""
                                                :
                                                statusReportData[CUR_TEAM].players.map(player => {
                                                    return `
                                                        <div style="height:max-content;margin-bottom:0.3vh;display:flex;width:100%;height:1vw">
                                                            <div style="width:10%;height:100%;display:grid;place-items:center;">
                                                                <div style="height:60%; aspect-ratio: 1 / 1; border-radius:9999px; background: ${player.ecp ? "#37dd37" : "#Ff3931"}"></div>
                                                            </div>
                                                            <div style="width:90%;height:100%;display:flex;justify-content:space-between;font-family:'Abel',sans-serif;font-size:0.8vw;color:white;">
                                                                <div>${player.name}</div>
                                                                <div style="display:flex">${player.score}&nbsp;<img style="height:0.8vw;aspect-ratio: 1 / 1;object-fit:contain;" src="${SHIP_LINKS.find(url => url.endsWith(`/${player.type}.png`))}"/></div>
                                                            </div>
                                                        </div>
                                                    `
                                                }).join('')
                                            }
                                    </div>
                                    <div style="height:100%;width:1px;background-color:#1a1a1a"></div>`)
                                    }
                                    return arr.join('')
                                })()
                            }
                        </div>
                    </div>
                </div>
            `
        }
        <div id="SL_TITLE" style="height:10%;width:100%;">
            <div style="font-family: 'DM Sans', sans-serif;font-weight: 600;font-size: 1.3vw;text-align:right;width:100%;color:white">
                Starblast AUI v1.1.0
            </div>
            <div style="font-family:'Abel', sans-serif; font-weight: 300; font-size: 0.9vw; text-align: right; width: 100%; color: gray;">
                API (<a style="color:rgb(191,191,191)" href="https://starblast.dankdmitron.dev/" target="_blank"><u>Serverlist+</u></a>): <span style="color: white; font-weight: bold">dankdmitron</span>
            </div>
            <div style="font-family:'Abel', sans-serif; font-weight: 300; font-size: 0.9vw; text-align: right; width: 100%; color: gray;">
                Design and integration: <span style="color: white; font-weight: bold">Halcyon</span>
            </div>
        </div>
        <div id="SL_OPTIONS_WRAPPER" style="height:4%; width:100%;display: flex;">
            <div id="SL_LISTING_REF" onclick="window.switchActivePanel('listing')"
                style="${options.activePanel == 'listing' ? "background-color: #FFFFFF; color: #0b0b0b; fill: #0b0b0b;" : "background-color: #1a1a1a; color: #FFFFFF; fill: #FFFFFF;"}border-top-left-radius: 0.25vw; border-top-right-radius: 0.25vw;display: grid; place-items: center; font-size: 0.8vw; font-family: 'DM Sans',sans-serif;width:50%;font-weight: 500;cursor:pointer;">
                LISTING
            </div>
            <div id="SL_SETTINGS_REF" onclick="window.switchActivePanel('settings')"
                style="${options.activePanel == 'settings' ? "background-color: #FFFFFF; color: #0b0b0b; fill: #0b0b0b;" : "background-color: #1a1a1a; color: #FFFFFF; fill: #FFFFFF;"}border-top-left-radius: 0.25vw; border-top-right-radius: 0.25vw;display: grid; place-items: center; font-size: 0.8vw; font-family: 'DM Sans',sans-serif;width:50%;font-weight: 500;cursor:pointer;">
                SETTINGS
            </div>
        </div>
        <div id="SL_LISTING" style="box-sizing:border-box;padding:0.6vw;height:86%;width:100%;display: ${options.activePanel == "listing" ? "flex" : "none"}; flex-direction: column; overflow-y: auto;background-color:#0b0b0b;border:1px solid #1a1a1a">
            ${
                filteredSystems.length === 0
                ?
                ""
                :
                filteredSystems.map(system => {
                    return  `
                            <div onclick="window.statusReport('${system.id}@${system.IP_ADDR}')" style="width:100%; cursor: pointer; min-height:8.5vh; margin-bottom: 0.9vh; border-radius:12px; border: 1px solid #1a1a1a; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly;box-sizing:border-box;padding:0.4vh">
                                <div style="font-family:'DM Sans',sans-serif;color:white;font-weight:600;font-size:1.4vw;">
                                    ${system.name}
                                </div>
                                <div style="width:82%;height:1px;background-color:#1a1a1a"></div>
                                <div style="width:92%;display:flex;align-items:center;justify-content:space-between;color:gray;font-family:'Abel',sans-serif;font-size:0.8vw;position:relative;">
                                    <div>
                                        ${system.mode === 'modding' ? capitalize(system.mod_id) : capitalize(system.mode)}
                                    </div>   
                                    <div style="position:absolute;top:0;left:0;width:100%;text-align:center;">
                                        ${~~(system.time / 60)} min
                                    </div> 
                                    <div>
                                        ${system.players} players
                                    </div>
                                </div>
                            </div>
                        `
                    
                }).join('')
            }
        </div>
        <div id="SL_SETTINGS" style="box-sizing:border-box;padding:0.6vw;height:86%;width:100%;display: ${options.activePanel == "settings" ? "flex" : "none"}; flex-direction: column; gap: 0.2rem; overflow-y: auto;background-color:#0b0b0b;border:1px solid #1a1a1a;justify-content: flex-start;align-items:flex-end;">
            <div style="text-align:right;color:white;">
                <div style="font-family:'DM Sans',sans-serif;font-size:1.5vw;margin-bottom:0.5vh;">
                    REGION:
                </div>
                <div style="color:gray;font-family: 'Abel',sans-serif;font-size:1vw;display:flex;gap:0.5vw;justify-content:end;align-items:center;fill:#FFFFFF;">
                    <div>Europe</div>
                    ${
                        options.activeRegion == "europe"
                        ?
                        `<svg xmlns="http://www.w3.org/2000/svg" height="1vw" viewBox="0 -960 960 960"><path d="M480-294q78 0 132-54t54-132q0-78-54-132t-132-54q-78 0-132 54t-54 132q0 78 54 132t132 54Zm0 214q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-156t86-127Q252-817 325-848.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 82-31.5 155T763-197.5q-54 54.5-127 86T480-80Zm0-60q142 0 241-99.5T820-480q0-142-99-241t-241-99q-141 0-240.5 99T140-480q0 141 99.5 240.5T480-140Zm0-340Z"/></svg>`
                        :
                        `<svg xmlns="http://www.w3.org/2000/svg" onclick="window.switchActiveRegion('europe')" height="1vw" viewBox="0 -960 960 960"><path d="M480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-156t86-127Q252-817 325-848.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 82-31.5 155T763-197.5q-54 54.5-127 86T480-80Zm0-60q142 0 241-99.5T820-480q0-142-99-241t-241-99q-141 0-240.5 99T140-480q0 141 99.5 240.5T480-140Zm0-340Z"/></svg>`
                    }
                </div>
                <div style="color:gray;font-family: 'Abel',sans-serif;font-size:1vw;display:flex;gap:0.5vw;justify-content:end;align-items:center;fill:#FFFFFF;">
                    <div>America</div>
                    ${
                        options.activeRegion == "america"
                        ?
                        `<svg xmlns="http://www.w3.org/2000/svg" height="1vw" viewBox="0 -960 960 960"><path d="M480-294q78 0 132-54t54-132q0-78-54-132t-132-54q-78 0-132 54t-54 132q0 78 54 132t132 54Zm0 214q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-156t86-127Q252-817 325-848.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 82-31.5 155T763-197.5q-54 54.5-127 86T480-80Zm0-60q142 0 241-99.5T820-480q0-142-99-241t-241-99q-141 0-240.5 99T140-480q0 141 99.5 240.5T480-140Zm0-340Z"/></svg>`
                        :
                        `<svg xmlns="http://www.w3.org/2000/svg" onclick="window.switchActiveRegion('america')" height="1vw" viewBox="0 -960 960 960"><path d="M480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-156t86-127Q252-817 325-848.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 82-31.5 155T763-197.5q-54 54.5-127 86T480-80Zm0-60q142 0 241-99.5T820-480q0-142-99-241t-241-99q-141 0-240.5 99T140-480q0 141 99.5 240.5T480-140Zm0-340Z"/></svg>`
                    }
                </div>
                <div style="color:gray;font-family: 'Abel',sans-serif;font-size:1vw;display:flex;gap:0.5vw;justify-content:end;align-items:center;fill:#FFFFFF;">
                    <div>Asia</div>
                    ${
                        options.activeRegion == "asia"
                        ?
                        `<svg xmlns="http://www.w3.org/2000/svg" height="1vw" viewBox="0 -960 960 960"><path d="M480-294q78 0 132-54t54-132q0-78-54-132t-132-54q-78 0-132 54t-54 132q0 78 54 132t132 54Zm0 214q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-156t86-127Q252-817 325-848.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 82-31.5 155T763-197.5q-54 54.5-127 86T480-80Zm0-60q142 0 241-99.5T820-480q0-142-99-241t-241-99q-141 0-240.5 99T140-480q0 141 99.5 240.5T480-140Zm0-340Z"/></svg>`
                        :
                        `<svg xmlns="http://www.w3.org/2000/svg" onclick="window.switchActiveRegion('asia')" height="1vw" viewBox="0 -960 960 960"><path d="M480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-156t86-127Q252-817 325-848.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 82-31.5 155T763-197.5q-54 54.5-127 86T480-80Zm0-60q142 0 241-99.5T820-480q0-142-99-241t-241-99q-141 0-240.5 99T140-480q0 141 99.5 240.5T480-140Zm0-340Z"/></svg>`
                    }
                </div>
            </div>
            <div style="text-align:right;color:white;">
                <div style="font-family:'DM Sans',sans-serif;font-size:1.5vw;margin-bottom:0.5vh;margin-top:2vh;">
                    MODE:
                </div>
                <div style="color:gray;font-family: 'Abel',sans-serif;font-size:1vw;display:flex;gap:0.5vw;justify-content:end;align-items:center;fill:#FFFFFF;">
                    <div>Team Mode</div>
                    ${
                        options.modes.team
                        ?
                        `<svg onclick="window.toggleMode('team')" xmlns="http://www.w3.org/2000/svg" height="1vw" viewBox="0 -960 960 960"><path d="m419-321 289-289-43-43-246 246-119-119-43 43 162 162ZM180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0 24-18 42t-42 18H180Zm0-60h600v-600H180v600Zm0-600v600-600Z"/></svg>`
                        :
                        `<svg onclick="window.toggleMode('team')" xmlns="http://www.w3.org/2000/svg" height="1vw" viewBox="0 -960 960 960"><path d="M180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0 24-18 42t-42 18H180Zm0-60h600v-600H180v600Z"/></svg>`
                    }
                </div>
                <div style="color:gray;font-family: 'Abel',sans-serif;font-size:1vw;display:flex;gap:0.5vw;justify-content:end;align-items:center;fill:#FFFFFF;">
                    <div>Survival</div>
                    ${
                        options.modes.survival
                        ?
                        `<svg onclick="window.toggleMode('survival')" xmlns="http://www.w3.org/2000/svg" height="1vw" viewBox="0 -960 960 960"><path d="m419-321 289-289-43-43-246 246-119-119-43 43 162 162ZM180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0 24-18 42t-42 18H180Zm0-60h600v-600H180v600Zm0-600v600-600Z"/></svg>`
                        :
                        `<svg onclick="window.toggleMode('survival')" xmlns="http://www.w3.org/2000/svg" height="1vw" viewBox="0 -960 960 960"><path d="M180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0 24-18 42t-42 18H180Zm0-60h600v-600H180v600Z"/></svg>`
                    }
                </div>
                <div style="color:gray;font-family: 'Abel',sans-serif;font-size:1vw;display:flex;gap:0.5vw;justify-content:end;align-items:center;fill:#FFFFFF;">
                    <div>Deathmatch</div>
                    ${
                        options.modes.deathmatch
                        ?
                        `<svg onclick="window.toggleMode('deathmatch')" xmlns="http://www.w3.org/2000/svg" height="1vw" viewBox="0 -960 960 960"><path d="m419-321 289-289-43-43-246 246-119-119-43 43 162 162ZM180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0 24-18 42t-42 18H180Zm0-60h600v-600H180v600Zm0-600v600-600Z"/></svg>`
                        :
                        `<svg onclick="window.toggleMode('deathmatch')" xmlns="http://www.w3.org/2000/svg" height="1vw" viewBox="0 -960 960 960"><path d="M180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0 24-18 42t-42 18H180Zm0-60h600v-600H180v600Z"/></svg>`
                    }
                </div>
                <div style="color:gray;font-family: 'Abel',sans-serif;font-size:1vw;display:flex;gap:0.5vw;justify-content:end;align-items:center;fill:#FFFFFF;">
                    <div>Modded</div>
                    ${
                        options.modes.modded
                        ?
                        `<svg onclick="window.toggleMode('modded')" xmlns="http://www.w3.org/2000/svg" height="1vw" viewBox="0 -960 960 960"><path d="m419-321 289-289-43-43-246 246-119-119-43 43 162 162ZM180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0 24-18 42t-42 18H180Zm0-60h600v-600H180v600Zm0-600v600-600Z"/></svg>`
                        :
                        `<svg onclick="window.toggleMode('modded')" xmlns="http://www.w3.org/2000/svg" height="1vw" viewBox="0 -960 960 960"><path d="M180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0 24-18 42t-42 18H180Zm0-60h600v-600H180v600Z"/></svg>`
                    }
                </div>
                <div style="color:gray;font-family: 'Abel',sans-serif;font-size:1vw;display:flex;gap:0.5vw;justify-content:end;align-items:center;fill:#FFFFFF;">
                    <div>Invasion</div>
                    ${
                        options.modes.invasion
                        ?
                        `<svg onclick="window.toggleMode('invasion')" xmlns="http://www.w3.org/2000/svg" height="1vw" viewBox="0 -960 960 960"><path d="m419-321 289-289-43-43-246 246-119-119-43 43 162 162ZM180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0 24-18 42t-42 18H180Zm0-60h600v-600H180v600Zm0-600v600-600Z"/></svg>`
                        :
                        `<svg onclick="window.toggleMode('invasion')" xmlns="http://www.w3.org/2000/svg" height="1vw" viewBox="0 -960 960 960"><path d="M180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0 24-18 42t-42 18H180Zm0-60h600v-600H180v600Z"/></svg>`
                    }
                </div>
            </div>
        </div>
    `
}

function hueToColorName(hue) {
    const colorMap = [
      { hueRange: [0, 15], colorName: 'Red' },
      { hueRange: [15, 45], colorName: 'Orange' },
      { hueRange: [45, 75], colorName: 'Yellow' },
      { hueRange: [75, 150], colorName: 'Green' },
      { hueRange: [150, 195], colorName: 'Cyan' },
      { hueRange: [195, 285], colorName: 'Blue' },
      { hueRange: [285, 330], colorName: 'Magenta' },
      { hueRange: [330, 360], colorName: 'Red' }
    ];
  
    const matchedColor = colorMap.find(entry => hue >= entry.hueRange[0] && hue < entry.hueRange[1]);
  
    return matchedColor ? matchedColor.colorName : 'Undefined';
}

const calculatePlayerScore = (type, ecp) => {
    const playerScore = {
        currentScore: Number(String(type).split('')[0]) / 15,
        potentialScore: 0.7,
        energyOutput: 0
    }
    if (ecp) {
        playerScore.currentScore += 0.25
        playerScore.potentialScore += 0.25
    }
    let energyOutput = 0;
    switch (type) {
        case 701:
            if (ecp) {
                playerScore.currentScore += 2.5
                playerScore.potentialScore = playerScore.currentScore
            } else {
                playerScore.currentScore += 1.5
                playerScore.potentialScore = playerScore.currentScore
            }
            energyOutput = 150;
            break
        case 702:
            if (ecp) {
                playerScore.currentScore += 1.7
                playerScore.potentialScore = playerScore.currentScore
            } else {
                playerScore.currentScore += 1
                playerScore.potentialScore = playerScore.currentScore
            }
            energyOutput = 50;
            break
        case 703:
            if (ecp) {
                playerScore.currentScore += 1.4
                playerScore.potentialScore = playerScore.currentScore
            } else {
                playerScore.currentScore += 0.4
                playerScore.potentialScore = playerScore.currentScore
            }
            energyOutput = 100;
            break
        case 704:
            if (ecp) {
                playerScore.currentScore += 1
                playerScore.potentialScore = playerScore.currentScore
            } else {
                playerScore.currentScore += 0.3
                playerScore.potentialScore = playerScore.currentScore
            }
            energyOutput = 175;
            break
        case 601:
            if (ecp) {
                playerScore.currentScore += 1.2
                playerScore.potentialScore += 2.5
            } else {
                playerScore.currentScore += 0.5
                playerScore.potentialScore += 1.5
            }
            energyOutput = 60;
            break
        case 602:
            if (ecp) {
                playerScore.currentScore += 1.2
                playerScore.potentialScore += 2.5
            } else {
                playerScore.currentScore += 0.45
                playerScore.potentialScore += 1.5
            }
            energyOutput = 50;
            break
        case 603:
            if (ecp) {
                playerScore.currentScore += 0.9
                playerScore.potentialScore += 1.7
            } else {
                playerScore.currentScore += 0.25
                playerScore.potentialScore += 1
            }
            energyOutput = 40;
            break
        case 604:
            if (ecp) {
                playerScore.currentScore += 0.5
                playerScore.potentialScore += 1.7
            } else {
                playerScore.currentScore += 0.25
                playerScore.potentialScore += 1
            }
            energyOutput = 48;
            break
        case 605:
            if (ecp) {
                playerScore.currentScore += 0.9
                playerScore.potentialScore += 1.7
            } else {
                playerScore.currentScore += 0.25
                playerScore.potentialScore += 1
            }
            energyOutput = 45;
            break
        case 606:
            if (ecp) {
                playerScore.currentScore += 0.9
                playerScore.potentialScore += 1.7
            } else {
                playerScore.currentScore += 0.2
                playerScore.potentialScore += 1
            }
            energyOutput = 45;
            break
        case 607:
            if (ecp) {
                playerScore.currentScore += 1.75
                playerScore.potentialScore += 1.65
            } else {
                playerScore.currentScore += 0.3
                playerScore.potentialScore += 0.2
            }
            energyOutput = 0;
            break
        case 608:
            if (ecp) {
                playerScore.currentScore += 0.5
                playerScore.potentialScore += 1.4
            } else {
                playerScore.currentScore += 0.1
                playerScore.potentialScore += 0.4
            }
            energyOutput = 40;
            break
        case 501:
            if (ecp) {
                playerScore.currentScore += 1.05
                playerScore.potentialScore += 2.5
            } else {
                playerScore.currentScore += 0.45
                playerScore.potentialScore += 1.5
            }
            energyOutput = 60;
            break
        case 502:
            if (ecp) {
                playerScore.currentScore += 0.75
                playerScore.potentialScore += 2.5
            } else {
                playerScore.currentScore += 0.3
                playerScore.potentialScore += 1.5
            }
            energyOutput = 40;
            break
        case 503:
            if (ecp) {
                playerScore.currentScore += 0.2
                playerScore.potentialScore += 1.7
            } else {
                playerScore.currentScore += 0.1
                playerScore.potentialScore += 1
            }
            energyOutput = 50;
            break
        case 504:
            if (ecp) {
                playerScore.currentScore += 0.1
                playerScore.potentialScore += 1.7
            } else {
                playerScore.currentScore += 0.1
                playerScore.potentialScore += 1
            }
            energyOutput = 45;
            break
        case 505:
            if (ecp) {
                playerScore.currentScore += 0.1
                playerScore.potentialScore += 1.7
            } else {
                playerScore.currentScore += 0.1
                playerScore.potentialScore += 1
            }
            energyOutput = 29;
            break
        case 506:
            if (ecp) {
                playerScore.currentScore += 0.9
                playerScore.potentialScore += 1.75
            } else {
                playerScore.currentScore += 0.5
                playerScore.potentialScore += 0.3
            }
            energyOutput = 50;
            break
        case 507:
            if (ecp) {
                playerScore.currentScore += 0.1
                playerScore.potentialScore += 1.75
            } else {
                playerScore.currentScore += 0.1
                playerScore.potentialScore += 0.3
            }
            energyOutput = 35;
            break
        case 401:
            if (ecp) {
                playerScore.currentScore += 0.3
                playerScore.potentialScore += 2.5
            } else {
                playerScore.currentScore += 0.05
                playerScore.potentialScore += 1.5
            }
            energyOutput = 35;
            break
        case 402:
            if (ecp) {
                playerScore.currentScore += 0.55
                playerScore.potentialScore += 2.5
            } else {
                playerScore.currentScore += 0.25
                playerScore.potentialScore += 1.5
            }
            energyOutput = 50;
            break
        case 403:
            if (ecp) {
                playerScore.currentScore += 0.4
                playerScore.potentialScore += 1.7
            } else {
                playerScore.currentScore += 0.2
                playerScore.potentialScore += 1
            }
            energyOutput = 55;
            break
        case 404:
            if (ecp) {
                playerScore.currentScore += 0.3
                playerScore.potentialScore += 1.7
            } else {
                playerScore.currentScore += 0.15
                playerScore.potentialScore += 1
            }
            energyOutput = 40;
            break
        case 405:
            energyOutput = 30;
            break
        case 406:
            energyOutput = 25;
            break
        case 301:
            if (ecp) {
                playerScore.currentScore += 0.2
                playerScore.potentialScore += 2.5
            } else {
                playerScore.currentScore += 0.05
                playerScore.potentialScore += 1.5
            }
            energyOutput = 30;
            break
        case 302:
            if (ecp) {
                playerScore.currentScore += 0.15
                playerScore.potentialScore += 1.7
            } else {
                playerScore.currentScore += 0.08
                playerScore.potentialScore += 1
            }
            energyOutput = 35;
            break
        case 303:
            if (ecp) {
                playerScore.currentScore += 0
                playerScore.potentialScore += 1.7
            } else {
                playerScore.currentScore += 0
                playerScore.potentialScore += 1
            }
            energyOutput = 16;
            break
        case 304:
            if (ecp) {
                playerScore.currentScore += 0.15
                playerScore.potentialScore += 1.75
            } else {
                playerScore.currentScore += 0.05
                playerScore.potentialScore += 0.3
            }
            energyOutput = 25;
            break
        case 201:
            if (ecp) {
                playerScore.currentScore += 0.05
                playerScore.potentialScore += 2.5
            } else {
                playerScore.currentScore += 0
                playerScore.potentialScore += 1.5
            }
            energyOutput = 25;
            break
        case 202:
            if (ecp) {
                playerScore.currentScore += 0.02
                playerScore.potentialScore += 1.75
            } else {
                playerScore.currentScore += 0
                playerScore.potentialScore += 0.3
            }
            energyOutput = 20;
            break
        default:
            break
    }
    playerScore.energyOutput = energyOutput;
    return playerScore
}

const SHIP_LINKS = [
    "https://i.ibb.co/6gjB0Y9/504.png",
    "https://i.ibb.co/h1BWddj/505.png",
    "https://i.ibb.co/ZG2wQtk/506.png",
    "https://i.ibb.co/ZxY43kc/507.png",
    "https://i.ibb.co/f8zzwcS/601.png",
    "https://i.ibb.co/hXgqvHQ/602.png",
    "https://i.ibb.co/HxNmSPY/603.png",
    "https://i.ibb.co/DVZrPT7/604.png",
    "https://i.ibb.co/w6jZfmK/605.png",
    "https://i.ibb.co/p4qBj2k/606.png",
    "https://i.ibb.co/4fjJcBC/607.png",
    "https://i.ibb.co/wYMGzCs/608.png",
    "https://i.ibb.co/ZNmcHfC/701.png",
    "https://i.ibb.co/JWZFqVv/702.png",
    "https://i.ibb.co/X2w682R/703.png",
    "https://i.ibb.co/RQrfMGW/704.png",
    "https://i.ibb.co/s3YVpVW/101.png",
    "https://i.ibb.co/w7GFPR5/201.png",
    "https://i.ibb.co/4JsJz8G/202.png",
    "https://i.ibb.co/Pz0xp1s/301.png",
    "https://i.ibb.co/M7PWNz7/302.png",
    "https://i.ibb.co/4ZKStWk/303.png",
    "https://i.ibb.co/df72XT8/304.png",
    "https://i.ibb.co/VM2kJgD/401.png",
    "https://i.ibb.co/8g6qgBw/402.png",
    "https://i.ibb.co/HnqK41P/403.png",
    "https://i.ibb.co/s2grnKB/404.png",
    "https://i.ibb.co/cvj9FWz/405.png",
    "https://i.ibb.co/64fsKPt/406.png",
    "https://i.ibb.co/27fLBPx/501.png",
    "https://i.ibb.co/3SfYGZX/502.png",
    "https://i.ibb.co/9pJt735/503.png"
]


refreshSL();


const SL_SETTINGS_REF = document.querySelector('#SL_SETTINGS_REF');
const SL_LISTING_REF = document.querySelector('#SL_LISTING_REF');



/*var element = document.getElementById("content");
element.style.marginTop = "0px"

var observer = new MutationObserver(function(mutationsList, observer) {
    for (var mutation of mutationsList) {
        if (mutation.type === "attributes" && mutation.attributeName === "style") {
            if (element.style.marginTop !== "0px") {
                element.style.marginTop = "0px";
            }
        }
    }
});
observer.observe(element, { attributes: true });*/