forge/arma/ui/atm.js

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

// --- 1. The "Library" Logic (Reused) ---

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) => el.appendChild(c));
        }
    });
    return el;
}

let _rootContainer = null;
let _rootComponent = null;

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

function _render() {
    _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];
};

// --- 2. ATM Application Components ---

// Global State
const [getView, setView] = createSignal("pin"); // 'pin', 'menu', 'withdraw', 'custom_withdraw', 'balance'
const [getPin, setPin] = createSignal("");
const [getCustomAmount, setCustomAmount] = createSignal(""); // For custom withdrawal
const [getBalance, setBalance] = createSignal(1250000); // Shared mockup balance
const [getMessage, setMessage] = createSignal(""); // For feedback

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

// PIN Entry View
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) {
            // Mock auth success
            setView("menu");
        } 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, "•") || "----",
        ),
        h("p", { style: { color: "red", height: "1.5rem" } }, 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,
                },
                "↵",
            ),
        ),
    );
}

// Main Menu View
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");
                    },
                },
                "Cancel Transaction",
            ),
        ),
    );
}

// Withdraw View
function WithdrawView() {
    const handleWithdraw = (amount) => {
        if (getBalance() >= amount) {
            setBalance((prev) => prev - amount);
            setMessage(`Please take your cash: $${amount}`);
            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",
            ),
        ),
    );
}

// Custom Withdraw View
function CustomWithdrawView() {
    const currentAmount = getCustomAmount();

    const handleNumClick = (num) => {
        if (currentAmount.length < 5) {
            // Limit to 5 digits for safety
            setCustomAmount((prev) => prev + num);
        }
    };

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

    const handleEnter = () => {
        const amount = parseInt(currentAmount, 10);
        if (amount > 0) {
            if (getBalance() >= amount) {
                setBalance((prev) => prev - amount);
                setMessage(`Please take your cash: $${amount}`);
                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,
                },
                "↵",
            ),
        ),
        h(
            "button",
            {
                style: {
                    width: "100%",
                    marginTop: "2rem",
                    padding: "1rem",
                    background: "var(--text-muted)",
                },
                onClick: () => setView("withdraw"),
            },
            "Cancel",
        ),
    );
}

// Balance View
function BalanceView() {
    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)",
                },
            },
            "$" + getBalance().toLocaleString(),
        ),
        h(
            "button",
            {
                className: "kiosk-btn",
                style: { width: "100%", maxWidth: "300px", margin: "0 auto" },
                onClick: () => setView("menu"),
            },
            "Return to Menu",
        ),
    );
}

// Main App
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),
    );
}

// Mount
const root = document.getElementById("app");
render(App, root);