Chess.com Analyzer

🤖 Finding the best move on the board
Explore the docs »

Download Link . Report Bug · Request Feature

About

This project is a free and open-source solution for anyone who wants to learn how to play chess using Stockfish, an open-source chess engine. It serves as a Stockfish interface for the website Chess.com, where Stockfish highlights the best moves for players. The project is a great resource for beginners who want to improve their chess skills without having to pay for expensive chess training solutions.

All as a small chrome extension.

💻 Features

You could provide a bullet-pointed list of the key features of your extension. This could include things like:

1. Highlighting the best move on the board
2. Using Stockfish for analysis and evaluation
3. Providing a free and open-source chess training solution
4. Working as a Chrome extension for easy use

🚀 Technologies Used

• 💻WebAssembly: a binary instruction format so we can run Stockfish faster.
• 📜 TypeScript: a typed superset of JavaScript that compiles to plain JavaScript.
• 🌐 JavaScript: a high-level programming language used for creating interactive web applications.
• 🔄 Service Workers: a technology used for caching and offline functionality in web applications.
• ♟️ Stockfish: an open-source chess engine used for analysis and evaluation of chess positions.
• 🤖 UCI: a protocol used for communicating with chess engines like Stockfish.
• 🔌 Chrome API: a set of APIs used for creating extensions for Google Chrome.
• 📦 Webpack: for bundling

Design

This uses a variety of design patterns to implement various functionalities in the code. These patterns were chosen to improve the quality of the code, increase its flexibility, and promote code reusability. Here's a brief summary of the design patterns used in this project and their significance:

• Singleton: This pattern is used to ensure that the default ChessSolver and STOCKFISH object is created only once, reducing memory usage and increasing efficiency.

• Facade: The facade pattern is used to simplify the interface of the Stockfish engine, making it easier to use by hiding its complexity behind a simpler interface.

import ChessSolver from './classes/ChessSolver'
const chessSolver = new ChessSolver();
chessSolver.startGame();

• Factory: The factory pattern is used to create new instances of the ChessSolver class and Stockfish engine, making it easier to maintain and test. As well as making it easier to read from an abstract perspective.

• Observer: This pattern is used to register event listeners that listen for changes to the local storage, and trigger the relevant event handlers whenever there is a change. The reason for this is because, we need to communicate from the service worker to the DOM. Which by normal means, you cannot! But by observing points of the chrome API you can manipulate the DOM by proxy.

// Manage Changes to local storage.
chrome.storage.onChanged.addListener((changes) => {

    const { enabled, isSolving } = changes;

    if (enabled && enabled.newValue === false) {
        this.engine.postMessage('stop');
    }

    if (isSolving) {
        this.isSolving = isSolving.newValue;
    }
});

• Dependency Injection: The ChessSolver class uses dependency injection to allow for greater flexibility and customizability, making the code more reusable. You can see this by seeing the config files, we will manually inject a default configuration if one is not provided.

• Don't Repeat Yourself (DRY): The project follows the DRY principle, minimizing code duplication by creating functions only once, reducing redundancy and increasing readability.

• Object-Oriented Programming (OOP): The ChessSolver class is an example of OOP, using classes, objects and interfaces to encapsulate data and behavior, providing a clean and modular code structure.

Here are some useful links to learn more about these design patterns:

1. Singleton
2. Facade
3. Factory
4. Observer
5. Dependency Injection
6. Don't Repeat Yourself (DRY)
7. Object-Oriented Programming (OOP)

Usage Instructions

To use this extension, follow the steps below:

1. Download and install the extension from the Chrome Web Store or from the GitHub repository.
2. Navigate to a chess game on Chess.com.
3. Click on the extension icon in your browser's toolbar.
4. Activate the extension and wait for it to analyze the game.
5. Once the analysis is complete, the extension will highlight the best move for you to make.1

Development Instructions

1. Clone the repository to your local machine
2. Install the necessary dependencies by running npm install
3. To build the project, run npm run build
4. To run the extension in development mode, navigate to chrome://extensions/ in Google Chrome and enable Developer mode. Then, click on "Load unpacked" and select the dist folder from the cloned repository.
5. Start a game on Chess.com and click on the extension icon to activate the extension and see the best move.

Note: Make sure to reload the extension after making any changes to the code by clicking on the "reload" button on the extension card in chrome://extensions/.

For more information on using Service Workers in Chrome, please refer to the Chrome Service Worker API documentation.

Future Ideas

1. Refactor content.js
   1. Removal of jQuery dependencies
2. Add in support for openers on the UI.
3. Add in support for engine evaluation on the UI.
4. Add in UI animations to prevent the quick movement of the engines bestMove updates.
5. Create a CI/CD Pipeline.
6. Create unit tests with Jest & E2E tests with Cypress.
7. Animated icons.

Author

Samuel Hinchliffe

• Author Website
• Author Github
• Linkedin