HerdosUI Party

re-order (and re-color) party frames

Bu betiği kurabilmeniz için Tampermonkey, Greasemonkey ya da Violentmonkey gibi bir kullanıcı betiği eklentisini kurmanız gerekmektedir.

Bu betiği yüklemek için Tampermonkey gibi bir uzantı yüklemeniz gerekir.

Bu betiği kurabilmeniz için Tampermonkey ya da Violentmonkey gibi bir kullanıcı betiği eklentisini kurmanız gerekmektedir.

Bu betiği kurabilmeniz için Tampermonkey ya da Userscripts gibi bir kullanıcı betiği eklentisini kurmanız gerekmektedir.

Bu betiği indirebilmeniz için ayrıca Tampermonkey gibi bir eklenti kurmanız gerekmektedir.

Bu komut dosyasını yüklemek için bir kullanıcı komut dosyası yöneticisi uzantısı yüklemeniz gerekecek.

(Zaten bir kullanıcı komut dosyası yöneticim var, kurmama izin verin!)

Bu stili yüklemek için Stylus gibi bir uzantı yüklemeniz gerekir.

Bu stili yüklemek için Stylus gibi bir uzantı kurmanız gerekir.

Bu stili yükleyebilmek için Stylus gibi bir uzantı yüklemeniz gerekir.

Bu stili yüklemek için bir kullanıcı stili yöneticisi uzantısı yüklemeniz gerekir.

Bu stili yüklemek için bir kullanıcı stili yöneticisi uzantısı kurmanız gerekir.

Bu stili yükleyebilmek için bir kullanıcı stili yöneticisi uzantısı yüklemeniz gerekir.

(Zateb bir user-style yöneticim var, yükleyeyim!)

// ==UserScript==
// @name         HerdosUI Party
// @namespace    https://hordes.io/
// @version      2026-03-01
// @description  re-order (and re-color) party frames
// @author       Anwohner
// @match        *://hordes.io/play*
// @icon         https://hordes.io/data/ui/favicon32.png
// @grant        GM_addStyle
// @run-at       document-end
// ==/UserScript==

'use strict'

GM_addStyle(`
.partyframes {
    .iconcontainer { display: none; }
    position: absolute;
    left: 60px;
    top: 60px;
}
`)

const state = {}

const observer = new MutationObserver((records) => {
    for (const record of records) {
        for (const node of record.addedNodes) {
            if (node.nodeType !== Node.ELEMENT_NODE) continue
            if (node.classList.contains('layout')) return reload()
            if (!node.dataset.sort && node.classList.contains('grid') &&
                node.parentNode.classList.contains('partyframes')) {
                onFrame(node)
                sortFrames(node.parentNode)
            }
        }
    }
})

const init = () => {
    console.log('HerdosUI Party')
    observer.observe(document.body, {
        childList: true
    })
}

window.addEventListener('load', init)

const reload = () => {
    const partyframes = document.querySelector('.partyframes')
    partyframes.querySelectorAll('.grid').forEach(node => onFrame(node))
    sortFrames(partyframes)
    observer.observe(partyframes, {
        childList: true
    })
}

const onFrame = (node) => {
    if (!state.player) state.player = document.querySelector('#ufplayer .bar:not(.dark) .progressBar span.left')?.textContent
    const icon = node.querySelector('.iconcontainer img.icon[src]')
    const pcls = parseInt(icon.src.split('/').pop())
    const pbar = node.querySelector('.bars > .barsInner > div:nth-child(1) > .progressBar')
    const name = pbar.querySelector('span.left')?.textContent
    const offl = pbar.querySelector('span.right')?.textContent === 'offline'
    if (name == state.player) {
        node.dataset.sort = 9
        pbar.style.background = `var(--primary)`
    } else if (offl) {
        node.dataset.sort = 0
    } else {
        node.dataset.sort = pcls + 1
        pbar.style.background = `var(--c${pcls})`
    }
}

const sortFrames = (node) => {
    [...node.children].sort((a, b) => a.dataset.sort > b.dataset.sort ? 1 : -1)
        .reverse().forEach(x => node.appendChild(x))
}