56 lines
1.5 KiB
TypeScript
56 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import type { PokerSnapshot } from "@/app/(frontend)/minigames/poker/actions";
|
|
import { BettingControls } from "./BettingControls";
|
|
|
|
type SeatedSnapshot = PokerSnapshot & {
|
|
readonly you: NonNullable<PokerSnapshot["you"]>;
|
|
};
|
|
|
|
interface PokerActionToolbarProps {
|
|
readonly snapshot: SeatedSnapshot;
|
|
readonly onSnapshot: (snapshot: PokerSnapshot) => void;
|
|
readonly onActionFeedback: () => void;
|
|
readonly below?: boolean;
|
|
}
|
|
|
|
export function PokerActionToolbar({
|
|
snapshot,
|
|
onSnapshot,
|
|
onActionFeedback,
|
|
below = false,
|
|
}: PokerActionToolbarProps) {
|
|
const view = snapshot.you;
|
|
|
|
if (view.phase !== "betting") return null;
|
|
|
|
if (!view.yourTurn) {
|
|
const actingPlayer = view.players.find((player) => player.seatId === view.toActSeat);
|
|
return (
|
|
<div
|
|
className={`poker-action-toolbar poker-action-toolbar-waiting${below ? " poker-action-toolbar-below" : ""}`}
|
|
role="status"
|
|
>
|
|
{actingPlayer ? `Waiting for ${actingPlayer.name}` : "Waiting for the table"}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={`poker-action-toolbar${below ? " poker-action-toolbar-below" : ""}`}
|
|
aria-label="Poker actions"
|
|
>
|
|
<BettingControls
|
|
tableId={snapshot.tableId}
|
|
snapshotVersion={snapshot.version}
|
|
legalActions={view.legalActions}
|
|
potTotal={view.potTotal}
|
|
yourTurn={view.yourTurn}
|
|
onSnapshot={onSnapshot}
|
|
onActionFeedback={onActionFeedback}
|
|
compact
|
|
/>
|
|
</div>
|
|
);
|
|
}
|