Update static/script.js

static/script.js

@@ -1,6 +1,7 @@
 let balance = 0;
 let flipsLeft = 1000;
 let currentCoin = 0;
+let isGenerating = false;
 
 function updateInfo() {
   document.getElementById("balance").textContent = balance.toFixed(2);
@@ -8,7 +9,7 @@ function updateInfo() {
 }
 
 function flipCoin() {
-  if (flipsLeft > 0) {
+  if (flipsLeft > 0 && !isGenerating) {
     fetch("/flip", {
       method: "POST",
       headers: {
@@ -19,65 +20,79 @@ function flipCoin() {
       .then((response) => response.json())
       .then((data) => {
         const coin = document.getElementById("coin");
-        coin.textContent = data.is_heads ? "H" : "T";
-        if (data.is_heads) {
-          balance += data.value;
-        }
-        flipsLeft--;
+        coin.textContent = data.result;
+        balance = data.balance;
+        flipsLeft = data.flips_left;
         updateInfo();
+        
+        // Reset coin appearance after a short delay
+        setTimeout(() => {
+          coin.textContent = "";
+        }, 500);
       });
   }
 }
 
 function buyCoin(index) {
-  fetch("/buy", {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify({ coin_index: index, balance: balance }),
-  })
-    .then((response) => response.json())
-    .then((data) => {
-      if (data.success) {
-        balance -= coins[index].price;
-        currentCoin = index;
-        document.getElementById("coin").style.backgroundColor =
-          coins[index].color;
-        updateInfo();
-      } else {
-        alert("Not enough money to buy this coin!");
-      }
-    });
+  if (!isGenerating) {
+    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 = index;
+          document.getElementById("coin").style.backgroundColor = coins[index].color;
+          updateInfo();
+        } else {
+          alert("Not enough money to buy this coin!");
+        }
+      });
+  }
 }
 
 function generateCoin() {
-  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 = document.createElement("div");
-        newCoin.className = "shop-coin";
-        newCoin.style.backgroundColor = data.coin.color;
-        newCoin.innerHTML = `
-                <div>P: ${data.coin.winrate.toFixed(2)}</div>
-                <div>V: $${data.coin.value.toFixed(2)}</div>
-                <div>C: $${data.coin.price.toFixed(2)}</div>
-            `;
-        newCoin.onclick = () => buyCoin(coins.length - 1);
-        shop.appendChild(newCoin);
-      } else {
-        console.error("Failed to generate new coin:", data.error);
-      }
-    });
+  if (!isGenerating) {
+    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 = document.createElement("div");
+          newCoin.className = "shop-item";
+          newCoin.style.backgroundColor = data.coin.color;
+          newCoin.innerHTML = `
+            <div class="shop-coin">
+              <div>P: ${data.coin.winrate.toFixed(2)}</div>
+              <div>V: $${data.coin.value.toFixed(2)}</div>
+              <div>C: $${data.coin.price.toFixed(2)}</div>
+            </div>
+          `;
+          newCoin.onclick = () => buyCoin(coins.length - 1);
+          shop.appendChild(newCoin);
+        } else {
+          console.error("Failed to generate new coin:", data.error);
+        }
+      })
+      .finally(() => {
+        isGenerating = false;
+        document.getElementById("loading-overlay").style.display = "none";
+      });
+  }
 }
 
 document.addEventListener("DOMContentLoaded", () => {
   updateInfo();
   document.getElementById("coin").onclick = flipCoin;
   document.getElementById("generate-coin").onclick = generateCoin;
-});
+});