static/js/game.js

let balance = 10;
let flipsLeft = 1000;
let currentCoin = 'bronze';
let coins = {};

function updateStats() {
    document.getElementById('balance').textContent = `$${balance.toFixed(2)}`;
    document.getElementById('flips').textContent = flipsLeft;
}

function updateShop() {
    const shop = document.getElementById('shop');
    shop.innerHTML = '';
    
    for (const [name, coin] of Object.entries(coins)) {
        const coinElement = document.createElement('div');
        coinElement.className = `shop-coin ${name === currentCoin ? 'selected' : ''}`;
        coinElement.style.backgroundColor = coin.color;
        coinElement.onclick = () => selectCoin(name);
        
        const priceElement = document.createElement('div');
        priceElement.textContent = `$${coin.price}`;
        
        const container = document.createElement('div');
        container.appendChild(coinElement);
        container.appendChild(priceElement);
        
        shop.appendChild(container);
    }
    
    const mintButton = document.createElement('button');
    mintButton.id = 'mint-button';
    mintButton.textContent = '🎲 Mint ($4)';
    mintButton.onclick = mintCoin;
    shop.appendChild(mintButton);
}

function selectCoin(name) {
    if (coins[name].price <= balance) {
        currentCoin = name;
        document.getElementById('coin').style.backgroundColor = coins[name].color;
        updateShop();
    } else {
        alert("You can't afford this coin!");
    }
}

async function flipCoin() {
    if (flipsLeft > 0) {
        flipsLeft--;
        const response = await fetch('/flip', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ coin: currentCoin }),
        });
        const data = await response.json();
        
        if (data.result === 'heads') {
            balance += data.value;
        }
        
        updateStats();
        
        if (flipsLeft === 0) {
            gameOver();
        }
    }
}

async function mintCoin() {
    if (balance >= 4) {
        balance -= 4;
        const response = await fetch('/mint', { method: 'POST' });
        const newCoin = await response.json();
        coins[newCoin.name] = newCoin;
        updateShop();
        updateStats();
    } else {
        alert("You don't have enough money to mint a new coin!");
    }
}

async function gameOver() {
    document.getElementById('game-area').style.display = 'none';
    document.getElementById('game-over').style.display = 'flex';
    
    const response = await fetch('/leaderboard');
    const leaderboard = await response.json();
    
    const leaderboardBody = document.getElementById('leaderboard-body');
    leaderboardBody.innerHTML = '';
    
    leaderboard.forEach((entry, index) => {
        const row = leaderboardBody.insertRow();
        row.insertCell(0).textContent = index + 1;
        row.insertCell(1).textContent = entry.initials;
        row.insertCell(2).textContent = entry.score;
    });
}

async function submitScore() {
    const initials = document.getElementById('initials').value;
    if (initials) {
        await fetch('/leaderboard', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ initials, score: balance }),
        });
        location.reload();
    } else {
        alert('Please enter your initials!');
    }
}

function playAgain() {
    location.reload();
}

window.onload = async function() {
    const response = await fetch('/');
    const data = await response.text();
    coins = JSON.parse(data.match(/coins = (.+?);/)[1]);
    updateStats();
    updateShop();
    document.getElementById('coin').style.backgroundColor = coins[currentCoin].color;
};