@reactchessts/chess-ts

ChessTs

A modern React TypeScript chess development toolkit. This project provides a fully-featured chess game implementation with a beautiful and responsive UI.

Features

• Full chess rules implementation
• Legal move validation
• Move history tracking
• Game state management
• Draw detection (threefold repetition, fifty-move rule, insufficient material)
• Responsive design
• Drag-and-drop and click-to-move support
• Keyboard navigation
• Accessibility features

Installation

npm install chess-ts

Usage

import { ChessBoard, ChessProvider, PieceProvider } from 'chess-ts';

function App() {
  return (
    <ChessProvider>
      <PieceProvider>
        <ChessBoard />
      </PieceProvider>
    </ChessProvider>
  );
}

Components

ChessBoard

The main chess board component that handles piece rendering and move validation.

interface BoardProps {
  onPieceDrop?: (source: string, target: string, piece: string) => boolean;
  orientation?: 'white' | 'black';
  customSquareStyles?: Record<string, CSSProperties>;
}

ChessProvider

Provides chess game state and methods through React Context.

const { 
  position,
  turn,
  isCheck,
  isCheckmate,
  isStalemate,
  isDraw,
  history,
  makeMove,
  undo,
  reset
} = useChess();

PieceProvider

Manages chess piece themes and SVG assets.

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Run tests
npm test

Contributing

• Fork the repository
• Create your feature branch (git checkout -b feature/amazing-feature)
• Commit your changes (git commit -m 'Add some amazing feature')
• Push to the branch (git push origin feature/amazing-feature)
• Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• chess.js for chess logic
• React and TypeScript communities
• Contributors and users of this project