Vesmir/js/main.js

/**
 * Ročníková práce: Interaktivní průvodce vesmírem
 * Předmět: Webové technologie (2. ročník)
 * Modul: Kompletní interaktivita (Vanilla JS ES6+)
 */

document.addEventListener('DOMContentLoaded', () => {
    
    // ==========================================
    // 1. SEKCE: VESMÍRNÁ KALKULAČKA
    // ==========================================
    const weightInput = document.getElementById('weight-input');
    const calcButton = document.getElementById('calc-btn');
    const calcResult = document.getElementById('calc-result');

    const spaceGravity = {
        merkur: { name: 'Merkur', factor: 0.38, icon: '🪐' },
        venuse: { name: 'Venuše', factor: 0.91, icon: '🌍' },
        mars: { name: 'Mars', factor: 0.38, icon: '🔴' },
        jupiter: { name: 'Jupiter', factor: 2.34, icon: '🟤' },
        saturn: { name: 'Saturn', factor: 1.06, icon: '🪐' },
        uran: { name: 'Uran', factor: 0.92, icon: '🔵' },
        neptun: { name: 'Neptun', factor: 1.19, icon: '🔵' },
        mesic: { name: 'Měsíc', factor: 0.166, icon: '⚪' }
    };

    const calculateSpaceWeight = () => {
        const earthWeight = parseFloat(weightInput.value);

        if (isNaN(earthWeight) || earthWeight <= 0) {
            calcResult.innerHTML = `
                <p style="color: #ef4444; font-weight: bold;" role="alert">
                    ⚠️ Prosím, zadej platnou kladnou váhu v kilogramech.
                </p>
            `;
            return;
        }

        let resultHTML = `
            <h3 style="margin-bottom: 15px; color: #fff;">Tvoje váha ve vesmíru:</h3>
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 15px;">
        `;

        Object.keys(spaceGravity).forEach(key => {
            const planet = spaceGravity[key];
            const planetWeight = (earthWeight * planet.factor).toFixed(1);

            resultHTML += `
                <div style="background: rgba(255,255,255,0.03); padding: 12px; border-radius: 8px; text-align: center; border: 1px solid rgba(255,255,255,0.05);">
                    <span style="font-size: 1.5rem; display: block; margin-bottom: 5px;">${planet.icon}</span>
                    <strong style="display: block; color: #fff;">${planet.name}</strong>
                    <span style="font-size: 1.1rem; color: #06b6d4; font-weight: bold;">${planetWeight} kg</span>
                </div>
            `;
        });

        resultHTML += `</div>`;
        calcResult.innerHTML = resultHTML;
    };

    if (calcButton) {
        calcButton.addEventListener('click', calculateSpaceWeight);
    }
    if (weightInput) {
        weightInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') calculateSpaceWeight();
        });
    }

    // ==========================================
    // 2. SEKCE: DETAIL PLANETY (Oprava nefunkčního tlačítka)
    // ==========================================
    
    // Databáze podrobných informací o planetách
    const planetDetails = {
        mars: {
            title: "Mars – Detailní průzkum",
            text: "Mars je druhá nejmenší planeta sluneční soustavy. Má tenkou atmosféru složenou převážně z oxidu uhličitého. Nachází se zde Olympus Mons, nejvyšší známá hora sluneční soustavy (22 km), a hluboké údolí Valles Marineris. V současnosti planetu zkoumá několik roverů (např. Perseverance)."
        }
        // Sem můžeš v budoucnu přidat zeme: { ... }, jupiter: { ... }
    };

    // Najdeme všechna tlačítka, která mají atribut data-planet
    const detailButtons = document.querySelectorAll('button[data-planet]');

    detailButtons.forEach(button => {
        button.addEventListener('click', () => {
            // Zjistíme, o jakou planetu jde (např. "mars")
            const planetKey = button.getAttribute('data-planet');
            const data = planetDetails[planetKey];

            if (data) {
                // Jednoduché zobrazení detailu (prozatím přes nativní alert)
                alert(`${data.title}\n\n${data.text}`);
            } else {
                alert("Informace o této planetě se teprve připravují.");
            }
        });
    });
});