Change background of element based on variable

Question

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 :)

Answer 1

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.

Comments

Thanks for the answer! Could this also be applied to an ui-bar? I mean, changing background-colors of an ui-bar?

---

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.

---

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 :)

---

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. 

---

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