Update static/js/game.js

static/js/game.js

@@ -1,32 +1,28 @@
 let balance = 10;
 let flipsLeft = 1000;
-let currentCoin = 'bronze';
-let coins = {};
+let currentCoin = 1;
+let coins = [];
 
 function updateStats() {
     document.getElementById('balance').textContent = `$${balance.toFixed(2)}`;
-    document.getElementById('flips').textContent = flipsLeft;
+    document.getElementById('flips-left').textContent = flipsLeft;
 }
 
 function updateShop() {
     const shop = document.getElementById('shop');
     shop.innerHTML = '';
     
-    for (const [name, coin] of Object.entries(coins)) {
+    coins.forEach(coin => {
         const coinElement = document.createElement('div');
-        coinElement.className = `shop-coin ${name === currentCoin ? 'selected' : ''}`;
-        coinElement.style.backgroundColor = coin.color;
-        coinElement.onclick = () => selectCoin(name);
-        
-        const priceElement = document.createElement('div');
-        priceElement.textContent = `$${coin.price}`;
-        
-        const container = document.createElement('div');
-        container.appendChild(coinElement);
-        container.appendChild(priceElement);
-        
-        shop.appendChild(container);
-    }
+        coinElement.className = 'shop-item';
+        coinElement.innerHTML = `
+            <div class="coin-icon ${coin.id === currentCoin ? 'selected' : ''}" 
+                 style="background-color: ${coin.color};"
+                 onclick="selectCoin(${coin.id})"></div>
+            <div>$${coin.price}</div>
+        `;
+        shop.appendChild(coinElement);
+    });
     
     const mintButton = document.createElement('button');
     mintButton.id = 'mint-button';
@@ -35,36 +31,43 @@ function updateShop() {
     shop.appendChild(mintButton);
 }
 
-function selectCoin(name) {
-    if (coins[name].price <= balance) {
-        currentCoin = name;
-        document.getElementById('coin').style.backgroundColor = coins[name].color;
+function selectCoin(id) {
+    const coin = coins.find(c => c.id === id);
+    if (coin && balance >= coin.price) {
+        balance -= coin.price;
+        currentCoin = id;
+        updateStats();
         updateShop();
-    } else {
-        alert("You can't afford this coin!");
     }
 }
 
 async function flipCoin() {
     if (flipsLeft > 0) {
         flipsLeft--;
-        const response = await fetch('/flip', {
+        const response = await fetch('/api/flip', {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json',
             },
-            body: JSON.stringify({ coin: currentCoin }),
+            body: JSON.stringify({ coinId: currentCoin }),
         });
-        const data = await response.json();
+        const result = await response.json();
         
-        if (data.result === 'heads') {
-            balance += data.value;
-        }
-        
-        updateStats();
+        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) {
-            gameOver();
+            setTimeout(gameOver, 1000);
         }
     }
 }
@@ -72,59 +75,84 @@ async function flipCoin() {
 async function mintCoin() {
     if (balance >= 4) {
         balance -= 4;
-        const response = await fetch('/mint', { method: 'POST' });
+        const response = await fetch('/api/mint', { method: 'POST' });
         const newCoin = await response.json();
-        coins[newCoin.name] = newCoin;
-        updateShop();
+        coins.push(newCoin);
         updateStats();
-    } else {
-        alert("You don't have enough money to mint a new coin!");
+        updateShop();
     }
 }
 
 async function gameOver() {
-    document.getElementById('game-area').style.display = 'none';
-    document.getElementById('game-over').style.display = 'flex';
+    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);
     
-    const response = await fetch('/leaderboard');
-    const leaderboard = await response.json();
-    
-    const leaderboardBody = document.getElementById('leaderboard-body');
-    leaderboardBody.innerHTML = '';
+    document.getElementById('initials-form').onsubmit = submitScore;
+    document.getElementById('play-again').onclick = resetGame;
     
-    leaderboard.forEach((entry, index) => {
-        const row = leaderboardBody.insertRow();
-        row.insertCell(0).textContent = index + 1;
-        row.insertCell(1).textContent = entry.initials;
-        row.insertCell(2).textContent = entry.score;
-    });
+    await updateLeaderboard();
 }
 
-async function submitScore() {
-    const initials = document.getElementById('initials').value;
+async function submitScore(event) {
+    event.preventDefault();
+    const initials = document.getElementById('initials-input').value.toUpperCase();
     if (initials) {
-        await fetch('/leaderboard', {
+        await fetch('/api/leaderboard', {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json',
             },
             body: JSON.stringify({ initials, score: balance }),
         });
-        location.reload();
-    } else {
-        alert('Please enter your initials!');
+        await updateLeaderboard();
     }
 }
 
-function playAgain() {
-    location.reload();
+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;
+    updateStats();
+    updateShop();
+    document.getElementById('game-over').remove();
 }
 
-window.onload = async function() {
-    const response = await fetch('/');
-    const data = await response.text();
-    coins = JSON.parse(data.match(/coins = (.+?);/)[1]);
+async function initGame() {
+    const response = await fetch('/api/coins');
+    coins = await response.json();
     updateStats();
     updateShop();
-    document.getElementById('coin').style.backgroundColor = coins[currentCoin].color;
-};
+    document.getElementById('coin').onclick = flipCoin;
+}
+
+initGame();