[Twine 2][Sugarcube 2] - Define a CSS Class with a Variable

Question

So in the game I'm working on, every character has their own style of textboxes defined in CSS. For example:

.tom {
color: green;
}

.bob {
color: blue;

.lisa {
color: pink;
}

There's more to the code than that, but I'm at work, so that'll do. Now whenever I have a character speak, it looks like this:

@@.tom;
<<pro $tom.profile>>$tom.name:<hr><<img $tom.img>>
Hello blah blah blah...@@

That works great. <<pro>> and <<img>> are macros I set up for handling profile and full size images easier. What I'd like to do is condense everything down to a single macro, however I can't seem to be able to get a variable to be accepted as a style.

<<nm $tom "Hello world">>

<<widget "nm">>
  /* $tom.style = "tom" */
  <<set _x = $args[0].style
  
  @@._x;
  <<pro $args[0].profile>>$args[0].name<hr><<img $args[0].img>>
    $args[1]@@
<</widget>>

I've tried writing this several different ways, including <div id=_x> but I cannot get the style to activate. Replacing _x with something like @@.tom works fine.

This is probably stupid user error, but I'd really appreciate some help!

Answer 1

The custom styles markup does not currently support the use of variables, so you'll have to use the Stupid Print Trick™ to compose the markup, so that it contains the class before it's rendered.  For example, something like the following should work:

<<widget "nm">>
\<<= '@@.' + $args[0].style + ';\n<<pro $args[0].profile>>$args[0].name<hr><<img $args[0].img>>\n$args[1]\n@@'>>
\<</widget>>

NOTE: The newline character escape ("\n") takes the place of hard returns within the string.

Comments

I've never had a reason to use the print macro until now, but that works perfectly. I never would have figured that one out on my XD

Thanks so much!!!