Hi! Another bug I noticed, you can reach positions with kings on squares next to each other. For example 1.e3 e6 2.Ke2 Ke7 3.Kf3 Kf6 4.Ke4 and here Kf5 is allowed, while Ke5 is not allowed. After 4...Kf5, the white king is in check. Let me know if you need some pull requests, btw, nice work with this package!

How too give the best moves for either of black or white , if we choose the black means we are black as Human , white will be opponent ,white has to move according to the best moves , best moves we are giving by the stockfish , and also one more question - How to select the play as white or black ininitally , currently it is taking the white as first move , how to changes , need a urgent solution please

user needs to have a option disable possible move highlights and disable to move piece

Hi @grzegorz103 , is there any possibility to load a game from PGN? If not, is there any chance to add this possibility? Let me know if you need a pull request on this. Thanks!

Hi @grzegorz103

I really liked your project, I'm trying to implement it right now, but I am having some problems to understand how can I change the size actively (like the demo, where you change the input number and the board just loads again with the new size). I would be really gratefully if you could explain that to me

Hi Grzegorz,

I'm running into a issue where I am trying to clear the Markers (arrows, circles...) off the board, but still keep the board in 'FreeMode', and all pieces in their places.

My logic was too grab the current FEN of the board, then reset everything and then set the FEN to what is was before the reset(), this would only remove the markers. 'FreeMode' is turned off during this Reset(), but it doesn't seem to register it turning off in my component logic. and my attempts to turn it back on within the clearMarkers() function doesn't work either.

I did try wrap the this.freeMode=true; inside a quick timeout, but that did not work either...

Would you be able to assist?

@ViewChild('board', {static: false}) board: NgxChessBoardView | undefined;
@Input() freeMode: boolean = true;

clearMarkers() {
    const currentFen = this.board?.getFEN();
    this.board?.reset();
    this.board?.setFEN(currentFen);
    // try to turn 'FreeMode' back on.
    this.freeMode = true;
  }

Thanks again! :)

Is there a way to set orientation just like chessboard.js does?

When I try loading a PGN that has an en-passant move, the en-passant move and any subsequent moves are not loaded. Any moves preceding the en-passant are loading as expected though

Trying with the following PGN:
"1. Nf3 Nc6 2. d4 Nf6 3. d5 Nb4 4. c4 Ne4 5. Nbd2 Nxd2 6. Bxd2 e5 7. e4 Qf6 8. a3 Na6 9. b4 Bd6 10. c5 Nxc5 11. bxc5 Bxc5 12. Qc2 Bb6 13. Bb4 a5 14. Bc5 Bxc5 15. Qxc5 b6 16. Qxc7 Qf4 17. Qxe5+ Qxe5 18. Nxe5 Bb7 19. Bb5 Rd8 20. Nc4 Kf8 21. Nxb6 d6 22. Rc1 Kg8 23. Rc7 Rb8 24. Nd7 Rd8 25. Rxb7 f5 26. exf5 h6 27. Kd2 Rh7 28. Rc1 Kh8 29. Rc6 g5 30. g6" which has the FEN "3r3k/1R1N3r/2Rp2Pp/pB1P4/8/P7/3K1PPP/8 b - - 0 30". 30. g6 is an en-passant move.
Expected board (what it should load):

Issue board (what actually is loaded):

Side note, your work is great, thank you for it. The best chessboard plugin I have found

@grzegorz103 I have created a PR with added functionality to show promotion modal based on current player colour and show promotion pieces based on player colour.

Here is the PR link. Please merge
#162

Hello, I'm using your board to make a chess game viewer. For that I have a code that splits PGN moves and depending on the turn it concats moves and calls setPGN to show every turn on the game.

I'm having problems with this PGN:

1. e4 e6 2. d4 {[1:29:27]} d5 {[1:25:37]} 3. Nc3 {[1:29:56]} Nf6 4. e5 {[1:30:15]} Nfd7 {[1:26:25]} 5. f4 {[1:30:32]} c5 {[1:27:01]} 6. Nf3 {[1:30:50]} Nc6 {[1:27:24]} 7. Be3 {[1:29:01]} Qb6 {[1:27:35]} 8. Na4 {[1:29:15]} Qa5+ {[1:27:58]} 9. c3 {[1:24:57]} b6 {[1:28:13]} 10. Be2 {[1:21:28]} Ba6 {[1:26:41]} 11. Bxa6 {[1:19:12]} Qxa6 {[1:22:54]} 12. b3 {[1:12:36]} Rc8 {[1:20:01]} 13. Qe2 {[1:07:07]} Qa5 {[1:15:03]} 14. O-O {[1:01:53]} c4 {[1:12:00]} 15. Qc2 {[0:58:27]} b5 {[1:00:18]} 16. Nb2 {[0:50:13]} Ba3 {[0:56:33]} 17. Nd1 {[0:47:52]} Ne7 {[0:54:01]} 18. g4 {[0:41:22]} g6 {[0:52:54]} 19. b4 {[0:38:53]} Qb6 {[0:53:17]} 20. Bc1 {[0:37:25]} Bxc1 {[0:53:33]} 21. Rxc1 {[0:37:17]} a5 {[0:53:09]} 22. a3 {[0:34:11]} h6 {[0:51:01]} 23. Qf2 {[0:32:00]} Ra8 {[0:43:14]} 24. Nh4 {[0:24:51]} Kd8 {[0:42:35]} 25. f5 {[0:20:40]} g5 {[0:41:42]} 26. fxe6 {[0:20:16]} fxe6 {[0:33:04]} 27. Ng2 {[0:15:20]} Rf8 {[0:33:29]} 28. Qxf8+ {[0:15:20]} Nxf8 {[0:33:29]} 29. Rxf8+ {[0:15:44]} Kd7 {[0:33:55]} 30. Rxa8 {[0:11:51]} Nc6 {[0:34:44]} 31. bxa5 {[0:10:54]} Nxa5 {[0:33:58]} 32. Nde3 {[0:10:54]} Nc6 {[0:33:58]} 33. Rh8 {[0:08:25]} Nxd4 {[0:32:38]} 34. cxd4 {[0:06:10]} Qxd4 {[0:32:36]} 35. Rxh6 {[0:06:10]} Qxe5 {[0:31:12]} 36. Rd1 {[0:04:17]} d4 {[0:31:12]} 37. Nc2 {[0:01:07]} d3 {[0:23:44]} 38. Nce3 {[0:01:07]} Qc5 {[0:23:44]} 39. Rh5 {[0:00:38]} Kc6 {[0:23:25]} 40. Kf1 {[0:11:28]} Qxa3 {[0:48:03]} 41. Rh8 {[0:09:59]} Qb2 {[0:34:59]} 42. Rf8 {[0:08:46]} Qe5 {[0:33:34]} 43. Kg1 {[0:07:44]} Qd4 {[0:33:34]} 44. Rc8+ {[0:07:44]} Kb7 {[0:24:35]} 45. Rf8 {[0:03:50]} b4 {[0:23:27]} 46. Rb1 {[0:03:50]} c3 {[0:23:27]} 47. Kh1 {[0:02:09]} c2 {[0:18:48]} 48. Rf7+ {[0:01:49]} Kc6 {[0:17:31]} 49. Rc1 {[0:01:03]} b3 {[0:16:16]} 50. Rff1 {[0:01:03]} Kb5 {[0:14:40]} 51. h3 {[0:00:54]} Qh8 {[0:14:40]} 52. Kh2 {[0:01:06]} Qe5+ {[0:13:29]} 53. Kg1 {[0:00:52]} d2 {[0:12:31]} 54. Rxc2 {[0:01:21]} bxc2 {[0:12:31]} 55. Nxc2 {[0:01:21]} Kc4 {[0:12:31]} 56. Nce3+ {[0:01:21]} Kb3 {[0:08:43]} 57. Rd1 {[0:01:59]} Qd4 {[0:08:30]} 58. Kh2 e5 59. Kg1 {[0:02:08]} e4 {[0:08:30]} 60. Kf1 {[0:02:05]} Kc3 {[0:08:04]} 61. Kf2 {[0:02:39]} Qd3 {[0:07:10]} 62. Ke2 Qd4 {[0:07:12]} 63. Kf2 {[0:03:07]} Qd3 {[0:06:29]}  1/2-1/2

If you take a look to moves 60 and beyond you'll see this:

61. Kf2 {[0:02:39]} Qd3 {[0:07:10]} 
62. Ke2 Qd4 {[0:07:12]} 
63. Kf2 {[0:03:07]} Qd3 {[0:06:29]}
64.

If you load the game you'll be able to see that in turn 61 black player moves the queen to d3 and then white player moves king to e2. This is dumb because it'll be a check mate, but this PGN it's from a real game so I'm assuming black player did not noticed and moved back queen to d4.

If I do a setPGN with the moves from 1 to 61 works well. When I add turn 62 the king does not move.

So I assumed it's not a "valid" movement (technically, it is I think) and then I tried to use the freemode option to true and then something stranger happened.

13. Qe2 {[1:07:07]} Qa5 {[1:15:03]} 
14. O-O {[1:01:53]} c4 {[1:12:00]} 
16. Qc2 {[0:58:27]} b5 {[1:00:18]} 

If you take a look to move 14th there's a kingside castling. When freemode is false it works correctly, but with freemode to true king moves to the correct place but rook remains in the original spot.

Freemode = false

Freemode = true

It's a bug or am I doing something wrong?

I'm trying to use the board as analysis board and can't figure out how to save subvariants. When I use boardManager.undo() and then do other move than the main variation it simply removes all moves and starts pgn again. Is there any way to create subvariations?

This does not work with Angular version 12. I tried all your versions none is working with it

There is a bug with possible captures. I have attached an image for reference.

Here are the steps to reproduce the bug.
Step 1: Move d2d4
Step 2: Move c7c5
Step 3: Move d4c5
Step 4: Move b7b5
Step 5: Move c5c6 // Now the bug would show the possible capture on b6 even though there is no piece there.

Hello, I used this package to implement a real-time game using angular 12 and Firebase, but I have faced a few issues that should be mentioned to work on fixing them.

The first error happened when I was playing and I moved The Bishop see below the image of the round and issue.

The second issue happened when my mate King was checked.

All chess pieces are not centered properly

Is there a way to set moveSpeed and snapSpeed?

Just trying to follow the README on how to use this package, and do basic imports like
import { NgxChessBoardModule } from 'ngx-chess-board'; and
import { NgxChessBoardService, NgxChessBoardView } from 'ngx-chess-board';
But I'm getting the error in the title.

Here are my various config files
package.json
tsconfig.app.json
tsconfig.json

Using Angular 17.3... here's my output from ng version:

Angular CLI: 17.3.8
Node: 20.13.1
Package Manager: npm 10.5.2
OS: darwin x64

Angular: 17.3.8
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1703.7
@angular-devkit/build-angular   17.3.7
@angular-devkit/core            17.3.7
@angular-devkit/schematics      17.3.8
@angular/cdk                    17.3.9
@schematics/angular             17.3.8
ng-packagr                      17.3.0
rxjs                            7.8.1
typescript                      5.4.5
zone.js                         0.14.5

I've tried importing the components from ngx-chess-board/src/public-api instead, which does resolve the import, but Copilot tells me that's not recommended:

The error is occurring because you're trying to import from the library's source files directly, which is not recommended. You should import from the library's public API instead.

and I get a File 'node_modules/ngx-chess-board/src/public-api.ts' is missing from the TypeScript compilation. error upon trying to ng serve or ng build instead.

Minimal Steps to Reproducing

1. Install Angular 17
2. Run ng new projectname --standalone=false to generate a new project, using modules instead of standalone components
3. Run npm install ngx-chess-board to install this package
4. Add any of the imports listed at the top
5. Try to run ng serve or ng build

Hi Grzegorz,

If I play a move as white with Freemode off, then turn Freemode on, and play another move, it seems that the move which is played next is registered or tracked by the game. This can mean that for example after the White move and the turning on of Freemode, you could move a Black piece once, then back to it's original square, and that would count as Blacks move, which then makes it whites turn again.

Perhaps with Freemode on, the board could not track any moves / add them to the PGN, etc... To try and keep the board in a state where it was before Freemode was true?

Any issues or better solutions let me know!

Cheers,

style broken when using in iframe

Sometimes appears a new bishop inside or outside of the board

How can I prevent the below squares from highlighting? I don't want the selected piece's square to be highlighted, and I don't want to show what pieces it is able to take?

Here's the code I use to initialise the board, note the last 4 lines:
(showLastMove & showLegalMove are both equal to false in my component)

<ngx-chess-board 
              #board style="line-height: normal;"
              [size]="boardSize"
              [freeMode]="freeMode"
              [showCoords]="!showCoordsOutside && showCoordsInside"
              [lightTileColor]="colourFormGroup.value.darkColour"
              [darkTileColor]="colourFormGroup.value.lightColour"
              [sourcePointColor]="'none'"
              [destinationPointColor]="'none'"
              [showLastMove]="showLastMove"
              [showLegalMoves]="showLegalMove">
</ngx-chess-board>

Thanks!

Hi again!

I'm running into this issue both in my environment and also on the demo page. When I move a piece, then undo() the move, and then attempt the same move again, it doesn't let me do that move, with no visible errors from my end. I am able to move the piece elsewhere though, it just prevents me from doing the same move again.

Cheers,

I have been having problems with the setPGN method
For example with this pgn:

1. e4 e6 2. d4 d5 3. Nd2 Nf6 4. Bd3 dxe4 5. Nxe4 Be7 6. c3 Nbd7 7. Nf3 c5 8. O-O O-O 9. Be3 cxd4 10. Nxd4 Nxe4 11. Bxe4 Nf6 12. Bc2 e5 13. Nf3 e4 14. Nd4 Bg4 15. Qd2 a6 16. h3 Bh5 17. Bb3 Bg6 18. f3 Bc5 19. Qe1 Re8 20. Rd1 Qb6 21. Qh4 exf3 22. Rxf3 Rad8 23. Qg5 Re7 24. Rdf1 Rde8 25. Kh1 Qc7 26. h4 Ne4 27. Qg4 Nf6 28. Qg5 Bd3 29. R1f2 Bxd4 30. cxd4 Bc4 31. Bxc4 Qxc4 32. h5 Ne4 33. Qg4 Nxf2+ 34. Rxf2 Rxe3 35. h6 Re1+ 36. Kh2 g6 37. Qf4
   the final position is different than the real one.

it does not happen with all pgn

Hello,

I'm trying to concatenate a string using the MoveHistory array that you can retrieve from the board to create an Algebraic Notation. I am able to create a string for most scenarios, however, I am unable to create a string with a '+' at the end, for when a move threatens the opponents king and places the opponent in check.

Is there any check that I could do on the board to see if a player was in check, or would it be possible to perhaps pass that info in the MoveHistory?

Cheers!

Hi Grzegorz,

Sorry to come at you with another issue. I greatly apprieciate all your help so far.

I'm able to replicate this on the demo board, and face the same issue in my app.

On the demo board, turn on FreeMode, and then add a piece onto the board, you will get a console error. Some functions will then not return the correct results, for example, getFen(), which will not give me the correct fen.

Moving a piece on the board before performing the above does not produce the console error, but ideally some scenarios in my app would not require a move to be played first.

Any issues, let me know.

Cheers,

Hi, when can we expect checkmate and stalemate events?

What is the recommended way to set fen position on page reload or navigation? I have tied ngOnInit but the board component isn't setup yet. I have tried other lifecycle hooks too. But they don't work either.

Is there a way we can overwrite / disable highlight last move?

It would be better if we can have a property that can be passed onto ngx-chess-board.

Hi,

I came across this project, and really appreciate the hard-work!

I was looking to add a free mode, which would not restrict based on player's turn.
I have done minor changes (can raise a pull request), and was wondering if you guys are open to add this as a feature.
Please do let me know!

Thanks,
Ankit.

Hi, @grzegorz103

I was wondering if there is any way to set up a chessboard with a different fixed starting position and play it from there, something like this:

Hi, Can we upgrade dependencies to angular 13?

I'm working with setting fen after every move coming from a server.
After castling, no matter what FEN is set, the board remains in the starting position.

Example:

before castling - white to move:
rn2kb1r/1pq2ppp/p3pn2/2ppN3/3P4/2N1P3/PPP2PPP/R1BQK2R w KQkq - 2 9

after white castling - resets the board:
rn2kb1r/1pq2ppp/p3pn2/2ppN3/3P4/2N1P3/PPP2PPP/R1BQ1RK1 b kq - 3 9

If you flip the board first time, you can see in the bottom left corner you have the h8 square. But if you flip the board back (you are white again), your bottom left corner is still h8, which is incorrect.

When I try to render a board in an angular 13 project with material design the following error occurs:

core.mjs:6500 ERROR Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value for 'transform': 'translate3d(NaNpx, NaNpx,0px)'. Current value: 'translate3d(0px, 62.5px,0px)'.. Find more at https://angular.io/errors/NG0100 at throwErrorIfNoChangesMode (core.mjs:6748:11) at bindingUpdated (core.mjs:12724:17) at checkStylingProperty (core.mjs:16465:32) at Module.ɵɵstyleProp (core.mjs:16354:5) at NgxChessBoardComponent_div_3_Template (ngx-chess-board.mjs:3028:1866) at executeTemplate (core.mjs:9633:9) at refreshView (core.mjs:9499:13) at refreshEmbeddedViews (core.mjs:10624:17) at refreshView (core.mjs:9523:9) at refreshComponent (core.mjs:10670:13)

Hi @grzegorz103 , it's me again :) I've tested a bit the [pieceIcons] input for the board, and while most of the time it works fine and it looks really nice, I noticed sometimes some of the pieces are missing. It didn't notice any particular pattern, just sometimes pieces are missing when the board is redrawn. Use for example the following svg for all pieces, you should see it happening. Any ideas what might cause this?
whiteQueen.zip

Hi! Just tried the package, but after installing it the Angular app stopped working. After building for production, it turned out @angular/cdk/drag-drop is required for ngx-chess-board to work. I'm using Angular version 11.0.8, I'm not sure this is an issue for previous versions, can this be fixed for future?

As a suggestion, would it be possible to have something like lichess' board resize? I think it would be a very useful feature

It's me again!

Not sure if you're aware of this one... Or if it is intentional! Can't see it mentioned in the docs.

You are able to position a piece outside of the board with Free Mode enabled.

Cheers,

When promoting a pawn, the pieces you can choose from are not showing properly, last move by black was d2-d1, see below (the dark background is because of my Chrome setup).

I am trying to set pieceIcon with a icon theme, but it doesn't work. The console throws the following error.

ERROR TypeError: Cannot set property 'pieceIconInput' of undefined
    at NgxChessBoardComponent.set pieceIcons [as pieceIcons] (ngx-chess-board.js:2444)
    at Object.ngOnChangesSetInput [as setInput] (core.js:1517)
    at setInputsForProperty (core.js:10901)
    at elementPropertyInternal (core.js:9948)
    at ɵɵproperty (core.js:14700)

online ngx-chess-board.js:2444

set pieceIcons(pieceIcons) {
        this.pieceIconManager.pieceIconInput = pieceIcons;
}

Any examples on how a piece theme can be set?

Hi, it's me again.

I'm trying to change the chess pieces, but I don't really get where do I have to change them.

I can't get [showLastMove], [lightTileColor] and [darkTileColor] to work.

<ngx-chess-board [showLastMove]="true" [darkTileColor]="0 0 0" [lightTileColor]="256 256 256" > </ngx-chess-board>

What am I doing wrong?

HI--- I am trying to use this repo as part of another project. I am relatively in experienced and was wondering if the code demo version was posted somehwere, specifically the portion that relates to the pgn notation and move logging. I have my own version running, but could save myself a lot time in angular with an example of how you set up the demo. Is that posted in a different repo somewhere? I am not finding it in this one. Again appologies if this is a silly question. Thank you kindly,
JM

Is there a way to get a list of captured moves?