Záchranná stanice

Zadej kód své nemocné květiny:

{% extends "templates/base.html" %}
{% set game_name = "Záchranná stanice" %}
{% 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-danger"><i class="fa-solid fa-house-medical"></i> Záchranná stanice</h1>
        <h4 class="mb-4 text-center">Zadej kód své nemocné 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="quizScreen" class="container py-4 flex-column h-100 d-none justify-content-center align-items-center text-center">
        <h2 id="quizDiagnosis" class="text-danger mb-4 fw-bold"><i class="fa-solid fa-stethoscope"></i> Diagnóza...</h2>
        <h3 id="quizQuestion" class="mb-5 px-3">Zde bude otázka?</h3>

<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">Výsledek</h1>
        <h3 id="resultMessage" class="mt-3 text-secondary">Zpráva...</h3>
        <div class="spinner-border text-secondary mt-5" id="resultSpinner" role="status"></div>
    </div>

</div>

// Databáze otázek podle typu problému
    const quizData = {
        water: [
            { q: "Tvoje kytka se topí! Co bys udělal/a, aby jí bylo lépe?", options: [{a: "Dám ji na chvíli na sluníčko", c: true}, {a: "Přidám jí ještě víc vody", c: false}, {a: "Dám ji do ledničky", c: false}] },
            { q: "Květina má moc vody a kořeny nemohou dýchat. Co potřebují kořeny v hlíně?", options: [{a: "Kyslík (vzduch)", c: true}, {a: "Čokoládu", c: false}, {a: "Sůl", c: false}] }
        ],
        sun: [
            { q: "Kytka je úplně spálená od slunce! Kam ji schováme?", options: [{a: "Do chladného stínu", c: true}, {a: "Do rozpálené trouby", c: false}, {a: "Přímo k táboráku", c: false}] },
            { q: "Když je na sluníčku moc velké horko, co se z listů rychle ztrácí?", options: [{a: "Voda (odpařuje se)", c: true}, {a: "Barva", c: false}, {a: "Hlína", c: false}] }
        ],
        fertilizer: [
            { q: "Přehnojil/a jsi ji! Kytce je z toho 'špatně'. Jak hnojivo z hlíny odplavíme?", options: [{a: "Propláchneme ji čistou vodou", c: true}, {a: "Přidáme další hnojivo", c: false}, {a: "Pofoukáme ji", c: false}] },
            { q: "Z čeho získávají rostliny živiny v přírodě?", options: [{a: "Z půdy a z rozpadlých listů", c: true}, {a: "Z plastových lahví", c: false}, {a: "Z kamenů", c: false}] }
        ],
        general: [
            { q: "Květina je nemocná. Co dělají škůdci (třeba mšice) na rostlinách?", options: [{a: "Vysávají jim šťávu z listů", c: true}, {a: "Zpívají jim ukolébavky", c: false}, {a: "Zalévají je", c: false}] },
            { q: "Když rostlina strádá, chybí jí základní věci. Co potřebuje každá kytka k růstu?", options: [{a: "Vodu, světlo a živiny", c: true}, {a: "Tmu, chlad a kamení", c: false}, {a: "Jen hezké slovo", c: false}] }
        ]
    };

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('success', 'Tvoje kytka je zdravá! Běž hrát dál.', 4000);
                    setTimeout(clearPin, 2000);
                    return;
                }
                
                startQuiz();

} else {
                forrestHubLib.uiShowAlert('danger', 'Tento kód neexistuje.', 3000);
                setTimeout(clearPin, 1000); 
            }
        } catch (error) {
            console.error(error);
            forrestHubLib.uiShowAlert('danger', 'Chyba serveru při ověřování.', 3000);
            clearPin();
        }
    }

function startQuiz() {
        // Zjištění typu problému
        let issue = "general";
        let diagnosisText = "Neznámá nemoc";

if (targetFlowerData.water > 100) { issue = "water"; diagnosisText = "Přelito! Kytka má moc vody."; }
        else if (targetFlowerData.sun > 100) { issue = "sun"; diagnosisText = "Spáleno! Kytka má moc slunce."; }
        else if (targetFlowerData.fertilizer > 100) { issue = "fertilizer"; diagnosisText = "Přehnojeno! Kytka má moc živin."; }
        else { diagnosisText = "Kytka je nemocná nebo pokousaná."; }

// Výběr náhodné otázky z kategorie
        const pool = quizData[issue];
        const questionObj = pool[Math.floor(Math.random() * pool.length)];
        
        // Zamíchání odpovědí
        let options = [...questionObj.options];
        options.sort(() => Math.random() - 0.5);

// Vykreslení UI
        document.getElementById('quizDiagnosis').innerHTML = `<i class="fa-solid fa-stethoscope"></i> ${diagnosisText}`;
        document.getElementById('quizQuestion').innerText = questionObj.q;

const answersDiv = document.getElementById('quizAnswers');
        answersDiv.innerHTML = '';
        
        options.forEach(opt => {
            const btn = document.createElement('button');
            btn.className = "answer-btn shadow-sm";
            btn.innerText = opt.a;
            btn.onclick = () => handleAnswer(opt.c);
            answersDiv.appendChild(btn);
        });

// Přepnutí obrazovky
        document.getElementById('pinScreen').classList.replace('d-flex', 'd-none');
        document.getElementById('quizScreen').classList.replace('d-none', 'd-flex');
    }

async function handleAnswer(isCorrect) {
        document.getElementById('quizScreen').classList.replace('d-flex', 'd-none');
        const resScreen = document.getElementById('resultScreen');
        resScreen.classList.replace('d-none', 'd-flex');
        
        const icon = document.getElementById('resultIcon');
        const title = document.getElementById('resultTitle');
        const msg = document.getElementById('resultMessage');

if (isCorrect) {
            // LÉČENÍ KYTKY
            targetFlowerData.status = "ok";
            // Srazíme přelití/přeslunění zpět na bezpečných 50%
            if (targetFlowerData.water > 100) targetFlowerData.water = 50;
            if (targetFlowerData.sun > 100) targetFlowerData.sun = 50;
            if (targetFlowerData.fertilizer > 100) targetFlowerData.fertilizer = 50;

try {
                await forrestHubLib.dbVarSetKey(targetFlowerId, targetFlowerData);
                
                icon.className = "fa-solid fa-star text-success";
                title.innerText = "Správně!";
                title.className = "mt-4 display-4 fw-bold text-success";
                msg.innerText = "Kytka je vyléčena! Běž se o ni dál starat na svůj tablet.";
                appContainer.classList.add('bg-success-flash');
                
            } catch (e) {
                title.innerText = "Chyba připojení!";
            }

} else {
            // ŠPATNÁ ODPOVĚĎ
            icon.className = "fa-solid fa-circle-xmark text-danger";
            title.innerText = "Špatně...";
            title.className = "mt-4 display-4 fw-bold text-danger";
            msg.innerText = "To kytce nepomůže. Zkus to znovu!";
            appContainer.classList.add('bg-danger-flash');
        }

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

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