// ==UserScript==
// @name         SB-AUI
// @namespace    http://tampermonkey.net/
// @version      1.2.1
// @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==

/**
 * CHANGELOG
 * 1.0.0 - Initial creation. Core of AUI
 * 1.1.0 - Added team evaluation (PBS, PPBS, DPS)
 * 1.2.0 - Optimizations, code cleanup and transition to a component-based system
 * 1.2.1 - More optimizations and code cleanup. Added hardElementRefresh
 */

'use strict';

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

/********* STYLING ************ */

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

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";
    element.classList.add("hover-class");
}

//Remove unneeded UI elements (spotify and socials columns)
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"
    }
}

//Setting the AUI logo
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)
    }
}


//Importing DM Sans and Abel
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) {}

//All buttons get base styles
for (let el of document.querySelectorAll('button')) {
    applyBaseStyles(el)
}

//Scrollbar code
document.documentElement.style.scrollbarWidth = 'thin';
document.documentElement.style.msOverflowStyle = 'none';
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.backgroundColor = "#0b0b0b";


//Overlay styles
applyCSS({
    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",
}, document.querySelector("#overlay"));


//Body styles
document.querySelector("body").style.height = "100dvh";
document.querySelector("body").style.width = "100vw";

//Play button styles
applyCSS({
    fontFamily: `"DM Sans", sans-serif`,
    letterSpacing: "4px",
    fontSize: "2.2rem",
    fontWeight: "600"
}, document.querySelector("#play"))

//Styles
applyCSS({
    background: `transparent`,
    textShadow: `black 0px 0px 0px`,
    fontFamily: `'Abel', sans-serif`,
    fontSize: `1rem`,
    letterSpacing: `0px`,
    marginTop: `5px`,
    marginLeft: `auto`,
    marginRight: `auto`,
    width: `80%`,
    borderTop: `1px solid #1a1a1a`,
    color: `gray`
},document.querySelector("#game_modes"))

//Changelog styles
document.querySelector(".changelog-new").style.fontFamily = `"DM Sans", sans-serif`;


//Tools like "modding" styles (4 buttons)
document.querySelector('.followtools').style.left = '0';
document.querySelector('.followtools').style.width = 'max-content';
document.querySelector('.followtools').style.zIndex = '500';

//Changelog to top
document.querySelector('.bottom-left').style.top = '0';
document.querySelector('.bottom-left').style.height = 'max-content';

//Name input styles
applyCSS({
    background: '#0b0b0b',
    border: '1px solid #1a1a1a',
    fontFamily: 'DM Sans',
    boxShadow: 'black 0px 0px 0px',
    borderRadius: '10px',
},document.querySelector('.inputwrapper'))

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

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

//Styles for button elements
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);
}
/***********=/STYLING********** */

//Create SL INTEGRATION
var J = document.createElement("div");
J.id = "SL_INTEGRATION";
document.querySelector('#overlay').appendChild(J);

const SL_INTEGRATION = document.querySelector('#SL_INTEGRATION');
applyCSS({
    position: 'absolute',
    height: '100%',
    width: '25%',
    top: '0',
    right: '0',
    display: 'flex',
    flexDirection: 'column'
}, SL_INTEGRATION)

const templateStatusData = () => ({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: []}})

//All variables used in the components should be declared here
window["COMPONENT_STATE_VALUES"] = {
    options: {
        activePanel: "listing",
        activeRegion: "europe",
        modes: {
            team: true,
            survival: false,
            deathmatch: false,
            modding: false,
            invasion: false
        }
    },
    filteredSystems: [],
    statusReportActive: false,
    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: []
        }
    }
}


//Component class for easier maintaining. NOTE: All components must have only 1 parent element and components should be named using PascalCase 
class Component {
    /**
     * AUI HTML component. Make sure there is a wrapping parent element.
     * @param {String} ID - ID of the element 
     * @param {Function} HTML - Function that returns a template string representing innerHTML. Note that any conditions put on the wrapper element itself will never reflect upon using .refreshElement(), to reflect those changes use .hardRefreshElement()
     */
    constructor(ID, HTML) {
        this.ID = ID
        this.HTML = HTML
    }

    evaluate() {
        if (typeof this.HTML === 'function') {
            return this.HTML();
        } else {throw new Error(`Component class error: Second argument in Component instantiation is not a function ('${typeof this.HTML}'). ${typeof this.HTML === 'string' && "Hint: Put '() =>' before your template literal"}`)}
    }
    
    getElement() {
        const tempContainer = document.createElement("span");
        tempContainer.innerHTML = this.evaluate();
        tempContainer.children[0].setAttribute("id", `${this.ID}`)
        if (tempContainer.children.length > 1) {
            throw new Error(`Component class error: Components must have a parent element (Component ID: ${this.ID})`)
        }
    
        return tempContainer.innerHTML;
    }

    refreshElement() {
        //console.log(`Component refreshed: ${this.ID}`)
        try {
            let tempElement = document.createElement("span");
            tempElement.innerHTML = this.evaluate();
            document.querySelector(`#${this.ID}`).innerHTML = tempElement.children[0].innerHTML;
        } catch (ex) {console.error(`Couldn't refresh element with the ID of '${this.ID}': ` + ex)}
    }

    hardRefreshElement() {
        try {
            let tempElement = document.createElement("span");
            tempElement.innerHTML = this.evaluate();
            tempElement.children[0].setAttribute("id", `${this.ID}`);
            document.querySelector(`#${this.ID}`).outerHTML = tempElement.innerHTML;
        } catch (ex) {console.error(`Couldn't hardRefresh element with the ID of '${this.ID}': ` + ex)}
    }
}


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

let STATUS_TIMER = null;
window.statusReport = async (query) => {
    if (STATUS_TIMER) {return};
    COMPONENT_STATE_VALUES.statusReportActive = true;
    StatusReportModal.hardRefreshElement();
    STATUS_TIMER = setInterval(async () => {
        let raw = await (await fetch(`https://starblast.dankdmitron.dev/api/status/${query}`)).json();
        COMPONENT_STATE_VALUES.statusReportData = templateStatusData();
        COMPONENT_STATE_VALUES.statusReportData.name = raw.name;
        COMPONENT_STATE_VALUES.statusReportData.id = query.split('@')[0];
        for (let key of Object.keys(raw.players)) {
            let player = raw.players[key];
            COMPONENT_STATE_VALUES.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)
            })
            COMPONENT_STATE_VALUES.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 === COMPONENT_STATE_VALUES.statusReportData[num].hue) {
                    COMPONENT_STATE_VALUES.statusReportData[num].gems = team.crystals
                    COMPONENT_STATE_VALUES.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 < COMPONENT_STATE_VALUES.statusReportData[team].players.length; i++) {
                sPBS += Number(COMPONENT_STATE_VALUES.statusReportData[team].players[i].PBS.currentScore);
                sPPBS += Number(COMPONENT_STATE_VALUES.statusReportData[team].players[i].PBS.potentialScore);
                potentialOutput += COMPONENT_STATE_VALUES.statusReportData[team].players[i].PBS.energyOutput;
            }
            COMPONENT_STATE_VALUES.statusReportData[team].PBS = sPBS.toFixed(2);
            COMPONENT_STATE_VALUES.statusReportData[team].PPBS = sPPBS.toFixed(2);
            COMPONENT_STATE_VALUES.statusReportData[team].potentialOutput = potentialOutput;
            COMPONENT_STATE_VALUES.statusReportData[team].players = COMPONENT_STATE_VALUES.statusReportData[team].players.sort((a, b) => a.score - b.score).reverse();
        }
        StatusReportModal.refreshElement();
    }, 2500)
}

//These functions are attached to the window so listeners have access to them (Tampermonkey quirk)
window.switchActivePanel = (panel) => {
    COMPONENT_STATE_VALUES.options.activePanel = panel;
    ListingOrSettings.refreshElement();
    Settings.hardRefreshElement();
    Listing.hardRefreshElement();
}
window.switchActiveRegion = (region) => {
    COMPONENT_STATE_VALUES.options.activeRegion = region;
    Settings.refreshElement();
}
window.toggleMode = (mode) => {
    COMPONENT_STATE_VALUES.options.modes[mode] = !COMPONENT_STATE_VALUES.options.modes[mode];
    console.log(COMPONENT_STATE_VALUES.options)
    Settings.refreshElement();
}
window.closeStatusReport = () => {
    COMPONENT_STATE_VALUES.statusReportActive = false;
    clearInterval(STATUS_TIMER);
    STATUS_TIMER = null;
    StatusReportModal.hardRefreshElement();
}
document.querySelector('#play').addEventListener('click', () => {
    clearInterval(API_TIMER);
    clearInterval(STATUS_TIMER);
    SL_INTEGRATION.style.display = 'none';
});

//WARNING: refreshSL is a SLOW function. Use it only when absolutely neccessary.
const refreshSL = () => {
    SL_INTEGRATION.innerHTML = `
        ${StatusReportModal.getElement()}
        ${TitleAndCredits.getElement()}
        ${ListingOrSettings.getElement()}
        ${Listing.getElement()}
        ${Settings.getElement()}
    `
}

//COMPONENTS GO BELOW
let ListingOrSettings = new Component("SL_OPTIONS_WRAPPER", () => `<div id="SL_OPTIONS_WRAPPER" style="height:4%; width:100%;display: flex;">
<div id="SL_LISTING_REF" onclick="window.switchActivePanel('listing')"
    style="${COMPONENT_STATE_VALUES.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="${COMPONENT_STATE_VALUES.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>`)

let TitleAndCredits = new Component("TitleAndCredits", () => `<div 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 v${CURRENT_RUNNING_VERSION}
    </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>`)

let Settings = new Component("SLSettings", () => `<div id="SL_SETTINGS" style="box-sizing:border-box;padding:0.6vw;height:86%;width:100%;display: ${COMPONENT_STATE_VALUES.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>
        ${
            COMPONENT_STATE_VALUES.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>
        ${
            COMPONENT_STATE_VALUES.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>
        ${
            COMPONENT_STATE_VALUES.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>
        ${
            COMPONENT_STATE_VALUES.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>
        ${
            COMPONENT_STATE_VALUES.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>
        ${
            COMPONENT_STATE_VALUES.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>
        ${
            COMPONENT_STATE_VALUES.options.modes.modding
            ?
            `<svg onclick="window.toggleMode('modding')" 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('modding')" 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>
        ${
            COMPONENT_STATE_VALUES.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>`)

let Listing = new Component("ServerListing", () => `
    <div id="SL_LISTING" style="box-sizing:border-box;padding:0.6vw;height:86%;width:100%;display: ${COMPONENT_STATE_VALUES.options.activePanel == "listing" ? "flex" : "none"}; flex-direction: column; overflow-y: auto;background-color:#0b0b0b;border:1px solid #1a1a1a">
        ${
            COMPONENT_STATE_VALUES.filteredSystems.length === 0
            ?
            ""
            :
            COMPONENT_STATE_VALUES.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>`)

let StatusReportModal = new Component("StatusReportModal", () => `
<div style="position:fixed; top:0; left:0; width: 100%; height: 100%; display: ${COMPONENT_STATE_VALUES.statusReportActive ? "grid" : "none"}; 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>${COMPONENT_STATE_VALUES.statusReportData.name}</div>
                <div style="display:flex;gap:1vw;align-items:center;">
                    <a target="_blank" href="https://starblast.io/#${COMPONENT_STATE_VALUES.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;font-size:1.9vw;border:1px solid hsla(${COMPONENT_STATE_VALUES.statusReportData[CUR_TEAM].hue}, 100%, 50%, 1); background-color: hsla(${COMPONENT_STATE_VALUES.statusReportData[CUR_TEAM].hue}, 100%, 50%, 0.25); color: hsla(${COMPONENT_STATE_VALUES.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(COMPONENT_STATE_VALUES.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">${COMPONENT_STATE_VALUES.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">${COMPONENT_STATE_VALUES.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">${COMPONENT_STATE_VALUES.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;">${COMPONENT_STATE_VALUES.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;">${COMPONENT_STATE_VALUES.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;">${COMPONENT_STATE_VALUES.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>
                                ${
                                    COMPONENT_STATE_VALUES.statusReportData[CUR_TEAM].players.length === 0
                                    ?
                                    ""
                                    :
                                    COMPONENT_STATE_VALUES.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>
                        ${CUR_TEAM !== "team_3" ? `<div style="height:100%;width:1px;background-color:#1a1a1a"></div>` : ""}`)
                        }
                        return arr.join('')
                    })()
                }
            </div>
        </div>
</div>`)



//FUNCTIONS NOT RELEVANT TO MANIPULATING THE DOM GO BELOW
const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1);

const 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 POTENTIAL = {
    //          ECP    NON-ECP
    odyssey:   [2.5,   1.5],
    x3:        [1.7,   1  ],
    bastion:   [1.4,   0.4],
    aries:     [1  ,   0.3],
    barracuda: [1.75,  0.3],
}
const buildItem = (ecp, nonecp, eregen, potential) => ({ecp, nonecp, eregen, potential});
const SHIP_TABLE = {
    // The numbers on this table need massive improvement
    /**
     * ECP - Points when player is ecp
     * NONECP - Obvious
     * POTENTIAL - Highest points the player can achieve with current path (e.g 2.5 for an ecp playing furystar)
     * EREGEN - Obvious
    */
    //               ECP   NON-ECP    E-REGEN    POTENTIAL
    // Tier 7
    "701": buildItem(2.5 , 1.5,       150,       POTENTIAL.odyssey),
    "702": buildItem(1.7 , 1  ,       50 ,       POTENTIAL.x3),
    "703": buildItem(1.4 , 0.4,       100,       POTENTIAL.bastion),
    "704": buildItem(1   , 0.3,       175,       POTENTIAL.aries),
    // Tier 6
    "601": buildItem(1.2 , 0.5,       60 ,       POTENTIAL.odyssey),
    "602": buildItem(1.2 , 0.45,      50 ,       POTENTIAL.odyssey),
    "603": buildItem(0.9 , 0.25,      40 ,       POTENTIAL.x3),
    "604": buildItem(0.5 , 0.25,      48 ,       POTENTIAL.x3),
    "605": buildItem(0.9 , 0.25,      45 ,       POTENTIAL.x3),
    "606": buildItem(0.9 , 0.2 ,      45 ,       POTENTIAL.x3),
    "607": buildItem(1.75, 0.3 ,      0  ,       POTENTIAL.barracuda),
    "608": buildItem(0.5 , 0.2 ,      40 ,       POTENTIAL.bastion),
    // Tier 5
    "501": buildItem(1.05, 0.45,      60 ,       POTENTIAL.odyssey),
    "502": buildItem(0.75, 0.3,       40 ,       POTENTIAL.odyssey),
    "503": buildItem(0.2 , 0.1,       50 ,       POTENTIAL.x3),
    "504": buildItem(0.3 , 0.15,      45 ,       POTENTIAL.x3),
    "505": buildItem(0.1 , 0.05,      29 ,       POTENTIAL.x3),
    "506": buildItem(0.9 , 0.5,       50 ,       POTENTIAL.barracuda),
    "507": buildItem(0.15, 0.1,       35 ,       POTENTIAL.barracuda),
    // Tier 4
    "401": buildItem(0.3 , 0.05 ,     35  ,      POTENTIAL.odyssey),
    "402": buildItem(0.55, 0.25 ,     50  ,      POTENTIAL.odyssey),
    "403": buildItem(0.4 , 0.2  ,     55  ,      POTENTIAL.x3),
    "404": buildItem(0.3 , 0.15 ,     40  ,      POTENTIAL.x3),
    "405": buildItem(0.3 , 0.1  ,     30  ,      POTENTIAL.x3),
    "406": buildItem(0.05, 0    ,     25  ,      POTENTIAL.barracuda),
    // Tier 3
    "301": buildItem(0.2 , 0.07 ,     30  ,      POTENTIAL.odyssey),
    "302": buildItem(0.17, 0.05 ,     35  ,      POTENTIAL.x3),
    "303": buildItem(0.05, 0    ,     16  ,      POTENTIAL.x3),
    "304": buildItem(0.15, 0.05 ,     25  ,      POTENTIAL.barracuda),
    // Tier 2
    "201": buildItem(0.05, 0    ,     25  ,      POTENTIAL.odyssey),
    "202": buildItem(0.02, 0    ,     20  ,      POTENTIAL.x3),
    // Fly
    "101": buildItem(0   , 0    ,     10  ,      [0,0]),
}

const calculatePlayerScore = (type, ecp) => {
    return {
        currentScore: (Number(String(type).split('')[0]) / 15) + SHIP_TABLE[String(type)][ecp ? "ecp" : "nonecp"],
        potentialScore: (7 / 15) + SHIP_TABLE[String(type)]["potential"][+!ecp], // +!ecp is: First ecp is converted into a boolean and then inverted using !, then turned into a number using +, resulting in index 0 for ecp=true
        energyOutput: SHIP_TABLE[String(type)]["eregen"]
    }
}

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"
]


//This runs the SL integration. Do not touch
refreshSL();