static/script.js

let balance = 0;
let flipsLeft = 1000;
let currentCoin = 0;
let isGenerating = false;

function updateInfo() {
    document.getElementById("balance").textContent = balance.toFixed(2);
    document.getElementById("flips-left").textContent = flipsLeft;
}

function flipCoin() {
    if (flipsLeft > 0 && !isGenerating) {
        fetch("/flip", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify({ coin_index: currentCoin }),
        })
        .then((response) => response.json())
        .then((data) => {
            if (data.error) {
                alert(data.error);
            } else {
                const coin = document.getElementById("coin");
                coin.textContent = data.result;
                balance = data.balance;
                flipsLeft = data.flips_left;
                updateInfo();
                
                // Reset coin appearance after a short delay
                setTimeout(() => {
                    coin.textContent = "";
                }, 500);

                if (flipsLeft === 0) {
                    showGameOver();
                }
            }
        });
    }
}

function buyCoin(index) {
    if (!isGenerating && index !== currentCoin) {
        fetch("/buy", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify({ index: index }),
        })
        .then((response) => response.json())
        .then((data) => {
            if (data.success) {
                balance = data.balance;
                currentCoin = data.current_coin;
                document.getElementById("coin").style.backgroundColor = coins[currentCoin].color;
                updateInfo();
                updateSelectedCoin();
            } else {
                alert("Not enough money to buy this coin or you already own it!");
            }
        });
    }
}

function generateCoin() {
    if (!isGenerating && balance >= 4) {
        isGenerating = true;
        document.getElementById("loading-overlay").style.display = "flex";
        fetch("/generate_coin", {
            method: "POST",
        })
        .then((response) => response.json())
        .then((data) => {
            if (data.success) {
                coins.push(data.coin);
                const shop = document.getElementById("shop");
                const newCoin = createShopItem(data.coin, coins.length - 1);
                shop.appendChild(newCoin);
                balance = data.balance;
                updateInfo();
            } else {
                alert("Failed to generate new coin: " + data.error);
                balance = data.balance;
                updateInfo();
            }
        })
        .finally(() => {
            isGenerating = false;
            document.getElementById("loading-overlay").style.display = "none";
        });
    } else if (balance < 4) {
        alert("Not enough balance to generate a coin");
    }
}

function createShopItem(coin, index) {
    const shopItem = document.createElement("div");
    shopItem.className = "shop-item";
    shopItem.dataset.index = index;

    const shopCoin = document.createElement("div");
    shopCoin.className = "shop-coin";
    shopCoin.style.backgroundColor = coin.color;

    const coinPrice = document.createElement("span");
    coinPrice.className = "coin-price";
    coinPrice.textContent = `$${coin.price.toFixed(2)}`;

    const coinName = document.createElement("div");
    coinName.className = "coin-name";
    coinName.textContent = coin.name;

    const coinTooltip = document.createElement("div");
    coinTooltip.className = "coin-tooltip";
    coinTooltip.innerHTML = `
        <strong>${coin.name}</strong><br>
        Cost: $${coin.price.toFixed(2)}<br>
        Value: $${coin.value.toFixed(2)}<br>
        Win rate: ${(coin.winrate * 100).toFixed(2)}%<br>
        Bonus: $${coin.bonus.toFixed(2)}
    `;

    shopCoin.appendChild(coinPrice);
    shopItem.appendChild(shopCoin);
    shopItem.appendChild(coinName);
    shopItem.appendChild(coinTooltip);

    shopItem.onclick = () => buyCoin(index);

    return shopItem;
}

function updateSelectedCoin() {
    const shopItems = document.querySelectorAll('.shop-item');
    shopItems.forEach((item, index) => {
        if (index === currentCoin) {
            item.classList.add('selected');
        } else {
            item.classList.remove('selected');
        }
    });
}

function showGameOver() {
    const modal = document.getElementById("game-over");
    const finalScore = document.getElementById("final-score");
    finalScore.textContent = balance.toFixed(2);
    modal.style.display = "block";
}

function submitScore() {
    const initials = document.getElementById("initials").value.toUpperCase();
    if (initials.length > 0) {
        fetch("/game_over", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify({ initials: initials }),
        })
        .then((response) => response.json())
        .then((data) => {
            if (data.success) {
                location.reload();  // Reload the page to start a new game and show updated leaderboard
            }
        });
    } else {
        alert("Please enter your initials");
    }
}

function resetGame() {
    fetch("/reset_game", {
        method: "POST",
    })
    .then((response) => response.json())
    .then((data) => {
        if (data.success) {
            balance = 0;
            flipsLeft = 1000;
            currentCoin = 0;
            updateInfo();
            document.getElementById("coin").style.backgroundColor = coins[0].color;
            document.getElementById("game-over").style.display = "none";
            updateSelectedCoin();
        }
    });
}

document.addEventListener("DOMContentLoaded", () => {
    updateInfo();
    document.getElementById("coin").onclick = flipCoin;
    document.getElementById("generate-coin").onclick = generateCoin;
    document.getElementById("submit-score").onclick = submitScore;
    document.getElementById("play-again").onclick = resetGame;
    document.getElementById("coin").style.backgroundColor = coins[0].color;
    updateSelectedCoin();
});