idle-game/js/stats.js

/**
 * Cosmic Garden - Statistics Panel
 * Tracks and displays game statistics
 */

const Stats = {
    /**
     * Initialize the stats panel
     */
    init() {
        this.render();
    },

    /**
     * Render the stats panel
     */
    render() {
        const container = document.getElementById('stats-content');
        if (!container) return;
        
        container.innerHTML = `
            <div class="stat-item">
                <div class="stat-label">Total Stardust Earned</div>
                <div class="stat-value" id="stat-total-stardust">0 ✨</div>
            </div>
            <div class="stat-item">
                <div class="stat-label">Current Production</div>
                <div class="stat-value" id="stat-production">0 ✨/sec</div>
            </div>
            <div class="stat-item">
                <div class="stat-label">Total Clicks</div>
                <div class="stat-value" id="stat-clicks">0</div>
            </div>
            <div class="stat-item">
                <div class="stat-label">Click Power</div>
                <div class="stat-value" id="stat-click-power">1 ✨</div>
            </div>
            <div class="stat-item">
                <div class="stat-label">Time Played</div>
                <div class="stat-value" id="stat-time-played">0:00:00</div>
            </div>
            <div class="stat-item">
                <div class="stat-label">Buildings Owned</div>
                <div class="stat-value" id="stat-buildings">0</div>
            </div>
            <div class="stat-item">
                <div class="stat-label">Upgrades Purchased</div>
                <div class="stat-value" id="stat-upgrades">0/${Object.keys(UPGRADES).length}</div>
            </div>
            <div class="stat-item">
                <div class="stat-label">Achievements Unlocked</div>
                <div class="stat-value" id="stat-achievements">0/${Object.keys(ACHIEVEMENTS).length}</div>
            </div>
            <div class="stat-item">
                <div class="stat-label">Game Progress</div>
                <div class="stat-bar">
                    <div class="stat-bar-fill" id="stat-progress-bar" style="width: 0%"></div>
                </div>
            </div>
        `;
    },

    /**
     * Update stats display
     */
    update() {
        // Total stardust
        const totalStardustEl = document.getElementById('stat-total-stardust');
        if (totalStardustEl) {
            totalStardustEl.textContent = `${Game.formatNumber(Game.state.totalStardust)} ✨`;
        }

        // Current production
        const productionEl = document.getElementById('stat-production');
        if (productionEl) {
            productionEl.textContent = `${Game.formatNumber(Game.getProductionPerSecond())} ✨/sec`;
        }

        // Total clicks
        const clicksEl = document.getElementById('stat-clicks');
        if (clicksEl) {
            clicksEl.textContent = Game.formatNumber(Game.state.totalClicks);
        }

        // Click power
        const clickPowerEl = document.getElementById('stat-click-power');
        if (clickPowerEl) {
            clickPowerEl.textContent = `${Game.formatNumber(Game.getClickPower())} ✨`;
        }

        // Time played
        const timePlayedEl = document.getElementById('stat-time-played');
        if (timePlayedEl) {
            const elapsed = Math.floor((Date.now() - Game.state.startTime) / 1000);
            timePlayedEl.textContent = this.formatTime(elapsed);
        }

        // Buildings owned
        const buildingsEl = document.getElementById('stat-buildings');
        if (buildingsEl) {
            const total = Object.values(Game.state.buildings).reduce((a, b) => a + b, 0);
            buildingsEl.textContent = total;
        }

        // Upgrades purchased
        const upgradesEl = document.getElementById('stat-upgrades');
        if (upgradesEl) {
            upgradesEl.textContent = `${Game.state.upgrades.length}/${Object.keys(UPGRADES).length}`;
        }

        // Achievements unlocked
        const achievementsEl = document.getElementById('stat-achievements');
        if (achievementsEl) {
            achievementsEl.textContent = `${Achievements.getCount()}/${Achievements.getTotal()}`;
        }

        // Game progress (based on total stardust milestones)
        const progressBarEl = document.getElementById('stat-progress-bar');
        if (progressBarEl) {
            const progress = this.calculateProgress();
            progressBarEl.style.width = `${progress}%`;
        }
    },

    /**
     * Format elapsed time as HH:MM:SS
     */
    formatTime(seconds) {
        const hours = Math.floor(seconds / 3600);
        const minutes = Math.floor((seconds % 3600) / 60);
        const secs = seconds % 60;
        
        if (hours > 0) {
            return `${hours}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
        }
        return `${minutes}:${secs.toString().padStart(2, '0')}`;
    },

    /**
     * Calculate game progress percentage
     * Based on total stardust earned vs all building costs combined
     */
    calculateProgress() {
        let totalCost = 0;
        for (const building of Object.values(BUILDINGS)) {
            // Approximate cost to buy one of each building
            totalCost += building.baseCost;
        }
        
        // Add upgrade costs
        for (const upgrade of Object.values(UPGRADES)) {
            totalCost += upgrade.cost;
        }
        
        const progress = Math.min(100, (Game.state.totalStardust / totalCost) * 100);
        return Math.round(progress);
    }
};

window.Stats = Stats;