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

/**
 * ATM App - Vanilla JS Kiosk Implementation
 */

//=============================================================================
// #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 {
                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());
    }
}

const createSignal = (initialValue) => {
    let _val = initialValue;
    const getValue = () => _val;
    const setValue = (newValue) => {
        _val = typeof newValue === "function" ? newValue(_val) : newValue;
        _render();
    };
    return [getValue, setValue];
};

//=============================================================================
// #region STATE
//=============================================================================

const [getView, setView] = createSignal("pin"); // 'pin', 'menu', 'withdraw', 'custom_withdraw', 'balance'
const [getPin, setPin] = createSignal("");
const [getCustomAmount, setCustomAmount] = createSignal("");
const [getMessage, setMessage] = createSignal("");

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

function Header() {
    return h(
        "div",
        { className: "header", style: { marginBottom: "2rem" } },
        h("h1", null, "ATM TERMINAL"),
        h("p", null, "Global Financial Network"),
    );
}

function PinView() {
    const currentPin = getPin();

    const handleNumClick = (num) => {
        if (currentPin.length < 4) {
            setPin((prev) => prev + num);
        }
    };

    const handleClear = () => setPin("");

    const handleEnter = () => {
        if (currentPin.length === 4) {
            const state =
                typeof store !== "undefined"
                    ? store.getState()
                    : { pin: "1234" };
            if (currentPin === state.pin) {
                setView("menu");
            } else {
                setMessage("Incorrect PIN");
                setPin("");
                setTimeout(() => setMessage(""), 2000);
            }
        } else {
            setMessage("Invalid PIN Length");
            setTimeout(() => setMessage(""), 2000);
        }
    };

    return h(
        "div",
        { className: "card", style: { padding: "3rem 2rem" } },
        h("h2", null, "Enter Security PIN"),
        h(
            "div",
            { className: "pin-display" },
            currentPin.replace(/./g, String.fromCharCode(8226)) || "----",
        ),
        h(
            "p",
            {
                style: {
                    color: "#ef4444",
                    height: "1.5rem",
                    textAlign: "center",
                },
            },
            getMessage(),
        ),
        h(
            "div",
            { className: "numpad" },
            ["1", "2", "3", "4", "5", "6", "7", "8", "9"].map((num) =>
                h("button", { onClick: () => handleNumClick(num) }, num),
            ),
            h(
                "button",
                {
                    style: { background: "#ef4444", color: "white" },
                    onClick: handleClear,
                },
                "C",
            ),
            h("button", { onClick: () => handleNumClick("0") }, "0"),
            h(
                "button",
                {
                    style: { background: "#10b981", color: "white" },
                    onClick: handleEnter,
                },
                String.fromCharCode(8629),
            ),
        ),
    );
}

function MenuView() {
    return h(
        "div",
        { className: "kiosk-content" },
        h(
            "h2",
            { style: { textAlign: "center", marginBottom: "1rem" } },
            "Select Transaction",
        ),
        h(
            "div",
            { className: "kiosk-menu-stack" },
            h(
                "button",
                { className: "kiosk-btn", onClick: () => setView("withdraw") },
                "Withdraw Cash",
            ),
            h(
                "button",
                { className: "kiosk-btn", onClick: () => setView("balance") },
                "Check Balance",
            ),
            h(
                "button",
                {
                    className: "kiosk-btn",
                    style: {
                        background: "var(--bg-surface)",
                        color: "var(--text-main)",
                        border: "1px solid var(--border)",
                    },
                    onClick: () => {
                        setPin("");
                        setView("pin");
                        sendEvent("atm::close", {});
                    },
                },
                "Cancel Transaction",
            ),
        ),
    );
}

function WithdrawView() {
    const state =
        typeof store !== "undefined"
            ? store.getState()
            : { accounts: { bank: 0 } };
    const bankBalance = state.accounts?.bank || 0;

    const handleWithdraw = (amount) => {
        if (bankBalance >= amount) {
            if (typeof store !== "undefined") {
                store.dispatch(withdraw(amount));
            }
            sendEvent("atm::withdraw", { amount });
            setMessage(`Please take your cash: $${amount.toLocaleString()}`);
            setTimeout(() => {
                setMessage("");
                setView("menu");
            }, 3000);
        } else {
            setMessage("Insufficient Funds");
            setTimeout(() => setMessage(""), 2000);
        }
    };

    if (getMessage()) {
        return h(
            "div",
            {
                className: "card",
                style: { padding: "4rem", textAlign: "center" },
            },
            h("h2", { style: { color: "var(--primary)" } }, getMessage()),
        );
    }

    return h(
        "div",
        { className: "kiosk-content" },
        h(
            "h2",
            { style: { textAlign: "center", marginBottom: "1rem" } },
            "Select Amount",
        ),
        h(
            "div",
            { className: "kiosk-grid" },
            h(
                "button",
                { className: "kiosk-btn", onClick: () => handleWithdraw(20) },
                "$20",
            ),
            h(
                "button",
                { className: "kiosk-btn", onClick: () => handleWithdraw(50) },
                "$50",
            ),
            h(
                "button",
                { className: "kiosk-btn", onClick: () => handleWithdraw(100) },
                "$100",
            ),
            h(
                "button",
                {
                    className: "kiosk-btn",
                    onClick: () => {
                        setCustomAmount("");
                        setView("custom_withdraw");
                    },
                },
                "Other Amount",
            ),
            h(
                "button",
                {
                    className: "kiosk-btn",
                    style: {
                        gridColumn: "span 2",
                        background: "var(--text-muted)",
                    },
                    onClick: () => setView("menu"),
                },
                "Cancel",
            ),
        ),
    );
}

function CustomWithdrawView() {
    const currentAmount = getCustomAmount();
    const state =
        typeof store !== "undefined"
            ? store.getState()
            : { accounts: { bank: 0 } };
    const bankBalance = state.accounts?.bank || 0;

    const handleNumClick = (num) => {
        if (currentAmount.length < 5) {
            setCustomAmount((prev) => prev + num);
        }
    };

    const handleClear = () => setCustomAmount("");

    const handleEnter = () => {
        const amount = parseInt(currentAmount, 10);
        if (amount > 0) {
            if (bankBalance >= amount) {
                if (typeof store !== "undefined") {
                    store.dispatch(withdraw(amount));
                }
                sendEvent("atm::withdraw", { amount });
                setMessage(
                    `Please take your cash: $${amount.toLocaleString()}`,
                );
                setTimeout(() => {
                    setMessage("");
                    setView("menu");
                }, 3000);
            } else {
                setMessage("Insufficient Funds");
                setTimeout(() => setMessage(""), 2000);
            }
        } else {
            setMessage("Invalid Amount");
            setTimeout(() => setMessage(""), 2000);
        }
    };

    if (getMessage()) {
        return h(
            "div",
            {
                className: "card",
                style: { padding: "4rem", textAlign: "center" },
            },
            h("h2", { style: { color: "var(--primary)" } }, getMessage()),
        );
    }

    return h(
        "div",
        { className: "card", style: { padding: "3rem 2rem" } },
        h("h2", null, "Enter Amount"),
        h(
            "div",
            { className: "pin-display" },
            currentAmount ? `$${currentAmount}` : "$0",
        ),
        h(
            "div",
            { className: "numpad" },
            ["1", "2", "3", "4", "5", "6", "7", "8", "9"].map((num) =>
                h("button", { onClick: () => handleNumClick(num) }, num),
            ),
            h(
                "button",
                {
                    style: { background: "#ef4444", color: "white" },
                    onClick: handleClear,
                },
                "C",
            ),
            h("button", { onClick: () => handleNumClick("0") }, "0"),
            h(
                "button",
                {
                    style: { background: "#10b981", color: "white" },
                    onClick: handleEnter,
                },
                String.fromCharCode(8629),
            ),
        ),
        h(
            "button",
            {
                style: {
                    width: "100%",
                    marginTop: "2rem",
                    padding: "1rem",
                    background: "var(--text-muted)",
                },
                onClick: () => setView("withdraw"),
            },
            "Cancel",
        ),
    );
}

function BalanceView() {
    const state =
        typeof store !== "undefined"
            ? store.getState()
            : { accounts: { bank: 0 } };
    const bankBalance = state.accounts?.bank || 0;

    return h(
        "div",
        { className: "card", style: { textAlign: "center", padding: "3rem" } },
        h("h2", { style: { color: "var(--text-muted)" } }, "Available Balance"),
        h(
            "div",
            {
                style: {
                    fontSize: "4rem",
                    fontWeight: "800",
                    margin: "2rem 0",
                    color: "var(--primary-hover)",
                },
            },
            "$" + bankBalance.toLocaleString(),
        ),
        h(
            "button",
            {
                className: "kiosk-btn",
                style: { width: "100%", maxWidth: "300px", margin: "0 auto" },
                onClick: () => setView("menu"),
            },
            "Return to Menu",
        ),
    );
}

function App() {
    const view = getView();

    let mainContent;
    if (view === "pin") {
        mainContent = PinView();
    } else if (view === "menu") {
        mainContent = MenuView();
    } else if (view === "withdraw") {
        mainContent = WithdrawView();
    } else if (view === "custom_withdraw") {
        mainContent = CustomWithdrawView();
    } else if (view === "balance") {
        mainContent = BalanceView();
    }

    return h(
        "main",
        null,
        h("div", { className: "container" }, Header(), mainContent),
    );
}

//=============================================================================
// #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 initATM() {
    if (initialized) return;

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

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

if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", initATM);
} else {
    initATM();
}