Update static/script.js

static/script.js

@@ -4,95 +4,181 @@ let currentCoin = 0;
 let isGenerating = false;
 
 function updateInfo() {
-  document.getElementById("balance").textContent = balance.toFixed(2);
-  document.getElementById("flips-left").textContent = flipsLeft;
+    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) => {
-        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 && !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) {
-    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!");
-        }
-      });
-  }
+    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 = index;
+                document.getElementById("coin").style.backgroundColor = coins[index].color;
+                updateInfo();
+            } else {
+                alert("Not enough money to buy this coin or you already own it!");
+            }
+        });
+    }
 }
 
 function generateCoin() {
-  if (!isGenerating) {
-    isGenerating = true;
-    document.getElementById("loading-overlay").style.display = "flex";
-    fetch("/generate_coin", {
-      method: "POST",
+    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);
+            }
+        })
+        .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.toFixed(2)}<br>
+        ${coin.ability ? `Ability: ${coin.ability}` : ''}
+    `;
+
+    shopCoin.appendChild(coinPrice);
+    shopItem.appendChild(shopCoin);
+    shopItem.appendChild(coinName);
+    shopItem.appendChild(coinTooltip);
+
+    shopItem.onclick = () => buyCoin(index);
+
+    return shopItem;
+}
+
+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) => {
+    .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);
+            balance = 0;
+            flipsLeft = 1000;
+            currentCoin = 0;
+            updateInfo();
+            document.getElementById("coin").style.backgroundColor = coins[0].color;
+            document.getElementById("game-over").style.display = "none";
         }
-      })
-      .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;
+    updateInfo();
+    document.getElementById("coin").onclick = flipCoin;
+    document.getElementById("generate-coin").onclick = generateCoin;
+    document.getElementById("submit-score").onclick = submitScore;
+    document.getElementById("play-again").onclick = resetGame;
 });