{"id":20364422,"url":"https://github.com/krazete/sgmtree","last_synced_at":"2025-04-12T04:43:51.331Z","repository":{"id":87375301,"uuid":"330295001","full_name":"Krazete/sgmtree","owner":"Krazete","description":"An interactive Skullgirls Mobile skill tree.","archived":false,"fork":false,"pushed_at":"2025-01-05T20:07:58.000Z","size":1825,"stargazers_count":8,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-26T00:12:47.519Z","etag":null,"topics":["customevent","postmessage","skullgirls","svg"],"latest_commit_sha":null,"homepage":"https://krazete.github.io/sgmtree/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Krazete.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2021-01-17T01:54:54.000Z","updated_at":"2025-02-07T07:20:26.000Z","dependencies_parsed_at":"2023-07-28T04:31:16.803Z","dependency_job_id":"3523f8c0-f50d-4612-8249-331d93ece298","html_url":"https://github.com/Krazete/sgmtree","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Krazete%2Fsgmtree","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Krazete%2Fsgmtree/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Krazete%2Fsgmtree/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Krazete%2Fsgmtree/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Krazete","download_url":"https://codeload.github.com/Krazete/sgmtree/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248519465,"owners_count":21117757,"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":["customevent","postmessage","skullgirls","svg"],"created_at":"2024-11-15T00:11:44.662Z","updated_at":"2025-04-12T04:43:51.306Z","avatar_url":"https://github.com/Krazete.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Skullgirls Mobile Skill Tree Calculator\n\nAn interactive Skullgirls Mobile skill tree.\n\n![preview](preview.png)\n\nThe SVG file can be embedded in other websites. It communicates data to the parent window and can receive instructions from the parent window.\n\n## How to Use the SVG\n\n0. (Optional) Save a copy of `sgmtree.svg` and the `sgmtree` folder.\n1. In your HTML, include the SVG.\n    ```html\n    \u003cembed id=\"sgmtree\" src=\"sgmtree.svg\"\u003e\n    ```\n    - If you did not save a copy, replace `sgmtree.svg` with `https://krazete.github.io/sgmtree/sgmtree.svg`.\n2. In your script, listen for message events.\n    ```js\n    window.addEventListener(\"message\", onMessage);\n    ```\n3. In your message listener, filter requests by origin.\n    ```js\n    function onMessage(e) {if (e.origin == window.origin) { /* CODE */ }}\n    ```\n    - If you did not save a copy, replace `window.origin` with `\"https://krazete.github.io\"`.\n4. Handle the message data.\n    ```js\n    {sp: [], cc: [], th: [], fs: 0, at: 0, hp: 0, mandated: false}\n    ```\n    - `sp` and `cc` lists node costs if using only Skill Points and Canopy Coins.\n    - `th` lists node costs if using only Theonite.\n    - `fs`, `at`, and `hp` are the total Fighter Score multiplier, Attack multiplier, and Health multiplier.\n      - See [Krazete/sgm#stats](https://github.com/Krazete/sgm#stats) for an explanation of the Fighter Score formula. Using that notation: `TREE_BOOST` would be 1 + `fs` / 100, `ATK_BOOST` would be 1 + `at` / 100, and `HP_BOOST` would be 1 + `hp` / 100.\n    - `mandated` indicates whether the message was posted as a result of a mandate event.\n5. (Optional) Check or uncheck nodes by sending a mandate event.\n    ```javascript\n    var sgmtree = document.getElementById(\"sgmtree\").getSVGDocument();\n    sgmtree.dispatchEvent(new CustomEvent(\"mandate\", {detail: {ids: [], on: true}}));\n    ```\n    - `ids` is the list of node ids to affect (e.g. `[\"atk1\", \"hp2\", \"juggle\"]`).\n    - `on` is true if checking nodes and false if unchecking nodes.\n    - This feature requires a copy of the SVG on the same site origin. The mandate event will be blocked otherwise.\n\nSee `index.html` and `index.js` for an example of use.\n\n## Notes\n\n- Cost data was manually recorded for each node of each tier on my [SGM Skill Tree Costs](https://docs.google.com/spreadsheets/d/1his-ztPswmUIKaeAeO3a4pmihLn7LsssLTb-6Z3i350) spreadsheet.\n- In the SVG file, nodes are named according to the counterclockwise direction, not tree order. E.g. `sa1` is actually the second tier of Signature Ability 1 while `sa2` is the first tier of Signature Ability 1.\n- To test the message feature locally, you must open your HTML with a local server (e.g. `python -m http.server`) due to CORS policy.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkrazete%2Fsgmtree","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkrazete%2Fsgmtree","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkrazete%2Fsgmtree/lists"}