Vypěstuj si svou květinu!

Hledám pro tebe unikátní barvy...

{% extends "templates/base.html" %}
{% set game_name = "Moje Květina" %}
{% block content %}

<div id="setupScreen" class="container d-flex flex-column justify-content-center align-items-center h-100">
        <h1 class="mb-4 text-center fw-bold">Vypěstuj si svou květinu!</h1>
        <div id="loadingPin" class="text-center mb-4">
            <div class="spinner-border text-primary mb-2" role="status"></div>
            <h4>Hledám pro tebe unikátní barvy...</h4>
        </div>
        <div id="pinReady" class="text-center w-100" style="display: none;">
            <h4 class="mb-4">Tohle je tvůj tajný kód. Dobře si ho pamatuj!</h4>
            <div class="d-flex justify-content-center gap-3 mb-5" id="pinDisplay">
                <div class="pin-slot border rounded-circle shadow" style="width: 100px; height: 100px;"></div>
                <div class="pin-slot border rounded-circle shadow" style="width: 100px; height: 100px;"></div>
                <div class="pin-slot border rounded-circle shadow" style="width: 100px; height: 100px;"></div>
            </div>
            <button id="startBtn" class="btn btn-success btn-lg px-5 py-4 fs-1 shadow fw-bold" onclick="startGame()">ZAČÍT HRÁT!</button>
        </div>
    </div>

<div id="alertBox" class="alert text-center shadow-lg position-absolute start-50 translate-middle-x" 
             style="display: none; top: 10vh; width: 90%; max-width: 500px; z-index: 100;">
            <h2 id="alertHeading" class="alert-heading fw-bold fs-3">Pozor!</h2>
            <p class="fs-5 mb-0" id="alertReason">Zpráva...</p>
        </div>

<div class="d-flex flex-column align-items-center justify-content-end flex-grow-1 pb-3" style="min-height: 0;">
            <div class="position-relative d-flex justify-content-center align-items-end" style="flex-grow: 1; min-height: 0;">
                <img id="flowerVisual" src="flower_stage1.png" alt="Květina">
                <div id="bugContainer" class="position-absolute w-100 h-100 top-0 start-0 pointer-events-none"></div>
            </div>
            
            <div class="text-center w-100 px-4 mt-3 flex-shrink-0">
                <h3 class="mb-2 fw-bold"><span id="stageText">Semínko</span></h3>
                <div class="progress shadow-sm" style="height: 35px; font-size: 1.3rem; border-radius: 20px; border: 2px solid #fff;">
                    <div id="xpBar" class="progress-bar progress-bar-striped progress-bar-animated bg-success fw-bold" role="progressbar" style="width: 0%;">0 %</div>
                </div>
            </div>
        </div>

<div id="winScreen" class="container py-4 flex-column h-100 text-center justify-content-center align-items-center d-none">
        <h1 class="display-3 fw-bold text-success mb-3"><i class="fa-solid fa-trophy text-warning"></i> Gratulujeme!</h1>
        <h3 class="mb-4 text-secondary">Podařilo se ti vypěstovat nádhernou květinu.</h3>
        
        <img id="winVisual" src="flower_stage4.png" class="pulse-anim mb-4" style="max-height: 40vh; object-fit: contain;" alt="Výhra">
        
        <button class="btn btn-primary btn-lg px-5 py-3 fs-2 shadow fw-bold mt-2" onclick="resetGame()">VYPĚSTOVAT NOVOU</button>
    </div>

</div>

.pulse-anim { animation: pulse 2s infinite ease-in-out; }
    @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
</style>

document.addEventListener('DOMContentLoaded', generateUniquePin);

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

async function generateUniquePin() {
        try {
            let isUnique = false;
            let safetyCounter = 0;
            while (!isUnique && safetyCounter < 50) {
                let tempPin = [
                    availableColors[Math.floor(Math.random() * availableColors.length)],
                    availableColors[Math.floor(Math.random() * availableColors.length)],
                    availableColors[Math.floor(Math.random() * availableColors.length)]
                ];
                let tempId = tempPin.join('_');
                let exists = await forrestHubLib.dbVarKeyExists(varPrefix + tempId);
                if (!exists) { myPin = tempPin; myId = tempId; isUnique = true; }
                safetyCounter++;
            }
            document.querySelectorAll('.pin-slot').forEach((slot, index) => { slot.style.backgroundColor = myPin[index]; });
            document.getElementById('loadingPin').style.display = 'none';
            document.getElementById('pinReady').style.display = 'block';
        } catch (error) { console.error(error); }
    }

async function startGame() {
        await forrestHubLib.dbVarSetKey(varPrefix + myId, myFlower);
        document.querySelectorAll('.mini-pin').forEach((slot, idx) => { slot.style.backgroundColor = myPin[idx]; });

document.getElementById('setupScreen').classList.add('d-none');
        document.getElementById('setupScreen').classList.remove('d-flex');
        
        document.getElementById('gameScreen').classList.remove('d-none');
        document.getElementById('gameScreen').classList.add('d-flex');

updateUI();
        startMainLoop();
    }

if (myFlower.status !== "ok") { updateUI(); return; }

// Úbytek
            myFlower.water = Math.max(0, myFlower.water - 1);
            myFlower.sun = Math.max(0, myFlower.sun - 1);
            myFlower.fertilizer = Math.max(0, myFlower.fertilizer - 1);

if (myFlower.water > 100 || myFlower.sun > 100 || myFlower.fertilizer > 100) myFlower.status = "sick";

if (myFlower.status === "ok" && !activeBug) {
                let isStarving = (myFlower.water < 15 || myFlower.sun < 15 || myFlower.fertilizer < 15);
                let isVerySlow = !isStarving && (myFlower.water < 30 || myFlower.sun < 30 || myFlower.fertilizer < 30);
                let isPerfect = (myFlower.water >= 60 && myFlower.water <= 90 && myFlower.sun >= 60 && myFlower.sun <= 90 && myFlower.fertilizer >= 60 && myFlower.fertilizer <= 90);
                
                if (isStarving) {
                    myFlower.xp -= 1;
                    if (myFlower.xp < 0) {
                        if (myFlower.stage > 1) { myFlower.stage--; myFlower.xp = 90; } 
                        else { myFlower.xp = 0; }
                    }
                } else {
                    // DYNAMICKÁ RYCHLOST Z ADMIN PANELU
                    let growthSpeed = isVerySlow ? globalSettings.speedSlow : (isPerfect ? globalSettings.speedPerfect : globalSettings.speedNormal);
                    
                    myFlower.xp += growthSpeed;
                    
                    if (myFlower.xp >= 100) {
                        if (myFlower.stage < 4) { myFlower.stage++; myFlower.xp = 0; } 
                        else { myFlower.xp = 100; myFlower.status = "won"; showWinScreen(); }
                    }
                }
            }
            updateUI();
            if(myFlower.status !== "won") await forrestHubLib.dbVarSetKey(varPrefix + myId, myFlower);
        }, 2000);
        bugSpawner = setInterval(() => { if (myFlower.status === "ok" && !activeBug && Math.random() > 0.5) spawnBug(); }, 10000);
    }

visual.src = `flower_stage${myFlower.stage}.png`;
        visual.style.height = `${currentHeight}vh`;
        
        if (myFlower.status === "busy") {
            visual.style.filter = "drop-shadow(0 0 20px #0dcaf0) grayscale(30%)";
            alertBox.style.display = 'block'; alertBox.className = "alert alert-info text-center shadow-lg position-absolute start-50 translate-middle-x";
            document.getElementById('alertHeading').innerHTML = "<i class='fa-solid fa-pause'></i> Hra pozastavena";
            document.getElementById('alertReason').innerHTML = "Pracuješ na stanici...";
        } 
        else if (myFlower.status === "sick" || myFlower.water > 100 || myFlower.sun > 100 || myFlower.fertilizer > 100) {
            visual.style.filter = "drop-shadow(0 0 30px #dc3545) sepia(50%)"; 
            alertBox.style.display = 'block'; alertBox.className = "alert alert-danger text-center shadow-lg position-absolute start-50 translate-middle-x";
            document.getElementById('alertHeading').innerHTML = "<i class='fa-solid fa-triangle-exclamation'></i> Pozor, kytka je nemocná!";
            document.getElementById('alertReason').innerText = myFlower.water > 100 ? "Přelil jsi vodu!" : "Běž do záchranné stanice.";
        } 
        else {
            visual.style.filter = "none"; alertBox.style.display = 'none';
        }
    }

function showWinScreen() {
        document.getElementById('gameScreen').classList.add('d-none');
        document.getElementById('gameScreen').classList.remove('d-flex');
        
        document.getElementById('winScreen').classList.remove('d-none');
        document.getElementById('winScreen').classList.add('d-flex');
    }

async function resetGame() {
        try { await forrestHubLib.dbVarDeleteKey(varPrefix + myId); } catch(e) {}
        location.reload(); 
    }
</script>
{% endblock %}