@ankhorage/zora 21.0.23 → 21.1.0

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

@@ -0,0 +1,70 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import type { CardBackProps } from '../../../../types/tabletop';
+import { withZoraThemeScope } from '../../../theme/adapters/inbound/withZoraThemeScope';
+import { useZoraTheme } from '../../../theme/composition/useZoraTheme';
+import { createTabletopColorScheme } from '../../utils/createTabletopColorScheme';
+import { getTabletopCardDimensions } from '../../utils/getTabletopCardDimensions';
+
+/*** Renders a face-down card with a non-revealing accessible label. */
+export const CardBack = withZoraThemeScope(CardBackInner);
+
+/*** Renders the card back using the active ZORA theme. */
+function CardBackInner({
+  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 ?? 'Hidden card'}
+      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/features/tabletop/adapters/inbound/CardHand.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import type { CardHandProps } from '../../../../types/tabletop';
+import { withZoraThemeScope } from '../../../theme/adapters/inbound/withZoraThemeScope';
+import { CardBack } from './CardBack';
+import { PlayingCard } from './PlayingCard';
+
+/*** Renders a compact row of face-up and face-down cards. */
+export const CardHand = withZoraThemeScope(CardHandInner);
+
+/*** Creates stable indices for non-revealing card backs. */
+function createFaceDownCards(count: number): readonly number[] {
+  return Array.from({ length: Math.max(0, count) }, (_, index) => index);
+}
+
+/*** Renders the card row from caller-owned values. */
+function CardHandInner({
+  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/features/tabletop/adapters/inbound/PlayingCard.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import type { PlayingCardProps } from '../../../../types/tabletop';
+import { withZoraThemeScope } from '../../../theme/adapters/inbound/withZoraThemeScope';
+import { useZoraTheme } from '../../../theme/composition/useZoraTheme';
+import { createTabletopColorScheme } from '../../utils/createTabletopColorScheme';
+import { getPlayingCardLabel } from '../../utils/getPlayingCardLabel';
+import { getTabletopCardDimensions } from '../../utils/getTabletopCardDimensions';
+
+const suitMarks = { clubs: '♣', diamonds: '♦', hearts: '♥', spades: '♠' } as const;
+
+/*** Renders a face-up playing card with an accessible rank and suit. */
+export const PlayingCard = withZoraThemeScope(PlayingCardInner);
+
+/*** Renders the card face using the active ZORA theme. */
+function PlayingCardInner({
+  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 =
+    card.suit === 'hearts' || card.suit === 'diamonds' ? 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/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',
+  },
+});