search

ps2-controller / react-chess-analysis-board

React component for a fully featured, stylable chess analysis board.
GNU General Public License v3.0
11 stars 4 forks source link

Better Control over styling `Moves` component #2

Open ps2-controller opened 1 year ago

ps2-controller commented 1 year ago

Currently, the style and layout of the Moves component is very limited. Users can change the css applied to:

I would like to give them control over the actual layout in which moves are rendered. For example if you look at the lichess analysis board and start making a bunch of branches, you will see that each move half of the root node renders on a different side, each full move on the root node stacks vertically, and the child nodes visually branch out with CSS.

Even though the state management logic in this library is comparable, the custom styling and control over how moves are laid out in React Chess Analysis Board makes it impossible to create a similar structure for the caller.

Additionally, this library currently forces the use of parentheses to wrap child nodes. I'd like to make that optional once the layout and visual separation of child nodes can be controlled more flexibly. (That can probably be a new issue once this one is complete)

ps2-controller commented 1 year ago

I'm not really sure how to even approach this problem -- I'd love some thoughts and opinions here!

ps2-controller commented 1 year ago

Currently working on this in the detailed-move-styling branch

Pratikdubey7735 commented 3 weeks ago

Hi Sir,

I need your help with my college project. I am using this component, and I’m facing an issue: after loading the PGN string, when I make any new variation moves on the chessboard, I want those moves to be displayed in brackets. However, it’s not working as expected.

I would be very grateful for your support, as you are my last hope. If you could contact me, that would be wonderful. Thank you for your assistance!

ps2-controller commented 3 weeks ago

Hi Pratik, since I'm not actively maintaining this project right now, I don't think I'll be implementing better control over styles at the moment. I'm happy to review a PR if you put one in, but it may take me a week or two to find time.

With this library, it should have some default branching options you can put in a CSS file, but it may not meet your styling specifications. https://github.com/ps2-controller/react-chess-analysis-board/blob/main/src/lib/style.scss However, it doesn't give you much control over the rendering structure, let you render as a table, etc. It's a severe limitation of this library as currently built.

The long-term approach I will likely take one day is to expose the board state management as an API and make everything else headless; most likely in a new library.

My recommendation would be to use this library as inspiration, but implement the components directly in your codebase or fork this project. Here's an article that should help with implementing the core algorithm:

https://medium.com/@anuragangara/building-a-chess-analysis-board-in-react-b59952727d4b

Pratikdubey7735 commented 3 weeks ago

Can I get some help from you in my project please.