client/addons/bank/ui/_site/script.js

// Simulated data - this would be replaced with actual game data
let bankState = {
    wallet: 1000,
    account: 5000,
    players: [
        { id: 1, name: "Player 1" },
        { id: 2, name: "Player 2" },
        { id: 3, name: "Player 3" }
    ],
    transactions: []
};

// Initialize the interface
function initializeBank() {
    updateBalanceDisplays();
    populatePlayerList();
    setupEventListeners();
    loadTransactionHistory();
}

// Update balance displays in the header
function updateBalanceDisplays() {
    document.getElementById('walletBalance').textContent = `$${bankState.wallet.toLocaleString()}`;
    document.getElementById('accountBalance').textContent = `$${bankState.account.toLocaleString()}`;
}

// Populate the player selection dropdown
function populatePlayerList() {
    const playerSelect = document.getElementById('playerSelect');
    playerSelect.innerHTML = '<option value="" disabled selected>Select Player</option>';
    
    bankState.players.forEach(player => {
        const option = document.createElement('option');
        option.value = player.id;
        option.textContent = player.name;
        playerSelect.appendChild(option);
    });
}

// Add a new transaction to history
function addTransaction(type, amount, details = '') {
    const transaction = {
        type,
        amount,
        details,
        timestamp: new Date().toISOString()
    };
    
    bankState.transactions.unshift(transaction);
    updateTransactionHistory();
}

// Update the transaction history display
function updateTransactionHistory() {
    const historyList = document.getElementById('transactionHistory');
    historyList.innerHTML = '';

    bankState.transactions.forEach(transaction => {
        const li = document.createElement('li');
        li.className = 'history-item';
        
        const isNegative = ['transfer_out', 'to_wallet'].includes(transaction.type);
        const amountClass = isNegative ? 'amount-negative' : 'amount-positive';
        const amountPrefix = isNegative ? '-' : '+';
        
        li.innerHTML = `
            <span class="transaction-type">${formatTransactionType(transaction.type)}</span>
            <span class="transaction-details">${transaction.details}</span>
            <span class="amount ${amountClass}">${amountPrefix}$${Math.abs(transaction.amount).toLocaleString()}</span>
        `;
        
        historyList.appendChild(li);
    });
}

// Format transaction type for display
function formatTransactionType(type) {
    const types = {
        'to_wallet': 'To Wallet',
        'to_account': 'To Account',
        'transfer_out': 'Transfer Out',
        'transfer_in': 'Transfer In',
        'timesheet': 'Timesheet'
    };
    return types[type] || type;
}

// Set up all form event listeners
function setupEventListeners() {    // Handle transfers between wallet and account
    document.getElementById('transferForm').addEventListener('submit', (e) => {
        e.preventDefault();
        const amount = parseInt(document.getElementById('transferAmount').value);
        const transferType = document.getElementById('transferType').value;
        
        if (transferType === 'to_wallet') {
            if (amount > bankState.account) {
                alert('Insufficient funds in account');
                return;
            }
            bankState.account -= amount;
            bankState.wallet += amount;
        } else {
            if (amount > bankState.wallet) {
                alert('Insufficient funds in wallet');
                return;
            }
            bankState.wallet -= amount;
            bankState.account += amount;
        }
        
        addTransaction(transferType, amount);
        updateBalanceDisplays();
        e.target.reset();
    });    // Transfer to Player
    document.getElementById('transferPlayerForm').addEventListener('submit', (e) => {
        e.preventDefault();
        const amount = parseInt(document.getElementById('playerTransferAmount').value);
        const playerId = document.getElementById('playerSelect').value;
        const playerName = bankState.players.find(p => p.id.toString() === playerId)?.name;
        
        if (amount > bankState.account) {
            alert('Insufficient funds in account');
            return;
        }

        bankState.account -= amount;
        addTransaction('transfer_out', amount, `To ${playerName}`);
        updateBalanceDisplays();
        e.target.reset();
    });

    // Submit Timesheet
    document.getElementById('timesheetForm').addEventListener('submit', (e) => {
        e.preventDefault();
        const hours = parseFloat(document.getElementById('hoursWorked').value);
        const rate = parseInt(document.getElementById('hourlyRate').value);
        const amount = Math.floor(hours * rate);

        bankState.account += amount;
        addTransaction('timesheet', amount, `${hours} hours @ $${rate}/hr`);
        updateBalanceDisplays();
        e.target.reset();
    });
}

// Initialize when DOM is loaded
document.addEventListener('DOMContentLoaded', initializeBank);