Is it possible to have text that stays in one place (like a clickable status bar) at the top, while the text underneath can be scrolled up and down as usual?
Hello.
This stays up top, as long as you don't use @clear:
<div style="width:auto;border:1px solid black;padding:4px;color:white;background:black;position:fixed;top:0px;right:50%;" id="status">Your health: {health}</div>
NOTE: You can't see it in the editor. You have to preview the game.
Here's the testing code:
@title Status bar
set("health", 100);
<div style="width:auto;border:1px solid black;padding:4px;color:white;background:black;position:fixed;top:0px;right:50%;" id="status">Your health: {health}</div>
[click]
[click]:
Don't click.
You shouldn't.
blah
blah
blah
blah
blah
blah
blah
blah
[blah]
[blah]:
Don't blah.
You shouldn't.
blah
blah
blah
blah
blah
blah
blah
blah
blah
EDIT:
Just add that line after each time you clear for a dirty fix:
@title Status bar
set("health", 100);
<div style="width:auto;border:1px solid black;padding:4px;color:white;background:black;position:fixed;top:0px;right:50%;" id="status">Your health: {health}</div>
[click]
[click]:
Don't click.
You shouldn't.
blah
blah
blah
blah
blah
blah
blah
blah
[blah]
[blah]:
@clear
set("health", 50);
<div style="width:auto;border:1px solid black;padding:4px;color:white;background:black;position:fixed;top:0px;right:50%;" id="status">Your health: {health}</div>
Don't blah.
You shouldn't.
blah
blah
blah
blah
blah
blah
blah
blah
blah
K.V., that is very helpful! Thanks!
I played with your examples and came up with this to update what the status bar says each time:
@title Status bar
@set health=50
@set stamina=40
[[]]:
<div style="width:auto;border:1px solid black;padding:4px;color:white;background:black;position:fixed;top:0px;right:50%" id="status">Health: {health}<br>Stamina: {stamina}</div>
[[Click]] to make your health and stamina go up.
[[Click]]:
@inc health 5
@inc stamina 5
Blah
Blah
Blah
Blah
Blah
Blah
Blah
Blah
Is it possible to put the status bar completely above the game text, in its own pane or whatever it's called? I'd like to be able to make a status area that is taller than one line, without worrying about overlap.
Is it possible to put the status bar completely above the game text, in its own pane or whatever it's called? I'd like to be able to make a status area that is taller than one line, without worrying about overlap.
Yes, but I'm not that well-versed in JavaScript.
I'll play around with it, though.
I should be able to come up with something.
Also, I may be mistaken, but I don't think [[]]: will keep that on the screen if you use @clear.
In fact, that appears to be what's making that element keep printing on top of itself.
Wow, thank you! (If you don't have time or whatever, don't worry about it.)
Re: "Also, I may be mistaken, but I don't think [[]]: will keep that on the screen if you use @clear.
In fact, that appears to be what's making that element keep printing on top of itself."
Oh! I see. Is there a better way to make the numbers update? Or would I have to use @clear to make that happen?
Getting it working a little better:
@title Status bar
@set health=50
@set stamina=40
squiffy.ui.write("<div style='width:auto;border:1px solid black;padding:4px;color:white;background:black;position:fixed;top:0px;right:50%' id='status'>Health: <span id='hlth'>{health}</span><br>Stamina: <span id='stm'>{stamina}</span></div>");
squiffy.story.go("begin");
[[begin]]:
[[Click]] to make your health and stamina go up.
[[Click]]:
@inc health 5
@inc stamina 5
squiffy.story.go("begin");
[[]]:
jQuery('#hlth').html(squiffy.get("health"));
jQuery('#stm').html(squiffy.get("stamina"));
The functions are weird, but I think I'm catching on.
I'm about to try to make the status bar separate from the text.
Be right back.
Here you go:
@title Status bar
@set health=50
@set stamina=40
squiffy.ui.write("<div style='border:1px solid black;padding:4px;color:white;background:black;position:fixed;box-shadow:0px 0px 12px gray;width:42%;' id='status'>Health: <span id='hlth'>{health}</span> | Stamina: <span id='stm'>{stamina}</span></div>");
squiffy.story.go("begin");
[[begin]]:
[[Click]] to make your health and stamina go up.
[print some text]
[print some text]:
var i = 20;
while (i>0){
i--;
squiffy.ui.write("<br/>All work and no play makes KV a dull boy.<br/>");
}
if (i == 0){
squiffy.story.go("begin");
}
[[Click]]:
@inc health 5
@inc stamina 5
squiffy.story.go("begin");
[[]]:
jQuery('#hlth').html(squiffy.get("health"));
jQuery('#stm').html(squiffy.get("stamina"));
jQuery('#status').insertBefore(jQuery('#squiffy-header'));
Thank you, K.V.!
It looks like, when I try to make it multiple lines tall, it is in front of the other text, instead of above it (for instance, if you replace | with <br>). Maybe this is something I have to change on index.html, to either move the status bar up, into its own container (not sure if that is the right word), or move the main story text down?
Also, can I use a link, and use conditional text, in the status bar? Something like this
squiffy.ui.write("<div style='border:1px solid black;padding:4px;color:white;background:black;position:fixed;box-shadow:0px 0px 12px gray;width:42%;' id='status'>Health: <span id='hlth'>{health}</span> | Stamina: <span id='stm'>{stamina}</span><br><span id='click1'>[[Click]] again.</span><br><span id='click2'>{if seen Click:[[Click]] yet again.}</span></div>");
except that this doesn't work, because [[Click]] does not appear as a link, and the conditional text [[Click]] yet again. doesn't appear at all.
Hmm...or maybe there's a way to define a function to update the status bar. The function would rewrite the text in it. Then you could call that function from a master section. Something like this, except this doesn't work:
function updateStatus() {
document.getElementById("statusbar").innerHTML = "Health: {health} | Stamina: {stamina}<br>[[Click]] again.<br>{if seen Click:[[Click]] yet again.}</span>";
}
You're at the point I made it to, alice-blue, and I was having the same luck as you.
You could probably open up the developer options and find the HTML code for [[Click]] (or use squiffy.story.go("Click") as the onclick for a link or button right there).
As far as the if goes, you're using that in the JS code, but JS doesn't understand the Squiffy text-processor syntax.
(It got really complicated really fast, right?)
Also, when I created a new element (container) and moved things around to keep the status bar from 'floating' on top of the text, it upset Squiffy very much.
This, I believe, is because I'm not that good with JS to begin with, plus Squiffy seems to have a modified jQuery set up (or something funky of that nature).
I bet someone who knows Squiffy JS swoops in and drops some code us sometime soon.
"I bet someone who knows Squiffy JS swoops in and drops some code us sometime soon."
Maybe so! Thank you for your help.
This is what I've got going on now:
@title Status bar
@set health=50
@set stamina=40
squiffy.ui.write("<div style='border:1px solid black;padding:4px;margin-bottom:4px;color:white;background:black;position:fixed;top:0%;box-shadow:0px 0px 12px gray;width:42%;' id='status'>Health: <span id='hlth'>{health}</span> | Stamina: <span id='stm'>{stamina}</span></div>");
jQuery('#status').appendTo(jQuery('#squiffy'));
jQuery('#squiffy').css('margin-top', '70px');
jQuery('#restart').appendTo(jQuery('#status'));
jQuery('#restart').css('right', '4px');
jQuery('#restart').css('position', 'absolute');
squiffy.story.go("begin");
[[begin]]:
[print some text]
[print some text]:
var i = 20;
while (i>0){
i--;
squiffy.ui.write("<br/>All work and no play makes KV a dull boy.<br/>");
}
if (i == 0){
squiffy.story.go("begin");
}
[[Click]]:
@inc health 5
@inc stamina 5
squiffy.story.go("begin");
[[]]:
//jQuery('#hlth').html(squiffy.get("health"));
//jQuery('#stm').html(squiffy.get("stamina"));
jQuery("#status").html("Health: "+squiffy.get("health")+" | Stamina: "+squiffy.get("stamina")+"<br><a class=\"squiffy-link link-section\" data-section=\"Click\" role=\"link\" tabindex=\"0\">Click</a> to increase health and stamina.<br>");
It's easy to test stuff here:
http://docs.textadventures.co.uk/squiffy/scratchpad/
...although it's a little funky with me moving elements around in this example.
It seems like something along these lines (links at the top, forming a sort of status bar area) was a planned feature at some point: https://github.com/textadventures/squiffy/issues/14
And it would be a nice feature to have. But (at least now, while it's not a feature) it definitely seems complicated to keep the status text from overlapping the other text. So, thank you, but please don't feel obligated to keep working on this for my sake. I do have another idea that I could do instead.
Weird, when I run it with the squiffy.story.go I almost need to make two sections per actual section and the second run of the above header the "Restart" link disappears. This is what I ran:
@set money = 5000
<center><h1 style="font-size:300%"><b>Rebel Lyfe!</b></h1></center>
<center><u>By: Padrinos</center></u>
<center>Version 1.1.1</center><br>
@set life = 1
<p>Rebel Lyfe! is an interactive fiction game blah blah blah </p>
<p>Let see how much money you can make. Being killed or ending up in jail will end your game.</p>
<p>Click through the story and try out the various paths you can take. </p><br>
[[Enjoy]]
[[Enjoy]]:
First off, tell me your character’s name please?
Type your name here
<textarea id="text_first"></textarea><br>
[[Continue:]](cname)
[[cname]]:
squiffy.set("textline", jQuery("#text_first").val());
Welcome {textline}, enjoy the game.<br>
[[Start]](start)
[[start]]:
@clear
squiffy.ui.write("<div style='border:1px solid black;padding:4px;margin-bottom:4px;color:white;background:black;position:fixed;top:0%;box-shadow:0px 0px 12px gray;width:42%;' id='status'>Rebel Lyfe!</span> | Money: <span id='stm'>{money}</span></div>");
jQuery('#status').appendTo(jQuery('#squiffy'));
jQuery('#squiffy').css('margin-top', '70px');
jQuery('#restart').appendTo(jQuery('#status'));
jQuery('#restart').css('right', '4px');
jQuery('#restart').css('position', 'absolute');
squiffy.story.go("start1");
[[start1]]:
<img src="http://i.imgur.com/rB3e4uK.jpg" alt="Civ" style="width:800px;height:500px;"><br>
<p>You find yourself sitting in a camouflage offroad truck outside the large town of Kavala. Next to a medium sized quarry, you are still a little stunned by your last encounter. You killed several men before a group of rebels came storming into the area. Outnumbered and outgunned, you dropped your weapon and waited for their response. The rebel leader looked around at all the bodies on the ground and praised you for your determination and ferocity. He advised you when you are tired of picking apples to come and find him.</p>
<p>Looking at the dusty old wooden bins of raw ore, you whisper to yourself, <i>”I am sick of this. So much work with so little payout. Grrrrr”</i></p>
<p>You then look over at the dead bodies on the ground and smile. You put in some work today {textline}, and you did well. The small submachine gun lying on the ground is ok, but if you are going to embrace the Rebel Lyfe, you are going to need better equipment.</p>
<p><i>”That’s it. Let’s go earn some real money.”</i></p><br>
<b>Money = {money}</b>
[[Next]](mainroad)
[[mainroad]]:
@clear
squiffy.ui.write("<div style='border:1px solid black;padding:4px;margin-bottom:4px;color:white;background:black;position:fixed;top:0%;box-shadow:0px 0px 12px gray;width:42%;' id='status'>Rebel Lyfe!</span> | Money: <span id='stm'>{money}</span></div>");
jQuery('#status').appendTo(jQuery('#squiffy'));
jQuery('#squiffy').css('margin-top', '70px');
jQuery('#restart').appendTo(jQuery('#status'));
jQuery('#restart').css('right', '4px');
jQuery('#restart').css('position', 'absolute');
squiffy.story.go("mainroad1");
[[mainroad1]]:
<p>Pulling out of the mine, you jump on the main road and start heading eastbound, happy that you have made a decision and glad to be away from Kavala.</p>
<p><i>”That town was aids anyways. Good riddance.”</i></p>
<p>Leaving your civilian life behind, your thoughts drift towards making money. Rebels will not accept a man in a t-shirt with a weak gun. You need to be “tacti-cool” and you need some firepower. After a short time you see a gas station coming up on your right. It looks open but you don’t see any other patrons or vehicles around. </p>
<p><i>”Time to rob my first gas station. Out here in the middle of nowhere, should be easy enough.”</i></p>
[[Next]](gas)
[[gas]]:
squiffy.ui.write("<div style='border:1px solid black;padding:4px;margin-bottom:4px;color:white;background:black;position:fixed;top:0%;box-shadow:0px 0px 12px gray;width:42%;' id='status'>Rebel Lyfe!</span> | Money: <span id='stm'>{money}</span></div>");
jQuery('#status').appendTo(jQuery('#squiffy'));
jQuery('#squiffy').css('margin-top', '70px');
jQuery('#restart').appendTo(jQuery('#status'));
jQuery('#restart').css('right', '4px');
jQuery('#restart').css('position', 'absolute');
squiffy.story.go("gas1");
[[gas1]]:
<p>You pull in like you are going to get gas, scouting the place out. The store appears empty besides a single clerk standing behind the counter. You can see a door in the back and a large window up front. Not a whole lot of cover, but you can use your offoroad.</p>
[[Do you block the back door with your truck?]](backdoor)<br>
[[Do you block the front door with your truck?]](frontdoor)<br>
[Screw it, i'm too scared and just pee’d a little.](pee)
Is it possible to put a status, or Money = {money} in the header through CSS?