Upíří internáty - Tabule cti
?
QR Kód s aktuální adresou
Fullscreen
Nadvláda nad nocí
Pozice
Internát
Získaná krev
Upravit obsah stránky
{% 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> <style> .full-screen-app { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #0a0a0a; color: #e0e0e0; overflow: hidden; z-index: 1000; } .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> <script> // --- CHYTŘEJŠÍ FULLSCREEN LOGIKA --- const fsBtn = document.getElementById('goFullscreen'); fsBtn.addEventListener('click', () => { const el = document.documentElement; if(el.requestFullscreen) el.requestFullscreen(); else if(el.webkitRequestFullscreen) el.webkitRequestFullscreen(); else if(el.msRequestFullscreen) el.msRequestFullscreen(); }); 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 %}