0 votes
by (190 points)
Hello!

So , in my game I have an element that acts like a second ui-bar, and I was wondering if it would be possible to change the background - and other css qualities of it - depending on a variable of the game?

I don't know if it's a complicated matter, and/or if I explained myself enough, but I'm glad to clarify if needed. Anyway, any help would be very appreciated. Thanks

Oh, and I'm using Twine 2 and Sugarcube 2.18 :)

1 Answer

0 votes
by (63.1k points)

You can use the <<addclass>> and <<removeclass>> macros.  Something like this:

In CSS:

#box {
  height: 10em;
  border: 1px solid #eee;
  padding: 3em;
  margin: 3em;
}

#box.invert {
  background-color: #fff;
  color: #111;
}

#box.danger {
  background-color: red;
}

#box.happy {
  background-color: yellow;
  color: #111;
}

In your passages:

::StoryInit
<<set $boxClass to ''>>

::PassageDone
<<removeclass '#box'>>
<<if $boxClass>>
    <<addclass '#box' $boxClass>>
<</if>>

::a passage
<div id='box'>HELLO!</div>

<<set $boxClass to ''>>

[[some passage]]

::some passage
<div id='box'>HELLO!</div>

<<set $boxClass to 'danger'>>

[[some other passage]]

::some other passage
<div id='box'>HELLO!</div>

<<set $boxClass to 'invert'>>

[[yet another passage]]

::yet another passage
<div id='box'>HELLO!</div>

<<set $boxClass to 'happy'>>

[[a passage]]

*Note, the above TwineScript was written in Twee notation; the double-colon ( :: ) represents a passage.

by (190 points)
Thanks for the answer! Could this also be applied to an ui-bar? I mean, changing background-colors of an ui-bar?
by (63.1k points)
Yes, of course. Just change the CSS and <<addclass>> / <<removeclass>> selectors from #box to whatever you need. I don't know what sort of html structure you're running, so I can't give you specifics.
by (190 points)

I've been using an additional ui-bar, which I created with the following code.

Javascript:

/* Create the Time UI Bar  */
var $timeUiBar = $('<div id="time-ui-bar"></div>').insertAfter("#ui-bar");

var timeTray = $timeUiBar.append('<div id="time-ui-bar-tray"><button id="time-ui-bar-toggle" tabindex="0" title="Toggle the Time UI bar" aria-label="Toggle the Time UI bar" type="button"></button></div>');

var timeBody = $timeUiBar.append('<div id="time-ui-bar-body"></div>');

/* Automatically show the contents of the StoryTime passage in the time-ui-bar-body element. */
postrender["Display Time Sidebar Contents"] = function (content, taskName) {
	setPageElement('time-ui-bar-body', 'StoryTime');
};

CSS:

#time-ui-bar {
   	background-color: yellow;
 	text-align: center;
  	position: fixed;
    z-index: 60;
    top: -2.5%;
  	right:-6%;;
    width: 10em;
 	height:10em;
   	border-radius: 50%;
    margin:0;
    color:black;
    border: .6em inset black;

}
#time-ui-bar-toggle{
  display:none;}

body[data-tags~="no-time"] #time-ui-bar {
	display: none;
} 

(Plus I have a passage named StoryTime, for what I want to include there)

The idea was to change the background color, for example, depending on a variable (in this case, if the story was occuring at night or during the day).  

I tried adapting your code, but I had some difficulty. I hope it's not too much to ask, if you could explain how to make it work. Thanks in advance :)

by (63.1k points)
edited by

It worked fine for me by just replacing the selector.  Complete code I use to test it:

Scripts

/* Create the Time UI Bar  */
var $timeUiBar = $('<div id="time-ui-bar"></div>').insertAfter("#ui-bar");

var timeTray = $timeUiBar.append('<div id="time-ui-bar-tray"><button id="time-ui-bar-toggle" tabindex="0" title="Toggle the Time UI bar" aria-label="Toggle the Time UI bar" type="button"></button></div>');

var timeBody = $timeUiBar.append('<div id="time-ui-bar-body"></div>');

/* Automatically show the contents of the StoryTime passage in the time-ui-bar-body element. */
postrender["Display Time Sidebar Contents"] = function (content, taskName) {
	setPageElement('time-ui-bar-body', 'StoryTime');
};

CSS:

#time-ui-bar {
   	background-color: yellow;
 	text-align: center;
  	position: fixed;
    z-index: 60;
    top: -2.5%;
  	right:-6%;;
    width: 10em;
 	height:10em;
   	border-radius: 50%;
    margin:0;
    color:black;
    border: .6em inset black;

}
#time-ui-bar-toggle{
  display:none;
}

body[data-tags~="no-time"] #time-ui-bar {
	display: none;
} 

#time-ui-bar.evening {
  background-color: orange;
}

#time-ui-bar.weird {
  background-color: red;
}

Passages:

::StoryInit
<<set $timeOfDay to ''>>

::PassageDone
<<removeclass '#time-ui-bar'>>
<<if $timeOfDay>>
    <<addclass '#time-ui-bar' $timeOfDay>>
<</if>>

::morning
<<set $timeOfDay to ''>>

[[It's getting late.|late]]

::late
<<set $timeOfDay to 'evening'>>

[[It's getting weird.|weird]]

::weird
<<set $timeOfDay to 'weird'>>

[[It's morning.|morning]]

Just use whatever variables and class names you want. That's a cool little ui element, by the way. 

by (190 points)
You're right it does work. I made a mistake in the PassageDone part, but I understand how it works now. Thanks, this opens up a world of possibilities for me :D
Welcome to Twine Q&A, where you can ask questions and receive answers from other members of the community.

You can also find hints and information on Twine on the official wiki and the old forums archive.

See a spam question? Flag it instead of downvoting. A question flagged enough times will automatically be hidden while moderators review it.
...