@dreamboard-games/ui-sdk 0.0.41

package/src/primitives/prompt.tsx

@@ -0,0 +1,203 @@
+import {
+  createContext,
+  useContext,
+  type ButtonHTMLAttributes,
+  type ReactNode,
+} from "react";
+import { useSeatInbox } from "../hooks/useSeatInbox.js";
+import type { PromptKey, PromptOptionKey } from "../ui-contract.js";
+import type { InteractionDescriptor } from "../types/plugin-state.js";
+import { interactionInputKeys } from "../utils/interaction-inputs.js";
+import { interactionLabel } from "../utils/interaction-labels.js";
+import {
+  InteractionDescription,
+  InteractionLabel,
+  InteractionRoot,
+  useInteractionPrimitiveContext,
+  type InteractionPartProps,
+  type InteractionRootProps,
+} from "./interaction.js";
+import {
+  composeEventHandlers,
+  renderPrimitive,
+  type PrimitiveCommonProps,
+} from "./primitive-props.js";
+
+export type PromptRootProps<Prompt extends string = PromptKey> =
+  InteractionRootProps<Prompt>;
+
+export function PromptRoot<Prompt extends string = PromptKey>(
+  props: PromptRootProps<Prompt>,
+) {
+  return <InteractionRoot {...props} />;
+}
+
+export function PromptTitle(props: InteractionPartProps) {
+  const { descriptor } = useInteractionPrimitiveContext();
+  return (
+    <InteractionLabel {...props}>
+      {props.children ??
+        descriptor?.context?.title ??
+        (descriptor ? interactionLabel(descriptor) : undefined)}
+    </InteractionLabel>
+  );
+}
+
+export function PromptMessage(props: InteractionPartProps) {
+  const { descriptor } = useInteractionPrimitiveContext();
+  const message =
+    props.children ??
+    (typeof descriptor?.context?.payload?.message === "string"
+      ? descriptor.context.payload.message
+      : undefined);
+  if (!message) return null;
+  return <InteractionDescription {...props}>{message}</InteractionDescription>;
+}
+
+export type PromptOptionProps<Option extends string = PromptOptionKey> =
+  PrimitiveCommonProps &
+    ButtonHTMLAttributes<HTMLButtonElement> & {
+      value: Option;
+      disableWhenUnavailable?: boolean;
+      onSubmitError?: (error: unknown) => void;
+      onSubmitSuccess?: () => void;
+    };
+
+export function PromptOption<Option extends string = PromptOptionKey>({
+  value,
+  disabled,
+  disableWhenUnavailable = false,
+  onClick,
+  onSubmitError,
+  onSubmitSuccess,
+  children,
+  ...props
+}: PromptOptionProps<Option>) {
+  const { descriptor, handle } = useInteractionPrimitiveContext();
+  const option = descriptor?.context?.options?.find(
+    (candidate) => candidate.id === value,
+  );
+  const inputKey = descriptor ? interactionInputKeys(descriptor)[0] : undefined;
+  const isDisabled =
+    disabled ??
+    (!handle ||
+      !inputKey ||
+      handle.status !== "open" ||
+      option?.data === false ||
+      (disableWhenUnavailable && !descriptor?.available));
+  return renderPrimitive("button", {
+    type: "button",
+    ...props,
+    disabled: isDisabled,
+    "aria-disabled": isDisabled,
+    "data-dreamboard-prompt-option": "",
+    "data-option-value": value,
+    "data-disabled": isDisabled || undefined,
+    "data-available": descriptor?.available ?? false,
+    onClick: composeEventHandlers(onClick, () => {
+      if (!handle || !inputKey || isDisabled) return;
+      void handle
+        .submit({ [inputKey]: value })
+        .then(() => onSubmitSuccess?.())
+        .catch((error: unknown) => {
+          if (onSubmitError) {
+            onSubmitError(error);
+            return;
+          }
+          console.error(error);
+        });
+    }),
+    children: children ?? option?.label ?? value,
+  });
+}
+
+export function PromptOptions({
+  children,
+}: {
+  children?: (option: { id: string; label?: string }) => ReactNode;
+}) {
+  const { descriptor } = useInteractionPrimitiveContext();
+  const options = descriptor?.context?.options ?? [];
+  return (
+    <>
+      {options.map((option) =>
+        children ? (
+          children(option)
+        ) : (
+          <PromptOption key={option.id} value={option.id} />
+        ),
+      )}
+    </>
+  );
+}
+
+interface PromptInboxContextValue {
+  prompts: readonly InteractionDescriptor[];
+}
+
+const PromptInboxContext = createContext<PromptInboxContextValue | null>(null);
+
+function usePromptInboxContext(): PromptInboxContextValue {
+  const value = useContext(PromptInboxContext);
+  if (!value) {
+    throw new Error(
+      "PromptInbox primitives must be rendered inside <PromptInbox.Root>.",
+    );
+  }
+  return value;
+}
+
+export function PromptInboxRoot({ children }: { children: ReactNode }) {
+  const inbox = useSeatInbox();
+  return (
+    <PromptInboxContext.Provider value={{ prompts: inbox.prompts }}>
+      {children}
+    </PromptInboxContext.Provider>
+  );
+}
+
+export function PromptInboxEmpty({ children }: { children?: ReactNode }) {
+  const { prompts } = usePromptInboxContext();
+  if (prompts.length > 0) return null;
+  return <>{children}</>;
+}
+
+export function PromptInboxItems({
+  children,
+}: {
+  children?: (prompt: InteractionDescriptor) => ReactNode;
+}) {
+  const { prompts } = usePromptInboxContext();
+  return (
+    <>
+      {prompts.map((prompt) =>
+        children ? (
+          children(prompt)
+        ) : (
+          <PromptRoot
+            key={prompt.interactionKey}
+            interaction={prompt.interactionKey}
+          >
+            <PromptTitle />
+            <PromptMessage />
+            <PromptOptions />
+          </PromptRoot>
+        ),
+      )}
+    </>
+  );
+}
+
+export const Prompt = {
+  Root: PromptRoot,
+  Title: PromptTitle,
+  Message: PromptMessage,
+  Option: PromptOption,
+  Options: PromptOptions,
+};
+
+export const PromptInbox = {
+  Root: PromptInboxRoot,
+  Empty: PromptInboxEmpty,
+  Items: PromptInboxItems,
+};

package/src/primitives/zone.tsx

@@ -0,0 +1,113 @@
+import { createContext, useContext, useMemo, type HTMLAttributes } from "react";
+import { usePluginState } from "../context/PluginStateContext.js";
+import type { ZoneHandlesSnapshot } from "../types/plugin-state.js";
+import type { ZoneKey } from "../ui-contract.js";
+import {
+  renderPrimitive,
+  type PrimitiveCommonProps,
+} from "./primitive-props.js";
+
+interface ZoneContextValue {
+  zone: string;
+  snapshot: ZoneHandlesSnapshot | null;
+}
+
+interface ZoneCardContextValue {
+  zone: string;
+  cardId: string;
+}
+
+const ZoneContext = createContext<ZoneContextValue | null>(null);
+const ZoneCardContext = createContext<ZoneCardContextValue | null>(null);
+
+export function useZonePrimitiveContext(): ZoneContextValue {
+  const value = useContext(ZoneContext);
+  if (!value) {
+    throw new Error("Zone primitives must be rendered inside <Zone.Root>.");
+  }
+  return value;
+}
+
+export function useZoneCardContext(): ZoneCardContextValue | null {
+  return useContext(ZoneCardContext);
+}
+
+export interface ZoneRootProps<Zone extends string = ZoneKey>
+  extends PrimitiveCommonProps,
+    HTMLAttributes<HTMLElement> {
+  zone: Zone;
+}
+
+export function ZoneRoot<Zone extends string = ZoneKey>({
+  zone,
+  children,
+  ...props
+}: ZoneRootProps<Zone>) {
+  const snapshot =
+    usePluginState((state) => state.gameplay.zones[zone]) ?? null;
+  const value = useMemo<ZoneContextValue>(
+    () => ({ zone, snapshot }),
+    [snapshot, zone],
+  );
+  return (
+    <ZoneContext.Provider value={value}>
+      {renderPrimitive("div", {
+        ...props,
+        "data-dreamboard-zone-root": "",
+        "data-zone": zone,
+        "data-card-count": snapshot?.cardIds.length ?? 0,
+        children,
+      })}
+    </ZoneContext.Provider>
+  );
+}
+
+export type ZoneListProps = PrimitiveCommonProps & HTMLAttributes<HTMLElement>;
+
+export function ZoneList({ children, ...props }: ZoneListProps) {
+  const { zone, snapshot } = useZonePrimitiveContext();
+  const isEmpty = (snapshot?.cardIds.length ?? 0) === 0;
+  return renderPrimitive("div", {
+    ...props,
+    role: props.role ?? "list",
+    "data-dreamboard-zone-list": "",
+    "data-zone": zone,
+    "data-empty": isEmpty || undefined,
+    children,
+  });
+}
+
+export interface ZoneItemProps
+  extends PrimitiveCommonProps,
+    HTMLAttributes<HTMLElement> {
+  card: string;
+}
+
+export function ZoneItem({ card, children, ...props }: ZoneItemProps) {
+  const { zone, snapshot } = useZonePrimitiveContext();
+  const playable = snapshot?.playableByCardId[card] ?? [];
+  const cardContext = useMemo<ZoneCardContextValue>(
+    () => ({ zone, cardId: card }),
+    [card, zone],
+  );
+  return (
+    <ZoneCardContext.Provider value={cardContext}>
+      {renderPrimitive("div", {
+        ...props,
+        role: props.role ?? "listitem",
+        "data-dreamboard-zone-item": "",
+        "data-zone": zone,
+        "data-card-id": card,
+        "data-playable":
+          playable.some((descriptor) => descriptor.available) || undefined,
+        children,
+      })}
+    </ZoneCardContext.Provider>
+  );
+}
+
+export const Zone = {
+  Root: ZoneRoot,
+  List: ZoneList,
+  Item: ZoneItem,
+};

package/src/reducer.ts

@@ -0,0 +1,42 @@
+export { useActivePlayers } from "./hooks/useActivePlayers.js";
+export { useSimultaneousPhase } from "./hooks/useSimultaneousPhase.js";
+export { usePlayerTurnOrder } from "./hooks/usePlayerTurnOrder.js";
+export { useGameSelector } from "./hooks/useGameSelector.js";
+export { useIsMyTurn } from "./hooks/useIsMyTurn.js";
+export { useCards } from "./hooks/useCards.js";
+export { useGameView } from "./hooks/useGameView.js";
+export { useLobby } from "./hooks/useLobby.js";
+export { useMe } from "./hooks/useMe.js";
+export { usePlayerInfo } from "./hooks/usePlayerInfo.js";
+export { useSeatInbox, type SeatInbox } from "./hooks/useSeatInbox.js";
+export {
+  useInteractionHandle,
+  type InteractionHandle,
+  type InteractionHandleStatus,
+  type DraftValidation,
+  type InteractionParamsShape,
+} from "./hooks/useInteractionHandle.js";
+export { useInteractionByKey } from "./hooks/useInteractionByKey.js";
+export { usePluginSession } from "./context/PluginSessionContext.js";
+export {
+  type ClientParamSchema,
+  type ClientParamSchemaMap,
+} from "./context/ClientParamSchemaContext.js";
+
+export type {
+  GameplayPromptOption,
+  GameplaySnapshot,
+  PluginStateSnapshot,
+} from "./types/reducer-state.js";
+export type {
+  InteractionDescriptor,
+  InteractionContext,
+  InteractionContextOption,
+} from "./types/plugin-state.js";
+export type { LobbyState } from "./hooks/useLobby.js";
+export type { Player } from "./hooks/useMe.js";
+export type {
+  CardCollection,
+  ViewCard,
+  ViewSlotOccupant,
+} from "@dreamboard/sdk-types";