mganjoo / gchessboard Goto Github PK

Instead of specifying it as a list of objects, see if they can instead be specified as nested web components.

• Test that events are fired correctly.
  • Can test operation of a simple chess app that uses the callback to update internal state.
• Test operation with limited moves.
  • Test focus transfer and move cancellation.

When animating a change in position, we first compute a position "diff" between two board positions to find three sets:

• the set of pieces that have been added onto squares
• the set of pieces that have been removed from squares
• the set of pieces that have "moved" from a square in the old position to a square in the new position

The last case is done using a greedy approach, where for each piece (say, black pawn) we find the shortest distance between its square in the new position and a corresponding square of a piece in the same class in the old position (all black pawns). We arbitrarily choose a square from the old position (one with the minimum distance to the new square) and treat that assignment as a "move".

This greedy algorithm is sub-optimal. In actuality, the best mapping between the two positions for a given piece seems like it can be represented as a minimum bipartite matching algorithm, solvable using an approach like the Hungarian algorithm (see example). Specifically, for a given piece class (in this case, black pawn) we are trying to find the assignment between black pawns in the old position and the new position such that the sum of the distances between the corresponding assignments is minimized.

Investigate how we can implement and apply the Hungarian algorithm here.

See note about typings for custom event: https://stackoverflow.com/a/68783088/315483

When dragging pieces on mobile, pieces do not snap to final destination on touch release. This is because mobile browsers do not often fire a click event after pointerup when the finger is moved around, and a lot of our event handling is occurring in the click handler.

Piece placement and resize doesn't work correctly for Safari. The pieces only update their location when refreshing the window.

Add support for marking up squares via secondary clicks, like chess.com and lichess. Could optionally allow modifier keys like Shift, Control, and Alt mapping to various marker colors.

Also allow displaying arrow markers between squares.

Should allow enabling/disabling markers via a square attribute or property.

Chess.com uses right click for mouse-based drawing. See if we can also add an intuitive pointer or keyboard interaction for drawing arrows.

Input

• Support touch moves
• Ensure setting changes transitions out of interactive state. Additionally, ensure that all external interactions result in some form of state transition.

Visuals

• Show ghost piece while dragging piece
• Customize style of ghost piece and allow disabling
• Update lightness of move outline box

Animation

• Piece animation while click moving and keyboard moving
• Pieces animation while changing board position
• Support turning off animation manually and ensure 0ms transition period is handled correctly
• Smooth animations (no flickering) when dropping

Callbacks

• Start of move, End of move

Markers

• Individual square markers (ensure square marking can be disabled)
• Markers for eligible move squares (returned from move start callback)
• Decide style for occupied squares (with custom content) that are move-eligible (crosshairs-based markers are causing a weird overlap)
• Arrow markers between squares

Visual bugs

• Debug why there is a flicker when hiding/showing notation and making board interactive

Testing

• Output type declarations: vitejs/vite#2049
• Build example app that uses built version of library
• Run web-components-analyzer to generate documentation for library

Stretch objectives

• Basic styling customization
• Basic customization of animation duration

Hello, this is good chess board, but I can not use premoves, for example I play with white pieces and I do a move and my pieces to disable it is good, But when my opponent thinking I want to do a premove but I do not how can I do it, so it is very important tool because in blitzkrieg game when play in 2 or 3 minutes this tool is very important.

Symmetric counterpart to startMove()

One potentially useful feature is a way to drag-and-drop pieces into the board to create them (“spawning” pieces). Ideally this would be a different web component, something like a <gchessboard-piece-generator> tag, which fires events when a piece is moved within it. We we would update <gchessboard> to listen to events from the pieces element and update state accordingly on pointermove and pointerdown events.

The <gchessboard-piece-generator> component should have some sensible default styles, but should be as customizable as possible and completely independent of <gchessboard> component.

There should also be a way to drag-and-drop pieces off the board to destroy them, as a corollary to piece creation.

https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

In addition to the base green theme. Themes should be specified by a theme name.

Thanks for your great work!

Is there a possibility to change just the background color of a specific field? I couldn't find anything about it in your documentation.

An example usage are chess puzzles. A player wins a puzzle by moving one piece to one specific field. The player has to guess by himself which piece and position are the right ones.

If the player picked the correct field: the field shall be green. If the player picked the wrong field: the field shall be red.

The Chessboard CSS class uses the aspect-ratio property which may not have a lot of support on older browsers. Find a way to add a polyfill for this in order to support older browsers.