Update static/script.js

static/script.js

@@ -54,9 +54,10 @@ function buyCoin(index) {
         .then((data) => {
             if (data.success) {
                 balance = data.balance;
-                currentCoin = index;
-                document.getElementById("coin").style.backgroundColor = coins[index].color;
+                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!");
             }
@@ -82,6 +83,8 @@ function generateCoin() {
                 updateInfo();
             } else {
                 alert("Failed to generate new coin: " + data.error);
+                balance = data.balance;
+                updateInfo();
             }
         })
         .finally(() => {
@@ -116,8 +119,8 @@ function createShopItem(coin, index) {
         <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.bonus !== 'none' ? `Bonus: ${coin.bonus}` : ''}
+        Win rate: ${(coin.winrate * 100).toFixed(2)}%<br>
+        Bonus: $${coin.bonus.toFixed(2)}
     `;
 
     shopCoin.appendChild(coinPrice);
@@ -130,6 +133,17 @@ function createShopItem(coin, 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");
@@ -171,6 +185,7 @@ function resetGame() {
             updateInfo();
             document.getElementById("coin").style.backgroundColor = coins[0].color;
             document.getElementById("game-over").style.display = "none";
+            updateSelectedCoin();
         }
     });
 }
@@ -182,4 +197,5 @@ document.addEventListener("DOMContentLoaded", () => {
     document.getElementById("submit-score").onclick = submitScore;
     document.getElementById("play-again").onclick = resetGame;
     document.getElementById("coin").style.backgroundColor = coins[0].color;
+    updateSelectedCoin();
 });