MapleStory 2 Interactive Skill Charts

MapleStory 2 Interactive Skill Charts is a set of web components which, with very little effort, let you add an interactive skill chart to your website or blog. This way your viewers can interact with the chart and see exactly what bonuses your chosen skill gives. So much better than just a screenshot!

Try it out!

How do I put this on my site or blog?

Head over to the website and use the editor to generate your own skill chart. Just paste the resulting code into your website or blog and you're good to go!

Advanced usage (editable)

So you want the editor on your site? Not a problem, my own site above use exactly these steps shown below. But first, let's start with a warning.

This repository use semver versioning, but only for basic charts usage! Breaking changes to the below usages can happen between any minor version (but not patch).

If you want to use the editor, it's recommended to import the scripts with a minor version (make sure you check for the most recent version).

Before:

<script src="https://unpkg.com/maplestory-skills@^2/dist/maplestory-skills/maplestory-skills.esm.js" type="module"></script>
<script src="https://unpkg.com/maplestory-skills@^2/dist/maplestory-skills/maplestory-skills.js" nomodule></script>

After:

<script src="https://unpkg.com/maplestory-skills@~2.0/dist/maplestory-skills/maplestory-skills.esm.js" type="module"></script>
<script src="https://unpkg.com/maplestory-skills@~2.0/dist/maplestory-skills/maplestory-skills.js" nomodule></script>

With that out of the way, you can make the skill chart editable by simply adding the attribute editable to the chart.

Before:

<ms-archer arrow-stream="3" arrow-barrage="3" rapid-shot="10"></ms-archer>

After:

<ms-archer editable arrow-stream="3" arrow-barrage="3" rapid-shot="10"></ms-archer>

Skill points counter

There's also another component which helps you keep track of the amount of points left to distribute.

<ms-extra-counter></ms-extra-counter>

All this does is print the number of points left, it's up to you to position and style it wherever you want on your site.

Get data from the editor

Every time the user makes a change the chart emits a skillchanged event with an object containing an array of all the skills and how many points are put (or not) into it, as well as any possible extra values (e.g. runeblade sigil). Subscribe to this event to get the data you want:

document.querySelector("ms-archer").addEventListener("skillchanged", function(evt) {
  console.log(evt.detail);
});

evt.detail is of type SkillChangeEvent.

Contributing

Create a New Issue where you outline your intentions. After an agreement fork this repository, create a new branch, make your changes and then submit a pull request.