Internáty - Tabule

Nadvláda nad nocí

Pozice	Internát	Získaná krev

{% extends "templates/base.html" %}
{% set game_name = "Upíří internáty - Tabule cti" %}
{% block content %}

<button id="goFullscreen" class="btn btn-outline-danger bg-dark fw-bold shadow-lg"
            style="position:fixed; top:10px; right:10px; z-index:2000;">
        <i class="fa-solid fa-expand"></i> Fullscreen
    </button>

<div id="boardView" class="full-screen-app d-flex flex-column p-4 p-md-5">
        <h2 class="vampire-header text-center mb-5"><i class="fa-solid fa-trophy"></i> Nadvláda nad nocí <i class="fa-solid fa-trophy"></i></h2>
        <div class="card bg-dark shadow-lg rounded-4 overflow-hidden flex-grow-1">
            <div class="card-body p-0 h-100 overflow-auto">
                <table class="table table-dark table-hover m-0 text-center h-100">
                    <thead class="fs-3 text-danger border-bottom border-danger border-3 sticky-top bg-dark">
                        <tr>
                            <th class="py-4">Pozice</th>
                            <th class="py-4">Internát</th>
                            <th class="py-4">Získaná krev</th>
                        </tr>
                    </thead>
                    <tbody id="leaderboardTable" class="align-middle">
                        </tbody>
                </table>
            </div>
        </div>
    </div>

.vampire-header { color: #dc3545; text-transform: uppercase; letter-spacing: 3px; text-shadow: 0 0 10px #dc3545; font-size: 3.5rem; }
        .card { background-color: #1a1a1a; border: 2px solid #8b0000; box-shadow: 0 0 20px rgba(139, 0, 0, 0.4); }
        .table { font-size: 1.8rem; }
        .table-dark { --bs-table-bg: #1a1a1a; }
        
        .leaderboard-row:nth-child(1) { color: #ffd700; font-weight: bold; font-size: 2.5rem; text-shadow: 0 0 10px #ffd700; }
        .leaderboard-row:nth-child(2) { color: #c0c0c0; font-weight: bold; font-size: 2.2rem;}
        .leaderboard-row:nth-child(3) { color: #cd7f32; font-weight: bold; font-size: 2rem;}
        
        /* Barvy internátů */
        .team-modropyr { color: #0d6efd; text-shadow: 0 0 5px #0d6efd;}
        .team-zlutosaj { color: #ffc107; text-shadow: 0 0 5px #ffc107;}
        .team-zelenozub { color: #198754; text-shadow: 0 0 5px #198754;}
        .team-krvavir { color: #dc3545; text-shadow: 0 0 5px #dc3545;}
    </style>

document.addEventListener('fullscreenchange', () => {
            if (!document.fullscreenElement) fsBtn.style.display = 'block';
            else fsBtn.style.display = 'none';
        });

forrestHubLib = ForrestHubLib.getInstance();
        const ARRAYS = { LEADERBOARD: 'vampire_leaderboard_v4' };
        
        // Všechy 4 internáty pevně definované
        const KNOWN_TEAMS = ['🔵 Modropýr', '🟡 Žlutosaj', '🟢 Zelenozub', '🔴 Krvavír'];
        let lastLeaderboardString = "";

document.addEventListener('DOMContentLoaded', async () => {
            await loadLeaderboard();
            setInterval(loadLeaderboard, 1000);
        });

async function loadLeaderboard() {
            try {
                const data = await forrestHubLib.dbArrayFetchAllRecords(ARRAYS.LEADERBOARD) || {};
                const newDataString = JSON.stringify(data);
                
                if(newDataString !== lastLeaderboardString) {
                    lastLeaderboardString = newDataString;
                    renderLeaderboard(data);
                }
            } catch(e) {}
        }

function renderLeaderboard(leaderboardData) {
            const tableBody = document.getElementById('leaderboardTable');
            tableBody.innerHTML = '';

// Sestavení kompletního pole pro tabuli (doplníme chybějící internáty nulou)
            let playersObj = {};
            
            // Nejdřív vložíme všechny s 0
            KNOWN_TEAMS.forEach(team => {
                playersObj[team] = { name: team, points: 0 };
            });

// Přepíšeme je daty z DB
            Object.values(leaderboardData).forEach(entry => {
                if (playersObj[entry.name]) {
                    playersObj[entry.name].points = parseInt(entry.points);
                } else {
                    playersObj[entry.name] = { name: entry.name, points: parseInt(entry.points) };
                }
            });

const sortedPlayers = Object.values(playersObj).sort((a, b) => b.points - a.points);

sortedPlayers.forEach((player, index) => {
                let medal = `#${index + 1}`;
                if (index === 0) medal = '<i class="fa-solid fa-crown"></i> 1.';
                if (index === 1) medal = '2.';
                if (index === 2) medal = '3.';

let colorClass = "";
                if(player.name.includes('Modropýr')) colorClass = "team-modropyr";
                if(player.name.includes('Žlutosaj')) colorClass = "team-zlutosaj";
                if(player.name.includes('Zelenozub')) colorClass = "team-zelenozub";
                if(player.name.includes('Krvavír')) colorClass = "team-krvavir";

tableBody.innerHTML += `
                    <tr class="leaderboard-row border-bottom border-secondary">
                        <td class="py-4">${medal}</td>
                        <td class="py-4 text-uppercase tracking-wide fw-bold ${colorClass}">${player.name}</td>
                        <td class="py-4 fw-bold text-danger">${player.points} <i class="fa-solid fa-droplet"></i></td>
                    </tr>
                `;
            });
        }
    </script>
{% endblock %}