›

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In Register

Categories

Alternating passage link colors?

CMGCMG
in Help! with 1.x
I'm working on a game where I want all the passage links to be able to switch between two colors. They begin as the default blue color, but then let's say the player would be able to turn on a light. I would want every passage link throughout the game to then change to yellow. Then if the player turns off the light again, the links change back to blue, and so on, back and forth.

The only way I know how to change passage link color is by making a stylesheet, and I'd basically need something like:

<<if $light is 1>>color:yellow<<else>>color:blue<<endif>>

But that sort of coding doesn't seem to work in stylesheets.

It'd also be nice to figure out how to do this and set it to a tag so that only the links in tagged passages change color, but for now I just need to figure out the basics. Does anyone know if this is possible? Any help would be greatly appreciated!

Comments

  • greyelfgreyelf
    There are a number of ways to do this depending on many things, one of them being which Story Format you are using.
    One way if your using Sugarcane is to use Leon's tag related macros to conditionally change the tags of the current passage.

    A simple example:
    (note: Using TWEE notation. Lines starting with a double colon :: indicate a new passage with a related title, a title ending with [tags] indicates passage with the indicated tags added to it)

    :: AddTag Script [script]
    version.extensions["toggletagMacros"]={major:1,minor:1,revision:0};macros["toggletag"]={handler:function(a,b,c){var p=e(a);var d=document.body;if(p){var t=p.getAttribute("data-tags");var i=t.indexOf(c[0]);if(b!="addtag"&amp;&amp;i>=0){var r=t.replace(c[0],"");p.setAttribute("data-tags",r);d.setAttribute("data-tags",r);}else{if(b!="removetag"&amp;&amp;i<0){var r=t+" "+c[0];p.setAttribute("data-tags",r);d.setAttribute("data-tags",r);}}}function e(f){while(f.parentNode&amp;&amp;!f.classList.contains("passage")){f=f.parentNode;
    }if(f!=document&amp;&amp;f.getAttribute("data-tags")){return f;}return null;}}};macros["addtag"]=macros["toggletag"];macros["removetag"]=macros["toggletag"];

    :: Stylesheet [stylesheet]
    body[data-tags*="dark"] .internalLink {color: green;}
    body[data-tags*="light"] .internalLink {color: orange;}

    :: Start
    Select one of the following links.
    [[View the next passage with the lights OFF (Use the passages existing tag)|Passage 1][$lights to false]]
    [[View the next passage with the lights ON (Use marco to add tag to passage)|Passage 1][$lights to true]]

    :: Passage 1 [dark]
    <<if $lights>><<addtag "light">><<endif>>\
    The description of passage 1
    [[Passage 2]]

    :: Passage 2
    The description of passage 2
    I assigned any passages that start out dark the "dark" tag, in my example this is Passage 1. When Sugarcane displays a passage with tags it adds those tags to a couple of places in the generated HTML one being the HTML body element. You can use this fact when creating the selectors for your CSS.

    eg: <body> changes to <body data-tags="dark"> when viewing Passage 1, and the related CSS selector would be body[data-tags*="dark"]

    Using Leon's addtag macro you can conditionally add a tag to the passage currently being displayed, in the example I add the "light" tag if the $lights variable is true. This also changes the HTML body element to include the "light" tag.

    eg. <body data-tags="dark"> changes to <body data-tags="dark light"> when viewing Passage 1 while $lights is true, and the related CSS selector would be body[data-tags*="light"]

    Because Passage 1 starts out "dark" and then become "light" in my example it can end up with both tags at the same time, this is why I places the "dark" related CSS rule before the "light" one in the stylesheet. I could of used the <<removetag>> macro to get around the issue but I preferred not to.

    I hope that made some sense.
  • CMGCMG
    It works! Thank you so, so much! I would've never found that script by myself!

    In the end I went with <<if $dark is 1>><<addtag "dark">><<endif>>

    That way I can toggle this single variable between 1 and 0 in the passage where the player flips the switch. I've been using this system for other elements in the game and it seems to work here too.

    Again, thanks so much for your help! This was my biggest trouble and now it should be smooth sailing.
Sign In or Register to comment.