A React Native cribbage scoring application built with Expo.
- mise - Development environment manager
- Node.js 22.17.0 (managed by mise)
- Xcode (for iOS development)
- Physical iPhone with USB connection for testing
# Clone the repository
git clone <repository-url>
cd CribbageBoardApp
# Install mise-managed tools
mise install
# Install dependencies
npm install
# Start development server which prompts with options to run in emulators etc.
mise run start
# Or, run on connected iPhone
mise run iphone# Start development server
mise run start
# Run on iOS simulator
mise run ios
# Run on connected iPhone via USB
mise run iphone
# Run linting
npm run lint
# Format code
mise run format
# Update all snapshots
mise run test -- -u
# Update snapshots for specific file
mise run test TurnScore.test.tsx -- -u
# Update snapshots interactively (review each one)
mise run test -- -u --watch
# Run Storybook
mise run storybookFigma variables are manually kept in sync with the Design Tokens repo.
- Primitives: Primitive tokens which form the basis for the semantic tokens. These should never be used directly in a component.
- Tokens: Semantic tokens. Currently only comprising the color palette.
- Game Interactions: Variables used in the Game Interaction Prototype. These are not part of the Design Tokens repo.
- Components: Reusable components with variants available in Figma library.
- App Icon: Light and dark versions of the application icon.
- High Fidelity Comps: contain developer annotations (requires a paid seat to access).
- Cribbage Board: The main app screen where game play happens. Design is split around the center axis so half of the screen is upright for each player.
- Winner: Winner announcement page. Indicates a win, skunk, or double skunk and by which player.
- Game Interactions Prototype: Prototypes the Add, Clear, and Undo button interactions relative to the Current Points Value and Total Points Value.
- High-Fidelity Comp
- Component Library
- State Variations
- [-] Interactive Prototype
- If Player 1 presses the Add button, it should have the same effect as if Player 2 pressed the Clear button on their Current Points Value (can try using Figma Make to do this)
- React Native Proof of Concept SVG Animation; tap to add, tap and hold to add 5, adding clears other player's Current Points Value
- [-] Update this project to use the tokens project (possibly moving away from Tailwind) and fixing application of styles in so-doing
- Document back-porting changes from the tokens project into Figma
- [-] Implement Storybook for existing components and use for addition of any further components, updating the documentation here
- Add Button
- Current points value
- Total points value
- Implement Skunk Indicator variants
- Develop the Icon
- Develop the Clear and Undo buttons
- Develop the Win screen variations
- Develop new game dialog using an alert
- Develop night mode
- EXPLORE: does the Win screen need a new game button?
- EXPLORE: On the win screen, should the tail wag?
- EXPLORE: On the win screen, if it is a skunk or double skunk should their be a poot cloud or double poot cloud behind the tail?
- React Native 0.79.6 with Expo
- TypeScript
- Expo Router for navigation
- SVG graphics with react-native-svg
- React Native Testing Library for testing
- Storybook.js testing and documenting components
This project is licensed under the Apache License 2.0. By contributing, you agree that your contributions will be licensed under the same license. See LICENSE for details.
Components may have unit tests and should have stories.
Stories live in components/__stories__/ with one story file per component using the naming scheme ComponentName.stories.tsx. This location is configured in .storybook/main.ts.
Unit tests live in components/__tests__/ with one test file per component using the naming scheme ComponentName.test.tsx.
Copyright 2025 Kinsa Creative Incorporated
Licensed under the Apache License, Version 2.0.