@dreamboard-games/ui-sdk 0.0.41

package/src/components/surfaces/MarketSurface.tsx

@@ -0,0 +1,544 @@
+import { Fragment, useMemo, type CSSProperties, type ReactNode } from "react";
+import { usePluginState } from "../../context/PluginStateContext.js";
+import { surfaceStyle } from "../../theme/derive.js";
+import { useTheme } from "../../theme/ThemeProvider.js";
+import type { Theme } from "../../theme/tokens.js";
+import type { InteractionDescriptor } from "../../types/plugin-state.js";
+import type {
+  InteractionActionState,
+  InteractionDisabledReason,
+} from "../../utils/interaction-status.js";
+import type { ViewCard } from "@dreamboard/sdk-types";
+import { Card } from "../Card.js";
+import {
+  useCardZoneInteractions,
+  type CardZoneInteractionContext,
+} from "./internal/useCardZoneInteractions.js";
+
+export interface MarketPile<I extends string = string> {
+  zoneId: string;
+  cards: readonly ViewCard[];
+  topCard: ViewCard | null;
+  count: number;
+  interactions: ReadonlyArray<InteractionDescriptor<I>>;
+  primaryInteraction: InteractionDescriptor<I> | null;
+  disabled: boolean;
+  disabledReason?: InteractionDisabledReason;
+  actionState: InteractionActionState;
+  play: (() => Promise<void>) | null;
+}
+
+export interface MarketGroup<I extends string = string> {
+  id: string;
+  label: string;
+  showLabel: boolean;
+  chrome: MarketGroupChrome;
+  tone: MarketGroupTone;
+  piles: ReadonlyArray<MarketPile<I>>;
+}
+
+export interface MarketSurfaceContext<I extends string = string> {
+  groups: ReadonlyArray<MarketGroup<I>>;
+}
+
+export type MarketGroupChrome = "auto" | "panel" | "plain";
+export type MarketGroupTone = "default" | "subtle" | "accent";
+export type MarketGroupPriority = "primary" | "supporting";
+
+export interface MarketGroupRenderContext<I extends string = string> {
+  market: MarketSurfaceContext<I>;
+  priority: MarketGroupPriority;
+  renderPile: (pile: MarketPile<I>) => ReactNode;
+  renderPiles: () => ReactNode;
+}
+
+export interface MarketGroupConfig<
+  ZoneId extends string = string,
+  GroupId extends string = string,
+> {
+  id: GroupId;
+  label?: string | false;
+  zones: readonly ZoneId[];
+  chrome?: MarketGroupChrome;
+  tone?: MarketGroupTone;
+}
+
+export interface MarketLayoutConfig<GroupId extends string = string> {
+  primary?: readonly GroupId[];
+  supporting?: readonly GroupId[];
+}
+
+export interface MarketSurfaceConfig<
+  I extends string,
+  ZoneId extends string = string,
+  GroupId extends string = string,
+> {
+  groups?: ReadonlyArray<MarketGroupConfig<ZoneId, GroupId>>;
+  layout?: MarketLayoutConfig<GroupId>;
+  renderCardContent?: (
+    card: ViewCard,
+    ctx: CardZoneInteractionContext<I>,
+  ) => ReactNode;
+  renderPile?: (pile: MarketPile<I>, ctx: MarketSurfaceContext<I>) => ReactNode;
+  renderGroup?: (
+    group: MarketGroup<I>,
+    ctx: MarketGroupRenderContext<I>,
+  ) => ReactNode;
+  render?: (market: MarketSurfaceContext<I>) => ReactNode;
+}
+
+export interface MarketSurfaceProps<
+  I extends string = never,
+  ZoneId extends string = string,
+  GroupId extends string = string,
+> extends MarketSurfaceConfig<I, ZoneId, GroupId> {
+  empty?: ReactNode;
+}
+
+export function defineMarketSurface<
+  const Config extends MarketSurfaceConfig<string, string, string>,
+>(config: Config): Config {
+  return config;
+}
+
+export function MarketSurface<
+  I extends string = never,
+  ZoneId extends string = string,
+  GroupId extends string = string,
+>({
+  groups,
+  layout,
+  renderCardContent,
+  renderPile,
+  renderGroup,
+  render,
+  empty = null,
+}: MarketSurfaceProps<I, ZoneId, GroupId>) {
+  const gameplayZones = usePluginState((s) => s.gameplay.zones);
+  const discoveredZoneIds = useMemo(
+    () => discoverMarketZoneIds(gameplayZones),
+    [gameplayZones],
+  );
+  const authoredZoneIds = new Set(
+    groups?.flatMap((group) => [...group.zones].map(String)) ?? [],
+  );
+  const omittedZoneIds = discoveredZoneIds.filter(
+    (zoneId) => !authoredZoneIds.has(zoneId),
+  );
+  const resolvedGroups = groups?.length
+    ? [
+        ...groups.map((group) => ({
+          id: String(group.id),
+          ...resolveGroupLabel(String(group.id), group.label),
+          chrome: group.chrome ?? "auto",
+          tone: group.tone ?? "default",
+          zoneIds: group.zones.map(String),
+        })),
+        ...(omittedZoneIds.length
+          ? [
+              {
+                id: "other",
+                label: "Other",
+                showLabel: true,
+                chrome: "auto" as const,
+                tone: "subtle" as const,
+                zoneIds: omittedZoneIds,
+              },
+            ]
+          : []),
+      ]
+    : discoveredZoneIds.length
+      ? [
+          {
+            id: "market",
+            label: "Market",
+            showLabel: true,
+            chrome: "auto" as const,
+            tone: "default" as const,
+            zoneIds: discoveredZoneIds,
+          },
+        ]
+      : [];
+
+  if (resolvedGroups.length === 0) return <>{empty}</>;
+
+  return (
+    <MarketSurfaceBody<I>
+      groupSpecs={resolvedGroups}
+      layout={layout as MarketLayoutConfig<string> | undefined}
+      renderCardContent={renderCardContent}
+      renderPile={renderPile}
+      renderGroup={renderGroup}
+      render={render}
+      omittedZoneIds={omittedZoneIds}
+    />
+  );
+}
+
+function MarketSurfaceBody<I extends string>({
+  groupSpecs,
+  layout,
+  renderCardContent,
+  renderPile,
+  renderGroup,
+  render,
+  omittedZoneIds,
+}: {
+  groupSpecs: ReadonlyArray<{
+    id: string;
+    label: string;
+    showLabel: boolean;
+    chrome: MarketGroupChrome;
+    tone: MarketGroupTone;
+    zoneIds: readonly string[];
+  }>;
+  layout?: MarketLayoutConfig<string>;
+  renderCardContent?: (
+    card: ViewCard,
+    ctx: CardZoneInteractionContext<I>,
+  ) => ReactNode;
+  renderPile?: (pile: MarketPile<I>, ctx: MarketSurfaceContext<I>) => ReactNode;
+  renderGroup?: (
+    group: MarketGroup<I>,
+    ctx: MarketGroupRenderContext<I>,
+  ) => ReactNode;
+  render?: (market: MarketSurfaceContext<I>) => ReactNode;
+  omittedZoneIds: readonly string[];
+}) {
+  const pileData = groupSpecs
+    .map((group) => ({
+      id: group.id,
+      label: group.label,
+      showLabel: group.showLabel,
+      chrome: group.chrome,
+      tone: group.tone,
+      piles: group.zoneIds
+        .map((zoneId) => useMarketPile<I>(zoneId))
+        .filter((pile) => pile.count > 0 || pile.interactions.length > 0),
+    }))
+    .filter((group) => group.piles.length > 0);
+  const market = { groups: pileData };
+
+  const nodeEnv = (globalThis as { process?: { env?: { NODE_ENV?: string } } })
+    .process?.env?.NODE_ENV;
+  if (omittedZoneIds.length && nodeEnv !== "production") {
+    console.warn(
+      `MarketSurface: appended omitted market zones to Other: ${omittedZoneIds.join(", ")}`,
+    );
+  }
+  if (render) return <>{render(market)}</>;
+
+  const orderedGroups = orderGroups(pileData, layout);
+  const groupCount = orderedGroups.length;
+  const renderPileNode = (pile: MarketPile<I>) => (
+    <div
+      key={pile.zoneId}
+      data-market-pile={pile.zoneId}
+      data-disabled={pile.disabled ? "true" : undefined}
+    >
+      {renderPile ? (
+        renderPile(pile, market)
+      ) : (
+        <DefaultMarketPile pile={pile} renderCardContent={renderCardContent} />
+      )}
+    </div>
+  );
+
+  return (
+    <div
+      data-market-surface
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: 12,
+        width: "100%",
+      }}
+    >
+      {orderedGroups.map(({ group, priority }) => {
+        const renderPiles = () => group.piles.map(renderPileNode);
+        if (renderGroup) {
+          return (
+            <Fragment key={group.id}>
+              {renderGroup(group, {
+                market,
+                priority,
+                renderPile: renderPileNode,
+                renderPiles,
+              })}
+            </Fragment>
+          );
+        }
+        return (
+          <DefaultMarketGroup
+            key={group.id}
+            group={group}
+            groupCount={groupCount}
+            priority={priority}
+          >
+            {renderPiles()}
+          </DefaultMarketGroup>
+        );
+      })}
+    </div>
+  );
+}
+
+function DefaultMarketGroup<I extends string>({
+  group,
+  groupCount,
+  priority,
+  children,
+}: {
+  group: MarketGroup<I>;
+  groupCount: number;
+  priority: MarketGroupPriority;
+  children: ReactNode;
+}) {
+  const theme = useTheme();
+  const resolvedChrome = resolveGroupChrome(group.chrome, groupCount);
+  const density = priority === "supporting" ? "compact" : "comfortable";
+  const sectionStyle = groupSectionStyle(
+    theme,
+    resolvedChrome,
+    group.tone,
+    density,
+  );
+
+  return (
+    <section
+      data-market-group={group.id}
+      data-market-layout={priority}
+      data-market-chrome={resolvedChrome}
+      data-market-tone={group.tone}
+      data-market-density={density}
+      aria-label={group.label}
+      style={sectionStyle}
+    >
+      {group.showLabel ? (
+        <h3
+          data-market-group-title={group.id}
+          style={{
+            margin: `0 0 ${theme.space[2]}`,
+            color:
+              group.tone === "accent"
+                ? theme.semantic.intent.info.onSoft
+                : theme.semantic.text.muted,
+            fontFamily: theme.typography.fontFamily.display,
+            fontSize: theme.typography.fontSize.sm,
+            fontWeight: theme.typography.fontWeight.bold,
+            letterSpacing: theme.typography.letterSpacing.caps,
+            lineHeight: theme.typography.lineHeight.tight,
+            textTransform: "uppercase",
+          }}
+        >
+          {group.label}
+        </h3>
+      ) : null}
+      <div
+        style={{
+          display: "flex",
+          flexWrap: "wrap",
+          gap: density === "compact" ? theme.space[2] : theme.space[3],
+        }}
+      >
+        {children}
+      </div>
+    </section>
+  );
+}
+
+function resolveGroupLabel(id: string, label: string | false | undefined) {
+  const fallback = humanizeGroupId(id);
+  return label === false
+    ? { label: fallback, showLabel: false }
+    : { label: label ?? fallback, showLabel: true };
+}
+
+function humanizeGroupId(id: string): string {
+  return id
+    .replace(/[-_]+/g, " ")
+    .replace(/([a-z0-9])([A-Z])/g, "$1 $2")
+    .replace(/\s+/g, " ")
+    .trim()
+    .replace(/\b\w/g, (char) => char.toUpperCase());
+}
+
+function resolveGroupChrome(
+  chrome: MarketGroupChrome,
+  groupCount: number,
+): Exclude<MarketGroupChrome, "auto"> {
+  if (chrome !== "auto") return chrome;
+  return groupCount > 1 ? "panel" : "plain";
+}
+
+function groupSectionStyle(
+  theme: Theme,
+  chrome: Exclude<MarketGroupChrome, "auto">,
+  tone: MarketGroupTone,
+  density: "compact" | "comfortable",
+): CSSProperties {
+  if (chrome === "plain") {
+    return {
+      minWidth: 0,
+    };
+  }
+
+  const padding =
+    density === "compact"
+      ? `${theme.space[2]} ${theme.space[3]}`
+      : `${theme.space[3]} ${theme.space[4]}`;
+  const style = surfaceStyle(theme, {
+    tone: tone === "subtle" ? "inset" : "card",
+    radius: "hud",
+  });
+
+  if (tone === "accent") {
+    return {
+      ...style,
+      padding,
+      background: theme.semantic.intent.info.soft,
+      border: `1px solid ${theme.semantic.intent.info.border}`,
+      boxShadow: theme.elevation.rest,
+    };
+  }
+
+  return {
+    ...style,
+    padding,
+    boxShadow: tone === "subtle" ? theme.elevation.inset : theme.elevation.rest,
+  };
+}
+
+function useMarketPile<I extends string>(zoneId: string): MarketPile<I> {
+  const { cards, contexts } = useCardZoneInteractions<I>(zoneId, {
+    surface: "market",
+  });
+  const topCard = cards[0] ?? null;
+  const ctx = topCard
+    ? contexts.find((item) => item.card.id === topCard.id)
+    : undefined;
+  const available = (ctx?.interactions ?? []).filter(
+    (descriptor) => descriptor.available !== false,
+  );
+  return {
+    zoneId,
+    cards,
+    topCard,
+    count: cards.length,
+    interactions: ctx?.interactions ?? [],
+    primaryInteraction: available.length === 1 ? (available[0] ?? null) : null,
+    disabled: ctx?.disabled ?? true,
+    disabledReason: ctx?.disabledReason,
+    actionState: ctx?.actionState ?? "unavailable",
+    play: ctx?.play ? async () => ctx.play?.() : null,
+  };
+}
+
+function DefaultMarketPile<I extends string>({
+  pile,
+  renderCardContent,
+}: {
+  pile: MarketPile<I>;
+  renderCardContent?: (
+    card: ViewCard,
+    ctx: CardZoneInteractionContext<I>,
+  ) => ReactNode;
+}) {
+  if (!pile.topCard) return null;
+  return (
+    <div style={{ position: "relative" }}>
+      <Card
+        card={pile.topCard}
+        disabled={pile.disabled}
+        size="sm"
+        onCardClick={
+          pile.disabled || !pile.play ? undefined : () => void pile.play?.()
+        }
+        renderContent={
+          renderCardContent
+            ? (card) =>
+                renderCardContent(card, {
+                  card,
+                  interactions: pile.interactions,
+                  play: pile.play,
+                  disabled: pile.disabled,
+                  disabledReason: pile.disabledReason,
+                  actionState: pile.actionState,
+                  selected: false,
+                })
+            : undefined
+        }
+      />
+      <span
+        data-market-pile-count
+        style={{
+          position: "absolute",
+          right: -6,
+          bottom: -6,
+          borderRadius: 999,
+          padding: "2px 6px",
+          background: "#111",
+          color: "#fff",
+          fontSize: 12,
+        }}
+      >
+        {pile.count}
+      </span>
+    </div>
+  );
+}
+
+function discoverMarketZoneIds(
+  gameplayZones: Record<
+    string,
+    {
+      cardIds: readonly string[];
+      playableByCardId: Record<string, readonly InteractionDescriptor[]>;
+    }
+  >,
+): string[] {
+  const ids: string[] = [];
+  for (const [zoneId, zone] of Object.entries(gameplayZones)) {
+    if (
+      zone.cardIds.some(
+        (cardId) => (zone.playableByCardId[cardId] ?? []).length > 0,
+      )
+    )
+      ids.push(zoneId);
+  }
+  return ids;
+}
+
+function orderGroups<I extends string>(
+  groups: ReadonlyArray<MarketGroup<I>>,
+  layout?: MarketLayoutConfig<string>,
+) {
+  const byId = new Map(groups.map((group) => [group.id, group]));
+  const seen = new Set<string>();
+  const supportingIds = new Set(layout?.supporting ?? []);
+  const take = (
+    ids: readonly string[] | undefined,
+    priority: "primary" | "supporting",
+  ) =>
+    (ids ?? []).flatMap((id) => {
+      const group = byId.get(id);
+      if (!group || seen.has(id)) return [];
+      seen.add(id);
+      return [{ group, priority }];
+    });
+  return [
+    ...take(layout?.primary, "primary"),
+    ...groups
+      .filter(
+        (group) =>
+          !seen.has(group.id) &&
+          group.id !== "other" &&
+          !supportingIds.has(group.id),
+      )
+      .map((group) => ({ group, priority: "primary" as const })),
+    ...take(layout?.supporting, "supporting"),
+    ...groups
+      .filter((group) => group.id === "other" && !seen.has(group.id))
+      .map((group) => ({ group, priority: "supporting" as const })),
+  ];
+}