Changing the Colour of an {exit:} link

Heya all,

Right now I'm using a set up where all my exits are {exit:} links. For example, going from The Bar to The Bathroom through the Door uses an {exit:ToBarBathroom: door}. But I want my exit tags to be a different colour to my {object} tag.

Wondering there's a way to change the colour of an {exit:text} using {colour:text}.

I've tried a few permutations already, like {exit:ToBarBathroom:{colour:crimson:door} and tried changing the door alias to {colour:crimson:door} but haven't found anything that works properly.

Any suggestions would be greatly appreciated, thanks


Hello.

I'll show you how I found the required information to do this.

First, when the game is running and an exit link is on the screen, open the HTML Tools.

Click on the magnifying glass, then click on an exit link.

This will select the element in the HTML Tools elements viewer.

image


My link's HTML is:

<a style="font-family:Georgia, serif;color:Blue;font-size:12pt;" class="cmdlink exitlink" data-elementid="n_from_room" data-command="go north">north</a>

See how it has two classes? cmdlink and exitlink

That means we can use the Quest function JS.setCss() to set it to whatever color we please, like so:

JS.setCss(".exitlink","color:green")

I chose green, but you can choose whatever color you like.


How to add this code to a script to make the changes actually work all the time

EDIT

I had misinformation here. (Whoops.)

Click here to scroll down to the post with the answer!


PS

I'm wrong. Putting that code in that script doesn't do anything.

Hold on . . .


Ha!

Put it in the game object's script: "Script when entering a room".

image


That's the only place you need it.

It even works when loading a saved game.


I'm not sure why exits don't have an option for link colour like objects do.

Here's a quick script to enable this functionality. In the desktop editor, you could find this function and modify it. If you're on the web editor, I'll post an alternate version below.

  <function name="ProcessTextCommand_Exit" type="string" parameters="section, data">
    exitname = Mid(section, 6)
    text = ""
    colon = Instr(exitname, ":")
    if (colon > 0) {
      text = Mid(exitname, colon + 1)
      exitname = Left(exitname, colon - 1)
    }
    exit = ObjectForTextProcessor(exitname)
    if (exit = null) {
      exits = FilterByAttribute (FilterByAttribute (AllExits(), "alias", exitname), "parent", game.pov.parent)
      if (ListCount (exits) = 1) {
        exit = ListItem (exits, 0)
      }
    }
    if (exit = null) {
      return ("@@@open@@@" + ProcessTextSection(section, data) + "@@@close@@@")
    }
    else {
      if (LengthOf(text) = 0) {
        text = SafeXML(GetDisplayAlias(exit))
      }
      text = ProcessTextSection (text, data)
      if (game.enablehyperlinks) {
        colour = ""
        if (HasString(object, "linkcolour") and GetUIOption("UseGameColours") = "true") {
          style = GetCurrentTextFormat (object.linkcolour)
        }
        else {
          style = GetCurrentLinkTextFormat()
        }
        verbs = GetDisplayVerbs(exit)
        command = LCase(StringListItem(verbs, 0)) + " " + exit.alias
        return ("<a style=\"" + style + "\" class=\"cmdlink exitlink\" data-elementid=\"" + exit.name + "\" data-command=\"" + command + "\">" + text + "</a>")
      }
      else {
        return (text)
      }
    }
</function>

This should:

  • Allow you to set the colour of exit links by giving an exit a linkcolour attribute, like you can for objects
  • Allows {exit:ToBarBathroom:{colour:crimson:door}} to work as a backup
  • Allows {exit:north} to work (a common complaint from new users who expect it to work like that; if you give the wrong name for an exit, it tries it as an alias instead)

If you're on the desktop editor you should be able to change the function. If you don't know how, someone who has the desktop version could help you.

Using the web version, you could add this modified version to your game's `start` script (click here to reveal)
game.textprocessorcommands = game.textprocessorcommands
modified_exit => {
    exitname = Mid(section, 6)
    text = ""
    colon = Instr(exitname, ":")
    if (colon > 0) {
      text = Mid(exitname, colon + 1)
      exitname = Left(exitname, colon - 1)
    }
    exit = ObjectForTextProcessor(exitname)
    if (exit = null) {
      exits = FilterByAttribute (FilterByAttribute (AllExits(), "alias", exitname), "parent", game.pov.parent)
      if (ListCount (exits) = 1) {
        exit = ListItem (exits, 0)
      }
    }
    if (exit = null) {
      game.textprocessorcommandresult = "@@@open@@@" + ProcessTextSection(section, data) + "@@@close@@@"
    }
    else {
      if (LengthOf(text) = 0) {
        text = SafeXML(GetDisplayAlias(exit))
      }
      text = ProcessTextSection (text, data)
      if (game.enablehyperlinks) {
        colour = ""
        if (HasString(object, "linkcolour") and GetUIOption("UseGameColours") = "true") {
          style = GetCurrentTextFormat (object.linkcolour)
        }
        else {
          style = GetCurrentLinkTextFormat()
        }
        verbs = GetDisplayVerbs(exit)
        command = LCase(StringListItem(verbs, 0)) + " " + alias
        game.textprocessorcommandresult = "<a style=\"" + style + "\" class=\"cmdlink exitlink\" data-elementid=\"" + exit.name + "\" data-command=\"" + command + "\">" + text + "</a>"
      }
      else {
        game.textprocessorcommandresult = text
      }
    }
}
dictionary remove (game.textprocessorcommands, "exit:")
dictionary add (game.textprocessorcommands, "exit:", modified_exit)

That looks pretty neat!


Interestingly, you could modify KV's code to do some pretty neat stuff. Like:

JS.setCss(".exitlink[data-elementid=exit124]:not(.disabled)","color:green")

When run, it should change the colour of all currently-enabled links to exit124 (using the exit's name)

Or:

JS.setCss(".exitlink[data-command$=north]:not(.disabled)","color:red")

if you want to do it by alias :)

(note that these will only change the colour of links that were already printed. New links will go back to the default colour. But I think some people might find a use for it)


Froody!

Can you manipulate disabled links, too?


Can you manipulate disabled links, too?

That's why I included the :not(.disabled) selector. Although I think in this case it might not be necessary, as the stylesheet includes a rule that sets color: inherit !important for disabled links; so they will always be the same colour as the containing text unless you give them another !important color.


the stylesheet includes a rule that sets color: inherit !important for disabled links; so they will always be the same colour as the containing text unless you give them another !important color.

I stumbled upon a way to (sort of) handle it before reading your last post.

{color:red{exit:exitname}}

That makes that particular bit of text turn red when disabled, but it doesn't effect the link color.


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

Support

Forums