Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

Have been working on something, any way to integrate this in a character sheet?

1528290109

Edited 1528290193
Please see the  Codepen link . I managed to have it running on pure CSS with no JS, now is there any way to integrate something like this in a Roll20 sheet so that the values are driven by attributes?
1528294250

Edited 1528294281
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
I guess the question is what is it supposed to do? I just see a weird green shape.
1528295150

Edited 1528295232
Ziechael
Forum Champion
Sheet Author
API Scripter
Looks like a radar array for stat display (commonly seen in sport sim games like FIFA 18)... works well for comparison overlays.
1528296027

Edited 1528296035
Scott C. said: I guess the question is what is it supposed to do? I just see a weird green shape. Ziechael said: Looks like a radar array for stat display (commonly seen in sport sim games like FIFA 18)... works well for comparison overlays. Ziechiel is correct. Changing the @Spd, @SAtk, @SDef, @HP, @Def and @Atk values changes the radar (that is the part I would like to be attribute-driven). Also note that the  radar's background doesn't load unless you have a cached copy, because Codepen is weird.
1528296434

Edited 1528296911
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
Ah, there's no way for CSS to pull this directly (that I'm aware of). If the values are bounded (have a min and Max) you could do it. EDIT now that I'm on my computer, here's a basic example since I'm not familiar with that %div .each do syntax (can you direct me to where this is detailed): HTML <input class='strength-value' type='hidden' name='attr_strength'> <input class='dexterity-value' type='hidden' name='attr_dexterity'> <div class='strength-representation'></div> <div class='dexterity-representation'></div> CSS .sheet-strength-value[value*="1"] ~ .sheet-strength-representation{ <!-- Do something to the strength representation here --> } .sheet-dexterity-value[value*="1"] ~ .sheet-dexterity-representation{ <!-- Do something to the strength representation here --> } <!-- Repeat for all the possible values of the attributes, this is obviously only practical if there is a reasonable limit on what they can be -->
Scott C. said: Ah, there's no way for CSS to pull this directly (that I'm aware of). If the values are bounded (have a min and Max) you could do it. Well, setting upper and lower limits Is not an issue (0-500 will handle anything the game can generate and then some).
1528296953
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
see my edit, was on my phone before. I don't think that 0-500 is practical for the method I outlined unfortunately.
Scott C. said: see my edit, was on my phone before. I don't think that 0-500 is practical for the method I outlined unfortunately. Yeah, even if I shrink the range to a less generous one, I don't see that working. On the other hand I might be using that method for a separate thing that I was bashing my head against. Btw the HTML section is just a shorthand for the following: <div class='HexRadar'> <div class='tri1'></div> <div class='tri2'></div> <div class='tri3'></div> <div class='tri4'></div> <div class='tri5'></div> <div class='tri6'></div> </div>
1528298466
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
Ah, cool. I've got a section that that would shrink quite handily
1528301626
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
Do you have a link for where the syntax is described?
1528302042

Edited 1528302180
Scott C. said: Do you have a link for where the syntax is described? It's  Haml , based on Ruby. It can be compiled into normal HTML with the top-right menu of the tab in Codepen. I changed it to compiled HTML in my snippet for clarity.
1528302628
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
oh, damn. Means it can't be used in char sheets :(
1528302751
Jakob
Sheet Author
API Scripter
Scott C. said: oh, damn. Means it can't be used in char sheets :( You just need to compile it every time. I write sheets using pug, and it makes the code a lot shorter and readable.
1528303506
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
I mean, true.