forge/arma/client/addons/bank/ui/_site/bank.js

/**
 * Bank App - Vanilla JS Implementation matching WIP UI
 */

//=============================================================================
// #region LIBRARY - DOM Helper
//=============================================================================

function h(tag, props = {}, ...children) {
    const el = document.createElement(tag);
    if (props) {
        Object.entries(props).forEach(([key, value]) => {
            if (key.startsWith('on') && typeof value === 'function') {
                el.addEventListener(key.substring(2).toLowerCase(), value);
            } else if (key === 'className') {
                el.className = value;
            } else if (key === 'style' && typeof value === 'object') {
                Object.assign(el.style, value);
            } else if (key === 'disabled' || key === 'checked' || key === 'selected' || key === 'readonly') {
                if (value) el[key] = true;
            } else {
                el.setAttribute(key, value);
            }
        });
    }
    children.forEach(child => {
        if (typeof child === 'string' || typeof child === 'number') {
            el.appendChild(document.createTextNode(child));
        } else if (child instanceof Node) {
            el.appendChild(child);
        } else if (Array.isArray(child)) {
            child.forEach(c => {
                if (c instanceof Node) el.appendChild(c);
            });
        }
    });
    return el;
}

let _rootContainer = null;
let _rootComponent = null;

function render(component, container) {
    _rootContainer = container;
    _rootComponent = component;
    _render();
}

function _render() {
    if (_rootContainer && _rootComponent) {
        _rootContainer.innerHTML = '';
        _rootContainer.appendChild(_rootComponent());
    }
}

//=============================================================================
// #region UI COMPONENTS
//=============================================================================

function Navbar() {
    const state = store.getState();
    const uid = state.uid || 'Unknown';

    return h('nav', { className: 'navbar' },
        h('div', { className: 'navbar-inner' },
            h('div', { className: 'navbar-brand' },
                h('span', { className: 'navbar-title' }, 'FDIC - Global Financial Network')
            ),
            h('div', { className: 'navbar-profile' },
                h('div', { className: 'profile-info' },
                    h('span', { className: 'profile-label' }, 'Account'),
                    h('span', { className: 'profile-id' }, uid)
                )
            )
        )
    );
}

function WindowTitleBar() {
    return h('div', { className: 'window-titlebar' },
        h('div', { className: 'window-titlebar-brand' },
            h('span', { className: 'window-titlebar-kicker' }, 'FDIC Workspace'),
            h('span', { className: 'window-titlebar-title' }, 'Global Financial Network')
        ),
        h('div', { className: 'window-titlebar-controls' },
            h('button', {
                type: 'button',
                className: 'window-control-btn',
                disabled: true,
                title: 'Minimize unavailable',
                'aria-label': 'Minimize unavailable'
            }, '-'),
            h('button', {
                type: 'button',
                className: 'window-control-btn',
                disabled: true,
                title: 'Maximize unavailable',
                'aria-label': 'Maximize unavailable'
            }, '[ ]'),
            h('button', {
                type: 'button',
                className: 'window-control-btn is-close',
                onClick: () => sendEvent('bank::close', {}),
                title: 'Close',
                'aria-label': 'Close banking interface'
            }, 'X')
        )
    );
}

function TransactionHistory() {
    const state = store.getState();
    const transactions = state.transactions || [];

    return h('div', { className: 'card' },
        h('h3', { style: { textAlign: 'left', borderBottom: '1px solid var(--border)', paddingBottom: '1rem', marginBottom: '1rem' } }, 'Recent Transactions'),
        transactions.length === 0
            ? h('p', { style: { color: 'var(--text-muted)' } }, 'No transactions yet')
            : h('ul', { style: { listStyle: 'none', padding: 0, margin: 0 } },
                transactions.slice(0, 10).map(tx => {
                    const isCredit = tx.type === 'Deposit';
                    return h('li', {
                        style: {
                            display: 'flex',
                            justifyContent: 'space-between',
                            padding: '0.75rem 0',
                            borderBottom: '1px solid var(--bg-surface-hover)'
                        }
                    },
                        h('div', { style: { textAlign: 'left' } },
                            h('div', { style: { fontWeight: '500' } }, tx.type),
                            h('div', { style: { fontSize: '0.85rem', color: 'var(--text-muted)' } }, tx.date)
                        ),
                        h('div', {
                            style: {
                                fontWeight: '700',
                                color: isCredit ? '#10b981' : '#ef4444'
                            }
                        }, (isCredit ? '+' : '-') + '$' + Math.abs(tx.amount).toLocaleString())
                    );
                })
            )
    );
}

function DepositWithdrawForm() {
    const state = store.getState();
    const bankBalance = state.accounts.bank;
    const cashBalance = state.accounts.cash;

    const getAmount = () => {
        const input = document.getElementById('deposit-withdraw-amount');
        return parseFloat(input?.value) || 0;
    };

    const clearInput = () => {
        const input = document.getElementById('deposit-withdraw-amount');
        if (input) input.value = '';
    };

    const handleDeposit = () => {
        const amount = getAmount();
        if (!amount || amount <= 0) {
            console.log('Please enter a valid amount');
            return;
        }
        if (amount > cashBalance) {
            console.log('Insufficient cash');
            return;
        }
        sendEvent('bank::deposit', { amount });
        store.dispatch(deposit(amount));
        clearInput();
    };

    const handleWithdraw = () => {
        const amount = getAmount();
        if (!amount || amount <= 0) {
            console.log('Please enter a valid amount');
            return;
        }
        if (amount > bankBalance) {
            console.log('Insufficient funds');
            return;
        }
        sendEvent('bank::withdraw', { amount });
        store.dispatch(withdraw(amount));
        clearInput();
    };

    return h('div', { className: 'card' },
        h('h2', null, 'Deposit / Withdraw'),
        h('div', { className: 'balance-info' },
            h('div', { className: 'balance-info-item' },
                h('span', { className: 'balance-info-label' }, 'Cash'),
                h('span', { className: 'balance-info-value cash' }, '$' + cashBalance.toLocaleString())
            ),
            h('div', { className: 'balance-info-item' },
                h('span', { className: 'balance-info-label' }, 'Bank'),
                h('span', { className: 'balance-info-value' }, '$' + bankBalance.toLocaleString())
            )
        ),
        h('div', { className: 'deposit-withdraw-form' },
            h('input', { id: 'deposit-withdraw-amount', type: 'number', placeholder: 'Enter amount...', min: '1' }),
            h('div', { className: 'deposit-withdraw-buttons' },
                h('button', { onClick: handleDeposit, disabled: cashBalance <= 0 }, 'Deposit'),
                h('button', { onClick: handleWithdraw, disabled: bankBalance <= 0 }, 'Withdraw')
            )
        )
    );
}

function TransferForm() {
    const state = store.getState();
    const players = state.accounts.players || {};
    const currentUid = state.uid;

    const handleSubmit = (e) => {
        e.preventDefault();
        const formData = new FormData(e.target);
        const amount = parseFloat(formData.get('amount'));
        const playerId = formData.get('playerId');

        if (!amount || amount <= 0) {
            console.log('Please enter a valid amount');
            return;
        }

        const currentState = store.getState();

        if (!playerId) {
            console.log('Please select a recipient');
            return;
        }

        if (amount > currentState.accounts.bank) {
            console.log('Insufficient funds');
            return;
        }

        sendEvent('bank::transfer', { from: 'bank', amount, target: playerId });
        store.dispatch(transfer('bank', amount, 'player'));
        e.target.reset();
    };

    // Build player options
    const playerOptions = [h('option', { value: '', disabled: true, selected: true }, 'Select player...')];
    Object.keys(players).forEach(uid => {
        if (uid !== currentUid && players[uid]?.name) {
            playerOptions.push(h('option', { value: uid }, players[uid].name));
        }
    });

    return h('div', { className: 'card' },
        h('h2', null, 'Wire Transfer'),
        h('form', { onSubmit: handleSubmit },
            h('div', null,
                h('label', null, 'Recipient'),
                h('select', { name: 'playerId' }, playerOptions)
            ),
            h('div', null,
                h('label', null, 'Amount'),
                h('input', { name: 'amount', type: 'number', placeholder: '0.00' })
            ),
            h('button', { type: 'submit' }, 'Send Funds')
        )
    );
}

function BankDashboard() {
    const state = store.getState();
    const bankBalance = state.accounts.bank;
    const earnings = state.accounts.earnings;

    return h('div', { className: 'content' },
        h('div', { className: 'card', style: { gridColumn: 'span 2' } },
            h('h2', { style: { fontSize: '1.2rem', color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.05em' } }, 'Account Balance'),
            h('div', { style: { fontSize: '2.8rem', fontWeight: '800', color: 'var(--primary-hover)', margin: '1rem 0' } },
                '$' + bankBalance.toLocaleString()
            ),
            h('div', { style: { textAlign: 'center', color: 'var(--text-muted)', fontSize: '1.1rem', marginBottom: '1rem' } },
                'Pending: ',
                h('span', { style: { color: '#fbbf24', fontWeight: 'bold' } }, '$' + earnings.toLocaleString())
            ),
            h('div', { className: 'deposit-earnings-button' },
                h('button', {
                    onClick: () => {
                        sendEvent('bank::depositEarnings', { amount: earnings });
                        store.dispatch(depositEarnings(earnings));
                    }, disabled: earnings <= 0, style: { width: '25%' }
                }, 'Deposit Earnings')
            )
        ),
        DepositWithdrawForm(),
        TransferForm(),
        h('div', { style: { gridColumn: 'span 2' } }, TransactionHistory())
    );
}

function Footer() {
    return h('div', { className: 'footer' },
        h('div', { className: 'wrapper' },
            h('div', null,
                h('h3', null, 'Secure Banking'),
                h('ul', { style: { listStyleType: 'none', padding: 0 } },
                    h('li', null, 'FDIC Insured'),
                    h('li', null, 'Fraud Protection'),
                    h('li', null, '24/7 Support'),
                    h('li', null, 'API Access')
                )
            ),
            h('div', null,
                h('h3', null, 'Notices'),
                h('ul', { style: { listStyleType: 'none', padding: 0 } },
                    h('li', null, 'Terms of Service'),
                    h('li', null, 'Privacy Policy'),
                    h('li', null, 'Interest Rates'),
                    h('li', null, 'Report Fraud')
                )
            )
        )
    );
}

function App() {
    return h('div', { className: 'app-shell' },
        WindowTitleBar(),
        h('main', null,
            Navbar(),
            h('div', { className: 'container' },
                BankDashboard()
            ),
            Footer()
        )
    );
}

//=============================================================================
// #region ARMA 3 INTEGRATION
//=============================================================================

function sendEvent(event, data) {
    if (typeof A3API !== 'undefined') {
        A3API.SendAlert(JSON.stringify({ event, data }));
    } else {
        console.log('Event:', event, 'Data:', data);
    }
}

//=============================================================================
// #region INITIALIZATION
//=============================================================================

let initialized = false;

function initBank() {
    if (initialized) return;

    const root = document.getElementById('app');
    if (root) {
        if (typeof store !== 'undefined') {
            store.subscribe(() => _render());
        }

        render(App, root);
        initialized = true;
        console.log('[Bank] Interface initialized');
    }
}

if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initBank);
} else {
    initBank();
}