HerdosUI Party

re-order (and re-color) party frames

Vous devrez installer une extension telle que Tampermonkey, Greasemonkey ou Violentmonkey pour installer ce script.

Vous devrez installer une extension telle que Tampermonkey pour installer ce script.

Vous devrez installer une extension telle que Tampermonkey ou Violentmonkey pour installer ce script.

Vous devrez installer une extension telle que Tampermonkey ou Userscripts pour installer ce script.

Vous devrez installer une extension telle que Tampermonkey pour installer ce script.

Vous devrez installer une extension de gestionnaire de script utilisateur pour installer ce script.

(J'ai déjà un gestionnaire de scripts utilisateur, laissez-moi l'installer !)

Vous devrez installer une extension telle que Stylus pour installer ce style.

Vous devrez installer une extension telle que Stylus pour installer ce style.

Vous devrez installer une extension telle que Stylus pour installer ce style.

Vous devrez installer une extension du gestionnaire de style pour utilisateur pour installer ce style.

Vous devrez installer une extension du gestionnaire de style pour utilisateur pour installer ce style.

Vous devrez installer une extension du gestionnaire de style pour utilisateur pour installer ce style.

(J'ai déjà un gestionnaire de style utilisateur, laissez-moi l'installer!)

// ==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))
}