grzegorz103 / ngx-chess-board Goto Github PK
View Code? Open in Web Editor NEWChess game NPM Library (Angular 13)
Home Page: https://www.npmjs.com/package/ngx-chess-board
License: MIT License
Chess game NPM Library (Angular 13)
Home Page: https://www.npmjs.com/package/ngx-chess-board
License: MIT License
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.
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
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.
ng new projectname --standalone=false
to generate a new project, using modules instead of standalone componentsnpm install ngx-chess-board
to install this packageng 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
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:
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?
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.