Responsive skill tree
Hello, I am trying to create website for me and my friends to create builds based on skill tree, but I am stuck on problem how to do it in responsive way, depending on character - tree can be big, did anyone had similar case? I looked in internet and in other game for example POE ( https://poeplanner.com/ ) they are putting skill tree in canvas but I could not find any tutorial how to get similar effect. Thanks in advance for the help ❤️
PoE Planner
PoE planner is an online tool to plan your passive skill tree, equipment and skills for Path of Exile.
Solution:Jump to solution
I would most likely use a canvas too, react wont help you much on that front
6 Replies
Solution
I would most likely use a canvas too, react wont help you much on that front
@Vincent do you have maybe some links to tutorial how to mount such a stuff or something similar because i could not find such a stuff ?
No sorry. I don't watch tutorials really. I think it's a bad way to learn.
But there's not much to "mount". You put a canvas in your tsx with a ref on it so you can access it through your JS. Then you just draw to it as you please
okay fair enough
you can checkout my site https://truefinals.com/
True Finals
Tournaments: now on easy mode
in general i 100% agree react isnt gunna make drawing graphics or anything like that easy
my tournaments work with the game boxes which are just divs
and then i made a custom Arrow component which takes as its props a start element id and an end element id. it also takes a parameter which says which direction to leave the start element from and which direction to enter the end element from
but pretty much this is all done with custom svg calculations inside a useEffect()
it has to be inside a useEffect() because I use getBoundingClientRect() to find the centers of the start / stop elements
there is some trickery that needs to be done to reload the arrows if the elements move, but in my use case, the game boxes almost never move so its easy enough to wrok around