mganjoo / gchessboard Goto Github PK
View Code? Open in Web Editor NEWAn accessible, customizable and dependency-free chessboard web component.
Home Page: https://mganjoo.github.io/gchessboard/
License: MIT License
An accessible, customizable and dependency-free chessboard web component.
Home Page: https://mganjoo.github.io/gchessboard/
License: MIT License
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!
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.
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.
Piece placement and resize doesn't work correctly for Safari. The pieces only update their location when refreshing the window.
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.
When animating a change in position, we first compute a position "diff" between two board positions to find three sets:
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.
Symmetric counterpart to startMove()
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.
web-components-analyzer
to generate documentation for librarySee note about typings for custom event: https://stackoverflow.com/a/68783088/315483
Instead of specifying it as a list of objects, see if they can instead be specified as nested web components.
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.
Chess.com uses right click for mouse-based drawing. See if we can also add an intuitive pointer or keyboard interaction for drawing arrows.
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.
In addition to the base green theme. Themes should be specified by a theme name.
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.