Integrate stockfish.js into the viewer

[mliebelt]

It should be possible to integrate stockfish.js into the PgnViewerJS as a local chess engine to support the analysis. This would be very handy when using the edit mode to create the analysis of a game, but also in using the view mode to have some support for replaying a game.

These are the things that should go into the implementation:

• Easy to configure: just flip a bit
• Only download the big stockfish.js file when needed
• Find out if there is some customization available.
• Provide a UI (div) that shows (configurabe)
  • the number of variations that are computed (default 4)
  • the value the engine gives in each variant (in hundreds of pawn entities, like lichess.org)
• Provide configuration of the UI to allow the display in different ways

Here are some of the resources I have found, will search for more:

• original port with some minimal description (not yet tested)
• lichess used port with multi-variant support (that is not of interest to me at the moment)
• official stockfish port where the lichess port is a clone from
  • wiki pages usage UCI best explanation up to now how to use it
• nice description how to use in another port, will have to check that as well

[xeyownt]

FYI, other ports of StockFish in JS:

• https://github.com/nmrugg/stockfish.js,
• Chesstron - Chess CLI, proof-of-concept of engine above.

[mliebelt]

Thank you for the hint, I will have a look. At the moment, I don't have much time for this project, priorities are different. But integration of stockfish is highly interesting, to support the edit mode.

[stanleyng8]

@mliebelt Hi Markus. I have managed to get some success integrating stockfish with pgnviewerjs. There is one issue that I am facing. When I make a move, about the only thing that changes is board1Fen (board1 is the name of my board). But this is a text area, so I can't detect the change with $(".fen").change(function() {... I looked at the other elements and the only other change is that the class='yellow' jumps across moves. Without adding another EventListener, is there a way to detect a move has been made and Stockfish should start calculating the new position.

[mliebelt]

There is currently no support for changes in the PgnViewerJS. When you use the FEN element, the tip from stackoverflow could perhaps getting notified. Perhaps it would be a good idea to add a custom event to some of the UI elements, so that clients may add an event listener. Any preferences here?

So at the moment, you should add an event listener. How about sending me a pull request?

[stanleyng8]

Hi. I managed to integrate Stockfish with PgnViewerJS. I had to mess with the core PgnViewerJS code. I had initially planned to do it on a separate script but couldn't trigger on programmatic changes to the FEN. The reason is that I have multiple PgnEdit boards and each loading multiple games that is switched from dropdowns. Since the DOM element is changed programmatically, there was no way to detect it with JQuery. That's why I had to go through a lot of JS code and understand how it works. The solution is every time there is a FEN change (there are 4 places in the code where FenId is used to change the FEN) in the core PgnViewerJS, I called a FenChangeHandler() function. This will feed the new Fen into Stockfish. I don't understand the full codebase (there are minified parts that are difficult to read) of PgnViewerJS so my approach is more of a stopgap till you officially implement it. In any case, I am not a true JS programmer, so my hacky approach is non-idiomatic.

[mliebelt]

Is there any chance to share what you have already done? I would like to give it a try, and I think this will be useful for others as well.Without searching the internet, is your source available somewhere, so I can see the changes you did? And yes, there could be change events from the viewer done ... If only I would know what is interesting for the people.

[Bebul]

I am experimenting with Stockfish.js, but in PgnEdit or PgnView it is difficult to imagine it in any fixed layout provided by PgnViewerJS. I would rather prefer to provide some basic implementation based on callbacks, but outside PgnViewerJS. So the board would only play moves, create variants and do the stuff he can do well. But for Stockfish or say Opening Book Explorer - it would provide callbacks and interface. I can imagine Stockfish usage with PgnViewerJS as some kind of addon. And PgnViewerJS can provide some simple implementation.

PGNViewerJS should provide only something like:

• [maybe already available] - callbacks - see https://github.com/mliebelt/PgnViewerJS/issues/266#issuecomment-1023748663
• [already available] interface to do some move (in order to implement playing against computer)
• [maybe already available] interface to draw arrows, especially with paleGreen brush
• [//TODO] interface to hide/show/set-value of evaluation sidebar
• [//TODO] and addon utilizing all of these to make Stockfish running in some sexy manner

I think the user should provide Stockfish to PgnViewerJS and probably run only one instance operating on positions he wants and only tell the boards containing evaluating positions to adapt its arrow, sidebars etc.

[mliebelt]

Found a new repo https://github.com/hi-ogawa/Stockfish that contains a Web Assembly with Stockfish support, including a reference to an example repo to play with it. Seems to be a good starting point, then.

The description at the top has the requirements that are relevant for me. I understand the comment of @Bebul but think that the pgn-viewer should provide a complete solution, with enough implementation and configuration.

[Bebul]

Would be nice, of course. Then "evaluation bar" would be very handy... and maybe the window with the lines to configure where to show, users are used to see it right to the board. I was able to run some older version of Stockfish too. But it is still far from having some nice environment to work with...

[mliebelt]

FYI, other ports of StockFish in JS:

• https://github.com/nmrugg/stockfish.js,
• Chesstron - Chess CLI, proof-of-concept of engine above.

Just tried Chesstron, was not able to get it setup correctly and run. When I looked at the repository, I saw the last change was 9 years ago. I think not a good starting point.

[Bebul]

If I remember well, I have found some version of Stockfish 10 which I was able to run in my website as a test. It has standard engine "API" prototocol so I think it could be a good start point, at least to start with trials with the protocol to get some results. As all engines should behave the same nowadays.

[Bebul]

Looks like I have started with this one https://github.com/LabinatorSolutions/stockfish-chess-web-gui

[Bebul]

I also remember that I was unable to run it until I have realized I need to run it through server like any other web, like

               node server.js
               http://127.0.0.1:8080/

[mliebelt]

After having problems in having run stockfish, I created a new repository to collect examples for different engines. And only when I have found one that works well, I will integrate that somehow in the viewer).

https://github.com/mliebelt/stockfish-playground

If someone has stockfish implementations (including how they can be run), please drop me a note (preferred as ticket on stockfish-playground.

It includes a first version of stockfish.wasm from 3 years ago, that version seems to work well. Perhaps that is "good enough" for the moment.

[mliebelt]

I have a first running version of a modern stockfish inside an HTML page. See lichess-stockfish README for some details. I am not so glad how it works, and will add some tickets to the playground repo, to improve that.

[mliebelt]

I was able to get something up and running, see the above commit with its explanation in it. In my opinion a good starting point, from there we can see how to set it up, and integrate it into the UI. The goals will be:

• Have stockfish initialization in the Javascript sources, not in the browser.
• Make the initialization fool prove (which is not at the moment).
• Provide some utility functions, at the moment, only sfSetPosition is provided.

I will stop for the moment, and when I have time again, will see if the development could be continued on the main branch then.