admin.html

<!DOCTYPE html>
<html lang="it" class="h-dvh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin | Imposter Game</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="icon" type="image/png" sizes="192x192" href="/images/icon.png">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://js.pusher.com/8.4.0/pusher.min.js"></script>
    <script defer src="https://analytics.minisoft.it/script.js" data-website-id="a0a8eaef-dc17-4ad4-8b5b-ccc7325d1bb2"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

        /* Custom checkbox */
        #brutal-mode-toggle:checked::before {
            content: "✓";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 14px;
        }
    </style>
</head>

<body class="min-h-full flex flex-col items-center bg-gray-950 text-gray-300 p-6"
    style="font-family: 'Inter', sans-serif;">

    <div id="admin-container" class="bg-gray-900 p-8 rounded-lg w-full max-w-2xl">
        <h1 class="text-2xl font-medium text-white mb-6">Gestione giocatori</h1>

        <!-- Players grouped by Stanza -->
        <div id="players-container" class="space-y-4 mb-6">
        </div>

        <!-- Brutal Mode -->
        <div class="mb-6">
            <label for="brutal-mode-toggle" class="flex items-center cursor-pointer">
                <input type="checkbox" id="brutal-mode-toggle"
                    class="appearance-none w-5 h-5 bg-gray-700 rounded cursor-pointer relative checked:bg-gray-600">
                <span class="ml-3 text-gray-300 text-sm">
                    Brutal Mode (il primo può essere impostore)
                </span>
            </label>
        </div>

        <!-- Reset Button -->
        <button id="reset-session" class="w-full h-11 bg-gray-800 text-white rounded hover:bg-gray-700">
            Reset
        </button>
    </div>

    <a href="https://prgz.it" id="credits" class="mt-auto text-xs text-gray-700">Made by Paul</a>
    <a class="hidden w-20 h-6 opacity-0" href="/"></a>

    <script>
        // --- Realtime (Pusher) ---------------------------------------------
        var PUSHER_KEY = '725f7abcf8f9a470386f';
        var PUSHER_CLUSTER = 'eu';
        var PUSHER_EVENT = 'update';
        var PUSHER_ADMIN_CHANNEL = 'imposter-admin';
        var HEARTBEAT_MS = 60000;   // rete di sicurezza quando il realtime funziona
        var FALLBACK_MS = 1500;     // polling se Pusher non e' disponibile

        $(document).ready(function () {
            function aggiornaDatiAdmin() {
                $.get('/assets/server.php', { action: 'get_admin_data' }, function (response) {
                    // Group players by id_stanza
                    var stanzaGroups = {};
                    response.giocatori.forEach(function(giocatore) {
                        var stanza = giocatore.id_stanza || '(nessuna)';
                        if (!stanzaGroups[stanza]) {
                            stanzaGroups[stanza] = {
                                players: [],
                                game_id: giocatore.stanza_game_id || '-',
                                word: giocatore.stanza_parola || '-'
                            };
                        }
                        stanzaGroups[stanza].players.push(giocatore);
                    });

                    // Build HTML for each stanza group
                    var containerHTML = '';
                    Object.keys(stanzaGroups).sort().forEach(function(stanza) {
                        var group = stanzaGroups[stanza];
                        containerHTML += '<div class="bg-gray-800 rounded overflow-hidden">';
                        containerHTML += '<div class="bg-gray-700 px-4 py-2 flex justify-between items-center">';
                        containerHTML += '<span class="text-gray-100 font-medium">Stanza: ' + stanza + '</span>';
                        containerHTML += '<span class="text-xs text-gray-400">ID: ' + group.game_id + ' | Parola: ' + group.word + '</span>';
                        containerHTML += '</div>';
                        containerHTML += '<table class="w-full"><thead><tr class="bg-gray-750">';
                        containerHTML += '<th class="px-4 py-2 text-left text-gray-400 text-xs uppercase">Nome</th>';
                        containerHTML += '<th class="px-4 py-2 text-left text-gray-400 text-xs uppercase">Ruolo</th>';
                        containerHTML += '</tr></thead><tbody class="divide-y divide-gray-700">';

                        group.players.forEach(function(giocatore) {
                            var ruolo = giocatore.ruolo ? giocatore.ruolo : '-';
                            var nome = giocatore.display_name || giocatore.nickname;
                            var ruoloClass = 'text-gray-400';
                            if (ruolo === 'impostore') ruoloClass = 'text-red-400';
                            else if (ruolo === 'fool') ruoloClass = 'text-yellow-400';
                            else if (ruolo === 'buono') ruoloClass = 'text-green-400';

                            containerHTML += '<tr>';
                            containerHTML += '<td class="px-4 py-3 text-gray-100">' + nome + '</td>';
                            containerHTML += '<td class="px-4 py-3 ' + ruoloClass + '">' + ruolo + '</td>';
                            containerHTML += '</tr>';
                        });

                        containerHTML += '</tbody></table></div>';
                    });

                    $('#players-container').html(containerHTML);
                    $('#brutal-mode-toggle').prop('checked', response.brutal_mode);

                    if (typeof response.pusher_enabled !== 'undefined' && window.setPusherServerEnabled) {
                        window.setPusherServerEnabled(response.pusher_enabled);
                    }

                }, 'json').fail(function () {
                    console.log('Errore di connessione al server.');
                });
            }

            $('#brutal-mode-toggle').change(function () {
                var brutal_mode = $(this).is(':checked');
                $.post('/assets/server.php', { action: 'set_brutal_mode', brutal_mode: brutal_mode }, function (response) {
                    if (response.status === 'success') {
                        console.log('Brutal Mode aggiornata');
                    }
                }, 'json').fail(function () {
                    console.log('Errore di connessione al server.');
                });
            });

            $('#reset-session').click(function () {
                if (confirm('Sei sicuro di voler resettare la sessione?')) {
                    $.post('/assets/server.php', { action: 'reset' }, function (response) {
                        if (response.status === 'success') {
                            console.log(response.message);
                            location.reload();
                        }
                    }, 'json').fail(function () {
                        console.log('Errore di connessione al server.');
                    });
                }
            });

            var pollTimer = null;
            var pollIntervalMs = null;
            var pusherConnected = false;
            var pusherServerEnabled = true;

            function setPolling(ms) {
                if (pollIntervalMs === ms) return;
                pollIntervalMs = ms;
                if (pollTimer) clearInterval(pollTimer);
                pollTimer = setInterval(aggiornaDatiAdmin, ms);
            }

            function refreshPollingMode() {
                setPolling((pusherConnected && pusherServerEnabled) ? HEARTBEAT_MS : FALLBACK_MS);
            }
            window.refreshPollingMode = refreshPollingMode;
            window.setPusherServerEnabled = function (enabled) {
                pusherServerEnabled = !!enabled;
                refreshPollingMode();
            };

            if (typeof Pusher !== 'undefined') {
                var pusher = new Pusher(PUSHER_KEY, { cluster: PUSHER_CLUSTER });
                pusher.connection.bind('state_change', function (states) {
                    pusherConnected = (states.current === 'connected');
                    refreshPollingMode();
                    if (pusherConnected) aggiornaDatiAdmin();
                });
                pusher.subscribe(PUSHER_ADMIN_CHANNEL).bind(PUSHER_EVENT, function () {
                    aggiornaDatiAdmin();
                });
            }

            aggiornaDatiAdmin();
            refreshPollingMode();
        });
    </script>

</body>

</html>