fix: component improvements and missing exports

src/components/CardStack/CardStack.test.tsx

@@ -415,3 +415,49 @@ test('render ascii variant', (t) => {
   const asciiVariantLastFrame = lastFrame()
   t.snapshot(asciiVariantLastFrame)
 })
+
+test('render stack with custom cards', (t) => {
+  const { lastFrame } = render(
+    <CardStack
+      isFaceUp
+      cards={[
+        {
+          id: 'custom-1',
+          title: 'Flame Lance',
+          size: 'small' as const,
+          borderColor: 'red',
+          textColor: 'red',
+        },
+        {
+          id: 'custom-2',
+          title: 'Arcane Denial',
+          size: 'small' as const,
+          borderColor: 'blue',
+          textColor: 'blue',
+        },
+      ]}
+      name="Custom Stack"
+    />
+  )
+  t.snapshot(lastFrame())
+})
+
+test('render stack with mixed standard and custom cards', (t) => {
+  const { lastFrame } = render(
+    <CardStack
+      isFaceUp
+      cards={[
+        { id: 'std-1', suit: 'hearts', value: 'A' },
+        {
+          id: 'custom-1',
+          title: 'Wild',
+          size: 'small' as const,
+          borderColor: 'yellow',
+        },
+        { id: 'std-2', suit: 'spades', value: 'K' },
+      ]}
+      name="Mixed Stack"
+    />
+  )
+  t.snapshot(lastFrame())
+})

src/components/CardStack/CardStack.test.tsx.md

@@ -558,3 +558,61 @@ Generated by [AVA](https://avajs.dev).
      │          ♠ 5│␊
      ╰─────────────╯␊
     `
+
+## render stack with custom cards
+
+> Snapshot 1
+
+    `␊
+     Custom Stack (2)␊
+     ╭──────────╮␊
+     │Flame Lanc│␊
+     │          │␊
+     │          │␊
+     │          │␊
+     │          │␊
+     ╰──────────╯␊
+    ␊
+     ╭──────────╮␊
+     │Arcane Den│␊
+     │          │␊
+     │          │␊
+     │          │␊
+     │          │␊
+     ╰──────────╯␊
+    `
+
+## render stack with mixed standard and custom cards
+
+> Snapshot 1
+
+    `␊
+     Mixed Stack (3)␊
+     ╭─────────╮␊
+     │A        │␊
+     │         │␊
+     │         │␊
+     │    ♥    │␊
+     │         │␊
+     │         │␊
+     │        A│␊
+     ╰─────────╯␊
+    ␊
+     ╭──────────╮␊
+     │Wild      │␊
+     │          │␊
+     │          │␊
+     │          │␊
+     │          │␊
+     ╰──────────╯␊
+    ␊
+     ╭─────────╮␊
+     │K        │␊
+     │       WW│␊
+     │       {)│␊
+     │    ♠  %%│␊
+     │      %%%│␊
+     │    _%%%>│␊
+     │        K│␊
+     ╰─────────╯␊
+    `

src/components/CardStack/index.tsx

@@ -1,7 +1,8 @@
 import { Box, Text, type BoxProps } from 'ink'
 import React from 'react'
-import { isStandardCard, type TCard } from '../../types/index.js'
+import { isCustomCard, isStandardCard, type TCard } from '../../types/index.js'
 import Card from '../Card/index.js'
+import { CustomCard } from '../CustomCard/index.js'
 import { MiniCard } from '../MiniCard/index.js'
 
 type CardStackProperties = {
@@ -94,6 +95,8 @@ export function CardStack({
                     variant={variant}
                   />
                 )
+              ) : isCustomCard(card) ? (
+                <CustomCard {...card} faceUp={isFaceUp} />
               ) : null}
             </Box>
           )

src/components/Deck/index.tsx

@@ -1,4 +1,4 @@
-import { Box } from 'ink'
+import { Box, type BoxProps } from 'ink'
 import React, { useMemo } from 'react'
 import { useDeck } from '../../hooks/useDeck.js'
 import {
@@ -10,7 +10,7 @@ import Card from '../Card/index.js'
 
 type DeckProperties = {
   readonly showTopCard?: boolean
-  readonly style?: React.CSSProperties
+  readonly style?: BoxProps
   readonly variant?: 'simple' | 'ascii' | 'minimal'
   readonly placeholderCard?: { suit: TSuit; value: TCardValue }
 }
@@ -23,7 +23,7 @@ export function Deck({
 }: DeckProperties) {
   const { deck } = useDeck()
 
-  const deckStyle = {
+  const deckStyle: BoxProps = {
     padding: 1,
     borderStyle: 'single',
     ...style,
@@ -51,7 +51,6 @@ export function Deck({
   }, [deck, showTopCard, variant])
 
   return (
-    // @ts-ignore
     <Box flexDirection="column" alignItems="center" {...deckStyle}>
       {renderTopCard}
       <Box marginTop={1}>

src/components/UnicodeCard/UnicodeCard.test.tsx

@@ -63,3 +63,59 @@ test('render with size prop', (t) => {
   )
   t.snapshot(lastFrame())
 })
+
+test('render diamonds shows red color', (t) => {
+  const { lastFrame } = render(<UnicodeCard suit="diamonds" value="3" />)
+  t.snapshot(lastFrame())
+})
+
+test('render clubs shows white color', (t) => {
+  const { lastFrame } = render(<UnicodeCard suit="clubs" value="9" />)
+  t.snapshot(lastFrame())
+})
+
+test('render joker with hearts suit', (t) => {
+  const { lastFrame } = render(<UnicodeCard suit="hearts" value="JOKER" />)
+  const frame = lastFrame()
+  t.snapshot(frame)
+  if (frame) {
+    t.true(frame.includes(SPECIAL_CARDS.RED_JOKER))
+  }
+})
+
+test('render joker with spades suit', (t) => {
+  const { lastFrame } = render(<UnicodeCard suit="spades" value="JOKER" />)
+  const frame = lastFrame()
+  t.snapshot(frame)
+  if (frame) {
+    t.true(frame.includes(SPECIAL_CARDS.BLACK_JOKER))
+  }
+})
+
+test('render joker with clubs suit', (t) => {
+  const { lastFrame } = render(<UnicodeCard suit="clubs" value="JOKER" />)
+  const frame = lastFrame()
+  t.snapshot(frame)
+  if (frame) {
+    t.true(frame.includes(SPECIAL_CARDS.WHITE_JOKER))
+  }
+})
+
+test('render bordered with rounded false', (t) => {
+  const { lastFrame } = render(
+    <UnicodeCard bordered rounded={false} suit="spades" value="A" />
+  )
+  t.snapshot(lastFrame())
+})
+
+test('render face down without dimmed uses suit color', (t) => {
+  const { lastFrame } = render(
+    <UnicodeCard suit="hearts" value="K" faceUp={false} />
+  )
+  t.snapshot(lastFrame())
+})
+
+test('render 10 value card', (t) => {
+  const { lastFrame } = render(<UnicodeCard suit="hearts" value="10" />)
+  t.snapshot(lastFrame())
+})

src/components/UnicodeCard/UnicodeCard.test.tsx.md

@@ -59,3 +59,53 @@ Generated by [AVA](https://avajs.dev).
     │  🃅                                                                                               │␊
     │                                                                                                  │␊
     ╰──────────────────────────────────────────────────────────────────────────────────────────────────╯`
+
+## render diamonds shows red color
+
+> Snapshot 1
+
+    '🃃'
+
+## render clubs shows white color
+
+> Snapshot 1
+
+    '🃙'
+
+## render joker with hearts suit
+
+> Snapshot 1
+
+    '🂿'
+
+## render joker with spades suit
+
+> Snapshot 1
+
+    '🃏'
+
+## render joker with clubs suit
+
+> Snapshot 1
+
+    '🃟'
+
+## render bordered with rounded false
+
+> Snapshot 1
+
+    `┌──────────────────────────────────────────────────────────────────────────────────────────────────┐␊
+    │🂡                                                                                                 │␊
+    └──────────────────────────────────────────────────────────────────────────────────────────────────┘`
+
+## render face down without dimmed uses suit color
+
+> Snapshot 1
+
+    '🂠'
+
+## render 10 value card
+
+> Snapshot 1
+
+    '🂺'

src/contexts/DeckContext.tsx

@@ -32,19 +32,16 @@ export const defaultBackArtwork: BackArtwork = {
   minimal: genBack('minimal'),
 }
 
-const sharedEventManager = new EventManager()
-const sharedEffectManager = new EffectManager()
-
-const initialState: DeckContextType = {
+const createInitialState = (): DeckContextType => ({
   zones: { deck: [], hands: {}, discardPile: [], playArea: [] },
   players: [],
   backArtwork: defaultBackArtwork,
-  eventManager: sharedEventManager,
-  effectManager: sharedEffectManager,
+  eventManager: new EventManager(),
+  effectManager: new EffectManager(),
   dispatch: () => null,
-}
+})
 
-export const DeckContext = createContext<DeckContextType>(initialState)
+export const DeckContext = createContext<DeckContextType>(createInitialState())
 
 const deckReducer = (
   state: DeckContextType,
@@ -235,13 +232,20 @@ export function DeckProvider({
   initialCards,
   customReducer,
 }: DeckProviderProperties) {
-  const [state, dispatch] = useReducer(customReducer ?? deckReducer, {
-    ...initialState,
-    zones: {
-      ...initialState.zones,
-      deck: initialCards ?? createStandardDeck(),
-    },
-  })
+  const [state, dispatch] = useReducer(
+    customReducer ?? deckReducer,
+    initialCards,
+    (cards) => {
+      const base = createInitialState()
+      return {
+        ...base,
+        zones: {
+          ...base.zones,
+          deck: cards ?? createStandardDeck(),
+        },
+      }
+    }
+  )
   const contextValue = useMemo(
     () => ({ ...state, dispatch }),
     [state, dispatch]

src/contexts/GameContext.tsx

@@ -67,7 +67,10 @@ export function GameProvider({
     currentPlayerId: initialPlayers[0] ?? '',
   })
 
-  const contextValue = useMemo(() => ({ ...state, dispatch }), [state])
+  const contextValue = useMemo(
+    () => ({ ...state, dispatch }),
+    [state, dispatch]
+  )
 
   return (
     <GameContext.Provider value={contextValue}>{children}</GameContext.Provider>

src/index.tsx

@@ -10,6 +10,10 @@ export {
   createStandardDeck,
 } from './components/Deck/utils.js'
 export { MiniCard } from './components/MiniCard/index.js'
+export {
+  UnicodeCard,
+  type UnicodeCardProps,
+} from './components/UnicodeCard/index.js'
 export { GameContext, GameProvider } from './contexts/GameContext.js'
 export { useDeck } from './hooks/useDeck.js'
 export { useHand } from './hooks/useHand.js'