I'm trying to create a skilltree, in Sugarcube, and I have encountered a small problem.
I'm drawing out the "slots" for each skill (80x80px image), before overlaying the actual "skill" (64x64px image) ontop of that, if that skill has been "bought".
Due to how I have these skills setup, I'm required to use the style-attribute in conjunction with Sugarcube's @-directive to place them accordingly.
However, the issue is this: I need to perform on-click logic to "buy" skills that haven't been "bought" yet.
I've played around with some jQuery to perform onClick functions, but would rather put the logic in the same passage that is drawing the skills.
The <<link [img[]]>> in conjunction with <<replace>> would be well enough to perform the wanted logic, as well as updating the skills, but as far as I have read, there's no way to easily inject the style-attribute to the Image Markup? As mentioned, I need to assign the x & y coords for the skill's image, based on the skill's x & y values.
I could possibly do this with JS/jQuery, but it'd be messy and I would have to guess which skill is which based on their order in the parent element, or check each image's url, which would make it even messier.
Here's my current code to draw the slots & skills:
<<for _i = 0; _i < $skills.length; _i++>>
<<set _name = "slot"+ _i>>
/* Slots */
<<set _slotx = $skills[_i].x, _sloty = $skills[_i].y>>
<<set _slot = "top:" + _sloty + "px; left:" + _slotx+"px; position: absolute;">>
<img @class="_name" src="https://i.imgur.com/cxLc8X2.png" @style="_slot" />
/* Skills */
<<if $skills[_i].isBought && def $skills[_i].url>>
<<set _skillx = $skills[_i].x + 8, _skilly = $skills[_i].y + 8>>
<<set _skill = "top:" + _skilly + "px; left:" + _skillx +"px; position: absolute;">>
<img @src=$skills[_i].url @style="_skill" />
<</if>>
<</for>>