<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Path to the Singularity by DitchDoctor</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #1a1a1a;
            color: #00ff00;
        }
        #mainButton {
            width: 200px;
            height: 200px;
            font-size: 18px;
            margin: 20px;
            cursor: pointer;
            background-color: #2a2a2a;
            color: #00ff00;
            border: 2px solid #00ff00;
            border-radius: 10px;
        }
        .upgrade {
            width: 100%;
            margin: 10px;
            padding: 10px;
            background-color: #2a2a2a;
            border: 1px solid #00ff00;
            border-radius: 5px;
            cursor: pointer;
            color: #00ff00;
            text-align: left;
            font-family: Arial, sans-serif;
            font-size: 1em;
            /* Prevent text selection */
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        .upgrade:hover {
            background-color: #3a3a3a;
        }
        .upgrade:active {
            background-color: #4a4a4a;
            transform: scale(0.98);
        }
        .upgrade.cant-afford {
            opacity: 0.7;
            cursor: not-allowed;
        }
        #stats {
            margin: 20px;
        }
        .purchase-btn {
            margin: 5px;
            padding: 5px 10px;
            background-color: #2a2a2a;
            border: 1px solid #00ff00;
            color: #00ff00;
            cursor: pointer;
            border-radius: 5px;
        }
        .purchase-btn:hover {
            background-color: #3a3a3a;
        }
        .purchase-btn.active {
            background-color: #004400;
        }
    </style>
</head>
<body>
    <h1>Path to Singularity</h1>
    <div id="stats">
        <h2>Computational Power: <span id="power">0</span> FLOPS</h2>
        <h3>Per Second: <span id="powerPerSecond">0</span> FLOPS</h3>
    </div>
    
    <button id="mainButton">CALCULATE</button>
    
    <div id="upgrades">
        <h2>Upgrades</h2>
        <div id="upgradeList"></div>
    </div>

    <script>
        let game = {
            power: 0,
            powerPerClick: 1,
            powerPerSecond: 0,
            upgrades: [
                {
                    id: 'calculator',
                    name: 'Scientific Calculator',
                    cost: 10,
                    baseCost: 10,
                    count: 0,
                    power: 0.1,
                    description: 'Adds 0.1 FLOPS per second'
                },
                {
                    id: 'computer',
                    name: 'Personal Computer',
                    cost: 50,
                    baseCost: 50,
                    count: 0,
                    power: 1,
                    description: 'Adds 1 FLOPS per second'
                },
                {
                    id: 'server',
                    name: 'Server',
                    cost: 200,
                    baseCost: 200,
                    count: 0,
                    power: 5,
                    description: 'Adds 5 FLOPS per second'
                },
                {
                    id: 'datacenter',
                    name: 'Data Center',
                    cost: 1000,
                    baseCost: 1000,
                    count: 0,
                    power: 25,
                    description: 'Adds 25 FLOPS per second'
                },
                {
                    id: 'quantumComputer',
                    name: 'Quantum Computer',
                    cost: 5000,
                    baseCost: 5000,
                    count: 0,
                    power: 150,
                    description: 'Adds 150 FLOPS per second'
                },
                {
                    id: 'neuralNetwork',
                    name: 'Neural Network Cluster',
                    cost: 25000,
                    baseCost: 25000,
                    count: 0,
                    power: 750,
                    description: 'Adds 750 FLOPS per second'
                },
                {
                    id: 'aiResearchLab',
                    name: 'AI Research Lab',
                    cost: 100000,
                    baseCost: 100000,
                    count: 0,
                    power: 3000,
                    description: 'Adds 3,000 FLOPS per second'
                },
                {
                    id: 'globalAiGrid',
                    name: 'Global AI Grid',
                    cost: 500000,
                    baseCost: 500000,
                    count: 0,
                    power: 15000,
                    description: 'Adds 15,000 FLOPS per second'
                },
                {
                    id: 'dysonSphere',
                    name: 'Dyson Sphere Computer',
                    cost: 2500000,
                    baseCost: 2500000,
                    count: 0,
                    power: 75000,
                    description: 'Adds 75,000 FLOPS per second'
                },
                {
                    id: 'matrioshkaBrain',
                    name: 'Matrioshka Brain',
                    cost: 10000000,
                    baseCost: 10000000,
                    count: 0,
                    power: 350000,
                    description: 'Adds 350,000 FLOPS per second'
                }
            ]
        };

        // Load saved game
        const savedGame = localStorage.getItem('singularityGame');
        if (savedGame) {
            game = JSON.parse(savedGame);
        }

        function formatNumber(num) {
            if (num < 1000) return Math.floor(num);
            const suffixes = ['', 'K', 'M', 'B', 'T', 'Qa', 'Qi', 'Sx', 'Sp', 'Oc'];
            const exp = Math.floor(Math.log10(num) / 3);
            return (num / Math.pow(1000, exp)).toFixed(2) + suffixes[exp];
        }

        function updateDisplay() {
            updateNumbers();
            
            // Add purchase amount selector if it doesn't exist
            if (!document.getElementById('purchaseAmount')) {
                const purchaseDiv = document.createElement('div');
                purchaseDiv.id = 'purchaseAmount';
                purchaseDiv.style.margin = '10px';
                purchaseDiv.innerHTML = `
                    <button onclick="setPurchaseAmount(1)" class="purchase-btn active">Buy 1</button>
                    <button onclick="setPurchaseAmount(10)" class="purchase-btn">Buy 10</button>
                    <button onclick="setPurchaseAmount(100)" class="purchase-btn">Buy 100</button>
                    <button onclick="setPurchaseAmount('max')" class="purchase-btn">Buy Max</button>
                `;
                document.getElementById('upgrades').insertBefore(purchaseDiv, document.getElementById('upgradeList'));
            }
            
            // Only recreate upgrade elements if they don't exist
            const upgradeList = document.getElementById('upgradeList');
            if (upgradeList.children.length !== getVisibleUpgrades().length) {
                upgradeList.innerHTML = '';
                
                getVisibleUpgrades().forEach(upgrade => {
                    const upgradeElement = document.createElement('button');
                    upgradeElement.className = 'upgrade';
                    upgradeElement.addEventListener('click', () => buyUpgrade(upgrade));
                    upgradeList.appendChild(upgradeElement);
                });
            }
        }

        function buyUpgrade(upgrade) {
            const amount = game.purchaseAmount === 'max' ? getMaxPurchase(upgrade) : game.purchaseAmount;
            const bulkCost = calculateBulkCost(upgrade, amount);
            
            if (game.power >= bulkCost) {
                game.power -= bulkCost;
                for (let i = 0; i < amount; i++) {
                    upgrade.count++;
                    upgrade.cost = Math.ceil(upgrade.baseCost * Math.pow(1.15, upgrade.count));
                }
                calculatePowerPerSecond();
                updateDisplay();
                saveGame();
                
                // Check for victory
                if (game.power >= game.endGoal) {
                    alert('Congratulations! You have reached technological singularity!');
                }
            }
        }

        function calculatePowerPerSecond() {
            game.powerPerSecond = game.upgrades.reduce((total, upgrade) => {
                return total + (upgrade.power * upgrade.count);
            }, 0);
        }

        function saveGame() {
            localStorage.setItem('singularityGame', JSON.stringify(game));
        }

        // Main button click
        document.getElementById('mainButton').onclick = () => {
            game.power += game.powerPerClick;
            updateDisplay();
            saveGame();
        };

        // Game loop
        setInterval(() => {
            game.power += game.powerPerSecond / 10;
            updateNumbers();
            saveGame();
        }, 100);

        // Initial display update
        calculatePowerPerSecond();
        updateDisplay();

        // New function to get visible upgrades
        function getVisibleUpgrades() {
            return game.upgrades.filter(upgrade => {
                // Show upgrade if player has reached 50% of its base cost
                // or if player has already bought at least one
                return game.power >= (upgrade.baseCost * 0.75) || upgrade.count > 0;
            });
        }

        function calculateBulkCost(upgrade, amount) {
            if (amount === 'max') {
                amount = getMaxPurchase(upgrade);
            }
            let total = 0;
            for (let i = 0; i < amount; i++) {
                total += Math.ceil(upgrade.baseCost * Math.pow(1.15, upgrade.count + i));
            }
            return total;
        }

        function getMaxPurchase(upgrade) {
            let count = 0;
            let cost = upgrade.cost;
            let totalCost = 0;
            
            while (totalCost <= game.power) {
                totalCost += cost;
                cost = Math.ceil(upgrade.baseCost * Math.pow(1.15, upgrade.count + count + 1));
                count++;
            }
            return count - 1;
        }

        function setPurchaseAmount(amount) {
            game.purchaseAmount = amount;
            document.querySelectorAll('.purchase-btn').forEach(btn => {
                btn.classList.toggle('active', btn.innerText === `Buy ${amount}`);
            });
            updateDisplay();
        }

        // Add these new variables to the game object
        game.purchaseAmount = 1;
        game.endGoal = 1e15; // 1 Quadrillion FLOPS

        // Add this to the stats display
        function updateNumbers() {
            document.getElementById('power').textContent = formatNumber(game.power);
            document.getElementById('powerPerSecond').textContent = formatNumber(game.powerPerSecond);
            
            // Replace the stats content instead of appending
            const progressPercent = (game.power / game.endGoal) * 100;
            document.getElementById('stats').innerHTML = `
                <h2>Computational Power: <span id="power">${formatNumber(game.power)}</span> FLOPS</h2>
                <h3>Per Second: <span id="powerPerSecond">${formatNumber(game.powerPerSecond)}</span> FLOPS</h3>
                <h3>Progress to Singularity: ${formatNumber(progressPercent)}%</h3>
                <h4>Goal: ${formatNumber(game.endGoal)} FLOPS</h4>
            `;
            
            // Update upgrade buttons
            document.querySelectorAll('.upgrade').forEach((upgradeElement, index) => {
                const upgrade = getVisibleUpgrades()[index];
                const bulkCost = calculateBulkCost(upgrade, game.purchaseAmount);
                const canAfford = game.power >= bulkCost;
                const maxPurchase = getMaxPurchase(upgrade);
                
                upgradeElement.classList.toggle('cant-afford', !canAfford);
                
                upgradeElement.innerHTML = `
                    ${upgrade.name} (${upgrade.count})<br>
                    Cost: ${formatNumber(bulkCost)} FLOPS<br>
                    ${upgrade.description}<br>
                    ${game.purchaseAmount === 'max' ? `Can buy: ${maxPurchase}` : ''}
                `;
            });
        }
    </script>
</body>
</html>
