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})"
                 title="Win Rate: ${(coin.winrate * 100).toFixed(1)}%
Value: $${coin.value.toFixed(2)}
Price: $${coin.price}"></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;
  coins = []; // Reset coins array
  initGame(); // Re-initialize the game to get initial coin state
  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();

console.log("Game initialized successfully");