Better Player Info 2

The best info Script!
安裝腳本 ?
Wrap lines
// ==UserScript==
// @name         Better Player Info 2
// @namespace    http://tampermonkey.net/
// @version      2.05
// @description  The best info Script!
// @author       Dikinx(Diamondkingx)
// @match        https://zombs.io/*
// @match        http://zombs.io/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=vscode.dev
// @grant        none
// ==/UserScript==

'use strict'

// Helper Functions----->

const log = console.log

function element(selector) {
    return document.querySelector(selector)
}

// Simplifies creation of new elements
function createElement(type, attributes = {}, properties = {}, creationOptions = {}) {
    const element = document.createElement(type, creationOptions)

    // Add all the attributes
    for (let attribute in attributes)
        element.setAttribute(attribute, attributes[attribute])

    // Add all the js properties
    for (let [property, value] of Object.entries(properties))
        element[property] = value

    element.appendTo = function (parent) {
        let parentElement

        if (typeof parent == "string")
            parentElement = element(parent)
        else if (parent instanceof HTMLElement)
            parentElement = parent
        else throw new TypeError("Unknown parent type.")

        if (!parentElement) throw new ReferenceError("Undefined Parent.")

        parentElement.append(this)
        return this
    }

    return element
}

// Elements created for the script to use
function defineScriptElement(name, type, attributes = {}, properties = {}, creationOptions = {}) {
    // Create the element and define it in the scriptElements object
    return main.scriptElements[name] = createElement(type, attributes, { name, ...properties }, creationOptions)
}

// A function that only fires once after a transition ends on an element
HTMLElement.prototype.onceontransitionend = function (callback) {
    if (typeof callback !== "function") throw new TypeError("'callback' must be a function.")

    const transitionEndHandler = () => {
        callback.bind(this)()
        this.removeEventListener("transitionend", transitionEndHandler)
    }

    this.addEventListener("transitionend", transitionEndHandler)
}

Math.lerp = function (a, b, c) {
    return a + (b - a) * c
}

Math.lerpAngles = function (a1, a2, c, returnUnitVec = false) {
    let x2 = Math.lerp(Math.cos(a1), Math.cos(a2), c),
        y2 = Math.lerp(Math.sin(a1), Math.sin(a2), c),
        mag

    if (returnUnitVec) {
        mag = Math.sqrt(x2 ** 2 + y2 ** 2)
        return { x: x2 / mag, y: y2 / mag, angle: Math.atan2(x2, y2) }
    }

    return Math.atan2(y2, x2)
}

// function toIndianNumberSystem(string = '0') {
//     if (string.length <= 3) return string;

//     const firstPartLength = (string.length - 3) % 2 === 0 ? 2 : 1
//     const firstPart = string.slice(0, firstPartLength)
//     const rest = string.slice(firstPartLength, -3)
//     const lastThree = string.slice(-3)

//     const formattedRest = rest.match(/.{2}/g)?.join(',') || ''

//     return firstPart + (formattedRest ? ',' + formattedRest : '') + ',' + lastThree
// }


function toInternationalNumberSystem(number = '0') {
    if (typeof number == "string") return number
    if (number.length <= 3) return number
    let rest = number.slice(0, number.length % 3)
    let groups = number.slice(rest.length).match(/.{3}/g) || []
    return (rest ? rest + ',' : '') + groups.join(',')
}

function toLargeUnits(number = 0) {
    if (typeof number == "string") return number
    if (number < 1_000) return number.toString()

    const units = ['k', 'mil', 'bil', 'tri']
    const unitIndex = Math.floor(Math.log10(number) / 3)

    if (unitIndex >= units.length) return number.toLocaleString()

    const scaledNumber = number / Math.pow(10, unitIndex * 3)

    return `${scaledNumber.toFixed(2) / 1}${units[unitIndex - 1]}`
}


// Main css----->

const css = `
    :root {
        --background-dark: rgb(0 0 0 / .6);
        --background-light: rgb(0 0 0 / .4);
        --background-verylight: rgb(0 0 0 / .2);
        --background-purple: rgb(132 115 212 / .9);
        --background-yellow: rgb(214 171 53 / .9);
        --background-green: rgb(118 189 47 / .9);
        --background-healthgreen: rgb(100 161 10);
        --background-orange: rgb(214 120 32 / .9);
        --background-red: rgb(203 87 91 / .9);
        --text-light: rgb(255 255 255 / .6);
        --text-verylight: #eee;
    }

    #mainMenuWrapper {
        display: grid;
        grid-template-rows: repeat(2, auto);
        grid-template-columns: repeat(3, auto);
        width: max-content;
        height: max-content;
        position: absolute;
        padding: .625rem;
        scale: 0;
        opacity: 0;
        inset: 0;
        z-index: 11;
        border-radius: .25rem;
        pointer-events: none;
        transition: opacity .35s ease-in-out, scale .55s ease-in-out;
    }

    #mainMenuWrapper.open {
        scale: 1;
        opacity: 1;
    }

    #mainMenuWrapper.moveTransition {
        transition: all .35s ease-in-out, opacity .35s ease-in-out, scale .55s ease-in-out;
    }

    #mainMenuWrapper.pinned {
        z-index: 16;
    }

    #mainMenuWrapper #mainMenuTagsContainer {
        display: grid;
        grid-template-columns: auto auto;
        align-items: center;
        justify-items: center;
        gap: .25rem;
        width: max-content;
        height: max-content;
        padding: inherit;
        position: relative;
        grid-area: 1 / 2;
        inset: 0;
        margin-bottom: .5rem;
        background: var(--background-verylight);
        border-radius: inherit;
        transition: all .35s ease-in-out;
    }

    #mainMenuWrapper :is(#mainMenuTagsContainer[data-tagscount="1"], #mainMenuTagsContainer:empty) {
        gap: 0;
    }

    #mainMenuWrapper #mainMenuTagsContainer:empty {
        padding: 0;
        margin-bottom: 0;
        background: transparent;
        transition-delay: 2s;
    }

    #mainMenuWrapper .tag {
        width: max-content;
        height: max-content;
        padding: 0rem 0rem;
        position: relative;
        opacity: 0;
        font-family: 'Hammersmith One', sans-serif;
        font-size: 0px;
        color: var(--text-verylight);
        background: var(--background-verylight);
        border-radius: inherit;
        transition: all .55s cubic-bezier(.65, .05, .19, 1.02), opacity .65s cubic-bezier(.65, .05, .19, 1.02);
    }

    #mainMenuWrapper .tag.neutral {
        color: color-mix(in srgb, var(--background-green) 10%, #eee);
        background: var(--background-green);
    }

    #mainMenuWrapper .tag.warning {
        color: color-mix(in srgb, var(--background-yellow) 10%, #eee);
        background: var(--background-yellow);
    }

    #mainMenuWrapper .tag.error {
        margin: 0;
        color: color-mix(in srgb, var(--background-red) 10%, #eee);
        background: var(--background-red);
    }

    #mainMenuWrapper .tag.active {
        padding: .2rem .4rem;
        opacity: 1;
        font-size: 18px;
    }

    #mainMenuWrapper #mainMenuFeatureContainer {
        display: flex;
        flex-direction: column;
        gap: .25rem;
        height: max-content;
        position: relative;
        grid-area: 2 / 1;
        margin-right: .5rem;
        border-radius: inherit;
        pointer-events: all;
    }

    #mainMenuWrapper #mainMenuFeatureContainer .featureButton {
        width: 2.25rem;
        height: 2.25rem;
        padding: .625rem;
        scale: 1;
        font-size: 17px;
        color: var(--background-light);
        background: var(--background-verylight);
        outline: none;
        border: none;
        border-radius: inherit;
        cursor: pointer;
        transition: background .45s ease-in-out, all .35s ease-in-out, scale .25s cubic-bezier(0, .16, .79, 1.66);
    }

    #mainMenuWrapper #mainMenuFeatureContainer button:hover {
        background: var(--background-light);
    }

    #mainMenuWrapper #mainMenuFeatureContainer button.light {
        scale: .922;
        font-size: 14px;
        color: var(--text-verylight);
        background: var(--background-light);
    }

    #mainMenuWrapper #otherMenuTogglesContainer {
        display: flex;
        flex-direction: column;
        align-self: flex-end;
        gap: 0rem;
        width: max-content;
        height: max-content;
        padding: 0;
        position: relative;
        grid-area: 2 / 3;
        inset: 0 0 0 -350%;
        margin-left: 0rem;
        opacity: 0;
        background: var(--background-verylight);
        border-radius: .25rem;
        pointer-events: none;
        transition: all .35s ease-out, left .4s cubic-bezier(.5, 0, .5, 0), padding .35s ease-in;
    }

     #mainMenuWrapper #otherMenuTogglesContainer.open {
        gap: .25rem;
        left: 0%;
        padding: .625rem;
        margin-left: .5rem;
        opacity: 1;
        pointer-events: all;
        transition: all .35s ease-in, left .4s cubic-bezier(.5, 1, .5, 1), padding .35s ease-out, pointer-events 1ms linear .5s;
    }

    #mainMenuWrapper #otherMenuButton {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 2rem;
        height: 2rem;
        position: relative;
        left: 100%;
        translate: -100% 0;
        z-index: 1;
        font-family: 'Hammersmith One', sans-serif;
        font-size: 15px;
        color: var(--text-light);
        background: var(--background-verylight);
        border: none;
        border-radius: .25rem;
        outline: none;
        transition: color .15s ease-in-out, width .35s ease-in-out, background .35s ease-in-out, transform .35s ease-in-out, translate .45s ease-in-out, left .45s ease-in-out;
        cursor: pointer;
    }
    
    #mainMenuWrapper .toggleButton {
        width: 0rem;
        height: 0rem;
        padding: 0;
        position: relative;
        opacity: 1;
        font-size: 0;
        color: var(--text-light);
        background: var(--background-verylight);
        border: none;
        border-radius: inherit;
        outline: none;
        transition: all .35s ease-in-out, color .15s ease-in-out;
        cursor: pointer;
    }

    #mainMenuWrapper :is(#otherMenuButton, .toggleButton):is(:hover, .dark):not(.disabled) {
        color: var(--text-verylight);
        background: var(--background-light);
    }

    #mainMenuWrapper #otherMenuButton.rotated {
        transform: rotateY(180deg);
    }

    #mainMenuWrapper #otherMenuButton.moved {
        left: 0%;
        translate: 0%;
    }

    #mainMenuWrapper .toggleButton.dark {
        color: var(--text-verylight);
        background: var(--background-light);
    }

    #mainMenuWrapper .toggleButton.disabled {
        opacity: .65;
        cursor: not-allowed;
    }

    #mainMenuWrapper #otherMenuTogglesContainer.open > .toggleButton {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 15px;
    }

    #mainMenu {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        width: 22.5rem;
        height: 14rem;
        position: relative;
        grid-area: 2 / 2;
        inset: 0;
        background: var(--background-light);
        border-radius: .25rem;
        padding: .625rem;
        pointer-events: all;
        transition: width .35s ease-in-out, height .35s ease-in-out;
    }

    #mainMenu :is(span, p)  {
        display: inline-block;
        height: max-content;
        line-height: 100%;
    }

    #mainMenu #mainMenuBody {
        width: 100%;
        height: 100%;
        position: relative;
        border-radius: inherit;
    }

    #mainMenuBody .contentHolder {
        width: 100%;
        height: 100%;
        position: absolute;
        translate: -100% 0;
        z-index: 0;
        opacity: 0;
        border-radius: inherit;
        transition: opacity .45s cubic-bezier(.03, .02, .21, .78), translate .55s cubic-bezier(0, 1, 1, 1);
        pointer-events: none;
    }

    #mainMenuBody .contentHolder.opaque {
        opacity: 1;
        transition: opacity .45s cubic-bezier(.03, .02, .78, .21), translate .55s cubic-bezier(0, 1, 1, 1)
        pointer-events: all;
    }

    #mainMenuBody .contentHolder.moved {
        translate: 0% 0%;
        pointer-events: all;
    }

    #mainMenuBody .contentHolder.moved.opaque {
        z-index: 100;
    }

    #mainMenu #header {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    #mainMenu #entityName {
        display: block;
        margin: 0;
        color: #eee;
        font-size: 24px;
    }

    #mainMenu #entityUID {
        display: block;
        margin: 0;
        color: var(--text-light);
        font-size: 18px;
        letter-spacing: .1rem;
    }

    #mainMenu #entityHealthBarsContainer {
        display: flex;
        justify-self: end;
        align-items: center;
        justify-content: flex-end;
        gap: .25rem;
        width: 100%;
        height: 100%;
        grid-area: 1 / 2 / 3;
    }

    #mainMenu .entityHealth {
        width: 0rem;
        height: 2.125rem;
        padding: .25rem 0 .25rem 0;
        position: relative;
        opacity: 1;
        background: var(--background-verylight);
        border-radius: .25rem;
        transition: all .35s ease-in-out, opacity .35s ease-in;
    }

   #mainMenu .entityHealth::before {
        content: attr(data-name);
        display: block;
        width: max-content;
        height: max-content;
        position: absolute;
        inset: 50% .5rem;
        translate: 0% -50%;
        opacity: 0;
        font-family: 'Hammersmith One', sans-serif;
        color: var(--text-verylight);
        font-size: 12px;
        text-shadow: 0 0 1px rgb(0 0 0 / .8);
        transition: all .15s ease-in;
   }

   #mainMenu .entityHealth.visible {
        width: min(6.25rem, 100%);
        padding-inline: .25rem;
        opacity: 1;
   }

   #mainMenu .entityHealth.visible::before {
        opacity: 1;
   }

    #mainMenu .entityHealthBar {
        width: 0%;
        height: 100%;
        background: var(--background-healthgreen);
        border-radius: inherit;
        transition: width .35s ease-in-out;
    }

    #mainMenu #body {
        width: 100%;
        height: max-content;
        padding: .625rem;
        border-radius: inherit;
        background: var(--background-verylight);
    }

    #mainMenu #body.infoMenuBody {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        row-gap: .3rem;
        margin-top: 1rem;
    }

    #mainMenu .entityInfo {
        margin: 0;
        opacity: .33;
        font-family: 'Open Sans', sans-serif;
        font-size: 14px;
        color: var(--text-light);
        transition: all .35s ease-in-out;
    }

    #mainMenu .entityInfo.visible {
        opacity: 1;
    }

    #mainMenu .entityInfo strong {
        color: var(--text-verylight);
    }

    #mainMenu .entityInfo span {
        display: inline-block;
    }

    #mainMenu #body.spectateMenuBody {
        width: 100%;
        height: 400%;
        max-height: 100%;
        overflow: hidden;
        border-radius: inherit;
    }

    #mainMenu .spectateButton {
        width: 100%;
        height: 100%;
        padding-bottom: 0rem;
        border-radius: inherit;
        opacity: 0;
        transition: opacity .35s ease-in-out, height .45s ease-in-out, padding .45s ease-in-out;
    }

    #mainMenu .spectateButton button {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        width: 100%;
        height: 100%;
        padding: .625rem;
        scale: 1;
        font-size: 2rem;
        font-family: 'Hammersmith One';
        color: var(--text-verylight);
        background: var(--background-verylight);
        border: none;
        border-radius: inherit;
        outline: none;
        overflow: hidden;
        pointer-events: inherit;
        cursor: pointer;
        transition: background .35s ease-in-out, scale .35s cubic-bezier(0, .16, .79, 1.66);
    }

    #mainMenu .spectateButton button:hover {
        background: var(--background-light);
    }

    #mainMenu .spectateButton button:active {
        scale: .95;
    }

    #mainMenu #body.spectateMenuBody .spectateButton.visible{
        opacity: 1
    }

    #mainMenu #body.spectateMenuBody[data-playercount="1"] .spectateButton.visible{
        height: 100%;
    }

    #mainMenu #body.spectateMenuBody[data-playercount="2"] .spectateButton.visible{
        height: 50%;
    }

    #mainMenu #body.spectateMenuBody[data-playercount="3"] .spectateButton.visible{
        height: 33.33%;
    }

    #mainMenu .spectateMenuBody .wrapper {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto auto;
        gap: .4rem 0rem;
        width: 100%;
        height: 90%;
        border-radius: inherit;
        transition: all .45s ease-in-out;
    }

    #mainMenu .spectateButton span.name {
        justify-self: flex-start;
        align-self: center;
        max-width: min(18ch, 100%);
        text-overflow: ellipsis;
        overflow: hidden;
        transition: all .35s ease-in-out;
    }

    #mainMenu .spectateButton[data-partyposition="0"] .tag.position {
        background: var(--background-purple);
        color: color-mix(in srgb, var(--background-purple) 10%, #eee);
    }

    #mainMenu .spectateButton[data-partyposition="1"] .tag.position {
        background: var(--background-yellow);
        color: color-mix(in srgb, var(--background-yellow) 10%, #eee)
    }

    #mainMenu .spectateButton[data-partyposition="2"] .tag.position {
        background: var(--background-green);
        color: color-mix(in srgb, var(--background-green) 10%, #eee)
    }

    #mainMenu .spectateButton[data-partyposition="3"] .tag.position {
        background: var(--background-orange);
        color: color-mix(in srgb, var(--background-orange) 10%, #eee)
    }

    #mainMenu :is(#body.spectateMenuBody[data-playercount="2"]) .wrapper {
        grid-template-columns: repeat(2, max-content);
        grid-template-rows: 1fr 1fr;
        gap: 0rem .2rem;
        height: 100%;
    }

    #mainMenu :is(#body.spectateMenuBody[data-playercount="2"], #body.spectateMenuBody[data-playercount="3"]) .wrapper span.name {
        justify-self: flex-start;
        grid-area: 1 / 4 / 1 / 1;
        font-size: 1.25rem;
    }

    #mainMenu :is(#body.spectateMenuBody[data-playercount="2"], #body.spectateMenuBody[data-playercount="3"]) .wrapper .tag {
        font-size: 12px;
    }

    #mainMenu #body.spectateMenuBody[data-playercount="3"] .wrapper {
        grid-template-columns: 1fr repeat(2, max-content);
        grid-template-rows: 1fr;
        gap: 0rem .2rem;
        height: 100%;
    }

    #mainMenu #body.spectateMenuBody[data-playercount="3"] .wrapper span.name{
        grid-area: 1 / 1;
    }

    #entityFollower {
        position: absolute;
        translate: -50% -50%;
        opacity: 0;
        font-size: 22px;
        transition: opacity .35s ease-in-out, font-size .35s ease-in-out;
    }

    #entityFollower.visible {
        opacity: 1;
    }

    #entityFollower i {
        display: block;
        width: max-content;
        height: max-content;
        position: absolute;
        inset: 50%;
        translate: -50% -50%;
        rotate: 45deg;
        color: var(--text-light);
        -webkit-text-stroke: .12em rgb(42 42 42 / .9);
    }
    `

// Create the element and append it on script's initialization
const style = createElement("style")
style.append(document.createTextNode(css))

//Main Constants----->

// Main controller constant, and it's functions
const main = {
    settings: {
        targetableEntityClass: ["PlayerEntity", "Prop", "Npc"],
        mouseCollisionCheckFPS: 24,
        menuUpdateFPS: 20,
        backgroundMenuUpdateFPS: 10,
        activationKey: "control",
        paused: false,
    },
    gameElements: {},
    scriptElements: {},
    cursor: {
        x: innerWidth / 2,
        y: innerHeight / 2
    },
    controls: {
        listenedKeys: ["control"],
    },
    menu: {
        mainMenuName: "infoMenu",
        navigationStack: [],
        features: {},
        pinned: false,
    },
    // This data is not in the game but on the wiki
    gameData: {
        towers: {
            SlowTrap: {
                slowAmount: [40, 45, 50, 55, 60, 65, 70, 70]
            },
            Harvester: {
                attackSpeed: [1500, 1400, 1300, 1200, 1100, 1000, 900, 800]
            },
            MeleeTower: {
                attackSpeed: [400, 333, 284, 250, 250, 250, 250, 250]
            },
            BombTower: {
                attackSpeed: [1000, 1000, 1000, 1000, 1000, 1000, 900, 900]
            },
            MagicTower: {
                attackSpeed: [800, 800, 704, 602, 500, 400, 300, 300]
            }
        },
        pets: {
            PetCARL: {
                speed: [15, 16, 17, 17.5, 17.5, 18.5, 18.5, 19],
            },
            PetMiner: {
                speed: [30, 32, 34, 35, 35, 37, 37, 38],
                resourceGain: [1, 1, 2, 2, 3, 3, 4, 4]
            },
        }
    },
    inGame: false,
}

// This proxy allows tracking of value additions or removals from the stack.
const navigationStackProxyHandler = {
    get(stack, property) {
        const value = stack[property]

        // If the accessed property is a function, wrap it to track stack modifications
        if (typeof value == "function") {
            return function (...args) {
                const returnValue = value.apply(stack, args)

                // Invoke the appropriate callback when a value is added or removed
                if (property == "push") stack.onAddCallback?.()
                else if (property == "pop") stack.onRemoveCallback?.()

                return returnValue
            }
        }
        // Otherwise, return the accessed value
        return value
    }
}
main.menu.navigationStack = new Proxy(main.menu.navigationStack, navigationStackProxyHandler)

// Define the function to set a new active menu
main.menu.setActiveMenu = function (name, onActivatedArgs = [], forceIntoNavigationStack = false) {
    if (name == this.activeMenu)
        return

    // Push it to the navigationStack to enable navigation back if necessary
    if ((name !== this.mainMenuName && name !== this.navigationStack[this.navigationStack.length - 1]) || forceIntoNavigationStack)
        this.navigationStack.push(name)

    const prevMenuObject = this.activeMenuObject,
        foundMenu = this.activeMenuObject = Menu.getActiveMenuObject(name)

    if (!foundMenu)
        throw new SyntaxError(`Cannot find Menu ${name}.\nAvailable Menus: ${Menu.getAvailableMenuNames().join(', ')}`)

    // Activate the new menu and pass any arguments for when a menu is activated
    foundMenu.activate(...onActivatedArgs)

    foundMenu.toggleButton?.setState(1, 0)
    this.activeMenu = name

    if (!prevMenuObject)
        return

    prevMenuObject.hideAllTags()
    prevMenuObject.toggleButton?.setState(0, 0)
}

// Define the function to add a new fature button
main.menu.defineFeature = function (name, icon, activationType, ...callbacks) {
    const buttonElement = createElement("button", { class: `featureButton ${activationType}` }, {
        active: false,
        innerHTML: `<i class="${icon}"></i>`,
        setState(light) {
            this.classList.toggle("light", light)
        },
    }).appendTo(main.scriptElements.mainMenuFeatureContainer)

    // Bind all calbacks to refer to the buttonElement
    callbacks = callbacks.map(callback => callback.bind(buttonElement))

    switch (activationType) {
        case "toggle": {
            buttonElement.onclick = function (event) {
                this.setState(this.active = !this.active)
                callbacks[0]?.(event)
            }
            // This is to prevent the player from attacking
            buttonElement.onmousedown = function (event) {
                event.stopImmediatePropagation()
            }
        }
            break
        case "hold": {
            buttonElement.onmousedown = function (event) {
                event.stopImmediatePropagation()
                this.setState(this.active = true)
                callbacks[0]?.(event)
            }
            addEventListener("mouseup", function (event) {
                buttonElement.setState(buttonElement.active = false)
                callbacks[1]?.(event)
            })
        }
            break
        case "click": {
            buttonElement.onmouseenter = function (event) {
                this.setState(this.active = true)
                callbacks[1]?.(event)
            }
            buttonElement.onmouseleave = function (event) {
                this.setState(this.active = false)
                callbacks[2]?.(event)
            }
            buttonElement.onclick = callbacks[0]
            // This is to prevent the player from attacking
            buttonElement.onmousedown = function (event) {
                event.stopImmediatePropagation()
            }
        }
    }

    main.menu.features[name] = {
        name,
        activationType,
        icon,
        element: buttonElement,
        callbacks,
    }
}

// Define the 'main' variable in global scope for accessibility from the console
window.bpi2 = main

// Classes----->

// Define the menu class
class Menu {
    // Store all defined menus
    static DefinedMenus = []

    static getActiveMenuObject(activeMenuName) {
        return this.DefinedMenus.find(menu => menu.name === activeMenuName)
    }

    static getAvailableMenuNames() {
        return Menu.DefinedMenus.map((menu) => {
            return menu.name
        })
    }

    static createContentHolder(template) {
        const contentHolder = createElement("div",
            {
                class: "contentHolder"
            },
            {
                innerHTML: template,
                setState(moved, opaque) {
                    this.classList.toggle("moved", moved)
                    this.classList.toggle("opaque", opaque)
                },
            }).appendTo(main.scriptElements.mainMenuBody)
        return contentHolder
    }

    constructor(name, template, hasToggleButton = true, toggleButtonIcon, toggleButtonIndex = 0, isState = false) {
        if (Menu.getAvailableMenuNames().includes(name)) throw new SyntaxError(`Duplicate Menu name, ${name}.`)
        this.name = name
        this.template = template
        this.hasToggleButton = hasToggleButton
        this.isState = isState
        this.active = false
        this.type = "empty"

        if (!isState) {
            this.activeState = "none"
            this.hasStates = false
            this.tags = []
            this.canUpdateTags = false
        }

        this.defineMainElements(template)

        if (hasToggleButton && !isState)
            this.defineToggleButton(toggleButtonIcon, toggleButtonIndex)

        Menu.DefinedMenus.push(this)
    }
    // Defines the main header, body and footer elements of a given menu
    defineMainElements(template) {
        this.contentHolder = Menu.createContentHolder(template)
        this.header = this.contentHolder.querySelector("#header")
        this.body = this.contentHolder.querySelector("#body")
        this.footer = this.contentHolder.querySelector("#footer")
    }
    // Defines the toggle button for the menu
    defineToggleButton(icon, index = 0) {
        const toggleButtonContainer = main.scriptElements.otherMenuTogglesContainer
        this.toggleButton = toggleButtonContainer.addToggleButton(this.name,
            () => {
                if (main.menu.activeMenu == this.name)
                    return
                main.menu.setActiveMenu(this.toggleButton.dataset.menuname)
                //Wait a bit so the user is ready for the change
                this.contentHolder.onceontransitionend(() => toggleButtonContainer.setState(0))
            }, icon, index)
    }

    initStates() {
        this.definedStates = []
        this.stateObject = this.stateMenu = this.stateContentHolder = null

        this.defineState = function (name, menu, callback = () => { }) {
            if (!menu.isState) throw new TypeError("A stateMenu should be a state. Define the menu with isState true.")
            this.definedStates.push({ name, menu, callback })
        }

        this.showState = function (stateObject) {
            if (stateObject) this.contentHolder.setState(0, 0)
            else return this.hideAllStates()

            this.definedStates.forEach(state => {
                if (state.menu.active = state.name == stateObject.name)
                    state.menu.contentHolder.setState(1, 1)
                else state.menu.contentHolder.setState(0, 0)
            })

            this.resizeMenuCallback?.()
            this.onStateChangeCallback?.()
        }

        this.hideAllStates = function () {
            this.definedStates.forEach(state => state.menu.contentHolder.setState(0, 0))
            this.contentHolder.setState(1, 1)

            this.resizeMenuCallback?.()
            this.onStateChangeCallback?.()
        }

        this.setState = function (value) {
            // Check if the state is already set
            if (value == this.activeState)
                return

            // Find the new state 
            const foundState = this.definedStates.find(state => state.name == value)

            // If no state is found then return back to the empty state
            if (!foundState)
                return this.hideAllStates()

            // Update the info about current state
            this.stateObject = foundState
            this.stateMenu = this.stateObject.menu
            this.stateContentHolder = this.stateMenu.contentHolder

            // Update current state name only after everything is done properly
            this.activeState = value
            // Show the state
            return this.showState(foundState)
        }

        this.hasStates = true
        return this
    }

    activate() {
        if (this.active) return
        setTimeout(() => this.canUpdateTags = true, 1200);

        // If there is an active state, display its content; otherwise, display the default content.
        // We can't rely on the showState function because states might not be initialized.
        (this.activeState != "none" ? this.stateContentHolder : this.contentHolder).setState(1, 1)

        // Iterate through defined menus to update their states
        Menu.DefinedMenus.forEach(menu => {
            // Deactivate the other menus
            if (menu.name != this.name && menu.name != this.stateMenu?.name)
                menu.deactivate()
        })

        // Execute the callback function when the menu is activated, passing any arguments from setActiveMenu
        this.onActivatedCallback?.(...arguments)
        this.resizeMenuCallback?.()
        this.active = true
    }

    deactivate() {
        (this.hasStates && this.activeState != "none" ? this.stateContentHolder : this.contentHolder).setState(0, 0)
        this.active = this.canUpdateTags = false
    }

    defineTag(name, type, callback, removalFrequency = 0) {
        const tagElement = createElement("span",
            {
                class: `tag ${type}`,
                "data-name": name.replaceAll(" ", ""),
                "data-removalfrequency": removalFrequency
            },
            {
                textContent: name
            })

        callback = callback.bind(this)

        const tagObject = {
            name,
            type,
            callback,
            removalFrequency,
            element: tagElement,
            state: "closed",
            show() {
                // return if tag is already open
                if (this.state === "open") return

                const container = main.scriptElements.mainMenuTagsContainer
                let inserted = false

                // This code arranges tags according to their likelihood of being 'shown'.
                if (container.childElementCount) {
                    for (let element of Array.from(container.children)) {
                        if (this.removalFrequency <= element.dataset.removalfrequency || !element.classList.contains("active")) {
                            element.insertAdjacentElement("beforebegin", this.element)
                            inserted = true
                            break
                        }
                    }
                }

                // 'inserted' will only be false when no tag is in the tagsContainer, hence we can just append this tag
                if (!inserted)
                    container.append(this.element)

                // Update this attribute to get the attribute from css and change the styling
                container.dataset.tagscount = parseInt(container.dataset.tagscount) + 1

                // Use requestAnimationFrame for optimal DOM update timing, and to be stop any visual glitches
                requestAnimationFrame(() => this.element.classList.add("active"))

                this.state = "open"
            },
            hide() {
                // Return if tag is closed or the element doesn't exist
                if (this.state === "closed" || this.state === "closing" || !this.element)
                    return

                const container = main.scriptElements.mainMenuTagsContainer

                // Remove the 'active' class to hide the tag
                this.element.classList.remove("active")
                // Update the tag count attribute in the container
                container.dataset.tagscount = parseInt(container.dataset.tagscount) - 1

                // Remove the element from DOM after transition ends
                this.element.onceontransitionend(() => {
                    this.element.remove()
                    this.state = "closed"
                })

                this.state = "closing"
            }
        }

        this.tags.push(tagObject)
    }

    removeTag(name) {
        // Find the tag with the specified display name
        const tag = this.tags.find(tag => tag.name == name)

        if (!tag) return

        tag.hide()

        // Filter out the tag from the tags array
        this.tags = this.tags.filter(tag => tag.name != name)
    }

    hideAllTags() {
        this.tags.forEach(tag => tag.hide())
    }

    setUpdateCallback(callback) {
        this.updateCallback = callback
    }

    setBackgroundUpdateCallback(callback) {
        this.backgroundUpdateCallback = callback
    }

    setOnActivatedCallback(callback) {
        this.onActivatedCallback = callback
    }

    setOnStateChangeCallback(callback) {
        this.onStateChangeCallback = callback
    }

    setResizeMenuCallback(callback) {
        this.resizeMenuCallback = callback
    }

    updateTags(forceUpdate) {
        // Exit early if tag updates are not allowed and no force update is requested
        if (!this.canUpdateTags && !forceUpdate) return

        // Iterate through all tags
        this.tags.forEach(tag => {
            // Execute the callback function of the tag
            if (tag.callback())
                return tag.show() // Show the tag if callback returns true

            // Hide the tag if callback returns false
            tag.hide()
        })
    }

    updateStates(forceUpdate) {
        // Exit early if there are no states defined and no force update is requested
        if (!this.hasStates && !forceUpdate) return

        // Iterate through defined states
        for (let state of this.definedStates) {
            // Execute the callback function of the state
            if (state.callback()) {
                this.setState(state.name)
                return this.stateMenu.update()
            }
        }

        // Hide all states if no state is set
        if (this.activeState != "none") {
            this.activeState = "none"
            this.hideAllStates()
        }
    }

    update() {
        this.updateTags()

        // Check if any state is updated
        if (this.updateStates())
            return

        // Execute the updateCallback function if no state is updated
        this.updateCallback?.()
    }
}

class InfoMenu extends Menu {
    static Template = `
            <section id="header">
            <h2 id="entityName" data-forattr="name">Entity</h2>
            <h3 id="entityUID" data-forattr="uid">UID: <span>9817265</span></h3>
            <div id="entityHealthBarsContainer"></div>
            </div>
            </section>
            <section id="body" class="infoMenuBody"></section>`

    constructor(name, updatedAttributes = [], hasToggleButton = true, toggleButtonIcon, isState = false) {
        super(name, InfoMenu.Template, hasToggleButton, toggleButtonIcon, 0, isState)
        this.type = "info"
        // Make sure the place or the order in which attributes are presented can be controlled
        this.updatedAttributes = updatedAttributes.sort((a, b) => { return (a.index || 0) < (b.index || 0) ? -1 : 1 })
        this.infoElements = {}
        this.healthBars = []
        this.header.healthBarsContainer = this.header.querySelector("#entityHealthBarsContainer")
        this.parseHeaderElements()
        this.parseUpdatedAttributes()
    }

    createInfoElement(name, referenceName, activationCondition = () => { return true }, value, isVisible = true, index = 0, type = "text") {
        const infoElement = createElement("p",
            {
                class: "entityInfo" + (isVisible ? " visible" : "")
            },
            {
                innerHTML: `<span>${name}:</span> <strong>${0}</strong>`,
                name,
                referenceName,
                activationCondition,
                value,
                type,
                isVisible,
                index,
                setValue(value) {
                    let toSetValue = value ?? null
                    // if (this.type == "number" && toSetValue != null) {
                    //     switch (this.displayNumberSystem) {
                    //         case 0:
                    //             toSetValue = toLargeUnits(toSetValue)
                    //             break;
                    //         case 1:
                    //             toSetValue = toInternationalNumberSystem(new String(Math.floor(toSetValue)))
                    //             break
                    //     }
                    // }
                    return this.querySelector("strong").textContent = toSetValue
                }
            }).appendTo(this.body)

        if (type == "number") {
            infoElement.displayNumberSystem = 0
            infoElement.addEventListener("mousedown", () => infoElement.displayNumberSystem = (infoElement.displayNumberSystem + 1) % 3)
        }

        this.infoElements[name] = infoElement
    }

    createHealthBar(name, currentValRef, maxValRef, activationCondition = () => { return true }, barColor = getComputedStyle(document.body).getPropertyValue("--background-healthgreen"), isVisible = true) {
        const healthBar = createElement("div",
            {
                class: `entityHealth` + (isVisible ? " visible" : ""),
                'data-name': name,
            },
            {
                innerHTML: `<div class="entityHealthBar"></div>`,
                currentValRef,
                maxValRef,
                activationCondition,
                barColor,
                isVisible
            }).appendTo(this.header.healthBarsContainer)

        this.healthBars.push(healthBar)

        healthBar.bar = healthBar.querySelector("div")
        healthBar.bar.style.background = barColor
    }

    parseHeaderElements() {
        for (let child of this.header.children)
            this.infoElements[child.dataset.forattr] = child
    }

    parseUpdatedAttributes() {
        this.updatedAttributes.forEach(attribute => {
            if (attribute.isBar === true)
                return this.createHealthBar(attribute.name, attribute.currentValRef, attribute.maxValRef, attribute.activationCondition, attribute.barColor, attribute.isVisible)
            this.createInfoElement(attribute.name, attribute.referenceName, attribute.activationCondition, attribute.value, attribute.isVisible, attribute.index, attribute.type)
        })
    }

    updateInfo(entity) {
        let element
        for (let property in this.infoElements) {
            element = this.infoElements[property]

            // Set value if the element has a setValue function and call it with the corresponding entity property
            if (element.classList.contains("entityInfo")) {
                element.classList.toggle("visible", element.activationCondition(entity))

                if (element.value)
                    element.setValue(typeof element.value == "function" ? element.value(entity) : element.value)
                else element.setValue(entity.targetTick[typeof element.referenceName == "function" ? element.referenceName() : element.referenceName])

                continue
            }


            switch (element.dataset.forattr) {
                // Set element's text content to entity's name or model if name is not available
                case "name":
                    element.textContent = entity.targetTick.name || entity.targetTick.model
                    break
                // Set the text content of the span element to the entity's UID
                case "uid":
                    element.querySelector("span").textContent = entity.targetTick.uid
                    break
            }
        }

        let percentage
        for (let healthBar of this.healthBars) {
            percentage = entity.targetTick[healthBar.currentValRef] / entity.targetTick[healthBar.maxValRef] * 100
            healthBar.classList.toggle("visible", healthBar.activationCondition(entity))
            healthBar.bar.style.width = `${percentage}%`
        }
    }

    updateCallback() {
        const activeEntity = main.menu.activeEntity

        if (activeEntity)
            this.updateInfo(activeEntity)
    }

    resizeMenuCallback() {
        // Hardcoded min size(.9) for now
        main.scriptElements.mainMenu.resize(.9 + (this.activeState != "none" && this.stateMenu.updatedAttributes ? this.stateMenu : this).updatedAttributes.length / 36)
    }
}

// Other Handler Functions----->
function checkMouseCollisionWithEntity() {
    // Check if the activation key is pressed down
    if (main.controls[main.settings.activationKey + "Down"] !== true || (main.menu.activeMenu != main.menu.mainMenuName && main.scriptElements.mainMenuWrapper.open))
        return

    let entityObj, entityWidth, entityHeight, entityTick, posScreen, distX, distY, circleRadius, dist

    // Iterate through each entity in the world
    Object.entries(game.world.entities).forEach(entity => {
        entityObj = entity[1]

        // Check if the entity belongs to a targetable class
        if (!main.settings.targetableEntityClass.includes(entityObj.entityClass))
            return

        // Get the entity's width and height
        entityWidth = entityObj.currentModel.base.sprite.width
        entityHeight = entityObj.currentModel.base.sprite.height

        // Throw an error if width or height is missing
        if (!entityWidth || !entityHeight) throw new ReferenceError("Cannot check collision without width and height.")

        entityTick = entityObj.targetTick
        posScreen = game.renderer.worldToScreen(entityTick.position.x, entityTick.position.y)
        distX = main.cursor.x - posScreen.x
        distY = main.cursor.y - posScreen.y
        circleRadius = Math.max(entityHeight, entityWidth) / 3
        dist = Math.sqrt(distX ** 2 + distY ** 2)

        // Check if the mouse is within the circle radius of the entity
        if (dist > circleRadius)
            return

        // Set the active entity's UID and update the menu state
        main.menu.activeEntityUID = entityTick.uid

        main.scriptElements.mainMenuWrapper.setState(1)
        main.scriptElements.mainMenuWrapper.moveToEntity(entityObj)
        main.scriptElements.entityFollower.followEntity(entityObj.targetTick.uid)
    })
}

function updateActiveEntity() {
    // Check if the active entity still exists in the world
    if (!game.world.entities[main.menu.activeEntityUID]) {
        // If the active entity exists, update the last active entity
        if (main.menu.activeEntity)
            main.menu.lastActiveEntity = main.menu.activeEntity
        main.menu.activeEntity = undefined
        return
    }

    // Update the active entity with the current entity data
    // Had to do this because objects are passed by reference
    const entity = game.world.entities[main.menu.activeEntityUID]
    main.menu.activeEntity = { entity, targetTick: entity.targetTick }
}

// Function responsible for initializing the main script, triggered on DOMContentLoaded event----->

function script() {
    // DOM Manipulation----->

    // Return if hud is undefined
    if (!document.querySelector(".hud"))
        return

    // Append style element to the head of the document
    document.head.append(style)

    // Append style element for font-awesome to the head of the document
    document.head.append(createElement("link", { rel: "stylesheet", href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" }))

    // Define and append main menu wrapper element
    defineScriptElement("mainMenuWrapper", "div", { id: "mainMenuWrapper" }, {
        open: false,

        x: 0,
        y: 0,
        width: 0,
        height: 0,

        // Set the state of the main menu wrapper
        setState(open) {
            // After transitionEnds wait for a delay before updates start
            this.onceontransitionend(() => setTimeout(() => this.open = open, 150))
            this.classList.toggle("open", open)
            main.scriptElements.entityFollower.setState(open)
        },

        // Move the main menu wrapper to the specified coordinates
        moveTo(x = this.x, y = this.y, pivotX = 0, pivotY = 0, transition = false) {
            const boundingBox = {
                width: this.scrollWidth,
                height: this.scrollHeight
            }

            let xPercent, yPercent, xTranslate = 0, yTranslate = 0

            this.classList.toggle("moveTransition", transition)

            // Move the menu in relation to the pivot
            x -= boundingBox.width * pivotX
            y -= boundingBox.height * pivotY

            // Using min-max instead of ifs to add bounds for the menu
            this.x = x = Math.round(Math.max(0, Math.min(x, innerWidth)))
            this.y = y = Math.round(Math.max(0, Math.min(y, innerHeight)))

            if (x > innerWidth - boundingBox.width)
                xTranslate = xPercent = 100
            // ^ This stops a bug where the otherMenuTogglesContainer is out of the screen
            else xPercent = (x / innerWidth) * 100

            if (y > innerHeight - boundingBox.height)
                yTranslate = yPercent = 100
            else yPercent = (y / innerHeight) * 100

            this.style.left = `${xPercent}%`
            this.style.top = `${yPercent}%`
            this.style.translate = `${-xTranslate}% ${-yTranslate}%`

            this.width = boundingBox.width
            this.height = boundingBox.height
        },

        moveToEntity(entity) {
            const menu = main.scriptElements.mainMenu,
                posScreen = game.renderer.worldToScreen(entity.targetTick.position.x, entity.targetTick.position.y)

            this.moveTo(posScreen.x, posScreen.y, .5 + (1 - menu.scrollWidth / this.width) / 2, 1.22, true)
        }
    }).appendTo(element(".hud"))

    // Define and append main menu element
    defineScriptElement("mainMenu", "div", { id: "mainMenu" }, {
        resize(ratio) {
            this.style.width = `${22.5 * ratio}rem`
            this.style.height = `${14 * ratio}rem`
        }
    }).appendTo(main.scriptElements.mainMenuWrapper)

    // Define and append main menu tags container element
    defineScriptElement("mainMenuTagsContainer", "div", { id: "mainMenuTagsContainer", "data-tagscount": 0 }).appendTo(main.scriptElements.mainMenuWrapper)

    // Define and append main menu feature buttons container
    defineScriptElement("mainMenuFeatureContainer", "div", { id: "mainMenuFeatureContainer" }).appendTo(main.scriptElements.mainMenuWrapper)

    // Define the feature for pinning the menu
    main.menu.defineFeature("pin", "fa-solid fa-location-pin", "toggle", () => main.scriptElements.mainMenuWrapper.classList.toggle("pinned", main.menu.pinned = !main.menu.pinned))

    // Function to handle the movement of the menu
    function moveFeatureHandler() {
        const eleBoundingBox = main.menu.features.move.element.getBoundingClientRect(),
            wrapperBoundingBox = main.scriptElements.mainMenuWrapper.getBoundingClientRect()

        const pivotX = ((eleBoundingBox.x - wrapperBoundingBox.x) + eleBoundingBox.width / 2) / wrapperBoundingBox.width,
            pivotY = ((eleBoundingBox.y - wrapperBoundingBox.y) + eleBoundingBox.height / 2) / wrapperBoundingBox.height

        main.scriptElements.mainMenuWrapper.moveTo(main.cursor.x, main.cursor.y, pivotX, pivotY, false)
    }

    let oldWidth = innerWidth,
        oldHeight = innerHeight

    // Make the menu responsive when screen resizes
    addEventListener("resize", () => {
        const wrapper = main.scriptElements.mainMenuWrapper

        wrapper.moveTo(wrapper.x / oldWidth * innerWidth, wrapper.y / oldHeight * innerHeight, 0, 0)

        oldWidth = innerWidth
        oldHeight = innerHeight
    })

    // Define the feature for moving the menu
    main.menu.defineFeature("move", "fa-solid fa-up-down-left-right", "hold",
        () => addEventListener("mousemove", moveFeatureHandler),
        () => removeEventListener("mousemove", moveFeatureHandler)
    )

    // document.addEventListener("visibilitychange", () => {
    //     if (main.scriptElements.mainMenuWrapper.open)
    //         main.scriptElements.mainMenuWrapper.setState(0)
    // })

    main.menu.defineFeature("forceClose", "fa-solid fa-xmark", "click", () => main.scriptElements.mainMenuWrapper.setState(0))

    // Define and append main menu body element
    defineScriptElement("mainMenuBody", "section", { id: "mainMenuBody" }).appendTo(main.scriptElements.mainMenu)

    // Define and append other menu button element
    defineScriptElement("otherMenuButton", "button", { id: "otherMenuButton" }, {
        innerHTML: `<i class="fa-solid fa-caret-right"></i>`,

        // Set the state of the other menu button
        setState(moved, rotated, dark) {
            this.classList.toggle("moved", moved)
            this.classList.toggle("rotated", rotated)
            this.classList.toggle("dark", dark)
        },

        // Return to the previous menu
        return() {
            const navigationStack = main.menu.navigationStack
            navigationStack.pop()
            main.menu.setActiveMenu(navigationStack[navigationStack.length - 1] ?? main.menu.mainMenuName)
        }
    }).appendTo(main.scriptElements.mainMenu)

    // Set callback functions for when a menu is added or removed from the navigation stack
    main.menu.navigationStack.onAddCallback = function () {
        main.scriptElements.otherMenuButton.setState(1, 1, 0)
    }

    main.menu.navigationStack.onRemoveCallback = function () {
        if (!this.length)
            main.scriptElements.otherMenuButton.setState(0, 0, 0)
    }

    // Define and append other menu container element
    defineScriptElement("otherMenuTogglesContainer", "div", { id: "otherMenuTogglesContainer" }, {
        open: false,
        toggleButtons: [],

        // Set the state of the other menu container
        setState(open) {
            this.classList.toggle("open", this.open = open)
        },

        // Add a toggle button for a specific menu
        addToggleButton(forMenuName, onClickCallback, icon, index = 0) {
            const toggleButton = createElement("button",
                {
                    class: "toggleButton",
                    "data-menuname": forMenuName,
                    "data-index": index
                },
                {
                    disabled: false,
                    textContent: forMenuName[0],
                    innerHTML: `<i class="${icon}"></i>`,
                    setState(dark, disabled) {
                        this.classList.toggle("dark", dark)
                        this.classList.toggle("disabled", this.disabled = disabled)
                    },
                })

            // Add event listener to the toggle button
            toggleButton.addEventListener("mousedown", function (event) {
                event.stopImmediatePropagation()
                if (!this.disabled)
                    onClickCallback()
            })

            // Allows control over what the order of buttons will be in the container
            switch (true) {
                case index == 0: this.append(toggleButton)
                    break
                case index >= this.childElementCount: this.prepend(toggleButton)
                    break
                default: for (let child of this.children) {
                    if (index > child.dataset.index)
                        return child.insertAdjacentElement("beforebegin", this)
                }
            }

            this.toggleButtons.push(toggleButton)
            return toggleButton
        }
    }).appendTo(main.scriptElements.mainMenuWrapper)

    defineScriptElement("entityFollower", "div", { id: "entityFollower" }, {
        innerHTML: `<i class="fa-solid fa-location-arrow"></i>`,
        _x: 0,
        _y: 0,
        _rotation: 0,
        velocity: { x: 0, y: 0 },
        acceleration: { x: 0, y: 0 },
        destination: { x: innerWidth / 2, y: innerHeight / 2, direction: 0, reached: false, outOfReach: false },
        friction: .05,
        speed: .4,
        idleSpeed: .1,
        normalSpeed: .4,
        delta: 0,
        lastFrameTime: 0,
        activeEntityUID: undefined,
        activeEntity: undefined,

        setState(visible) {
            this.classList.toggle("visible", visible)
        },

        followEntity(uid) {
            this.activeEntityUID = uid
        },

        setSize(size) {
            this.style.fontSize = `${size}px`
        },

        setDestination(x, y) {
            this.destination = { x, y }
        },

        update(time) {
            this.delta = (time - this.lastFrameTime) / (1000 / 60) // :)
            this.lastFrameTime = time
            this.activeEntity = game.world.entities[this.activeEntityUID]

            const subSteps = 8,
                divDT = this.delta / subSteps;

            // If there is an activeEntity, follow it by updating the destination and set the speed to normal
            if (this.activeEntity) {
                var targetTick = this.activeEntity.targetTick,
                    posScreen = game.renderer.worldToScreen(targetTick.position.x, targetTick.position.y),
                    entityWidth = this.activeEntity.currentModel.base.sprite.width,
                    entityHeight = this.activeEntity.currentModel.base.sprite.height,
                    radius = Math.sqrt(entityWidth ** 2 + entityHeight ** 2)

                this.speed = this.normalSpeed
                this.setDestination(posScreen.x, posScreen.y)
            }

            // Otherwise idle with slower speed while moving around to random destinations from the center of the screen <- removed
            else if (this.destination.reached || this.destination.outOfReach || main.menu.activeMenu != main.menu.mainMenuName)
                this.speed = this.idleSpeed

            this.setSize(Math.min(Math.max(22, (radius ?? 0) * .122), 36))

            for (let i = 0; i < subSteps; i++) {
                // Make the arrow bigger for bigger entities

                // Calculate the distance from the destination
                let distX = this.destination.x - this.x,
                    distY = this.destination.y - this.y,
                    dist = Math.sqrt(distX ** 2 + distY ** 2)

                // Calculate the direction of the destination
                this.destination.direction = Math.atan2(distY, distX)
                // Check if destination is reached
                this.destination.reached = dist < this.arrowSize

                // Compressed way of setting acceleration to 0 when the destination is reached
                // And to have a normal acceleartion when moving to a new destination
                this.acceleration.x = this.speed * Math.cos(this.destination.direction) * (!this.destination.reached)
                this.acceleration.y = this.speed * Math.sin(this.destination.direction) * (!this.destination.reached)

                this.x += this.velocity.x * divDT
                this.y += this.velocity.y * divDT

                // Smoothly rotate towards the destination
                this.rotation = Math.lerpAngles(this.rotation, Math.atan2(this.velocity.y, this.velocity.x), .22 * divDT)

                this.velocity.x *= 1 - this.friction
                this.velocity.y *= 1 - this.friction

                this.velocity.x += this.acceleration.x
                this.velocity.y += this.acceleration.y

                // Add bounds
                this.x = Math.max(Math.min(innerWidth - this.arrowSize, this.x), this.arrowSize)
                this.y = Math.max(Math.min(innerHeight - this.arrowSize, this.y), this.arrowSize)
            }

            // Define when a destination is out of reach
            this.destination.outOfReach = this.destination.x < 0 || this.destination.x > innerWidth || this.destination.y < 0 || this.destination.y > innerHeight
        },

        updateVisiblity() {
            if (this.activeEntity) this.setState(main.scriptElements.mainMenuWrapper.open)
            else if (this.destination.outOfReach || main.menu.activeMenu != main.menu.mainMenuName) this.setState(0)
        }
    }).appendTo(element(".hud"))

    Object.defineProperties(main.scriptElements.entityFollower, {
        x: {
            set(value) {
                this._x = value
                this.style.left = `${value}px`
            },

            get() {
                return this._x
            },
        },
        y: {
            set(value) {
                this._y = value
                this.style.top = `${value}px`
            },

            get() {
                return this._y
            },
        },
        rotation: {
            set(rad) {
                this._rotation = rad
                this.style.rotate = `${rad}rad`
            },
            get() {
                return this._rotation
            },
        },
        arrowSize: {
            get() {
                return this.querySelector("i").scrollWidth
            }
        }
    })

    // Event Listeners----->

    // Listen for mouse movement events and update the cursor position accordingly
    addEventListener("mousemove", (event) => {
        main.cursor = event
    })

    // Listen for keydown events and update controls accordingly
    addEventListener("keydown", (event) => {
        const key = event.key.toLocaleLowerCase()
        if (!main.controls.listenedKeys.includes(key)) return
        main.controls[`${key}Up`] = false
        main.controls[`${key}Down`] = true
    })

    // Listen for keyup events and update controls accordingly
    addEventListener("keyup", (event) => {
        const key = event.key.toLocaleLowerCase()
        if (!main.controls.listenedKeys.includes(key)) return
        main.controls[`${key}Up`] = true
        main.controls[`${key}Down`] = false
    })

    // Listen for mousedown events and close the main menu if it's open and the click is outside of it
    addEventListener("mousedown", (event) => {
        if (main.inGame && (main.scriptElements.mainMenuWrapper.contains(event.target) || !main.scriptElements.mainMenuWrapper.open || main.menu.pinned)) {
            event.preventDefault()
            event.stopImmediatePropagation()
            return
        }
        main.scriptElements.mainMenuWrapper.setState(0)
    })

    // Listen for mousedown events on the other menu button and toggle the other menu container's state
    main.scriptElements.otherMenuButton.addEventListener("mousedown", function (event) {
        event.stopImmediatePropagation()

        // If navigation stack is not empty, execute return function, else toggle the other menu container's state
        if (main.menu.navigationStack.length) return this.return()

        main.scriptElements.otherMenuTogglesContainer.setState(!main.scriptElements.otherMenuTogglesContainer.open)

        // Toggle button state based on the other menu container's state
        if (main.scriptElements.otherMenuTogglesContainer.open) this.setState(0, 1, 1)
        else this.setState(0, 0, 0)
    })

    var lastMenuUpdateTime = 0,
        lastMouseCollisionCheckTime = 0,
        lastBackgroundMenuUpdateTime = 0;

    // Self-invoking function to update ASAP
    (function update(time) {
        requestAnimationFrame(update)

        // Check if the player is in the game world
        if (!(main.inGame = window.game != undefined && game.network?.connected != undefined && game.world?.inWorld != undefined && game.ui?.playerTick != undefined) || main.settings.paused)
            return

        // Set the active menu to the main menu if no menu is currently active
        if (!main.menu.activeMenu)
            main.menu.setActiveMenu(main.menu.mainMenuName)

        // Perform mouse collision check if enough time has elapsed
        if (time - lastMouseCollisionCheckTime >= 1000 / main.settings.mouseCollisionCheckFPS) {
            checkMouseCollisionWithEntity()
            lastMouseCollisionCheckTime = time
        }

        main.scriptElements.entityFollower.updateVisiblity()

        if (!main.scriptElements.mainMenuWrapper.open)
            return

        // Update the active entity and active menu if enough time has elapsed
        if (time - lastMenuUpdateTime >= 1000 / main.settings.menuUpdateFPS) {
            updateActiveEntity()
            main.menu.activeMenuObject?.update()
            lastMenuUpdateTime = time
        }

        // Update background elements if enough time has elapsed
        if (time - lastBackgroundMenuUpdateTime >= 1000 / main.settings.backgroundMenuUpdateFPS) {
            // Call the background update callback for all menus and toggle buttons
            [...Menu.DefinedMenus, ...main.scriptElements.otherMenuTogglesContainer.toggleButtons].forEach(element => element.backgroundUpdateCallback?.())
            lastBackgroundMenuUpdateTime = time
        }

        main.scriptElements.entityFollower.update(time)
    })(0)

    // Defining Menus----->

    // Main Menu--->

    const mainInfoMenu = new InfoMenu("infoMenu", [
        { name: "Model", referenceName: "model" },
        { name: "Wood", referenceName: "wood", type: "number" },
        { name: "Token", referenceName: "token", type: "number" },
        { name: "Stone", referenceName: "stone", type: "number" },
        {
            name: "Wave", value: (player) => {
                return player.targetTick.wave ?? "Not Found"
            },
            type: "number"
        },
        { name: "Gold", referenceName: "gold", type: "number" },
        { name: "Score", referenceName: "score", type: "number" },
        { name: "Health", referenceName: "health" },
        { name: "MaxHealth", referenceName: "maxHealth" },
        {
            name: "ShieldHealth",
            referenceName: "zombieShieldHealth",
            activationCondition: (entity) => {
                return entity.targetTick.zombieShieldMaxHealth != 0
            },
            index: 1,
            type: "number"
        },
        {
            name: "MaxShieldHealth",
            referenceName: "zombieShieldMaxHealth",
            activationCondition: (entity) => {
                return entity.targetTick.zombieShieldMaxHealth != 0
            },
            index: 2,
            type: "number"
        },
        {
            isBar: true,
            name: "HP",
            currentValRef: "health",
            maxValRef: "maxHealth",
        },
        {
            isBar: true,
            name: "SH",
            currentValRef: "zombieShieldHealth",
            maxValRef: "zombieShieldMaxHealth",
            isVisible: false,
            activationCondition: (entity) => {
                return entity.targetTick.zombieShieldMaxHealth != 0
            },
            barColor: "#3da1d9"
        },
    ], false).initStates()

    mainInfoMenu.defineState(
        "ResourceProp",
        new InfoMenu(
            `infoMenuStateResource`,
            [
                { name: "Model", referenceName: "model" },
                { name: "CollisionRadius", referenceName: "collisionRadius" },
            ],
            false,
            "",
            true
        ),
        () => {
            return (main.menu.activeEntity || main.menu.lastActiveEntity)?.targetTick.model.match(/(tree)|(stone)|(neutralcamp)/gi)
        }
    )

    mainInfoMenu.defineState(
        "TowerProp",
        new InfoMenu(
            `infoMenuStateTower`,
            [
                { name: "Model", referenceName: "model" },
                { name: "Tier", referenceName: "tier", },
                { name: "Health", referenceName: "health", type: "number" },
                { name: "MaxHealth", referenceName: "maxHealth", type: "number" },
                // A lot of error handling
                {
                    name: "Damage",
                    activationCondition: (tower) => {
                        return game.ui.buildingSchema[tower.targetTick.model]?.damageTiers != undefined
                    },
                    value: (tower) => {
                        return game.ui.buildingSchema[tower.targetTick.model]?.damageTiers?.[tower.targetTick.tier - 1] ?? "Not Found"
                    },
                    type: "number"
                },
                {
                    name: "AttackSpeed",
                    activationCondition: (tower) => {
                        return main.gameData.towers[tower.targetTick.model]?.attackSpeed != undefined
                    },
                    value: (tower) => {
                        return main.gameData.towers[tower.targetTick.model]?.attackSpeed?.[tower.targetTick.tier - 1] ?? "Not Found"
                    }
                },
                {
                    name: "Range",
                    activationCondition: (tower) => {
                        return game.ui.buildingSchema[tower.targetTick.model]?.rangeTiers != undefined
                    },
                    value: (tower) => {
                        return game.ui.buildingSchema[tower.targetTick.model]?.rangeTiers?.[tower.targetTick.tier - 1] ?? "Not Found"
                    },
                },
                {
                    name: "Gold/Sec",
                    activationCondition: (tower) => {
                        return tower.targetTick.model.match(/goldmine/gi)
                    },
                    value: (tower) => {
                        return game.ui.buildingSchema[tower.targetTick.model]?.gpsTiers?.[tower.targetTick.tier - 1] ?? "Not Found"
                    },
                    type: "number"
                },
                {
                    name: "HarvestAmount",
                    activationCondition: (tower) => {
                        return tower.targetTick.model.match(/harvester/gi)
                    },
                    value: (tower) => {
                        return game.ui.buildingSchema[tower.targetTick.model]?.harvestTiers?.[tower.targetTick.tier - 1] ?? "Not Found"
                    }
                },
                {
                    name: "HarvestCapacity",
                    activationCondition: (tower) => {
                        return tower.targetTick.model.match(/harvester/gi)
                    },
                    value: (tower) => {
                        return game.ui.buildingSchema[tower.targetTick.model]?.harvestCapacityTiers?.[tower.targetTick.tier - 1] ?? "Not Found"
                    },
                    type: "number"
                },
                {
                    name: "SlowAmount",
                    activationCondition: (tower) => {
                        return tower.targetTick.model.match(/slowtrap/gi)
                    },
                    value: (tower) => {
                        return main.gameData.towers[tower.targetTick.model]?.slowAmount?.[tower.targetTick.tier - 1] ?? "Not Found"
                    }
                },
                {
                    isBar: true,
                    name: "HP",
                    currentValRef: "health",
                    maxValRef: "maxHealth",
                },
            ],
            false,
            "",
            true
        ),
        () => {
            return Object.entries(game.ui.buildingSchema).find(building => building[0] == (main.menu.activeEntity || main.menu.lastActiveEntity)?.targetTick.model)
        }
    )


    mainInfoMenu.defineState(
        "Npc",
        new InfoMenu(
            `infoMenuStateNPC`,
            [
                { name: "Model", referenceName: "model" },
                {
                    name: "Damage",
                    activationCondition: (npc) => {
                        return npc.targetTick.damage
                    },
                    value: (npc) => {
                        return npc.targetTick.damage ?? "Not Found"
                    },
                    type: "number"
                },
                { name: "Yaw", referenceName: "yaw" },
                { name: "Health", referenceName: "health", type: "number" },
                { name: "MaxHealth", referenceName: "maxHealth", type: "number" },
                {
                    isBar: true,
                    name: "HP",
                    currentValRef: "health",
                    maxValRef: "maxHealth",
                }
            ],
            false,
            "",
            true
        ),
        () => {
            return (main.menu.activeEntity || main.menu.lastActiveEntity)?.targetTick.entityClass == "Npc"
        }
    )

    mainInfoMenu.defineState(
        "PetProp",
        new InfoMenu("infoMenuStatePet", [
            { name: "Model", referenceName: "model" },
            {
                name: "Name",
                value: (pet) => {
                    return game.ui.itemSchema[pet.targetTick.model]?.name ?? "Not Found"
                }
            },
            { name: "Experience", referenceName: "experience", type: "number" },
            { name: "Tier", referenceName: "tier" },
            {
                name: "Damage",
                activationCondition: (pet) => {
                    return game.ui.itemSchema[pet.targetTick.model]?.damageTiers != undefined
                },
                value: (pet) => {
                    return game.ui.itemSchema[pet.targetTick.model]?.damageTiers?.[pet.targetTick.tier - 1] ?? "Not Found"
                },
                type: "number"
            },
            {
                name: "MovementSpeed",
                value: (pet) => {
                    return main.gameData.pets[pet.targetTick.model]?.speed?.[pet.targetTick.tier - 1] ?? "Not Found"
                }
            },
            {
                name: "AttackSpeed",
                value: (pet) => {
                    return (1000 / game.ui.itemSchema[pet.targetTick.model]?.attackSpeedTiers?.[pet.targetTick.tier - 1]) ?? "Not Found"
                }
            },
            {
                name: "ResourceGain",
                activationCondition: (pet) => {
                    return pet.targetTick.model.match(/petminer/gi)
                },
                value: (pet) => {
                    return main.gameData.pets[pet.targetTick.model]?.resourceGain?.[pet.targetTick.tier - 1] ?? "Not Found"
                },
                isVisible: false,
            },
            { name: "Health", referenceName: "health", type: "number" },
            { name: "MaxHealth", referenceName: "maxHealth", type: "number" },
            {
                isBar: true,
                name: "HP",
                currentValRef: "health",
                maxValRef: "maxHealth",
            },
        ],
            false,
            "",
            true),
        () => {
            return (main.menu.activeEntity || main.menu.lastActiveEntity)?.targetTick.model.match(/pet/gi)
        })

    mainInfoMenu.defineTag(
        "Entity Not Found",
        "error",
        () => {
            return (main.menu.activeMenu == main.menu.mainMenuName && !main.menu.activeEntity)
        },
        1)

    // Party Spectate Menu--->
    // The most annoying menu

    const partySpectateMenu = new Menu("partySpectateMenu", `<div id="body" class="spectateMenuBody"></div>`, true, "fas fa-users", 1)

    partySpectateMenu.spectateButtons = []

    partySpectateMenu.createSpectateButton = function () {
        const spectateButton = createElement("div",
            {
                class: "spectateButton",
                "data-partyposition": "",
                "data-playeruid": ""
            },
            {
                innerHTML: `
                <button>
                <div class="wrapper">
                <span class="name">Undef</span>
                <section class="tag active uid">UID: <span></span></section>
                <section class="tag active position"></section>
                </div>
                </button>
                `
            })

        spectateButton.nameTag = spectateButton.querySelector("span.name")
        spectateButton.positionTag = spectateButton.querySelector("section.position")
        spectateButton.uidTag = spectateButton.querySelector("section.uid span")

        spectateButton.addEventListener("mousedown", function (event) {
            event.stopImmediatePropagation()
            this.onceontransitionend(() => {
                spectateInfoMenu.spectateEntityUID = parseInt(this.dataset.playeruid)
                main.menu.setActiveMenu(spectateInfoMenu.name)
            })
        })

        this.spectateButtons.push(spectateButton)
        this.body.append(spectateButton)
    }

    // I don't know how to do this in css :(
    partySpectateMenu.styleButtons = function (gap) {
        const visibleElements = Array.from(partySpectateMenu.body.children).filter(element => element.classList.contains("visible"))

        this.body.dataset.playercount = visibleElements.length

        if (visibleElements.length == 1) return

        gap = `${gap / 2}px`

        let eleCurrent
        for (let index = 0; index < visibleElements.length; index++) {
            eleCurrent = visibleElements[index]
            if (visibleElements[index - 1]) eleCurrent.style.paddingTop = gap
            if (visibleElements[index + 1]) eleCurrent.style.paddingBottom = gap
        }
    }

    partySpectateMenu.updateCallback = function () {
        if (game.ui.playerPartyMembers.length <= 1)
            main.scriptElements.otherMenuButton.return()
    }

    partySpectateMenu.backgroundUpdateCallback = function () {
        // Filter out the player and add index to each party member
        const partyMembers = game.ui.playerPartyMembers.map((member, index) => {
            if (member.playerUid == game.ui.playerTick.uid) return undefined
            return { member, index }
        }).filter(element => element)

        this.spectateButtons.forEach((button, index) => {
            button.classList.toggle("visible", false)
            button.dataset.playeruid = button.dataset.partyposition = ""

            if (!partyMembers[index]) return

            const nameTag = button.nameTag,
                { member, index: memberIndex } = partyMembers[index]

            nameTag.textContent = member.displayName

            switch (button.dataset.partyposition = memberIndex) {
                case 0: button.positionTag.textContent = "Leader"
                    break
                case 1: button.positionTag.textContent = "Co-Leader"
                    break
                case 2: case 3: button.positionTag.textContent = "Member"
                    break
            }

            button.uidTag.textContent = button.dataset.playeruid = member.playerUid
            button.classList.toggle("visible")
        })
        this.styleButtons(8)
    }

    partySpectateMenu.toggleButton.backgroundUpdateCallback = function () {
        this.setState(0, game.ui.playerPartyMembers.length <= 1)
    }

    for (let i = 0; i < 4; i++)
        partySpectateMenu.createSpectateButton()

    // Spectate Info Menu--->

    const spectateInfoMenu = new InfoMenu("spectateInfoMenu",
        [
            ...mainInfoMenu.updatedAttributes,
            {
                name: "CanSell", value: (player) => {
                    return new Boolean(game.ui.getPlayerPartyMembers()?.find(member => member.playerUid == player.targetTick.uid)?.canSell)
                },
                index: 0,
            },
        ], false)

    spectateInfoMenu.spectateEntityUID = undefined

    spectateInfoMenu.updateCallback = function () {
        this.spectateEntity = game.world.entities[this.spectateEntityUID]

        if (this.spectateEntity)
            this.updateInfo(this.spectateEntity)
    }

    spectateInfoMenu.defineTag("Spectating", "neutral", function () {
        return true
    }, 0)

    spectateInfoMenu.defineTag("Entity Not Found", "error", function () {
        return !this.spectateEntity
    }, 1)

    // Pet Spectate Menu--->

    const petSpectateMenu = new InfoMenu("PetSpectateMenu", mainInfoMenu.definedStates.find(state => state.name == "PetProp").menu.updatedAttributes, true, "fa-solid fa-paw")

    petSpectateMenu.updateCallback = function () {
        const petTick = game.ui.getPlayerPetTick()

        if (petTick)
            this.updateInfo({ targetTick: petTick })
    }

    petSpectateMenu.toggleButton.backgroundUpdateCallback = function () {
        this.setState(0, main.menu.activeEntityUID != game.ui.playerTick.uid || !game.ui.getPlayerPetTick())
    }

    petSpectateMenu.defineTag("Pet Died", "warning", () => {
        return game.ui.getPlayerPetTick()?.health <= 0
    })
}

// If the document is already loaded, call the scriptInit function immediately
if (document.readyState != "loading") script()
else document.addEventListener("DOMContentLoaded", script)
// If the document is still loading, add an event listener for the DOMContentLoaded event
欢迎访问Greasy Fork镜像
