Add skills leveling

[Nanyx]

Allow a Skill / SkillTree to have level (like Diablo 2) and allowing to gate the next skill "Tier" (like Borderlands) with a value.

Even if I dont need this feature for my actual work, I thought it would be a nice enhancement to the actual awesome lib of your. If I find some time, I might look into it.

[andrico1234]

Hey Nanyx,

Thanks for creating this issue. I've considered this feature before and it's great to see that others do as well.

I would very much like to see a small proposal as to how this could look in terms of UI. And would like consideration interms of how to handle data changes. Making it backwards compatible would be very important.

Let me know your thoughts

[gaoryrt]

Left click - level up Right click - level down

{
        id: 'example',
        title: 'Example',
        tooltip: {
          content: 'description of this skill'
        },
		level: [
			{
				name: 'xx beginner',
				content: 'you can crawl',
				icon: ''
          	},
			{
				name: 'xx advanced',
				content: 'you can walk',
				icon: ''
          	},
			{
				name: 'xx master',
				content: 'you can run',
				icon: ''
        	},
		]
        children: [],
      }

[andrico1234]

@gaoryrt I like this idea. I also like the consideration about the update in content based on the level.

Other things we need to consider would be:

1. How do we display the current level? Is it a case of a little circle on the corner of the skill, the current level?
2. Does the level default to 1 when the skill gets selected initially, and reverts to 0 when unselected?
3. Keyboard navigation by default is an excellent idea, but we need to consider when we add the event listener. There also needs to be a way to increment/decrement via the mouse. (hovering over the number could reveal a simple - + tooltip that's hooked into the current level of a skill
4. How do we save and load this data? Save in localstorage still, what would the shape of the data look like?

It would be amazing if you could whip up a POC. I'm not expecting it to be perfect or nail all the points, but I'd love to see it in action.

Would you be able to give it a shot, @gaoryrt ?

[gaoryrt]

1.How do we display the current level? Is it a case of a little circle on the corner of the skill, the current level?

Model / View / Controller should be separated. How it looks by default doesn't matter if you provide the references to the choosing status. Even no graphic display of the level would be accepted. Personally, I prefer different icons in different level.

2.Does the level default to 1 when the skill gets selected initially, and reverts to 0 when unselected? 4.How do we save and load this data? Save in localstorage still, what would the shape of the data look like?

I noticed that the id would be assigned to string "selected" when it gets selected. This strategy could be reused, simply turn string into a number which represents the current index of this level array.

appearance	localstorage
skill unselected	undefined
skill selected / level 1	0
skill selected / level 2	1
skill selected / level 3	2

Etc.

[gaoryrt]

Model / View / Controller should be separated. It would be nice if we can customize the structure of every skill:

<SkillTree>
	<Skill>
		{({
			id,
			title,
			tooltip,
			level,
			children,
			parent,
			icon,
			selected,
			curLevel
		}) => (
			<div
				id={id}
				className={
					selected
						? style.selected
						: style.unselected
				}
			>
				<h1>{title}</h1>
				<img src={icon}>
				{curLevel && <p>level {curLevel + 1}</p>}
			</div>
		)}
	</Skill>
</SkillTree>

Seems like another feature request.

[andrico1234]

Thanks for this! It's given me a bit to think about.

Feel free to fork BST and explore the idea. If not, I'd like to look into this, but I likely won't be able to work on a big feature like this for the next month or two