@ankhorage/zora-tabletop 0.0.0

package/src/components/card-back/CardBack.tsx

@@ -0,0 +1,66 @@
+import { useZoraTheme } from '@ankhorage/zora';
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { createHiddenCardLabel } from '../../cardLabel';
+import { getTabletopCardDimensions } from '../../cardSizing';
+import { createTabletopColorScheme } from '../../colors';
+import type { CardBackProps } from './types';
+
+export function CardBack({
+  size = 'medium',
+  muted = false,
+  accessibilityLabel,
+  colorScheme,
+  testID,
+}: CardBackProps) {
+  const { theme } = useZoraTheme();
+  const colors = React.useMemo(
+    () => createTabletopColorScheme(theme, colorScheme),
+    [colorScheme, theme],
+  );
+  const dimensions = getTabletopCardDimensions(size);
+
+  return (
+    <View
+      accessibilityLabel={accessibilityLabel ?? createHiddenCardLabel()}
+      accessibilityRole="image"
+      style={[
+        styles.card,
+        {
+          backgroundColor: colors.cardBack,
+          borderColor: colors.cardBackBorder,
+          borderRadius: dimensions.radius,
+          height: dimensions.height,
+          opacity: muted ? 0.48 : 1,
+          width: dimensions.width,
+        },
+      ]}
+      testID={testID}
+    >
+      <View
+        style={[
+          styles.inner,
+          {
+            borderColor: colors.cardBackBorder,
+            borderRadius: Math.max(2, dimensions.radius - 3),
+          },
+        ]}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    alignItems: 'center',
+    borderWidth: 1,
+    justifyContent: 'center',
+  },
+  inner: {
+    borderWidth: 1,
+    height: '68%',
+    opacity: 0.48,
+    width: '68%',
+  },
+});

package/src/components/card-back/index.ts

@@ -0,0 +1,2 @@
+export { CardBack } from './CardBack';
+export type { CardBackProps } from './types';

package/src/components/card-back/types.ts

@@ -0,0 +1,10 @@
+import type { TabletopColorOverrides } from '../../colors';
+import type { TabletopCardSize } from '../../types';
+
+export interface CardBackProps {
+  readonly size?: TabletopCardSize;
+  readonly muted?: boolean;
+  readonly accessibilityLabel?: string;
+  readonly colorScheme?: TabletopColorOverrides;
+  readonly testID?: string;
+}

package/src/components/card-hand/CardHand.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { CardBack } from '../card-back';
+import { PlayingCard } from '../playing-card';
+import type { CardHandProps } from './types';
+
+function createFaceDownCards(count: number): readonly number[] {
+  return Array.from({ length: Math.max(0, count) }, (_, index) => index);
+}
+
+export function CardHand({
+  cards = [],
+  faceDownCards = 0,
+  size = 'medium',
+  muted = false,
+  colorScheme,
+  accessibilityLabel,
+  testID,
+}: CardHandProps) {
+  const hiddenCards = createFaceDownCards(faceDownCards);
+
+  return (
+    <View accessibilityLabel={accessibilityLabel} style={styles.hand} testID={testID}>
+      {cards.map((card, index) => (
+        <PlayingCard
+          card={card}
+          colorScheme={colorScheme}
+          key={`${card.rank}-${card.suit}-${index}`}
+          muted={muted}
+          size={size}
+          testID={testID ? `${testID}-card-${index}` : undefined}
+        />
+      ))}
+      {hiddenCards.map((index) => (
+        <CardBack
+          colorScheme={colorScheme}
+          key={`hidden-${index}`}
+          muted={muted}
+          size={size}
+          testID={testID ? `${testID}-hidden-${index}` : undefined}
+        />
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  hand: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    gap: 4,
+    justifyContent: 'center',
+  },
+});

package/src/components/card-hand/index.ts

@@ -0,0 +1,2 @@
+export { CardHand } from './CardHand';
+export type { CardHandProps } from './types';

package/src/components/card-hand/types.ts

@@ -0,0 +1,12 @@
+import type { TabletopColorOverrides } from '../../colors';
+import type { PlayingCardValue, TabletopCardSize } from '../../types';
+
+export interface CardHandProps {
+  readonly cards?: readonly PlayingCardValue[];
+  readonly faceDownCards?: number;
+  readonly size?: TabletopCardSize;
+  readonly muted?: boolean;
+  readonly colorScheme?: TabletopColorOverrides;
+  readonly accessibilityLabel?: string;
+  readonly testID?: string;
+}

package/src/components/playing-card/PlayingCard.tsx

@@ -0,0 +1,99 @@
+import { useZoraTheme } from '@ankhorage/zora';
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { getPlayingCardLabel } from '../../cardLabel';
+import { getTabletopCardDimensions } from '../../cardSizing';
+import { createTabletopColorScheme } from '../../colors';
+import type { PlayingCardSuit } from '../../types';
+import type { PlayingCardProps } from './types';
+
+const suitMarks: Readonly<Record<PlayingCardSuit, string>> = {
+  clubs: 'C',
+  diamonds: 'D',
+  hearts: 'H',
+  spades: 'S',
+};
+
+function isRedSuit(suit: PlayingCardSuit): boolean {
+  return suit === 'diamonds' || suit === 'hearts';
+}
+
+export function PlayingCard({
+  card,
+  size = 'medium',
+  selected = false,
+  muted = false,
+  accessibilityLabel,
+  colorScheme,
+  testID,
+}: PlayingCardProps) {
+  const { theme } = useZoraTheme();
+  const colors = React.useMemo(
+    () => createTabletopColorScheme(theme, colorScheme),
+    [colorScheme, theme],
+  );
+  const dimensions = getTabletopCardDimensions(size);
+  const suitColor = isRedSuit(card.suit) ? colors.redSuitText : colors.cardText;
+
+  return (
+    <View
+      accessibilityLabel={accessibilityLabel ?? getPlayingCardLabel(card)}
+      accessibilityRole="image"
+      style={[
+        styles.card,
+        {
+          backgroundColor: colors.cardSurface,
+          borderColor: selected ? colors.seatSelectedBorder : colors.cardBorder,
+          borderRadius: dimensions.radius,
+          height: dimensions.height,
+          opacity: muted ? 0.48 : 1,
+          width: dimensions.width,
+        },
+      ]}
+      testID={testID}
+    >
+      <Text
+        selectable={false}
+        style={[
+          styles.rank,
+          {
+            color: suitColor,
+            fontSize: dimensions.rankFontSize,
+            lineHeight: dimensions.rankFontSize + 4,
+          },
+        ]}
+      >
+        {card.rank}
+      </Text>
+      <Text
+        selectable={false}
+        style={[
+          styles.suit,
+          {
+            color: suitColor,
+            fontSize: dimensions.suitFontSize,
+            lineHeight: dimensions.suitFontSize + 3,
+          },
+        ]}
+      >
+        {suitMarks[card.suit]}
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    alignItems: 'center',
+    borderWidth: 1,
+    justifyContent: 'center',
+  },
+  rank: {
+    fontWeight: '800',
+  },
+  suit: {
+    fontWeight: '700',
+    marginTop: -2,
+  },
+});

package/src/components/playing-card/index.ts

@@ -0,0 +1,2 @@
+export { PlayingCard } from './PlayingCard';
+export type { PlayingCardProps } from './types';

package/src/components/playing-card/types.ts

@@ -0,0 +1,12 @@
+import type { TabletopColorOverrides } from '../../colors';
+import type { PlayingCardValue, TabletopCardSize } from '../../types';
+
+export interface PlayingCardProps {
+  readonly card: PlayingCardValue;
+  readonly size?: TabletopCardSize;
+  readonly selected?: boolean;
+  readonly muted?: boolean;
+  readonly accessibilityLabel?: string;
+  readonly colorScheme?: TabletopColorOverrides;
+  readonly testID?: string;
+}

package/src/components/tabletop-table/TabletopTable.tsx

@@ -0,0 +1,219 @@
+import { useZoraTheme } from '@ankhorage/zora';
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { createTabletopColorScheme } from '../../colors';
+import { getTabletopSeatPosition } from '../../tablePositions';
+import type { TabletopSeatState } from '../../types';
+import { CardHand } from '../card-hand';
+import type { TabletopTableProps } from './types';
+
+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(', ');
+}
+
+export function TabletopTable({
+  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, { 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.cardText }]}>
+                {centerLabel}
+              </Text>
+            </View>
+          ) : null}
+          {centerSublabel !== undefined ? (
+            <Text style={[styles.centerSublabel, { color: colors.mutedText }]}>
+              {centerSublabel}
+            </Text>
+          ) : null}
+        </View>
+      </View>
+
+      {seats.map((seat, index) => {
+        const position = getTabletopSeatPosition(index, resolvedSeatCount);
+        return (
+          <View
+            accessibilityLabel={createSeatAccessibilityLabel(seat)}
+            accessibilityRole="summary"
+            key={seat.id}
+            style={[
+              styles.seat,
+              {
+                borderColor: seat.selected ? colors.seatSelectedBorder : colors.seatBorder,
+                backgroundColor: colors.seatSurface,
+                left: position.left,
+                opacity: seat.muted ? 0.48 : 1,
+                top: position.top,
+              },
+            ]}
+            testID={testID ? `${testID}-seat-${seat.id}` : undefined}
+          >
+            {seat.cards !== undefined || seat.faceDownCards !== undefined ? (
+              <CardHand
+                cards={seat.cards}
+                colorScheme={colorScheme}
+                faceDownCards={seat.faceDownCards}
+                muted={seat.muted ?? seat.disabled}
+                size={cardSize}
+              />
+            ) : null}
+            <Text style={[styles.seatLabel, { color: colors.cardText }]}>{seat.label}</Text>
+            {seat.sublabel !== undefined ? (
+              <Text style={[styles.seatSublabel, { color: colors.mutedText }]}>
+                {seat.sublabel}
+              </Text>
+            ) : null}
+            {seat.tokenLabel !== undefined ? (
+              <View style={[styles.token, { backgroundColor: colors.tokenSurface }]}>
+                <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: '600',
+  },
+  circleSurface: {
+    borderRadius: 999,
+  },
+  innerSurface: {
+    borderWidth: 1,
+    bottom: 10,
+    left: 10,
+    opacity: 0.44,
+    position: 'absolute',
+    right: 10,
+    top: 10,
+  },
+  ovalSurface: {
+    borderRadius: 999,
+  },
+  root: {
+    aspectRatio: 1.6,
+    maxWidth: 760,
+    position: 'relative',
+    width: '100%',
+  },
+  roundedSurface: {
+    borderRadius: 28,
+  },
+  seat: {
+    alignItems: 'center',
+    borderRadius: 10,
+    borderWidth: 1,
+    gap: 3,
+    minWidth: 64,
+    paddingHorizontal: 6,
+    paddingVertical: 5,
+    position: 'absolute',
+    transform: [{ translateX: -32 }, { translateY: -28 }],
+  },
+  seatLabel: {
+    fontSize: 11,
+    fontWeight: '800',
+  },
+  seatSublabel: {
+    fontSize: 10,
+    fontWeight: '600',
+  },
+  surface: {
+    borderWidth: 8,
+    bottom: 28,
+    left: 24,
+    position: 'absolute',
+    right: 24,
+    top: 24,
+  },
+  token: {
+    borderRadius: 999,
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+  },
+  tokenText: {
+    fontSize: 10,
+    fontWeight: '800',
+  },
+});

package/src/components/tabletop-table/index.ts

@@ -0,0 +1,2 @@
+export { TabletopTable } from './TabletopTable';
+export type { TabletopTableProps } from './types';

package/src/components/tabletop-table/types.ts

@@ -0,0 +1,24 @@
+import type React from 'react';
+
+import type { TabletopColorOverrides } from '../../colors';
+import type {
+  PlayingCardValue,
+  TabletopCardSize,
+  TabletopSeatCount,
+  TabletopSeatState,
+  TabletopShape,
+} from '../../types';
+
+export interface TabletopTableProps {
+  readonly seats: readonly TabletopSeatState[];
+  readonly centerCards?: readonly PlayingCardValue[];
+  readonly centerLabel?: React.ReactNode;
+  readonly centerSublabel?: React.ReactNode;
+  readonly shape?: TabletopShape;
+  readonly seatCount?: TabletopSeatCount;
+  readonly cardSize?: TabletopCardSize;
+  readonly disabled?: boolean;
+  readonly colorScheme?: TabletopColorOverrides;
+  readonly accessibilityLabel?: string;
+  readonly testID?: string;
+}

package/src/index.ts

@@ -0,0 +1,18 @@
+export type { TabletopColorOverrides, TabletopColorScheme } from './colors';
+export { createTabletopColorScheme } from './colors';
+export type { CardBackProps } from './components/card-back';
+export { CardBack } from './components/card-back';
+export type { CardHandProps } from './components/card-hand';
+export { CardHand } from './components/card-hand';
+export type { PlayingCardProps } from './components/playing-card';
+export { PlayingCard } from './components/playing-card';
+export type { TabletopTableProps } from './components/tabletop-table';
+export { TabletopTable } from './components/tabletop-table';
+export type {
+  PlayingCardSuit,
+  PlayingCardValue,
+  TabletopCardSize,
+  TabletopSeatCount,
+  TabletopSeatState,
+  TabletopShape,
+} from './types';

package/src/tablePositions.test.ts

@@ -0,0 +1,40 @@
+import { describe, expect, test } from 'bun:test';
+
+import {
+  getTabletopSeatPosition,
+  getTabletopSeatPositions,
+  normalizeTabletopSeatCount,
+} from './tablePositions';
+
+describe('normalizeTabletopSeatCount', () => {
+  test('clamps low counts to two seats', () => {
+    expect(normalizeTabletopSeatCount(0)).toBe(2);
+    expect(normalizeTabletopSeatCount(1)).toBe(2);
+    expect(normalizeTabletopSeatCount(2)).toBe(2);
+  });
+
+  test('preserves supported middle counts', () => {
+    expect(normalizeTabletopSeatCount(6)).toBe(6);
+    expect(normalizeTabletopSeatCount(9)).toBe(9);
+  });
+
+  test('clamps high counts to ten seats', () => {
+    expect(normalizeTabletopSeatCount(11)).toBe(10);
+    expect(normalizeTabletopSeatCount(20)).toBe(10);
+  });
+});
+
+describe('getTabletopSeatPositions', () => {
+  test('returns the expected number of positions', () => {
+    expect(getTabletopSeatPositions(2)).toHaveLength(2);
+    expect(getTabletopSeatPositions(9)).toHaveLength(9);
+    expect(getTabletopSeatPositions(10)).toHaveLength(10);
+  });
+});
+
+describe('getTabletopSeatPosition', () => {
+  test('wraps indexes within the normalized seat count', () => {
+    expect(getTabletopSeatPosition(0, 2)).toEqual({ top: '82%', left: '50%' });
+    expect(getTabletopSeatPosition(2, 2)).toEqual({ top: '82%', left: '50%' });
+  });
+});

package/src/tablePositions.ts

@@ -0,0 +1,97 @@
+import type { TabletopSeatCount } from './types';
+
+type TabletopSeatPositionValue = `${number}%`;
+
+export interface TabletopSeatPosition {
+  readonly top: TabletopSeatPositionValue;
+  readonly left: TabletopSeatPositionValue;
+}
+
+const fallbackSeatPosition: TabletopSeatPosition = { top: '82%', left: '50%' };
+
+const seatPositions: Readonly<Record<TabletopSeatCount, readonly TabletopSeatPosition[]>> = {
+  2: [fallbackSeatPosition, { top: '18%', left: '50%' }],
+  3: [fallbackSeatPosition, { top: '28%', left: '18%' }, { top: '28%', left: '82%' }],
+  4: [
+    fallbackSeatPosition,
+    { top: '50%', left: '12%' },
+    { top: '18%', left: '50%' },
+    { top: '50%', left: '88%' },
+  ],
+  5: [
+    { top: '84%', left: '50%' },
+    { top: '62%', left: '12%' },
+    { top: '18%', left: '24%' },
+    { top: '18%', left: '76%' },
+    { top: '62%', left: '88%' },
+  ],
+  6: [
+    { top: '84%', left: '50%' },
+    { top: '68%', left: '16%' },
+    { top: '26%', left: '16%' },
+    { top: '16%', left: '50%' },
+    { top: '26%', left: '84%' },
+    { top: '68%', left: '84%' },
+  ],
+  7: [
+    { top: '86%', left: '50%' },
+    { top: '70%', left: '14%' },
+    { top: '34%', left: '10%' },
+    { top: '14%', left: '34%' },
+    { top: '14%', left: '66%' },
+    { top: '34%', left: '90%' },
+    { top: '70%', left: '86%' },
+  ],
+  8: [
+    { top: '86%', left: '50%' },
+    { top: '72%', left: '16%' },
+    { top: '50%', left: '8%' },
+    { top: '20%', left: '20%' },
+    { top: '14%', left: '50%' },
+    { top: '20%', left: '80%' },
+    { top: '50%', left: '92%' },
+    { top: '72%', left: '84%' },
+  ],
+  9: [
+    { top: '88%', left: '50%' },
+    { top: '78%', left: '12%' },
+    { top: '50%', left: '4%' },
+    { top: '18%', left: '10%' },
+    { top: '8%', left: '28%' },
+    { top: '8%', left: '50%' },
+    { top: '8%', left: '72%' },
+    { top: '18%', left: '90%' },
+    { top: '50%', left: '96%' },
+  ],
+  10: [
+    { top: '88%', left: '50%' },
+    { top: '80%', left: '20%' },
+    { top: '58%', left: '6%' },
+    { top: '30%', left: '8%' },
+    { top: '10%', left: '30%' },
+    { top: '8%', left: '50%' },
+    { top: '10%', left: '70%' },
+    { top: '30%', left: '92%' },
+    { top: '58%', left: '94%' },
+    { top: '80%', left: '80%' },
+  ],
+};
+
+export function normalizeTabletopSeatCount(count: number): TabletopSeatCount {
+  const rounded = Math.round(count);
+  if (rounded <= 2) return 2;
+  if (rounded >= 10) return 10;
+
+  return rounded as TabletopSeatCount;
+}
+
+export function getTabletopSeatPositions(count: number): readonly TabletopSeatPosition[] {
+  return seatPositions[normalizeTabletopSeatCount(count)];
+}
+
+export function getTabletopSeatPosition(index: number, count: number): TabletopSeatPosition {
+  const positions = getTabletopSeatPositions(count);
+  const position = positions[index % positions.length];
+
+  return position ?? fallbackSeatPosition;
+}