Create js/game.js

static/js/game.js

@@ -0,0 +1,130 @@
+let balance = 10;
+let flipsLeft = 1000;
+let currentCoin = 'bronze';
+let coins = {};
+
+function updateStats() {
+    document.getElementById('balance').textContent = `$${balance.toFixed(2)}`;
+    document.getElementById('flips').textContent = flipsLeft;
+}
+
+function updateShop() {
+    const shop = document.getElementById('shop');
+    shop.innerHTML = '';
+    
+    for (const [name, coin] of Object.entries(coins)) {
+        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);
+    }
+    
+    const mintButton = document.createElement('button');
+    mintButton.id = 'mint-button';
+    mintButton.textContent = '🎲 Mint ($4)';
+    mintButton.onclick = mintCoin;
+    shop.appendChild(mintButton);
+}
+
+function selectCoin(name) {
+    if (coins[name].price <= balance) {
+        currentCoin = name;
+        document.getElementById('coin').style.backgroundColor = coins[name].color;
+        updateShop();
+    } else {
+        alert("You can't afford this coin!");
+    }
+}
+
+async function flipCoin() {
+    if (flipsLeft > 0) {
+        flipsLeft--;
+        const response = await fetch('/flip', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ coin: currentCoin }),
+        });
+        const data = await response.json();
+        
+        if (data.result === 'heads') {
+            balance += data.value;
+        }
+        
+        updateStats();
+        
+        if (flipsLeft === 0) {
+            gameOver();
+        }
+    }
+}
+
+async function mintCoin() {
+    if (balance >= 4) {
+        balance -= 4;
+        const response = await fetch('/mint', { method: 'POST' });
+        const newCoin = await response.json();
+        coins[newCoin.name] = newCoin;
+        updateShop();
+        updateStats();
+    } else {
+        alert("You don't have enough money to mint a new coin!");
+    }
+}
+
+async function gameOver() {
+    document.getElementById('game-area').style.display = 'none';
+    document.getElementById('game-over').style.display = 'flex';
+    
+    const response = await fetch('/leaderboard');
+    const leaderboard = await response.json();
+    
+    const leaderboardBody = document.getElementById('leaderboard-body');
+    leaderboardBody.innerHTML = '';
+    
+    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;
+    });
+}
+
+async function submitScore() {
+    const initials = document.getElementById('initials').value;
+    if (initials) {
+        await fetch('/leaderboard', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ initials, score: balance }),
+        });
+        location.reload();
+    } else {
+        alert('Please enter your initials!');
+    }
+}
+
+function playAgain() {
+    location.reload();
+}
+
+window.onload = async function() {
+    const response = await fetch('/');
+    const data = await response.text();
+    coins = JSON.parse(data.match(/coins = (.+?);/)[1]);
+    updateStats();
+    updateShop();
+    document.getElementById('coin').style.backgroundColor = coins[currentCoin].color;
+};