<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HUD Stats</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>

    <div class="player-list-container">
        <header class="player-list-header">
            <span>Division Gangwars</span>
            <div class="online-status">
                <div class="bar"></div>
                <span>0/128</span>
            </div>
        </header>
        <div class="player-list">
        </div>
    </div>

    <script>
        function addPlayer(name, level, kills, deaths, avatar, adminLevel) {
            const playerDiv = document.createElement('div');
            playerDiv.classList.add('player');

            const playerAvatar = document.createElement('img');
            playerAvatar.src = avatar;
            playerAvatar.alt = 'Avatar';
            playerAvatar.classList.add('avatar');

            const playerInfoDiv = document.createElement('div');
            playerInfoDiv.classList.add('info');

            const playerName = document.createElement('span');
            playerName.classList.add('name');

            if (adminLevel === 0) {
                playerName.style.color = 'white'; 
            } else if (adminLevel === 1) {
                playerName.style.color = '#FFB90F';
            } else if (adminLevel === 2){
                playerName.style.color = '#530a68';
            } else if (adminLevel === 3) {
                playerName.style.color = '#8a0000';
            }


            playerName.textContent = name;

            const playerLevel = document.createElement('span');
            playerLevel.classList.add('level');
            playerLevel.textContent = `Level: ${level}`;

            const playerStats = document.createElement('div');
            playerStats.classList.add('stats');
            playerStats.innerHTML = `<span>Kills: ${kills}</span> | <span>Deaths: ${deaths}</span>`;

            playerInfoDiv.appendChild(playerName);
            playerInfoDiv.appendChild(playerLevel);
            playerInfoDiv.appendChild(playerStats);
            playerDiv.appendChild(playerAvatar);
            playerDiv.appendChild(playerInfoDiv);

            document.querySelector('.player-list').appendChild(playerDiv);

            updatePlayerCount();
        }

        function updatePlayerCount() {
            const playerCount = document.querySelectorAll('.player').length;
            const maxPlayers = 128;

            const playerCountElement = document.querySelector('.player-list-header .online-status span');
            if (playerCountElement) {
                playerCountElement.textContent = `${playerCount}/${maxPlayers}`;
            }
        }

        if ('alt' in window) {
            alt.on('updateScoreboardPlayers', (data) => {
                addPlayer(data.name, data.level, data.kills, data.deaths, data.avatar, data.adminLevel);
            });
        }

    </script>

</body>

</html>