{"id":13416523,"url":"https://github.com/justinfagnani/chessboard-element","last_synced_at":"2025-03-15T00:31:06.056Z","repository":{"id":43753714,"uuid":"224716365","full_name":"justinfagnani/chessboard-element","owner":"justinfagnani","description":"A \u003cchess-board\u003e web component","archived":false,"fork":true,"pushed_at":"2024-07-28T23:52:16.000Z","size":2041,"stargazers_count":101,"open_issues_count":20,"forks_count":14,"subscribers_count":5,"default_branch":"main","last_synced_at":"2024-10-15T17:31:57.583Z","etag":null,"topics":["chess","webcomponents"],"latest_commit_sha":null,"homepage":"https://justinfagnani.github.io/chessboard-element/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"oakmac/chessboardjs","license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/justinfagnani.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-11-28T19:24:00.000Z","updated_at":"2024-10-01T21:02:41.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/justinfagnani/chessboard-element","commit_stats":null,"previous_names":["justinfagnani/chessboardjs"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justinfagnani%2Fchessboard-element","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justinfagnani%2Fchessboard-element/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justinfagnani%2Fchessboard-element/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justinfagnani%2Fchessboard-element/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/justinfagnani","download_url":"https://codeload.github.com/justinfagnani/chessboard-element/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242951049,"owners_count":20211571,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chess","webcomponents"],"created_at":"2024-07-30T21:01:00.141Z","updated_at":"2025-03-15T00:31:04.927Z","avatar_url":"https://github.com/justinfagnani.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Real World"],"sub_categories":["Components"],"readme":"# chessboard-element\n\nA \u003cchess-board\u003e element for your web pages\n\n## Documentation\n\nPlease check out the more useful full documentation site:\n\nhttps://justinfagnani.github.io/chessboard-element/\n\n## Quick Start\n\n### unpkg.com\n\n```html\n\u003cscript type=\"module\" src=\"https://unpkg.com/chessboard-element?module\"\u003e\u003c/script\u003e\n\n\u003cchess-board\u003e\u003c/chess-board\u003e\n```\n\n### NPM\n```bash\nnpm i chessboard-element\n```\n\n```html\n\u003c!--\n  Adjust path to node_modules and use a dev server that support Node module\n  resolution, like es-dev-server: https://www.npmjs.com/package/es-dev-server\n--\u003e\n\u003cscript type=\"module\" src=\"/node_modules/chessboard-element/index.js\"\u003e\u003c/script\u003e\n\n\u003cchess-board\u003e\u003c/chess-board\u003e\n```\n\n## What is chessboard-element?\n\nchessboard-element is a standalone chess board web component. It defines a `\u003cchess-board\u003e` custom element that works anywhere HTML works - in plain HTML pages, JavaScript, or your framework of choice. It is designed to be \"just a board\" and expose a powerful API so that it can be used in different ways.\n\nHere's a non-exhaustive list of things you can do with chessboard-element:\n\n- Use `\u003cchess-board\u003e` to show game positions alongside your expert commentary.\n- Use `\u003cchess-board\u003e` to have a tactics website where users have to guess the best move.\n- Integrate chessboard-element and [chess.js] with a PGN database and allow people to search and playback games.\n- Build a chess server and have users play their games out using the\n  `\u003cchess-board\u003e` element.\n\nchessboard-element is flexible enough to handle any of these situations with relative ease.\n\n### Relationship to chessboard.js\n\nchessboard-element is a fork of of the wonderful [chessboard.js] library, repackaging it as a web component and updating the implementation to modern JavaScript and CSS. The differences include:\n\n  - No need to use JavaScript for basic boards, just use the `\u003cchess-board\u003e` element.\n  - All chessboard DOM is encapsulated in a shadow root. Styles do not leak.\n  - No dependency on jQuery\n  - Just one script tag required, all dependencies and styles are imported directly.\n  - Published as standard JS modules\n  - Uses CSS transitions for all animations\n  - Uses CSS grid and flexbox for layout\n  - New declarative attribute and property APIs play nice with declarative frameworks and template libraries like React and lit-html\n  - Supports arbitrary piece renderers and defaults to SVG pieces\n\nMany thanks to Chris Oakman for chessboard.js.\n\n## What can chessboard-element **not** do?\n\nThe scope of chessboard-element is limited to \"just a board.\" This is intentional and makes chessboard-element flexible for handling a multitude of chess-related problems.\n\nSpecifically, chessboard-element does not understand anything about how the game of chess is played: how a knight moves, whose turn is it, is White in check?, etc.\n\nFortunately, the powerful [chess.js] library deals with exactly this sort of\nproblem domain and plays nicely with chessboard-element's flexible API. Some examples of chessboard-element combined with chess.js: [Example 5000], [Example 5001], [Example 5002]\n\nPlease see the powerful [chess.js] library for an API to deal with these sorts of questions.\n\n\nThis logic is distinct from the logic of the board. Please see the powerful [chess.js] library for this aspect of your application.\n\nHere is a list of things that chessboard-element is **not**:\n\n- A chess engine\n- A legal move validator\n- A PGN parser\n\nchessboard-element is designed to work well with any of those things, but the idea behind chessboard-element is that the logic that controls the board should be independent of those other problems.\n\n## Developing\n\n```sh\n# Build the TypeScript files\nnpm run build\n\n# Docs...\nnpm run analyze\nnpm run bundle\n\n# Build the docs site\ncd docs-src\nnpm run build:ts\nnpm run build\n\n# Start the docs server\nnpm run serve\n```\n\n## License\n\n[MIT License](LICENSE.md)\n\n[chessboard.js]: (https://github.com/oakmac/chessboardjs)\n[chessboardjs.com]: http://chessboardjs.com\n[chess.js]: https://github.com/jhlywa/chess.js\n[Example 5000]: https://justinfagnani.github.io/chessboard-element/examples/5000-legal-moves/\n[Example 5001]: https://justinfagnani.github.io/chessboard-element/examples/5001-play-random-computer/\n[Example 5002]: https://justinfagnani.github.io/chessboard-element/examples/5002-random-vs-random/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjustinfagnani%2Fchessboard-element","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjustinfagnani%2Fchessboard-element","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjustinfagnani%2Fchessboard-element/lists"}