https://github.com/krazete/sgmtree

An interactive Skullgirls Mobile skill tree.
https://github.com/krazete/sgmtree

customevent postmessage skullgirls svg

Last synced: about 2 months ago
JSON representation

An interactive Skullgirls Mobile skill tree.

• Host: GitHub
• URL: https://github.com/krazete/sgmtree
• Owner: Krazete
• Created: 2021-01-17T01:54:54.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2025-01-05T20:07:58.000Z (5 months ago)
• Last Synced: 2025-03-26T00:12:47.519Z (3 months ago)
• Topics: customevent, postmessage, skullgirls, svg
• Language: JavaScript
• Homepage: https://krazete.github.io/sgmtree/
• Size: 1.74 MB
• Stars: 8
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Skullgirls Mobile Skill Tree Calculator

An interactive Skullgirls Mobile skill tree.

![preview](preview.png)

The SVG file can be embedded in other websites. It communicates data to the parent window and can receive instructions from the parent window.

## How to Use the SVG

0. (Optional) Save a copy of `sgmtree.svg` and the `sgmtree` folder.

1. In your HTML, include the SVG.

    ```html

    

    ```

    - If you did not save a copy, replace `sgmtree.svg` with `https://krazete.github.io/sgmtree/sgmtree.svg`.

2. In your script, listen for message events.

    ```js

    window.addEventListener("message", onMessage);

    ```

3. In your message listener, filter requests by origin.

    ```js

    function onMessage(e) {if (e.origin == window.origin) { /* CODE */ }}

    ```

    - If you did not save a copy, replace `window.origin` with `"https://krazete.github.io"`.

4. Handle the message data.

    ```js

    {sp: [], cc: [], th: [], fs: 0, at: 0, hp: 0, mandated: false}

    ```

    - `sp` and `cc` lists node costs if using only Skill Points and Canopy Coins.

    - `th` lists node costs if using only Theonite.

    - `fs`, `at`, and `hp` are the total Fighter Score multiplier, Attack multiplier, and Health multiplier.

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

    - `mandated` indicates whether the message was posted as a result of a mandate event.

5. (Optional) Check or uncheck nodes by sending a mandate event.

    ```javascript

    var sgmtree = document.getElementById("sgmtree").getSVGDocument();

    sgmtree.dispatchEvent(new CustomEvent("mandate", {detail: {ids: [], on: true}}));

    ```

    - `ids` is the list of node ids to affect (e.g. `["atk1", "hp2", "juggle"]`).

    - `on` is true if checking nodes and false if unchecking nodes.

    - This feature requires a copy of the SVG on the same site origin. The mandate event will be blocked otherwise.

See `index.html` and `index.js` for an example of use.

## Notes

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

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

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