labinatorsolutions / stockfish-chess-web-gui

Responsive chess web GUI to play against the Stockfish 10 chess engine. Multiple web GUI implementations have also been included.

Web GUI For Stockfish Chess

Overview

It is a web graphical user interface (GUI) for the Stockfish Chess engine. It is a fully functional web-based chess app that allows you to play against the Stockfish chess engine.

Mission

Our mission from this project is to develop a modern responsive free and open source web-based chess GUI powered by the Stockfish chess engine.

Main Live Demo

https://labinatorsolutions.github.io/stockfish-chess-web-gui/

Other Implementations - (Included For Reference)

You can find other chess web GUI implementations in the "other-implementations" folder. The other implementations are not currently maintained and included for reference only.

• https://labinatorsolutions.github.io/stockfish-chess-web-gui/other-implementations/example1/index.html
• https://labinatorsolutions.github.io/stockfish-chess-web-gui/other-implementations/example2/index.html
• https://labinatorsolutions.github.io/stockfish-chess-web-gui/other-implementations/example3/index.html
• https://labinatorsolutions.github.io/stockfish-chess-web-gui/other-implementations/example4/index.html

Note: The above implementations or examples will be removed from this repository when this GUI improves to the stage where it surpasses all of the above examples in terms of features. In the meantime, we will keep them for educational purposes and a good point of reference. The above examples provide a working example of how some features can be implemented. Please refer to their license and readme files to learn more about each of those examples.

Features

• Lightweight.
• Easy To Install.
• Fully Responsive.
• Uses Stockfish Version 10.
• Uses jQuery 3.6.0.
• Uses Chessboard.js Version 1.0.0.
• LT-PGN-Viewer Version 3.498.

Online Installation

• Download or clone this repository.
• Upload the unzipped folder of this repository to your web server then view it from your web browser.

Local Installation

• Download or clone this repository.
• Install a web server locally to test effectively the GUI. A fast approach is download and install XAMPP.
• Copy the folder of the repository to the (htdocs) directory then view it locally from your web browser.

Basic Suggested Improvements

• Adding an option to set FEN.
• Adding an alternative option to move the pieces by clicking and pointing.
• Adding a visual evaluation meter to show the player what is the engine's evaluation of the current position.

Advanced Suggested Improvements

• Redesigning the layout to become more intuitive for touch-based devices and PCs.
• Adding an option to set the chess clock for both players.
• Adding an option to edit the board visually.
• Adding an opening book.
• Adding a visual graph representing the history of the computer's evaluation.

Development & Contribution

We welcome all developers to contribute to this repository by fixing bugs or adding features.

It is also great to check our advanced chess app at:

• https://github.com/LabinatorSolutions/boldchess-web-app

List Of Current Contributors:

• https://github.com/LabinatorSolutions/stockfish-chess-web-gui/graphs/contributors

License

GNU GPLv3: https://www.gnu.org/licenses/gpl-3.0-standalone.html

Credits

• Stockfish: https://github.com/mcostalba/Stockfish
• Stockfish.js: https://github.com/nmrugg/stockfish.js
• Oakmac Chessboard: https://github.com/oakmac/chessboardjs
• Caustique Chessboard: https://github.com/caustique/chessboard-js
• LT-PGN-Viewer: http://www.lutanho.net/pgn/pgnviewer.html
• jQuery: https://github.com/jquery/jquery
• BoldChess: https://boldchess.com
• Labinator: https://labinator.com

stockfish-chess-web-gui's Issues

The "Show Hint" button is not working for the Black pieces on touch devices

The "Show Hint" button is not working on touch devices (tablets and smartphones).

• For the White pieces - Fixed by @ipetak
• For the Black pieces - Not Fixed Yet - Currently Unassigned.

Add an option to edit the board visually

Editing the board visually can be a great feature for chess players.

For a live demonstration of this feature check: https://labinatorsolutions.github.io/BoldChess-Stockfish-Web-GUI/other-implementations/example2/

This implementation can be found in the "other-implementations" folder under "example2" of this repository.

The engine toggle off/on require one extra move before it works again after deactivation

The engine toggle off/on feature allows the player to turn the Stockfish engine on or off depending on his desire. However, after turning the engine off, then on again, the player still needs to play one extra move before the engine can play again regardless of which turn it is.

Despite the label, this is more of an enhancement feature than a bug report.

Cannot start game as Black on touch devices

The user can not start a new game with the black pieces if he/she is on touch devices (tablets and smartphones). The only way for the computer to play as White is if the user has clicked the "Switch Sides" button.

The take back button blinks

The take back button blinks when the user moves to any position of any figure.

it is just a second but in my opinion it distract user from game. On the other hand user get attention on the button fast. I think it is not the bug, but it is designed to do this by giving user the information. for instance it cannot undo a move while the computer is making a move. I suggest to disable this blinking . If user click to player vs player option it has no purpose.

category: usability issue

Steps to reproduce:

1. Open hosted "Web GUI For Stockfish Chess" app
2. Move any figure in any direction
3. Click the Engine toggle button ( switch "player" option )
4. Move any figure in any direction
5. Click the "take back" button

Redesign the layout for touch-based devices

The current layout of this Chess GUI on touch devices (smartphones and tablets) is not intuitive.

Scrolling up and down to see the history of moves or setting up the engine's depth level is not elegant. An elegant approach would be if the options were tabbed without scrolling. It is like having a list of icons below the chessboard where each icon determines what gets displayed on the main viewport. There are also other approaches through the use of drop-down menus that can be adapted.

Contributors are always welcome to suggest and improve on this GUI in any way they find it appropriate.

Updating jQuery

jQuery requires an update. The latest version can be found at: https://github.com/jquery/jquery

Let change of level to Mobile players

Hello, another proposed change. But as I have already openned a pull request, I recommend you to do it in a clean master branch, since the other changes are not accepted yet.

The change is in file js/board-actions-mobile.js line 51:

Add this line, before setTimeout:
updateEngineSkill();

It is to let change of level to Mobile players.

The "Take back" button background is still disabled after move any figure

I caught one visual bug. I haven't attached any photo, but I record the steps to reproduce the error.

category: visual issue

severity: low

Steps to reproduce:

1. Open hosted "Web GUI For Stockfish Chess" app
2. Click the Engine toggle button ( switch "player" option )
3. Move any figure in any direction
4. Click the "take back" button

Actual result:

The "Take back" button background is still disabled after moving any figure. The user has switched the engine toggle button to "player" ( off setting). If user click the "Take back" he can still undo any move.

Expected result:

When user click to move any figure the take out button change background from off (dark grey) to on (light grey)

Bug reproduced on Chrome and Edge browser

Add an option to set FEN

Adding a feature to set the FEN is highly important to many chess players.

FEN stands for "Forsyth-Edwards Notation." It is a standard method for describing chess positions using simple text.

• Read more about FEN:
  https://en.wikipedia.org/wiki/Forsyth%E2%80%93Edwards_Notation
  https://www.chessprogramming.org/Forsyth-Edwards_Notation

History not changing well in mobile

History not changing well in mobile. When I try to click in history, the history play doesn't appears well in Mobile. In Desktop it's working well. I recomment this.

In file js/board-init.js, line 62, comment loadBoard:

$('#game-turns-history li span').off().click(function() {
var turnN = parseInt($(this).attr('turn'));
console.log('History: show turn ' + $(this).attr('turn'));
moves = JSON.parse(localStorage.getItem('boardHistory'));
console.log(moves[turnN-1]);
//loadBoard(moves[turnN-1], true);
});

Updating The Stockfish Chess Engine

The Stockfish chess engine requires an update.

Add an alternative option to move the pieces by clicking

On mouse-enabled devices (Desktop PCs), the only way to move the pieces is by dragging and dropping. It would be a great improvement to add "clicking and pointing" as an alternative option.

Updating the chessboard

Replace the current chessboard with cm-chessboard (https://github.com/shaack/cm-chessboard).

The flip functionality on touch devices is not working

The "caustique" chessboard is not rotating/flipping on touch devices (tablets and smartphones). This affects the "flip" and the "switch sides" buttons.

The checkmate message does not get displayed if you win a match on touch-based device

If you win a match with White or Black on a touch-based device, the checkmate message does not get displayed but instead, you get only a "check" message. The engine though stops analyzing and you would be able to read the message if you "switch" the board.

How to test or replicate this bug?

• Open the GUI using any touch-based device like your smartphone or tablet.
• Tune the engine against level 1 to win easily. If you are a chess beginner, use the "hint" button as much as you can to win. Another faster way would be to tune the engine at the hardest level, make yourself lose fast then "switch" the board before checkmate so that you can deliver it yourself.

Ability to toggle the engine off/on so you can move for both sides

A feature to turn on and off the chess engine would be helpful for many reasons.

1. It would allow two players to play together on the same device.
2. It would allow the player to move the pieces for both sides, analyze the board, then toggle the engine when required.

Toggle of Player and AI, not working well in Mobile view

Toggle of Player and AI, not working well in Mobile view. When I use it in Desktop, it's working, but not in Mobile.

The takeback button does not work after checkmate, stalemate or draw

Taking back a move after a checkmate, stalemate, or a draw is important for absolute beginners since sometimes their game ends without having the ability to "takeback" and change its outcome.

The takeback button after the game ends would only navigate you to the past move rather than actually allowing you to play a different one. A player should be allowed to fully takeback a move to play another one even the game has ended.

Add an ability to set the time or the chess clock per side

A feature to set the time for both players can be valuable for this chess web GUI.
That will allow the players to challenge the engine under different time modes (Bullet, Blitz, Rapid, and Classic).

Two fields are required to implement this feature. The time and the possible increment per a set of moves.

• The range of the time and its increment should fall between 1 minute and 180 minutes inclusive.
• The time and its increment value should be restored when taking back a move.
• Switching sides also switches the clocks.

The engine toggle off/on is not working on touch-based devices

The engine toggle (on/off) is currently only working on non-touch based devices. The app loads a different chessboard for touch-based devices which this feature has not yet been implemented on.

The chess pieces are not moving on touch devices (tablets and smartphones)

@LabinatorSolutions
Hi, I have found solution for the issue.
In the file "chessboard-caustique-min.js", search $(this).context.id, it is trying to get the id of the clicked piece.
It is using "context" but context is depreciated in JQuery version 3.0 and onward.
See https://api.jquery.com/context/
So now it's not able to get id of the clicked piece.
Solution is that simply replace $(this).context.id with this.id or $(this).attr("id")
I am new to GitHub. Please someone update the chessboard-caustique-min.js as i suggested.

Please note that this is a library by https://github.com/caustique/chessboard-js
It would be great if someone fix the bug there also.

Add a visual evaluation meter

A great addition to this web GUI would be a visual responsive evaluation meter to show the player what is the engine's evaluation of the current position. An example of such an evaluation meter can be found in the second example of the "other-implementations" folder of this repository.