♟️ Chess App - React Native

A fully functional chess game built with React Native that works on both Android and iOS platforms.

🚀 Features

• Complete Chess Gameplay: All standard chess rules implemented
• Interactive Board: Touch-based piece selection and movement
• Move Validation: Powered by chess.js library for accurate game logic
• Visual Feedback: Highlights selected pieces and valid moves
• Game States: Detects check, checkmate, and draw conditions
• Cross-Platform: Works seamlessly on Android and iOS
• TypeScript: Full TypeScript support for better development experience

🛠️ Technologies Used

• React Native - Cross-platform mobile development
• TypeScript - Type-safe JavaScript
• chess.js - Chess game logic and move validation
• React Native Vector Icons - Icon library
• React Native SVG - SVG graphics support

📱 Screenshots

The app features a beautiful, responsive chess board with Unicode chess pieces that automatically adjusts to different screen sizes.

Getting Started

Note: Make sure you have completed the Set Up Your Environment guide before proceeding.

Step 1: Install Dependencies

From the root of your React Native project, install the dependencies:

npm install

Step 2: Start Metro

First, you will need to run Metro, the JavaScript build tool for React Native.

To start the Metro dev server, run the following command from the root of your React Native project:

# Using npm
npm start

# OR using Yarn
yarn start

Step 3: Build and run your app

With Metro running, open a new terminal window/pane from the root of your React Native project, and use one of the following commands to build and run your Android or iOS app:

Android

# Using npm
npm run android

# OR using Yarn
yarn android

iOS

For iOS, remember to install CocoaPods dependencies (this only needs to be run on first clone or after updating native deps).

The first time you create a new project, run the Ruby bundler to install CocoaPods itself:

bundle install

Then, and every time you update your native dependencies, run:

bundle exec pod install

For more information, please visit CocoaPods Getting Started guide.

# Using npm
npm run ios

# OR using Yarn
yarn ios

If everything is set up correctly, you should see your chess app running in the Android Emulator, iOS Simulator, or your connected device.

🎮 How to Play

1. Select a Piece: Tap on any chess piece to select it (only pieces of the current player's turn can be selected)
2. View Valid Moves: Valid destination squares will be highlighted in gold
3. Make a Move: Tap on a highlighted square to move the selected piece
4. Game States: The app will automatically detect and announce check, checkmate, or draw conditions
5. New Game: Tap the "New Game" button to start over

🏗️ Project Structure

src/
  components/
    ChessBoard.tsx    # Main chess board component with game logic
App.tsx               # Main app entry point
.github/
  copilot-instructions.md  # GitHub Copilot custom instructions

🔧 Development

Hot Reloading

The app supports Fast Refresh. When you save changes to your code, the app will automatically update:

• Android: Press the R key twice or select "Reload" from the Dev Menu, accessed via Ctrl + M (Windows/Linux) or Cmd ⌘ + M (macOS).
• iOS: Press R in iOS Simulator.

Debugging

Use React Native Debugger or Chrome DevTools for debugging. Enable debug mode through the dev menu on your device/simulator.

📦 Dependencies

• chess.js: Chess game logic and move validation
• react-native-svg: SVG graphics support
• react-native-vector-icons: Icon library
• @types/chess.js: TypeScript definitions for chess.js

🎯 Chess Features Implemented

• ✅ Complete chess board (8x8 grid)
• ✅ All chess pieces with proper Unicode symbols
• ✅ Legal move validation
• ✅ Turn-based gameplay (White starts first)
• ✅ Check detection and notification
• ✅ Checkmate detection
• ✅ Draw/stalemate detection
• ✅ Piece selection and move highlighting
• ✅ Game reset functionality
• ✅ Responsive design for different screen sizes

🚀 Future Enhancements

• 🔄 Move history and undo functionality
• ⏱️ Chess clock/timer
• 🎨 Multiple board themes
• 👥 Multiplayer support
• 📊 Game statistics and analysis
• 💾 Save/load game functionality
• 🔊 Sound effects
• 📱 Tablet optimization

🤝 Contributing

Feel free to submit issues and enhancement requests!

📄 License

This project is licensed under the MIT License.

---

Built with ❤️ using React Native and TypeScript