Can I use if - else on css?

Authoring Twine
,
1

Twine Version: 2
[sugarcube 2.36]

Hello,

I would like to create a skill setup for my Twine book. When a variable increases, I want the corresponding CSS code to change accordingly. For example, in this code below.

I want it so that when my “html” variable increases by 5 points, the HTML skill bar fills up by 5 points. I’m not sure how to accomplish this with just if, elseif, and else statements. If I were to use these statements, I would need at least 20 different commands, right? Can you please help me with this?

.container {
width: 100%;
background-color: #ddd;
}

.skills {
text-align: right;
padding-top: 10px;
padding-bottom: 10px;
color: white;
}

.html {width: 90%; background-color: #04AA6D;}
.css {width: 80%; background-color: #2196F3;}
.js {width: 55%; background-color: #f44336;}

Kind Regards

2 Likes
2

I would assign the progress bar element an id attribute, so you can get it in a script via let e = document.querySelector("#id");, then you can set the width via e.style.width = $html + "%";.

Here is some documentation if you need it:

1 Like
3

Except you can’t just do that because of the way SugarCube’s rendering works: it doesn’t exist on the page while it’s in the process of rendering the passage.

You might be better off looking at Chapel’s Meter macros

1 Like
4

Something like Tarek’s solution would work actually, I think! I found a link online that offers sample code for this kinda thing. There’s a lot of other people who asked similar questions, it seems. https://old.reddit.com/r/twinegames/comments/k0nkwl/help_making_a_health_bar/

Here’s some code based on the link above:

<<set $html to 23>>
<<set $css to 88>>
<<set $js to 2>>

<div class="container">
<div class="html skills"></div>
<div class="css skills"></div>
<div class="js skills"></div>
</div>

<<done>>
<<script>>
  $('.html').css('width', State.variables.html + '%');
  $('.css').css('width', State.variables.css + '%');
  $('.js').css('width', State.variables.js + '%');
<</script>>
<</done>>

You can see how the width of the bars changes with the variables now. The <<done>> makes it so that the script only executes after the rest of the passages is loaded iirc. That should take care of the SugarCube rendering thing. At least, it seemed to work when I tested it.

3 Likes
5

That should probably be fixable if you wrap it up in setTimeout(() => {...}, 0).

But using existing progress bars sounds like a better idea.

1 Like
6

Ah, using jQuery. I know it’s included in SugarCube, but I’m more familiar with standard web APIs. And you’re right, the <<done>> macro is a good solution to make sure the page is rendered already.

1 Like
7

I’ll be honest, I usually avoid jQuery and I only used it in my earlier code because the original link used it! Half the time I barely remember Sugarcube comes with it. You could easily do the same thing with vanilla JS:

<<set $html to 23>>
<<set $css to 88>>
<<set $js to 2>>

<div class="container">
<div class="html skills"></div>
<div class="css skills"></div>
<div class="js skills"></div>
</div>

<<done>>
<<script>>
  document.querySelector(".html").style.width = State.variables.html + '%';
  document.querySelector(".css").style.width = State.variables.css + '%';
  document.querySelector(".js").style.width = State.variables.js + '%';
<</script>>
<</done>>

It depends on personal preference, I guess. I slightly like vanilla JS more because it familiarizes you with functions you don’t need to install jQuery to use, but there’s nothing wrong with either.

2 Likes
8

Thank you so much, guys! With your help, I was able to create something that works for me. Have a nice and beautiful day.

Kind Regards

2 Likes