How do you change the color of text (like in Settings)

(First of all, is it command line version only?)

  1. How do you do an if statement
  2. Is there a way to make a turn counting passage that every time you click it the text color changes like a switch (black to grey)?
    ex: "if 'passage' = clicked, then color=grey" and then, "if 'passage' = clicked, then color=black" (btw i want a global textcolor change so i'll just use css for that)

The format for 'if' statements is relatively simple. Using your example:

{if passage=clicked:{@color=grey}}

When the statement is parsed (when the section containing it is loaded), if the attribute passage has the value "clicked", the attribute color will be set to "grey".

However, your question confuses me a little so I'm not sure that an if statement is what you actually want. If you're talking about modifying the game's CSS while it is running, you will probably need to use javascript. Off the top of my head I made a passage like this to cycle through a few different text colours, but there's probably much more efficient ways to do this.

    squiffy.set('color', {
        'grey': 'black',
        'black': 'red',
        'red': 'green'
    }[squiffy.get('color')] || 'grey');
    ($('#mystyle').length ? $('#mystyle') : $('<style>', {id: 'mystyle'}).appendTo('head')).text('#output p { color: ' + squiffy.get('color') + '}');

Color has been set to {color}.

Is it ok if you just... do the thing for me?

< p style="font-family:verdana;text-align:center">Change Color: [Black] or [Grey]
< hr>
< h4 style="text-align:center;">[[How To Play]]ㅤㅤ[[Settings]]ㅤㅤ[Play]ㅤㅤ[[Credits]]

If you're pasting code on the forums, but a line of three backticks (```) above and below it. That way the forum won't mess up any HTML.

If you're doing something like that, it might be easier to use plain HTML/CSS. However, making stuff stable is Squiffy is a little difficult.

Method 1 - will reset to default colour when loading a saved game

    window.setTextColor = function (color) {
        ($('#mystyle').length ? $('#mystyle') : $('<style>', {id: 'mystyle'}).appendTo('head')).text('#output p { color: ' + col + '}');

<p style="font-family:verdana;text-align:center">Change Color: <a onclick="setTextColor('black')">Black</a> or <a onclick="setTextColor('grey')">Grey</a>.</p>
<h4 style="text-align:center;">[[How To Play]]ㅤㅤ[[Settings]]ㅤㅤ[Play]ㅤㅤ[[Credits]]</h4>

You can make the changes persist in a saved game by changing 'head' to squiffy.ui.output - but then it will reset each time you clear the screen, which is less than ideal.
There are a couple of ways around this, but they're all pretty ugly code that would be quite difficult to understand.

Hey, would this code: $("body").css("color", "yellow"); work if you just add an onclick function?

Looks like it does :)

I was surprised by that; I assumed there were more specific rules already in place that would override it.
Although you still have the problem that it only lasts as long as the window is open; so when reloading a saved game the colours will go back to the default.

Now, just gotta add an onclick...

This topic is now closed. Topics are closed after 60 days of inactivity.