How to make a stat bar

Authoring Twine
1

Hello. So i’ve learned how to make opposed stats using twine (sugarcube) thanks to this tutorial: Choicescript-Like Stats Screen And Opposed Pair Stats In Twine - #6 by JoshGrams. But now, I’m wondering how to make a stat bar that is not opposed. There is just one stat, its represented in a horizontal bar, and you’re measuring it against 100%. Has anyone done this before? I know you’ll need css and a widget. But that’s all I have to go on. I’m still trying to reverse engineer the widget that the tutorial used for opposed stats but thats slow going and I’m not sure I’m going in the right direction. Any help would be appreciated. Thanks in advance.
(Twine Version used is: 2.3.13)

2

You have some options:
ChapelR’s “Meter” macro: Custom Macros
Demoed here: Custom Macros Demo
(It’s quite complicated, but has more options to play with.)

I fiddled with someone else’s code to make a simpler version:
widget:

<<widget "percent_stat">>
<div class="percentBar">
	<<= '<div class="percentLeftBg" style="width:'+$args[0]+'%">&nbsp;</div>'>>
	<div class="percentBarText">$args[1] $args[0]%</div>
</div>
<</widget>>

CSS:

.percentBar {
    width: 10em;  /* Overall stat-bar width (in 'm' characters) */
  	background: Gainsboro;  /* Right-side background color */
  	color: black;
  	font-size: 0.7em;
  	font-weight: bold;
  	margin: 0.3ex auto;
  	position: relative;
}

.percentBar div {
    position: relative;
  	z-index: 1;
}
.percentBar div.percentBarText {
    text-align: center;
}

.percentBar .percentLeftBg {
    position: absolute;
  	top: 0px;
  	left: 0px;
  	background: #49d470;  /* Left-side background color */
  	z-index: 0;
}

usage:
<<percent_stat $stat "Stat">>

You can also check out “progress bar” for inspiration on the CSS part.
https://www.w3schools.com/w3css/w3css_progressbar.asp

Hope this helps.

2 Likes
3

Thank you so much! I will look into the resources provided.