reactchessts

✨ Why ReactChessTS?

Build professional chess applications without the complexity. We've done the hard work for you:

• 🎯 Zero Configuration - Just install and start building
• 🎨 Beautiful UI - Modern, responsive design out of the box
• 🔥 Full TypeScript Support - Complete type safety and autocompletion
• 🚀 Production Ready - Used in real-world applications
• 🧩 Modular Design - Use only what you need
• 📚 Rich Features - Everything you need for chess development

🚀 Quick Start

Installation

• Create a new React project (if you haven't already):

npx create-react-app my-chess-app --template typescript
# or
npm create vite@latest my-chess-app -- --template react-ts

• Install the package:

npm install reactchessts

💡 Troubleshooting Installation

If you encounter peer dependency issues, you can:

• Make sure you have React 16.8 or higher installed:

  npm install react@latest react-dom@latest
  

• Or use one of these flags (if you know what you're doing):

  npm install reactchessts --legacy-peer-deps
  # or
  npm install reactchessts --force
  

Basic Usage

import { ChessBoard, ChessProvider, PieceProvider } from 'reactchessts';

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

That's it! You now have a fully functional chess game with:

• ♟️ Drag and drop moves
• ✅ Legal move validation
• 🎮 Game state management
• ⚡ Real-time check/checkmate detection
• 📝 Move history tracking

🎨 Beautiful Examples (Copy-Paste Ready)

1. Professional Chess Game

import { ChessBoard, ChessProvider, PieceProvider, useChess } from 'reactchessts';

function ChessGame() {
  const { turn, isCheck, isCheckmate, undo, reset } = useChess();
  
  return (
    <div style={{ maxWidth: '600px', margin: '0 auto' }}>
      <div style={{ 
        padding: '20px',
        backgroundColor: 'white',
        borderRadius: '8px',
        boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)'
      }}>
        <h2 style={{ color: '#BE0055' }}>Chess Game</h2>
        <ChessBoard />
        <div style={{ marginTop: '20px' }}>
          <button onClick={undo}>Undo Move</button>
          <button onClick={reset}>New Game</button>
        </div>
      </div>
    </div>
  );
}

2. Training Platform

import { useChessTraining } from 'reactchessts';

function TrainingMode() {
  const { startTraining, feedback, stats } = useChessTraining();
  
  return (
    <div style={{ display: 'flex', gap: '20px' }}>
      <ChessBoard />
      <div>
        <button onClick={() => startTraining('puzzle')}>
          Start Training
        </button>
        <p>Accuracy: {stats.averageAccuracy}%</p>
      </div>
    </div>
  );
}

🎯 Features That Just Work

• 🎮 Game Logic

  • Full chess rules implementation
  • Move validation
  • Check/Checkmate detection
  • Game state management

• 🎨 UI Components

  • Responsive chess board
  • Piece animations
  • Custom themes
  • Square highlighting

• 📚 Training Tools

  • Opening explorer
  • Puzzle system
  • Game analysis
  • Move suggestions

• ⌨️ Accessibility

  • Keyboard navigation
  • Screen reader support
  • ARIA labels
  • High contrast mode

🔧 Easy Customization

<ChessBoard 
  theme="classic"
  orientation="black"
  customSquareStyles={{
    lastMove: { backgroundColor: 'rgba(190, 0, 85, 0.2)' }
  }}
/>

🤖 AI-Ready

// Get legal moves for AI
const { getPossibleMoves, makeMove } = useChess();
const legalMoves = getPossibleMoves('e2');

// Make AI move
makeMove('e2', 'e4');

// Get position for analysis
const { position, history } = useChess();
console.log(position); // FEN format

🤝 Connect & Support

Let's make chess development better together!

• 🐛 Report bugs and issues
• 💡 Request features
• 🤝 Contribute to the project
• 💬 Join our community

📝 License

MIT © Chamath Thiwanka