Raconteur CSS question

Authoring Choice-based IF
1

I’m working on a game in Raconteur and am enjoying it so far! I’d like to differentiate between once/insert/replace text and segue text with different colours ala Prospero and Lyreless, but although I’ve poked around with the CSS a little, I can’t work out how to do it - all I’ve managed is altering the anchor-text colour which changes all internal links. I don’t have much experience with CSS so guidance would be most helpful!

2

That behaviour is, sadly, not a function of Raconteur. Every link in Prospero, Cape, and Lyreless that is a “segue” link (ie, leads to another situation) is explicitly marked as such in the source code. I tend to use:

segue = (text, ref) -> a(text).class('segue').ref(ref)

So all of those links will have the “segue” class. And then in the Less file I have a different style for those links:

.segue {
  /* special styles go here */
  &:hover {
    /* and a special hover style, etc */
  }
}
3

Perfect, thank you! That’s working fine.

I’m really liking Raconteur’s flexibility compared to other tools I’ve used! If you’ve got time, it would be very helpful if you could point me in the direction of a code example for setting qualities or post one here. I’ve worked through the tutorials and modifying the sandbox and doing adaptive text is working - getting the qualities working would be the next step in sorting out what I’d like to do with my project!

4

You can look at the documentation on qualities.js for a reference of how it works, which also has a worked example.

5

Didn’t work for me for some reason, I had to do this:

textcycle = (content, ref) -> "<span id='#{ref}' class='cycle'><a href='./_replacer_#{ref}'>#{content}</a></span>"

instead of this:

textcycle = (content, ref) -> span(a(content).replacer(ref)).class("cycle").id(ref)
6

This is a longstanding issue with oneOf: They don’t nest. I believe it’s easy to fix but haven’t had the time. An easy workaround is to just manually stringify them:

span("#{a(content).replacer(ref)}").class("cycle").id(ref)

However, if you’re trying to make a link that replaces itself, this will work fine:

a(content).id(ref).class("cycle").replacer(ref)
7

I’ve got another question about adaptive text. I’m trying to make different text display depending on how wounded the character is, and I’m sure it must be straightforward, but am struggling.

I’ve tried the below code, but in the first one Y displays no matter what the value of character.sandbox.health is, and in the second one X does. What am I doing wrong?

#{if character.sandbox.health > 1 then 'X' else 'Y'}
#{if character.sandbox.health = 1 then 'X' else 'Y'}
8

There’s nothing wrong with the first line, but remember that > means “greater than”, so it will return false if character.sandbox.health is 1; >= means “equal or greater than”. If you’re still getting unexpected results, then you have a bug elsewhere.

With your second line: In Coffeescript, like most programming languages, = is assignment. You want to use == to check for equality. So that line will always produce ‘X’ because it’s setting character.sandbox.health to 1 every time, and evaluating that expression as ‘1’ which is a truthy value.

9

Thank you for the guidance - very much working things out as I go as it’s all pretty new! All working perfectly now.