[Feature Request] Chessboard

[hslee2008]

Hi! I really love this project. It helped me make things. But I really wish there were some other features implemented.

Chessboard

1. Disable certain color or the board entirely
   • This could be used for online connected games
   • This could be used for putting two boards side by side (opposite color)
2. Rotate the board
   • [putting two boards side by side] This could be useful for 2 players playing in the same device
   • By putting two boards side by side, each player could be facing the chess pieces of their color
   • I tried transform in css, but the dragging needs to be changed (it goes the opposite way when rotated)
3. Hide the round whose turn circle (create prop)
   • They might not be needed
   • The circle that displays whose turn it is (black, white)

Another component (taken pieces)

1. Maybe a component for displayig taken pieces
   • Make display the count and chess piece value

[yo35]

Hi,

Regarding the chessboard issues:

1. Not sure to understand what you want to achieve. It is possible to control what is displayed on the board with the attribute <Chessboard position={...} /> (see documentation at https://kokopu-react.yo35.org/docs/current/#/Components/Chessboard). Typically you can pass a Position without the pieces you want to hide.
2. That's <Chessboard flipped />, right?
3. OK, that is something that can be added.

Regarding a component for displaying taken pieces: Could be added to the lib, but you can also easily make that on your side. The URLs to the chess piece images are available as follows:

const pieceset = Chessboard.piecesets()['cburnett'];
pieceset.wk; // URL to the image representing a white king
pieceset.bq; // URL to the image representing a black queen
// ... etc

[hslee2008]

Rotation

To clarify, by rotation. I mean when playing on phone, the player would the facing opposite sides.

So, in the image above, I want the top want to be what the white person is facing in real chess game.

Currently, using the flipped props will only move the pieces. Using CSS will achieve this, but dragging will be on opposite dirextion. But, I think it will be really useful if they could be entirely rotated like a really chess board.

Like this. But actually rotating the board like the 1st image will work. But, dragging will be done in opposite direction.

[yo35]

dragging will be done in opposite direction

I'm not sure to understand this point. If you rotate each image representing a chess piece, you should obtain what you want, isn't it? Dragging should work as expected in this case.

Two way to achieve that: either using CSS, or by providing a custom pieceset.

[hslee2008]

Y Axis Flipping

Sorry, I had been flipping the board on Y-Axis.

So, the X axis is normal. But, since the Y axis is flipped, it is dragged in opposite direction

https://github.com/yo35/kokopu-react/assets/78584173/4f11db0a-07e4-4fc5-81bb-cafa53dc4afb

<div className="flipped-mobile">
  <Chessboard {...} />
</div>

.flipped-mobile {
  transform: scaleY(-1);
}

Rotation 180deg

Rotating 180deg is like flipping both x and y axis. So, it goes the opposite direction.

https://github.com/yo35/kokopu-react/assets/78584173/655ed283-bf39-4e59-a5ac-735552da612c

Custom Pieceset

I am not sure exactly how to set my own piece set.

Disable certain color or the board entirely

To clarify, if person B is black and person W is white, person B should not be able to edit the white pieces and vice versa.

I am not sure how to achieve this.

It might be possible using css, but I don't think there is any way of using css selectors to get only the black pieces or the white pieces to disable them by maybe user-select.

Summarization

I apologize if this is not the right way to approach it. This might be more closer to a discussion.

But I really want to achieve this feature where all the pieces are rotated.

If there is a way, could you tell me how to set my own custom piecesets? Also, a way to disable the pieces from being selected (black, white)

[yo35]

I'm suggesting not to flip the whole board, as you, but instead to flip each image representing a chess piece, individually. Thus, no dragging issues.

And I see two ways to achieve that: 1) through CSS, 2) by flipping each image manually and creating a new pieceset with the flipped versions:

Chessboard.piecesets()['cburnett_flipped'] = {
  bk: /* URL to the flipped black king image */
  bq: /* URL to the flipped black queen image */
  ... etc (see in https://github.com/yo35/kokopu-react/blob/master/src/chessboard/piecesets.ts
  the list of images to set)
};

...

<Chessboard pieceset="cburnett_flipped" />

[yo35]

As of version 3.0.0 (just released), <Chessboard turnVisible={false} /> allows to hide the turn flag.

This version also adds a new component <ChessPieceIcon /> that can be used to display a list of chess pieces (e.g. the taken pieces). See documentation at: https://kokopu-react.yo35.org/docs/current/#/Components/ChessPieceIcon