Howdy, Stranger!

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

How do I create a simple responsive health bar in Harlowe 2.0.1?


This is my first time asking a question in this forum. I've been browsing around for about a week now looking for some way of implementing a visual red health bar to complement the simple HP-text I am currently using in my header (I currently have something like: 20/100 HP) that gets updated with a replace call in the footer of every passage.

I've found many functional ways of implementing this that all seem to work in SugarCube, but I haven't been able to get any of them to work in Harlowe 2.0.1 as of yet. I've tried HTML5-solutions, CSS and JavaScript. Ideally I would also be able to use the same code to setup an XP-bar as well in green.

I'm creating something similar to a tiny dungeon crawler. Considering that the player will level up over time and the maxHP will increase by increments of 10 every time, I will need the HP-bar to be able to reflect this and show a percentage of maxHP in red while also letting the player know that they have 45/130 HP etc. I currently have player stats listed in a left-side menu that is a header and is placed there with the following CSS in case that matters. I'll give some example code (with bits in Swedish) just to give you an idea of what I currently use:
tw-passage tw-include[title="Vänstermenyn"] {
width: 190px;
position: absolute;
top: 0px;
left: -190px;
padding: 2em;
text-overflow: clip;
border: solid Black 0.05em;
border-radius: 25px;
font-family: 'Roboto', sans-serif;
font-size: 16px;
line-height: 140%;
color: Black;
background-color: #FFFFFC;
box-shadow: 0.5em 0.5em 0 #330000;
margin: 0 -0.8em 1em;

I use this simple code to print the player stats:
<RUBRIK4>''Nivå:''</RUBRIK4> []<level|<BR>
<RUBRIK4>''XP:''</RUBRIK4> []<xp|/[]<xpToLevel|<BR>
<RUBRIK4>''HP:''</RUBRIK4> []<hp|/[]<hpMax|<BR>
<RUBRIK4>''Guld:''</RUBRIK4> []<guld|<BR>

And this in the footer to keep it updated:
(replace: ?level)[$playerLevel]
(replace: ?xp)[$xp]
(replace: ?xpToLevel)[$xpToLevel]
(replace: ?hp)[$hp]
(replace: ?hpMax)[$hpMax]
(replace: ?guld)[ $guld]

Also, just to be clear, I am developing a game for use in a school where I work to inspire kids to start coding in Twine. It is important that the game will work on iPads running Safari as well as Chromebooks running Chrome. I'm just throwing that out there in case there are multiple ways of solving this and some might cause compatability issues for certain browsers.

Hope someone can help!

Sign In or Register to comment.