Code Monkey home page Code Monkey logo

gchessboard's Issues

User is unable to scroll the page if touch and drag gesture is initiated on top of the chessboard

This is a problem on mobile devices. If chessboard covers full width of the screen then it also covers approximately half of the screen vertically, so oftentimes when user will want to scroll the page he will initiate the touch-and-drag gesture on top of the chessboard and it won't work how he expects (since nothing will happen).

The way it could work is to only prevent default browser behavior if user initially touches an interactive element, like a chess piece, and if the user starts his gesture on top of empty square then default browser behavior should not be prevented.

Btw, thanks for all the good work!

Rudimentary markers support

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.

Premoves

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.

Add ability to highlight specific fields by changing the background color

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.

Use Hungarian algorithm to find piece "moves" between two positions

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.

Advanced test cases

  • 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.

Add polyfill for aspect-ratio

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.

Initial release feature checklist

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

Drag does not complete on mobile

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.

Add functionality for piece creation using drag-and-drop

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.