static/js/game.js

let balance = 10;
let flipsLeft = 1000;
let currentCoin = 1;
let coins = [];

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

function updateShop() {
    const shop = document.getElementById('shop');
    shop.innerHTML = '';
    
    coins.forEach(coin => {
        const coinElement = document.createElement('div');
        coinElement.className = 'shop-item';
        coinElement.innerHTML = `
            <div class="coin-icon ${coin.id === currentCoin ? 'selected' : ''}" 
                 style="background-color: ${coin.color};"
                 onclick="selectCoin(${coin.id})"></div>
            <div>$${coin.price}</div>
        `;
        shop.appendChild(coinElement);
    });
    
    const mintButton = document.createElement('button');
    mintButton.id = 'mint-button';
    mintButton.textContent = '🎲 Mint ($4)';
    mintButton.onclick = mintCoin;
    shop.appendChild(mintButton);
}

function selectCoin(id) {
    const coin = coins.find(c => c.id === id);
    if (coin && balance >= coin.price) {
        balance -= coin.price;
        currentCoin = id;
        updateStats();
        updateShop();
    }
}

async function flipCoin() {
    if (flipsLeft > 0) {
        flipsLeft--;
        const response = await fetch('/api/flip', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ coinId: currentCoin }),
        });
        const result = await response.json();
        
        const coin = document.getElementById('coin');
        coin.style.transform = 'rotateY(720deg)';
        setTimeout(() => {
            coin.style.transform = 'rotateY(0deg)';
            if (result.result === 'heads') {
                balance += result.value;
                coin.textContent = 'H';
            } else {
                coin.textContent = 'T';
            }
            updateStats();
        }, 500);
        
        if (flipsLeft === 0) {
            setTimeout(gameOver, 1000);
        }
    }
}

async function mintCoin() {
    if (balance >= 4) {
        balance -= 4;
        const response = await fetch('/api/mint', { method: 'POST' });
        const newCoin = await response.json();
        coins.push(newCoin);
        updateStats();
        updateShop();
    }
}

async function gameOver() {
    const gameOverScreen = document.createElement('div');
    gameOverScreen.id = 'game-over';
    gameOverScreen.innerHTML = `
        <h2>Game Over</h2>
        <p>Your final balance: $${balance.toFixed(2)}</p>
        <div id="leaderboard"></div>
        <form id="initials-form">
            <input type="text" id="initials-input" maxlength="3" placeholder="Enter your initials">
            <button type="submit" id="submit-score">Submit Score</button>
        </form>
        <button id="play-again">Play Again</button>
    `;
    document.body.appendChild(gameOverScreen);
    
    document.getElementById('initials-form').onsubmit = submitScore;
    document.getElementById('play-again').onclick = resetGame;
    
    await updateLeaderboard();
}

async function submitScore(event) {
    event.preventDefault();
    const initials = document.getElementById('initials-input').value.toUpperCase();
    if (initials) {
        await fetch('/api/leaderboard', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ initials, score: balance }),
        });
        await updateLeaderboard();
    }
}

async function updateLeaderboard() {
    const response = await fetch('/api/leaderboard');
    const leaderboard = await response.json();
    const leaderboardElement = document.getElementById('leaderboard');
    leaderboardElement.innerHTML = `
        <h3>Leaderboard</h3>
        <table>
            <tr><th>Rank</th><th>Initials</th><th>Score</th></tr>
            ${leaderboard.map((entry, index) => `
                <tr>
                    <td>${index + 1}</td>
                    <td>${entry.initials}</td>
                    <td>$${entry.score.toFixed(2)}</td>
                </tr>
            `).join('')}
        </table>
    `;
}

function resetGame() {
    balance = 10;
    flipsLeft = 1000;
    currentCoin = 1;
    updateStats();
    updateShop();
    document.getElementById('game-over').remove();
}

async function initGame() {
    const response = await fetch('/api/coins');
    coins = await response.json();
    updateStats();
    updateShop();
    document.getElementById('coin').onclick = flipCoin;
}

initGame();