Stock-Game/static/game.js

// Game state
let gameActive = false;

async function startGame() {
    const daysInput = document.getElementById('daysInput');
    const days = parseInt(daysInput.value);

    if (!days || days < 1) {
        alert('Please enter a valid number of days');
        return;
    }

    try {
        const response = await fetch('/api/start', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ days: days })
        });

        if (!response.ok) throw new Error('Failed to start game');

        gameActive = true;
        document.getElementById('startScreen').classList.add('hidden');
        document.getElementById('gameScreen').classList.remove('hidden');
        document.getElementById('totalDays').textContent = days;

        await updateGameDisplay();
        populateStockSelect();
    } catch (error) {
        alert('Error starting game: ' + error.message);
    }
}

async function updateGameDisplay() {
    try {
        const response = await fetch('/api/game-state');
        if (!response.ok) throw new Error('Failed to fetch game state');

        const data = await response.json();

        document.getElementById('balance').textContent = data.balance;
        document.getElementById('day').textContent = data.day;
        document.getElementById('index').textContent = data.index;

        displayStocks(data.stocks);
        displayHoldings(data.holdings);
        displayMessage(data.message);
    } catch (error) {
        console.error('Error updating game display:', error);
    }
}

function displayStocks(stocks) {
    const stocksList = document.getElementById('stocksList');
    stocksList.innerHTML = '';

    stocks.forEach(stock => {
        const div = document.createElement('div');
        div.className = 'stock-item';
        div.innerHTML = `<span>${stock.name}</span><span>$${stock.price}</span>`;
        stocksList.appendChild(div);
    });
}

function displayHoldings(holdings) {
    const holdingsList = document.getElementById('holdingsList');
    holdingsList.innerHTML = '';

    holdings.forEach(holding => {
        const div = document.createElement('div');
        div.className = 'holding-item';
        div.innerHTML = `<span>${holding.name}</span><span>${holding.amount} shares</span>`;
        holdingsList.appendChild(div);
    });
}

function displayMessage(message) {
    const messageDiv = document.getElementById('message');
    if (message) {
        messageDiv.textContent = message;
        messageDiv.classList.add('show');
        messageDiv.classList.remove('error');
    } else {
        messageDiv.classList.remove('show');
    }
}

function populateStockSelect() {
    const stocks = [
        { id: 1, name: 'Kwik trip' },
        { id: 2, name: 'Apple computers' },
        { id: 3, name: 'Microsoft' },
        { id: 4, name: 'Walmart Super Store' },
        { id: 5, name: 'Car company' }
    ];

    const select = document.getElementById('stockSelect');
    select.innerHTML = '';
    stocks.forEach(stock => {
        const option = document.createElement('option');
        option.value = stock.id;
        option.textContent = `${stock.name}`;
        select.appendChild(option);
    });
}

async function buyStock() {
    if (!gameActive) return;

    const stockId = parseInt(document.getElementById('stockSelect').value);
    const amount = parseInt(document.getElementById('amountInput').value);

    if (!amount || amount < 1) {
        showError('Please enter a valid amount');
        return;
    }

    try {
        const response = await fetch('/api/buy', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                stock_id: stockId,
                amount: amount
            })
        });

        const data = await response.json();

        if (!response.ok) {
            showError(data.error);
            return;
        }

        document.getElementById('amountInput').value = '1';
        await updateGameDisplay();
    } catch (error) {
        showError('Error buying stock: ' + error.message);
    }
}

async function sellStock() {
    if (!gameActive) return;

    const stockId = parseInt(document.getElementById('stockSelect').value);
    const amount = parseInt(document.getElementById('amountInput').value);

    if (!amount || amount < 1) {
        showError('Please enter a valid amount');
        return;
    }

    try {
        const response = await fetch('/api/sell', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                stock_id: stockId,
                amount: amount
            })
        });

        const data = await response.json();

        if (!response.ok) {
            showError(data.error);
            return;
        }

        document.getElementById('amountInput').value = '1';
        await updateGameDisplay();
    } catch (error) {
        showError('Error selling stock: ' + error.message);
    }
}

async function nextDay() {
    if (!gameActive) return;

    try {
        const response = await fetch('/api/next-day', {
            method: 'POST'
        });

        const data = await response.json();

        if (data.game_over) {
            await endGame();
            return;
        }

        await updateGameDisplay();
    } catch (error) {
        showError('Error advancing to next day: ' + error.message);
    }
}

async function endGame() {
    try {
        const response = await fetch('/api/end-game');
        if (!response.ok) throw new Error('Failed to fetch end game stats');

        const data = await response.json();

        document.getElementById('startBalance').textContent = data.starting_balance;
        document.getElementById('endBalance').textContent = data.ending_balance;
        document.getElementById('netWorth').textContent = data.total_net_worth;
        document.getElementById('profit').textContent = data.profit;

        // Color profit red or green
        const profitText = document.getElementById('profitText');
        if (data.profit >= 0) {
            profitText.style.color = '#4caf50';
        } else {
            profitText.style.color = '#f44336';
        }

        // Display final holdings
        const finalHoldings = document.getElementById('finalHoldings');
        finalHoldings.innerHTML = '';
        data.holdings.forEach((holding, index) => {
            if (holding.amount > 0) {
                const div = document.createElement('div');
                div.className = 'holding-final';
                const stockPrice = data.stocks[index].price;
                const value = holding.amount * stockPrice;
                div.innerHTML = `
                    <span>${holding.name}: ${holding.amount} shares</span>
                    <span>Value: $${value}</span>
                `;
                finalHoldings.appendChild(div);
            }
        });

        gameActive = false;
        document.getElementById('gameScreen').classList.add('hidden');
        document.getElementById('endScreen').classList.remove('hidden');
    } catch (error) {
        showError('Error getting game stats: ' + error.message);
    }
}

function showError(message) {
    const messageDiv = document.getElementById('message');
    messageDiv.textContent = message;
    messageDiv.classList.add('show', 'error');
}

// Initialize when page loads
document.addEventListener('DOMContentLoaded', () => {
    populateStockSelect();
});