Sluneční stanice

Zadej tajný kód své květiny:

{% extends "templates/base.html" %}
{% set game_name = "Stanice - Slunce" %}
{% block content %}

<div id="pinScreen" class="container d-flex flex-column justify-content-center align-items-center h-100">
        <h1 class="mb-4 text-center text-warning" style="text-shadow: 1px 1px 2px #000;"><i class="fa-solid fa-sun"></i> Sluneční stanice</h1>
        <h4 class="mb-4 text-center">Zadej tajný kód své květiny:</h4>
        
        <div class="d-flex justify-content-center gap-3 mb-4" id="pinDisplay">
            <div class="pin-slot border rounded-circle shadow-sm bg-white" style="width: 80px; height: 80px;"></div>
            <div class="pin-slot border rounded-circle shadow-sm bg-white" style="width: 80px; height: 80px;"></div>
            <div class="pin-slot border rounded-circle shadow-sm bg-white" style="width: 80px; height: 80px;"></div>
        </div>

<button class="btn btn-outline-danger btn-lg mt-2 px-4" onclick="clearPin()">Vymazat</button>
    </div>

<div id="sunScreen" class="container py-4 flex-column h-100 d-none justify-content-center align-items-center" style="position: relative;">
        <h1 class="text-warning mb-3" style="text-shadow: 1px 1px 2px #ccc;"><i class="fa-solid fa-sun"></i> Slunění</h1>
        <h4 class="mb-5 text-secondary">Drž tlačítko a chytej bronz!</h4>

<button class="btn btn-outline-secondary mt-5" onclick="cancelSunning()"><i class="fa-solid fa-arrow-left"></i> Zrušit a odejít</button>
    </div>

<div id="resultScreen" class="container py-4 flex-column h-100 d-none justify-content-center align-items-center text-center">
        <i id="resultIcon" class="fa-solid fa-circle-check text-success" style="font-size: 8rem;"></i>
        <h1 id="resultTitle" class="mt-4 display-4 fw-bold">Hotovo!</h1>
        <h3 id="resultMessage" class="mt-3 text-secondary">Tvoje kytka má radost.</h3>
        <div class="spinner-border text-secondary mt-5" role="status"></div>
        <p class="mt-2 text-muted">Připravuji stanici pro dalšího hráče...</p>
    </div>
</div>

.action-btn { transition: transform 0.2s ease, background-color 0.2s ease; border: 5px solid transparent; }
    .action-btn:active { transform: scale(1.05); }

.sun-idle { transform: scale(1); transition: transform 0.3s ease-in-out; }
    .sun-active { transform: scale(1.4); color: #fff; transition: transform 0.3s ease-in-out, color 0.3s; }
</style>

function toggleFullscreen() {
        const el = document.documentElement;
        if (!document.fullscreenElement) {
            if (el.requestFullscreen) el.requestFullscreen();
            else if (el.webkitRequestFullscreen) el.webkitRequestFullscreen();
            else if (el.msRequestFullscreen) el.msRequestFullscreen();
        }
    }

document.addEventListener('fullscreenchange', () => {
        document.getElementById('fsBtn').style.display = document.fullscreenElement ? 'none' : 'block';
    });

function addPinColor(color) {
        if (currentPin.length < 3) {
            currentPin.push(color);
            updatePinDisplay();
            if (currentPin.length === 3) checkPinInDatabase();
        }
    }

function clearPin() {
        currentPin = [];
        updatePinDisplay();
    }

async function checkPinInDatabase() {
        targetFlowerId = varPrefix + currentPin.join('_');
        
        try {
            let exists = await forrestHubLib.dbVarKeyExists(targetFlowerId);
            
            if (exists) {
                targetFlowerData = await forrestHubLib.dbVarGetKey(targetFlowerId);
                
                if (targetFlowerData.status === "sick") {
                    forrestHubLib.uiShowAlert('warning', 'Tvoje kytka je nemocná! Běž do Záchranné stanice.', 4000);
                    setTimeout(clearPin, 2000);
                    return;
                }
                
                targetFlowerData.status = "busy";
                await forrestHubLib.dbVarSetKey(targetFlowerId, targetFlowerData);
                
                prepareSunScreen();
            } else {
                forrestHubLib.uiShowAlert('danger', 'Tento kód neexistuje. Zkus to znovu.', 3000);
                setTimeout(clearPin, 1000); 
            }
        } catch (error) {
            console.error(error);
            forrestHubLib.uiShowAlert('danger', 'Chyba serveru při ověřování PINu.', 3000);
            clearPin();
        }
    }

function resetInactivityTimer() {
        clearTimeout(inactivityTimer);
        inactivityTimer = setTimeout(cancelSunning, 30000);
    }

function prepareSunScreen() {
        localSunLevel = targetFlowerData.sun;
        updateProgressBar();
        document.getElementById('sunProgressBar').classList.replace('bg-danger', 'bg-warning');
        document.getElementById('pinScreen').classList.replace('d-flex', 'd-none');
        document.getElementById('sunScreen').classList.replace('d-none', 'd-flex');
        
        document.getElementById('sunIcon').className = "fa-solid fa-sun sun-idle";
        document.getElementById('btnText').innerText = "DRŽ MĚ";
        
        resetInactivityTimer();
    }

const sunBtn = document.getElementById('sunBtn');
    sunBtn.addEventListener('contextmenu', e => e.preventDefault());

sunBtn.addEventListener('pointerdown', (e) => {
        e.preventDefault();
        if (isSunning) return;
        isSunning = true;
        clearTimeout(inactivityTimer);
        
        sunBtn.classList.replace('btn-warning', 'btn-light'); 
        sunBtn.style.border = "5px solid #ffc107";
        document.getElementById('sunIcon').classList.replace('sun-idle', 'sun-active');
        document.getElementById('btnText').innerText = "SVÍTÍM...";

sunInterval = setInterval(() => {
            localSunLevel += 1;
            updateProgressBar();
            if (localSunLevel >= 110) stopSunning();
        }, 100);
    });

sunBtn.addEventListener('pointerup', stopSunning);
    sunBtn.addEventListener('pointerleave', stopSunning);
    sunBtn.addEventListener('pointercancel', stopSunning);

async function stopSunning() {
        if (!isSunning) return;
        isSunning = false;
        clearInterval(sunInterval);
        
        sunBtn.classList.replace('btn-light', 'btn-warning');
        sunBtn.style.border = "5px solid transparent";
        document.getElementById('sunIcon').classList.replace('sun-active', 'sun-idle');
        document.getElementById('btnText').innerText = "DRŽ MĚ";

finalizeSunning();
    }

async function finalizeSunning() {
        targetFlowerData.sun = localSunLevel;
        let isOversunned = false;

if (localSunLevel > 100) {
            targetFlowerData.status = "sick";
            isOversunned = true;
        } else {
            targetFlowerData.status = "ok";
        }

try {
            await forrestHubLib.dbVarSetKey(targetFlowerId, targetFlowerData);
            showResultScreen(isOversunned);
        } catch (error) {
            forrestHubLib.uiShowAlert('danger', 'Chyba při ukládání slunce.', 3000);
            cancelSunning(); 
        }
    }

async function cancelSunning() {
        clearTimeout(inactivityTimer);
        if (targetFlowerData) {
            targetFlowerData.status = "ok"; 
            await forrestHubLib.dbVarSetKey(targetFlowerId, targetFlowerData);
        }
        resetStation();
    }

function showResultScreen(isOversunned) {
        document.getElementById('sunScreen').classList.replace('d-flex', 'd-none');
        const resScreen = document.getElementById('resultScreen');
        const icon = document.getElementById('resultIcon');
        const title = document.getElementById('resultTitle');
        const msg = document.getElementById('resultMessage');

resScreen.classList.replace('d-none', 'd-flex');

if (isOversunned) {
            icon.className = "fa-solid fa-skull-crossbones text-danger";
            title.innerText = "Spáleno!";
            title.className = "mt-4 display-4 fw-bold text-danger";
            msg.innerText = "Kytka je spálená! Rychle do Záchranné stanice.";
            appContainer.classList.add('bg-danger-flash');
        } else {
            icon.className = "fa-solid fa-circle-check text-success";
            title.innerText = "Osluněno!";
            title.className = "mt-4 display-4 fw-bold text-success";
            msg.innerText = `Květina má teď ${localSunLevel} % slunce.`;
        }

setTimeout(() => {
            appContainer.classList.remove('bg-danger-flash');
            resetStation();
        }, 4000);
    }

function resetStation() {
        clearPin();
        targetFlowerId = ""; targetFlowerData = null; localSunLevel = 0;
        document.getElementById('resultScreen').classList.replace('d-flex', 'd-none');
        document.getElementById('sunScreen').classList.replace('d-flex', 'd-none');
        document.getElementById('pinScreen').classList.replace('d-none', 'd-flex');
    }
</script>
{% endblock %}