@ankhorage/zora 21.0.22 → 21.1.0

package/src/features/tabletop/adapters/inbound/PokerTrainingTable.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import type { PokerTrainingTableProps } from '../../../../types/tabletop';
+import { withZoraThemeScope } from '../../../theme/adapters/inbound/withZoraThemeScope';
+import { createPokerTrainingTableState } from '../../utils/createPokerTrainingTableState';
+import { TabletopTable } from './TabletopTable';
+
+/*** Maps a serializable training task to presentation without running poker or training policy. */
+export const PokerTrainingTable = withZoraThemeScope(PokerTrainingTableInner);
+
+/*** Renders the reconstructed seat ring and shared table content. */
+function PokerTrainingTableInner({
+  task = {},
+  defaultStackBigBlinds = 100,
+  accessibilityLabel,
+  ...tableProps
+}: PokerTrainingTableProps) {
+  const state = React.useMemo(
+    () => createPokerTrainingTableState(task, { defaultStackBigBlinds }),
+    [defaultStackBigBlinds, task],
+  );
+
+  return (
+    <TabletopTable
+      {...tableProps}
+      accessibilityLabel={accessibilityLabel ?? state.accessibilityLabel}
+      centerCards={state.centerCards}
+      centerLabel={state.centerLabel}
+      centerSublabel={state.centerSublabel}
+      seatCount={state.seatCount}
+      seats={state.seats}
+    />
+  );
+}

package/src/features/tabletop/adapters/inbound/TabletopTable.tsx

@@ -0,0 +1,264 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import type { TabletopSeatState } from '../../../../types/tabletop';
+import type { TabletopTableProps } from '../../../../types/tabletop';
+import { withZoraThemeScope } from '../../../theme/adapters/inbound/withZoraThemeScope';
+import { useZoraTheme } from '../../../theme/composition/useZoraTheme';
+import { createTabletopColorScheme } from '../../utils/createTabletopColorScheme';
+import { getTabletopSeatPosition } from '../../utils/getTabletopSeatPosition';
+import { CardHand } from './CardHand';
+
+/*** Renders a responsive table surface and caller-owned seats. */
+export const TabletopTable = withZoraThemeScope(TabletopTableInner);
+
+/*** Summarizes the visible seat state for assistive technology. */
+function createSeatAccessibilityLabel(seat: TabletopSeatState): string | undefined {
+  if (seat.accessibilityLabel !== undefined) return seat.accessibilityLabel;
+  if (typeof seat.label !== 'string') return undefined;
+  const parts = [seat.label];
+  if (typeof seat.sublabel === 'string') parts.push(seat.sublabel);
+  if (typeof seat.tokenLabel === 'string') parts.push(seat.tokenLabel);
+  if (seat.selected) parts.push('selected');
+  if (seat.muted) parts.push('muted');
+  return parts.join(', ');
+}
+
+/*** Renders the table geometry using the active ZORA theme. */
+function TabletopTableInner({
+  seats,
+  centerCards = [],
+  centerLabel,
+  centerSublabel,
+  shape = 'oval',
+  seatCount,
+  cardSize = 'small',
+  disabled = false,
+  colorScheme,
+  accessibilityLabel,
+  testID,
+}: TabletopTableProps) {
+  const { theme } = useZoraTheme();
+  const colors = React.useMemo(
+    () => createTabletopColorScheme(theme, colorScheme),
+    [colorScheme, theme],
+  );
+  const resolvedSeatCount = seatCount ?? seats.length;
+
+  return (
+    <View
+      accessibilityLabel={accessibilityLabel}
+      style={[
+        styles.root,
+        { aspectRatio: shape === 'circle' ? 1 : 1.6, opacity: disabled ? 0.56 : 1 },
+      ]}
+      testID={testID}
+    >
+      <View
+        style={[
+          styles.surface,
+          shape === 'circle' ? styles.circleSurface : styles.ovalSurface,
+          shape === 'rounded' ? styles.roundedSurface : null,
+          {
+            backgroundColor: colors.tableFelt,
+            borderColor: colors.tableBorder,
+          },
+        ]}
+      >
+        <View
+          pointerEvents="none"
+          style={[
+            styles.innerSurface,
+            shape === 'circle' ? styles.circleSurface : styles.ovalSurface,
+            shape === 'rounded' ? styles.roundedSurface : null,
+            { borderColor: colors.tableInnerBorder },
+          ]}
+        />
+        <View style={styles.centerContent}>
+          {centerCards.length > 0 ? (
+            <CardHand cards={centerCards} colorScheme={colorScheme} size={cardSize} />
+          ) : null}
+          {centerLabel !== undefined ? (
+            <View style={[styles.centerLabel, { backgroundColor: colors.seatSurface }]}>
+              <Text style={[styles.centerLabelText, { color: colors.seatText }]}>
+                {centerLabel}
+              </Text>
+            </View>
+          ) : null}
+          {centerSublabel !== undefined ? (
+            <Text style={[styles.centerSublabel, { color: colors.tableMutedText }]}>
+              {centerSublabel}
+            </Text>
+          ) : null}
+        </View>
+      </View>
+
+      {seats.map((seat, index) => {
+        const position = getTabletopSeatPosition(index, resolvedSeatCount);
+        const hasCards = seat.cards !== undefined || seat.faceDownCards !== undefined;
+        const seatCardSize = seat.selected && cardSize === 'small' ? 'medium' : cardSize;
+
+        return (
+          <View
+            accessibilityLabel={createSeatAccessibilityLabel(seat)}
+            accessibilityRole="summary"
+            key={seat.id}
+            style={[
+              styles.seatSlot,
+              {
+                left: position.left,
+                opacity: seat.muted ? 0.48 : 1,
+                top: position.top,
+              },
+            ]}
+            testID={testID ? `${testID}-seat-${seat.id}` : undefined}
+          >
+            <View
+              style={[
+                styles.seatPanel,
+                seat.selected ? styles.selectedSeatPanel : null,
+                {
+                  borderColor: seat.selected ? colors.seatSelectedBorder : colors.seatBorder,
+                  backgroundColor: colors.seatSurface,
+                },
+              ]}
+            >
+              {hasCards ? (
+                <CardHand
+                  cards={seat.cards}
+                  colorScheme={colorScheme}
+                  faceDownCards={seat.faceDownCards}
+                  muted={seat.muted ?? seat.disabled}
+                  size={seatCardSize}
+                />
+              ) : null}
+              <View style={styles.seatTextGroup}>
+                <Text style={[styles.seatLabel, { color: colors.seatText }]}>{seat.label}</Text>
+                {seat.sublabel !== undefined ? (
+                  <Text style={[styles.seatSublabel, { color: colors.seatMutedText }]}>
+                    {seat.sublabel}
+                  </Text>
+                ) : null}
+              </View>
+            </View>
+            {seat.tokenLabel !== undefined ? (
+              <View
+                style={[
+                  styles.token,
+                  {
+                    backgroundColor: colors.tokenSurface,
+                    borderColor: seat.selected
+                      ? colors.seatSelectedBorder
+                      : colors.tableInnerBorder,
+                  },
+                ]}
+              >
+                <Text style={[styles.tokenText, { color: colors.tokenText }]}>
+                  {seat.tokenLabel}
+                </Text>
+              </View>
+            ) : null}
+          </View>
+        );
+      })}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  centerContent: {
+    alignItems: 'center',
+    gap: 6,
+    left: 0,
+    position: 'absolute',
+    right: 0,
+    top: '35%',
+  },
+  centerLabel: {
+    borderRadius: 999,
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+  },
+  centerLabelText: {
+    fontSize: 12,
+    fontWeight: '800',
+  },
+  centerSublabel: {
+    fontSize: 11,
+    fontWeight: '700',
+  },
+  circleSurface: {
+    borderRadius: 999,
+  },
+  innerSurface: {
+    borderWidth: 1,
+    bottom: 10,
+    left: 10,
+    opacity: 0.44,
+    position: 'absolute',
+    right: 10,
+    top: 10,
+  },
+  ovalSurface: {
+    borderRadius: 999,
+  },
+  root: {
+    maxWidth: 760,
+    position: 'relative',
+    width: '100%',
+  },
+  roundedSurface: {
+    borderRadius: 28,
+  },
+  seatLabel: {
+    fontSize: 11,
+    fontWeight: '800',
+  },
+  seatPanel: {
+    alignItems: 'center',
+    borderRadius: 12,
+    borderWidth: 1,
+    gap: 4,
+    minWidth: 68,
+    paddingHorizontal: 7,
+    paddingVertical: 6,
+  },
+  seatSlot: {
+    alignItems: 'center',
+    gap: 4,
+    minWidth: 78,
+    position: 'absolute',
+    transform: [{ translateX: -39 }, { translateY: -34 }],
+  },
+  seatSublabel: {
+    fontSize: 10,
+    fontWeight: '700',
+  },
+  seatTextGroup: {
+    alignItems: 'center',
+    gap: 1,
+  },
+  selectedSeatPanel: {
+    borderWidth: 2,
+    paddingHorizontal: 9,
+    paddingVertical: 7,
+  },
+  surface: {
+    borderWidth: 8,
+    bottom: 28,
+    left: 24,
+    position: 'absolute',
+    right: 24,
+    top: 24,
+  },
+  token: {
+    borderRadius: 999,
+    borderWidth: 1,
+    paddingHorizontal: 7,
+    paddingVertical: 2,
+  },
+  tokenText: {
+    fontSize: 10,
+    fontWeight: '800',
+  },
+});

package/src/features/tabletop/meta.ts

@@ -0,0 +1,254 @@
+import type { ZoraComponentMeta } from '../../types/authoring';
+
+export const cardBackMeta = {
+  name: 'CardBack',
+  category: 'component',
+  description: 'Renders one face-down playing card.',
+  directManifestNode: false,
+  allowedChildren: [],
+  note: 'Public card primitive composed by code-facing tabletop components, not a direct manifest node.',
+  blueprint: { label: 'Card back', defaultProps: { size: 'medium' } },
+  props: {
+    size: {
+      type: 'enum',
+      category: 'Style',
+      label: 'Size',
+      enum: ['small', 'medium', 'large'],
+      default: 'medium',
+      authoring: { authority: 'instance' },
+    },
+    muted: {
+      type: 'boolean',
+      category: 'State',
+      label: 'Muted',
+      default: false,
+      authoring: { authority: 'instance' },
+    },
+  },
+} as const satisfies ZoraComponentMeta;
+export const cardHandMeta = {
+  name: 'CardHand',
+  category: 'component',
+  description: 'Renders a compact caller-owned card hand.',
+  directManifestNode: false,
+  allowedChildren: [],
+  note: 'Public hand primitive composed by code-facing tabletop components, not a direct manifest node.',
+  blueprint: { label: 'Card hand', defaultProps: { cards: [], faceDownCards: 0, size: 'medium' } },
+  props: {
+    cards: {
+      type: 'array',
+      category: 'Cards',
+      label: 'Cards',
+      default: [],
+      authoring: { authority: 'instance' },
+    },
+    faceDownCards: {
+      type: 'number',
+      category: 'Cards',
+      label: 'Face-down cards',
+      default: 0,
+      authoring: { authority: 'instance' },
+    },
+    size: {
+      type: 'enum',
+      category: 'Style',
+      label: 'Size',
+      enum: ['small', 'medium', 'large'],
+      default: 'medium',
+      authoring: { authority: 'instance' },
+    },
+  },
+} as const satisfies ZoraComponentMeta;
+export const playingCardMeta = {
+  name: 'PlayingCard',
+  category: 'component',
+  description: 'Renders one face-up caller-owned playing card.',
+  directManifestNode: false,
+  allowedChildren: [],
+  note: 'Public card primitive composed by code-facing tabletop components, not a direct manifest node.',
+  blueprint: {
+    label: 'Playing card',
+    defaultProps: { card: { rank: 'A', suit: 'spades' }, size: 'medium' },
+  },
+  bindings: {
+    props: { card: { label: 'Card', value: { type: 'object' }, acceptsFallback: true } },
+  },
+  props: {
+    size: {
+      type: 'enum',
+      category: 'Style',
+      label: 'Size',
+      enum: ['small', 'medium', 'large'],
+      default: 'medium',
+      authoring: { authority: 'instance' },
+    },
+    selected: {
+      type: 'boolean',
+      category: 'State',
+      label: 'Selected',
+      default: false,
+      authoring: { authority: 'instance' },
+    },
+  },
+} as const satisfies ZoraComponentMeta;
+export const tabletopTableMeta = {
+  name: 'TabletopTable',
+  category: 'component',
+  description:
+    'Arranges caller-owned player seats and shared cards around a responsive tabletop surface.',
+  directManifestNode: true,
+  allowedChildren: [],
+  blueprint: {
+    label: 'Tabletop table',
+    defaultProps: { seats: [], centerCards: [], shape: 'oval', cardSize: 'small' },
+  },
+  bindings: {
+    props: {
+      seats: {
+        label: 'Seats',
+        value: { type: 'array', itemType: 'object' },
+        acceptsFallback: true,
+        acceptsTransforms: true,
+      },
+      centerCards: {
+        label: 'Center cards',
+        value: { type: 'array', itemType: 'object' },
+        acceptsFallback: true,
+        acceptsTransforms: true,
+      },
+    },
+  },
+  props: {
+    seats: {
+      type: 'array',
+      category: 'Players',
+      label: 'Seats',
+      default: [],
+      authoring: { authority: 'instance' },
+    },
+    centerCards: {
+      type: 'array',
+      category: 'Table',
+      label: 'Center cards',
+      default: [],
+      authoring: { authority: 'instance' },
+    },
+    centerLabel: {
+      type: 'string',
+      category: 'Table',
+      label: 'Center label',
+      authoring: { authority: 'instance' },
+    },
+    centerSublabel: {
+      type: 'string',
+      category: 'Table',
+      label: 'Center sublabel',
+      authoring: { authority: 'instance' },
+    },
+    shape: {
+      type: 'enum',
+      category: 'Table',
+      label: 'Shape',
+      enum: ['circle', 'oval', 'rounded'],
+      default: 'oval',
+      authoring: { authority: 'instance' },
+    },
+    seatCount: {
+      type: 'enum',
+      category: 'Players',
+      label: 'Seat count',
+      enum: [2, 3, 4, 5, 6, 7, 8, 9, 10],
+      authoring: { authority: 'instance' },
+    },
+    cardSize: {
+      type: 'enum',
+      category: 'Cards',
+      label: 'Card size',
+      enum: ['small', 'medium', 'large'],
+      default: 'small',
+      authoring: { authority: 'instance' },
+    },
+    disabled: {
+      type: 'boolean',
+      category: 'State',
+      label: 'Disabled',
+      default: false,
+      authoring: { authority: 'instance' },
+    },
+    accessibilityLabel: {
+      type: 'string',
+      category: 'Accessibility',
+      label: 'Accessibility label',
+      authoring: { authority: 'instance' },
+    },
+  },
+} as const satisfies ZoraComponentMeta;
+export const pokerTrainingTableMeta = {
+  name: 'PokerTrainingTable',
+  category: 'pattern',
+  description: 'Maps serializable poker table data into the reusable tabletop presentation.',
+  directManifestNode: true,
+  allowedChildren: [],
+  blueprint: {
+    label: 'Poker training table',
+    defaultProps: { task: {}, defaultStackBigBlinds: 100, shape: 'oval', cardSize: 'small' },
+  },
+  bindings: {
+    props: {
+      task: {
+        label: 'Poker training task',
+        description: 'Table-relevant fields from a poker training task.',
+        value: {
+          type: 'object',
+          fields: [
+            { path: 'blinds', type: 'object', label: 'Blinds' },
+            { path: 'heroPosition', type: 'string', label: 'Hero position' },
+            { path: 'heroCards', type: 'array', label: 'Hero cards' },
+            { path: 'communityCards', type: 'array', label: 'Community cards' },
+            { path: 'pot', type: 'number', label: 'Pot' },
+            { path: 'players', type: 'array', label: 'Players' },
+          ],
+        },
+        acceptsFallback: true,
+      },
+    },
+  },
+  props: {
+    defaultStackBigBlinds: {
+      type: 'number',
+      category: 'Players',
+      label: 'Default stack in big blinds',
+      default: 100,
+      authoring: { authority: 'instance' },
+    },
+    shape: {
+      type: 'enum',
+      category: 'Table',
+      label: 'Shape',
+      enum: ['circle', 'oval', 'rounded'],
+      default: 'oval',
+      authoring: { authority: 'instance' },
+    },
+    cardSize: {
+      type: 'enum',
+      category: 'Cards',
+      label: 'Card size',
+      enum: ['small', 'medium', 'large'],
+      default: 'small',
+      authoring: { authority: 'instance' },
+    },
+    disabled: {
+      type: 'boolean',
+      category: 'State',
+      label: 'Disabled',
+      default: false,
+      authoring: { authority: 'instance' },
+    },
+    accessibilityLabel: {
+      type: 'string',
+      category: 'Accessibility',
+      label: 'Accessibility label',
+      authoring: { authority: 'instance' },
+    },
+  },
+} as const satisfies ZoraComponentMeta;

package/src/features/tabletop/public.test.tsx

@@ -0,0 +1,127 @@
+import { join } from 'node:path';
+import { pathToFileURL } from 'node:url';
+
+import { describe, expect, test } from 'bun:test';
+import { Window } from 'happy-dom';
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+
+import type {
+  CardHand as CardHandComponent,
+  PokerTrainingTable as PokerTrainingTableComponent,
+  TabletopTable as TabletopTableComponent,
+} from './public';
+import { createPokerTrainingTableState } from './utils/createPokerTrainingTableState';
+import { createTabletopGameSeats } from './utils/createTabletopGameSeats';
+import { getTabletopSeatPosition } from './utils/getTabletopSeatPosition';
+
+const webDistRoot = join(import.meta.dir, '../../../web-dist');
+const load = (path: string) => import(pathToFileURL(join(webDistRoot, path)).href);
+
+describe('Tabletop presentation', () => {
+  test('reconstructs the complete hero-oriented ring without training policy', () => {
+    const state = createPokerTrainingTableState({
+      tableSize: '6max',
+      heroPosition: 'CO',
+      heroCards: [{ rank: 'A', suit: 'spades' }],
+      blinds: { small: 1, big: 2 },
+      pot: 24,
+      players: [
+        { position: 'CO', stack: 200 },
+        { position: 'BTN', folded: true },
+      ],
+    });
+    expect(state.seatCount).toBe(6);
+    expect(state.seats.map((seat) => seat.id)).toEqual(['CO', 'BTN', 'SB', 'BB', 'UTG', 'HJ']);
+    expect(state.seats[0]).toMatchObject({
+      selected: true,
+      sublabel: '100 BB',
+      cards: [{ rank: 'A', suit: 'spades' }],
+    });
+    expect(state.seats[2]).toMatchObject({
+      disabled: true,
+      muted: true,
+      sublabel: '100 BB · Folded',
+    });
+    expect(state.seats[1]?.tokenLabel).toBe('D');
+    expect(state.centerLabel).toBe('Pot 24');
+    expect(state.centerSublabel).toBe('Blinds 1 / 2');
+    expect(state.accessibilityLabel).toContain('Hero CO');
+    expect(getTabletopSeatPosition(0, 6)).toEqual({ top: '84%', left: '50%' });
+  });
+
+  test('joins ordered seats with participant display overrides', () => {
+    expect(
+      createTabletopGameSeats({
+        seats: [
+          { id: 'north', defaultState: { label: 'North' } },
+          { id: 'south', defaultState: { label: 'South' } },
+        ],
+        participants: [{ seatId: 'south', state: { selected: true } }],
+      }),
+    ).toEqual([
+      { id: 'north', label: 'North', disabled: true, muted: true },
+      { id: 'south', label: 'South', selected: true },
+    ]);
+  });
+
+  test('renders card sizing, per-card IDs, seat accessibility, and table shapes', async () => {
+    const { CardHand } = (await load('components/card-hand/index.js')) as {
+      CardHand: typeof CardHandComponent;
+    };
+    const { TabletopTable } = (await load('components/tabletop-table/index.js')) as {
+      TabletopTable: typeof TabletopTableComponent;
+    };
+    const { PokerTrainingTable } = (await load('components/poker-training-table/index.js')) as {
+      PokerTrainingTable: typeof PokerTrainingTableComponent;
+    };
+    const markup = renderToStaticMarkup(
+      <>
+        <CardHand
+          cards={[{ rank: 'A', suit: 'spades' }]}
+          colorScheme={{ cardSurface: '#000000' }}
+          faceDownCards={1}
+          testID="hand"
+        />
+        <TabletopTable
+          shape="circle"
+          seats={[
+            { id: 'hero', label: 'Hero', sublabel: '100 BB', selected: true, tokenLabel: 'D' },
+          ]}
+          testID="table"
+        />
+        <PokerTrainingTable task={{ tableSize: '6max', heroPosition: 'CO' }} testID="poker" />
+      </>,
+    );
+    const browser = new Window();
+    browser.document.body.innerHTML = markup;
+    const card = browser.document.querySelector('[data-testid="hand-card-0"]');
+    expect(card?.getAttribute('aria-label')).toBe('ace of spades');
+    expect(card?.getAttribute('style')).toContain('height:56px');
+    expect(card?.getAttribute('style')).toContain('width:40px');
+    expect(card?.getAttribute('style')).toContain('background-color:rgba(0,0,0,1.00)');
+    expect(card?.textContent).toContain('A');
+    expect(card?.firstElementChild.getAttribute('style')).toContain('color:rgba(255,255,255,1.00)');
+    expect(
+      browser.document.querySelector('[data-testid="hand-hidden-0"]')?.getAttribute('aria-label'),
+    ).toBe('Hidden card');
+    expect(
+      browser.document.querySelector('[data-testid="table-seat-hero"]')?.getAttribute('aria-label'),
+    ).toBe('Hero, 100 BB, D, selected');
+    expect(browser.document.querySelectorAll('[data-testid^="poker-seat-"]')).toHaveLength(6);
+    expect(
+      browser.document.querySelector('[data-testid="poker"]')?.getAttribute('aria-label'),
+    ).toContain('Six-player poker table');
+    const circleTable = browser.document.querySelector('[data-testid="table"]');
+    expect(circleTable?.getAttribute('style')).toContain('aspect-ratio:1');
+    const circleSurface = circleTable?.firstElementChild.getAttribute('class');
+    browser.document.body.innerHTML = renderToStaticMarkup(
+      <TabletopTable seats={[]} shape="rounded" testID="table" />,
+    );
+    const roundedSurface = browser.document
+      .querySelector('[data-testid="table"]')
+      ?.firstElementChild.getAttribute('class');
+    expect(circleSurface).not.toBe(roundedSurface);
+    browser.close();
+  });
+});