JoshHeaps.Net/JoshHeaps.Net/wwwroot/js/casino/holdem/actionBar.js

// The bar a dealer's thumb lives on while a hand is running: who's to act, what it
// costs them, and one tap per decision. Sits at the bottom of the screen on a phone
// so it's reachable without looking, and re-renders after every action because the
// next player's numbers are different.
const ActionBar = {
    state: null,
    hooks: null,
    raiseOpen: false,
    raiseDraft: null,

    mount(state, hooks) {
        this.state = state;
        this.hooks = hooks;
        this.render();
    },

    // Anything to act on? A hand with nobody dealt in doesn't get a bar.
    isRunning() {
        return Betting.liveSeats(this.state).length > 0;
    },

    render() {
        const host = document.getElementById("actionBar");
        if (!host) return;
        host.innerHTML = "";

        if (!this.isRunning()) {
            host.hidden = true;
            document.body.classList.remove("hasActionBar");
            return;
        }
        host.hidden = false;
        document.body.classList.add("hasActionBar");

        host.appendChild(this.renderStatus());

        const breakdown = this.renderPotBreakdown();
        if (breakdown) host.appendChild(breakdown);

        if (Betting.isHandOver(this.state)) {
            host.appendChild(this.renderHandOver());
        } else if (this.state.actingSeatIndex === null || this.state.actingSeatIndex === undefined) {
            host.appendChild(this.renderStreetDone());
        } else if (this.raiseOpen) {
            host.appendChild(this.renderRaisePad());
        } else {
            host.appendChild(this.renderActions());
        }
    },

    renderStatus() {
        const row = document.createElement("div");
        row.className = "actionStatus";

        const street = document.createElement("span");
        street.className = "actionStreet";
        street.textContent = Betting.streetLabel(this.state.street);
        row.appendChild(street);

        const pot = document.createElement("span");
        pot.className = "actionPot";
        pot.textContent = `Pot ${Money.format(Betting.potSoFar(this.state))}`;
        row.appendChild(pot);

        const index = this.state.actingSeatIndex;
        if (index !== null && index !== undefined && !Betting.isHandOver(this.state)) {
            const player = this.state.seats[index];
            const who = document.createElement("span");
            who.className = "actionWho";
            who.textContent = `${HoldemState.displayName(player, index)} · ${Money.format(Betting.stackOf(this.state, player))} behind`;
            row.appendChild(who);
        }

        return row;
    },

    // Shown only once someone is all-in and the money has actually split — a single
    // undivided pot needs no announcement, and a line that's always there stops being
    // read.
    renderPotBreakdown() {
        const contributions = this.state.seats.map((player, index) => ({
            id: player.id,
            index,
            contribution: Betting.handTotal(player),
            folded: player.folded,
        }));

        const nameById = new Map(
            this.state.seats.map((player, index) => [player.id, HoldemState.displayName(player, index)])
        );

        return Render.buildPotBreakdown(
            PotCalculator.layers(contributions),
            PotCalculator.uncalledReturns(contributions),
            id => nameById.get(id)
        );
    },

    button(label, className, onClick, sublabel) {
        const btn = document.createElement("button");
        btn.type = "button";
        btn.className = `actionBtn ${className}`;

        const main = document.createElement("span");
        main.className = "actionBtnLabel";
        main.textContent = label;
        btn.appendChild(main);

        if (sublabel) {
            const sub = document.createElement("span");
            sub.className = "actionBtnSub";
            sub.textContent = sublabel;
            btn.appendChild(sub);
        }

        btn.addEventListener("click", onClick);
        return btn;
    },

    commit(mutate) {
        mutate();
        this.hooks.save(this.state);
        this.hooks.rerender();
    },

    renderActions() {
        const index = this.state.actingSeatIndex;
        const player = this.state.seats[index];
        const owed = Betting.toCall(this.state, player);
        const stack = Betting.stackOf(this.state, player);

        const row = document.createElement("div");
        row.className = "actionButtons";

        row.appendChild(this.button("Fold", "actionFold", () => this.commit(() => Betting.fold(this.state, index))));

        if (owed <= 0) {
            row.appendChild(this.button("Check", "actionCheck", () => this.commit(() => Betting.check(this.state, index))));
        } else if (owed >= stack) {
            // Calling would put them all-in, so say that rather than quoting a number
            // they can't cover.
            row.appendChild(this.button("Call all-in", "actionCall", () => this.commit(() => Betting.allIn(this.state, index)), Money.format(stack)));
        } else {
            row.appendChild(this.button("Call", "actionCall", () => this.commit(() => Betting.call(this.state, index)), Money.format(owed)));
        }

        if (stack > owed) {
            row.appendChild(this.button(owed > 0 ? "Raise" : "Bet", "actionRaise", () => {
                this.raiseOpen = true;
                this.raiseDraft = Math.min(Betting.minRaiseTo(this.state), Betting.committed(player) + stack);
                this.render();
            }));
        }

        return row;
    },

    // Quick amounts first, keypad second — a dealer calling "raise to sixty" wants a
    // button, and only reaches for digits when the table does something odd.
    renderRaisePad() {
        const index = this.state.actingSeatIndex;
        const player = this.state.seats[index];
        const stack = Betting.stackOf(this.state, player);
        const maxTo = Betting.round(Betting.committed(player) + stack);
        const pot = Betting.potSoFar(this.state);
        const minTo = Math.min(Betting.minRaiseTo(this.state), maxTo);

        const wrap = document.createElement("div");
        wrap.className = "raisePad";

        const quick = document.createElement("div");
        quick.className = "raiseQuick";

        const options = [
            { label: "Min", value: minTo },
            { label: "½ pot", value: Betting.round(this.state.currentBet + pot / 2) },
            { label: "Pot", value: Betting.round(this.state.currentBet + pot) },
            { label: "All-in", value: maxTo },
        ];
        options.forEach(option => {
            const value = Math.max(minTo, Math.min(option.value, maxTo));
            const btn = this.button(option.label, "raiseQuickBtn", () => {
                this.raiseDraft = value;
                this.render();
            }, Money.format(value));
            if (Betting.round(this.raiseDraft) === value) btn.classList.add("selected");
            quick.appendChild(btn);
        });
        wrap.appendChild(quick);

        const entry = document.createElement("div");
        entry.className = "raiseEntry";

        const input = document.createElement("input");
        input.type = "text";
        input.inputMode = "decimal";
        input.className = "raiseInput";
        input.value = this.raiseDraft ?? minTo;
        input.setAttribute("aria-label", "Raise to amount");
        input.addEventListener("input", () => {
            this.raiseDraft = input.value.replace(/[^0-9.]/g, "");
        });
        entry.appendChild(input);

        entry.appendChild(this.button("Cancel", "raiseCancel", () => {
            this.raiseOpen = false;
            this.render();
        }));

        entry.appendChild(this.button("Raise to", "raiseConfirm", () => {
            const target = Math.max(0, Math.min(Number(this.raiseDraft) || 0, maxTo));
            this.raiseOpen = false;
            this.commit(() => Betting.raiseTo(this.state, index, target));
        }));

        wrap.appendChild(entry);
        return wrap;
    },

    renderStreetDone() {
        const row = document.createElement("div");
        row.className = "actionButtons";

        const isRiver = this.state.street === "river";
        const label = isRiver ? "Showdown — resolve pot" : `Deal ${Betting.streetLabel(Betting.STREETS[Betting.STREETS.indexOf(this.state.street) + 1])}`;

        row.appendChild(this.button(label, "actionAdvance", () => {
            if (isRiver) {
                this.hooks.resolvePot();
                return;
            }
            this.commit(() => Betting.closeStreet(this.state));
        }));

        return row;
    },

    renderHandOver() {
        const row = document.createElement("div");
        row.className = "actionButtons";
        const live = Betting.liveSeats(this.state);
        const winner = live.length === 1 ? HoldemState.displayName(live[0].player, live[0].index) : null;

        row.appendChild(this.button(
            winner ? `Award pot to ${winner}` : "Resolve pot",
            "actionAdvance",
            () => this.hooks.resolvePot()
        ));
        return row;
    },
};

if (typeof module !== "undefined" && module.exports) {
    module.exports = ActionBar;
}