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;}
    </style>

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

// --- ZBYTEK ---
        forrestHubLib = ForrestHubLib.getInstance();
        const ARRAYS = { LEADERBOARD: 'vampire_leaderboard_v3' };
        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 = '';

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

if (sortedPlayers.length === 0) {
                tableBody.innerHTML = '<tr><td colspan="3" class="text-center text-muted py-5 h-100 align-middle">Noc je zatím čistá. Žádná krev nebyla prolita.</td></tr>';
                return;
            }

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.';

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