{"id":27026285,"url":"https://github.com/hakorr/universalboarddrawer","last_synced_at":"2025-04-04T22:17:35.188Z","repository":{"id":169874649,"uuid":"645941750","full_name":"Hakorr/UniversalBoardDrawer","owner":"Hakorr","description":"A userscript library for seamlessly adding chess move arrows to game boards on popular platforms like Chess.com, Lichess.org, and almost anywhere else.","archived":false,"fork":false,"pushed_at":"2025-03-27T16:06:03.000Z","size":406,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-27T16:42:47.301Z","etag":null,"topics":["arrow","chess","draw","drawing","javascript-library","userscript","userscript-library"],"latest_commit_sha":null,"homepage":"https://greasyfork.org/en/scripts/470417-universalboarddrawer-js","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Hakorr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-05-26T20:16:37.000Z","updated_at":"2025-03-27T16:06:07.000Z","dependencies_parsed_at":null,"dependency_job_id":"638a4fa3-8788-440c-832c-99dc340c1ee7","html_url":"https://github.com/Hakorr/UniversalBoardDrawer","commit_stats":null,"previous_names":["hakorr/universalboarddrawer"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hakorr%2FUniversalBoardDrawer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hakorr%2FUniversalBoardDrawer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hakorr%2FUniversalBoardDrawer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hakorr%2FUniversalBoardDrawer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Hakorr","download_url":"https://codeload.github.com/Hakorr/UniversalBoardDrawer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247256086,"owners_count":20909240,"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":["arrow","chess","draw","drawing","javascript-library","userscript","userscript-library"],"created_at":"2025-04-04T22:17:34.664Z","updated_at":"2025-04-04T22:17:35.170Z","avatar_url":"https://github.com/Hakorr.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# UniversalBoardDrawer\nA userscript library for seamlessly adding chess move arrows to game boards on popular platforms like Chess.com, Lichess.org, and almost anywhere else.\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cimg src=\"assets/example2.png\" alt=\"Lichess.org example\" style=\"max-width: 100%; height: auto;\"\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003cimg src=\"assets/example3.png\" alt=\"Chess.com example\" style=\"max-width: 100%; height: auto;\"\u003e\n    \u003c/td\u003e\n      \u003ctd\u003e\n      \u003cimg src=\"assets/example4.png\" alt=\"A.C.A.S example\" style=\"max-width: 100%; height: auto;\"\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## Installation\n\nTo use UniversalBoardDrawer in your userscript, you need to add the following line to the userscript header\n\n```js\n// @require     https://greasyfork.org/scripts/470417-universalboarddrawer-js/code/UniversalBoardDrawerjs.js\n```\n\n## Usage\n\n### Constructor\n```javascript\nconst BoardDrawer = new UniversalBoardDrawer(boardElem, config);\n```\nThe board element (HTMLElement) needs to be completely initialized and ready, otherwise UniversalBoardDrawer's container might disappear. For accurate results, ensure that the size and position of this element is as close to the visible portion of the board as possible.\n\nThe config (Object) can consists of the following properties:\n\n- `window` (Object): A variable representing the window object.\n- `playerColor` (String): The board orientation, either `'w'` or `'b'`.\n- `parentElem` (HTMLElement, optional): The element where UniversalBoardDrawer's container will be appended. Make sure the element doesn't have `position: relative;` CSS styling. Defaults to `document.body`.\n- `boardDimensions` (Array, optional): The dimensions of the board. Defaults to `[8, 8]`.\n- `zIndex` (Number, optional): The z-index of the UniversalBoardDrawer container. If you don't see UniversalBoardDrawer, try raising this number. Defaults to `1000`.\n- `usePrepend` (Boolean, optional): Specifies whether to prepend the arrows and such to the UniversalBoardDrawer's container. Defaults to `false`.\n- `debugMode` (Boolean, optional): Specifies whether the debug mode is enabled. Enable this to see console logs from UniversalBoardDrawer. Defaults to `false`.\n\n### Methods\n\n#### `createShape(shapeType, coordinates, config)`\nThis method creates a shape on the board with the specified configuration.\n\n- `shapeType` (String): The type of shape to create. `'arrow'`, `'text'` \u0026  `rectangle'` is supported.\n- `coordinates` (Array): An array with two fen position strings representing the start and end positions.\n- `config` (Object, optional): An object containing additional configuration options for the shape.\n\n##### Arrow Configuration Options\n- `lineWidth` (Number): The width of the arrow line.\n- `arrowheadWidth` (Number): The width of the arrowhead.\n- `arrowheadHeight` (Number): The height of the arrowhead.\n- `startOffset` (Number): The offset of the arrow start position.\n- `style` (String): Additional CSS style for the shape element.\n\n##### Text Configuration Options\n- `size`: (Number) This is a multiplier, default size is 1. Double the size is 2.\n- `text`: (String): Text to be displayed,\n- `position` (Array): Position relative to the square. [0,0] center, [1,1] top right, [-1,-1] bottom left.\n- `style` (String): Additional CSS style for the SVG text.\n\n##### Rectangle Configuration Options\n- `style` (String): Additional CSS style for the SVG rectangle\n\n##### Returns:\nAn HTMLElement representing the created shape.\n\n#### `setOrientation(orientation)`\nThis method changes the board orientation.\n\n- `orientation` (String): The orientation to set. Either `w` (white) or `b` (black).\n\n#### `setBoardDimensions(dimensionArr)`\nThis method changes the board dimensions.\n\n- `dimensionArr` (Array): The dimensions to set. The first index is for \"file\" (width) and the second for \"rank\" (height), e.g. `[8, 8]`.\n\n#### `terminate()`\nThis method terminates the `UniversalBoardDrawer` instance by removing all elements and cleaning up resources.\n\n## Example Usage ([chess.com](https://www.chess.com/play/computer))\n\n```javascript\n// ==UserScript==\n// @name        Example userscript\n// @namespace   HKR\n// @match       https://www.chess.com/play/computer\n// @grant       none\n// @version     1.0\n// @author      HKR\n// @description Example userscript\n// @require     https://greasyfork.org/scripts/470417-universalboarddrawer-js/code/UniversalBoardDrawerjs.js\n// @run-at      document-start\n// ==/UserScript==\n\nfunction load(boardElem) {\n    const BoardDrawer = new UniversalBoardDrawer(boardElem, {\n        'window': window,\n        'boardDimensions': [8, 8],\n        'playerColor': 'w', // assuming you're playing as white\n        'zIndex': 99999,\n        'debugMode': true\n    });\n\n    const defaultArrowElem = BoardDrawer.createShape('arrow', ['f6', 'g7']); // create arrow from f6 to g7, with default config\n\n    // create arrow from g5 to e4 with custom config\n    const bigArrowElem = BoardDrawer.createShape('arrow', ['g5', 'e4'], {\n        lineWidth: 25,\n        arrowheadWidth: 75,\n        arrowheadHeight: 55,\n        startOffset: 25,\n        style: `fill: crimson; opacity: 1;`\n    });\n\n    BoardDrawer.createShape('arrow', ['e7', 'b4'], {\n        style: `fill: limegreen;`\n    });\n\n    BoardDrawer.createShape('text', 'a1', {\n        size: 1.5,\n        text: `Hello World!`,\n        style: `opacity: 0.5;`,\n        position: [0, 0.8]\n    });\n\n    BoardDrawer.createShape('rectangle', 'a2');\n\n    setTimeout(() =\u003e bigArrowElem.remove(), 5000);\n\n    setTimeout(() =\u003e BoardDrawer.terminate(), 10000);\n}\n\nconst observer = new MutationObserver((mutationsList, observer) =\u003e {\n    const boardElem = document.querySelector('chess-board');\n\n    if(boardElem) {\n        observer.disconnect();\n\n        load(boardElem);\n    }\n});\n\nobserver.observe(document, { childList: true, subtree: true });\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhakorr%2Funiversalboarddrawer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhakorr%2Funiversalboarddrawer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhakorr%2Funiversalboarddrawer/lists"}