Save game in Sugarcane? Derail: Sugarcube Questions, ReDerail: CSS Blunders

mostly useless

Has anyone here made a game saving macro for Sugarcane? I don't want to switch to sugarcube as my game relies heavily on L's macros and (AFAIK) they aren't all compatible. I know Mike Snyder's Hallowmoor does this superbly, and the source is available, but I can't quite seem to get it working. I need it to store all the variables so the player can resume the game, I don't need multiple slots or anything fancy.

Thanks!

mostly useless

(sorry to bump, I'm annoying like that  )

I'm guessing I'm not the only one who'd like this feature? In my head it seems like an incredibly useful thing to have. I don't know javascript at all, but would writing code to store the current passage name and all variables in a cookie when you click "save" and dump them back out when you press "load" be difficult to do?

L

The save-game functionality is present in the Bookmark link. If the player saves it, then it can be used to restore the entire game state at that point in the game.

mostly useless

Oh, awesome! Only problem is my story doesn't use the sidebar, so how can I trigger the bookmark feature? Also is there any limit to the amount of variables that can be stored?

Also, from the StorySettings passage:

[quote]--(If the player can't undo, bookmarks are always disabled.)

I don't see why that should be the case. I definitely don't want to let my player undo, just to be able to stop playing and carry on later.

bawpie

I'd be interested about how to do this also.

L

mostly wrote:

[quote]--(If the player can't undo, bookmarks are always disabled.)

I don't see why that should be the case. I definitely don't want to let my player undo, just to be able to stop playing and carry on later.
If the player has bookmarks, then they can undo moves as many times as they want, just by doing this:
* Bookmarking the current passage
* Making a move
* Restoring from the bookmark if they didn't like the move.

There's been more than one request for something like a bookmark() function, which I believe I can add for 1.4.2.

mth

The word "bookmark" can mean two things:

• a bookmark in the web browser
• a passage tagged as "bookmark"

Maybe the latter could be renamed to for example "checkpoint" or "milestone" to avoid confusion?

mostly useless

Fair point, L, and thanks again for the help. It's good to hear you might be adding a function to handle the issue. Right now this is really frustrating, because my game is gonna be pretty big, and I can't see anyone wanting to play it all in one go. To make matters worse I need the save feature to work if the webpage is stored offline, and I'm not sure cookies are going to work offline. The save function doesn't seem to work in Hallowmoor running offline in Chrome. Ideally I want to force the player to stop when they save, so it can only be used as a "quick save" style system. Does bookmark work offline?

Just to be clear, is accessing bookmark without the sidebar currently not possible? If so, is there some way I can just include that link of the sidebar and put it somewhere else on the webpage? Sorry to be a pain as usual, and thanks again for your help!

Erik Temple

You should be able to use javascript to move the menu item from one place to another, even if you've already hidden the menu using CSS. I'm not sure when would be the best place to do this in SugarCube, nor do I know what the element you'd need to move is called--but probably someone else does and will help out.

If saved game functionality is important to you, SugarCube offers that functionality in various configurations (based on browser storage, not cookies), without reliance on whether you allow undos or are using bookmarks. I have it set up to autosave the reader's progress, and offer to load that progress on restart, which sounds like it's close to what you are after.

mostly useless

Thanks Erik, I'm having a look at Sugarcube now. Providing I know I can use the revision macro set and <<timedgoto>> I should be OK. Oddly my imported font is displaying strangely and a black background has become white! Hmm.

Edit: Bit of a snag - is either() not supported?

TheMadExile

SugarCube does not support the either() function, no.  That functionality is handled in other ways, via <Array>.random(min , max) and/or Array.random(array , min , max).

If you really wanted to use a function by that name, you could always write a shim.  For example:


window.either = function (/* variadic */)
{
if (arguments.length === 0) { return; }
return Array.prototype.slice.call(arguments, 0).random();
};


Sharpe

mth wrote:

The word "bookmark" can mean two things:

• a bookmark in the web browser
• a passage tagged as "bookmark"

Maybe the latter could be renamed to for example "checkpoint" or "milestone" to avoid confusion?

I thought the bookmark link in the Sugarcane sidebar meant to put the page into Chrome and/or Firefox's bookmarks for a long time. I guess IE calls bookmarks favorites. If I thought that, then there is probably a large percentage of casual Twine users who do as well. Well, maybe I'm just in the idiot minority. Okay, that's probably the case.

mostly useless

The shim works great, thanks TheMadExile! Okay, next issue (I've already derailed my own thread so why stop now!)

Do passage tags work differently in Sugarcube? I have a few different looks for sections of my story and in Sugarcube elements of all of my tagged CSS seem to be applied at once, so things like the background pictures aren't changing when they should. This is probably causing the font issue and background colour issue I mentioned briefly earlier.

TheMadExile

No, passage tags work the same.  SugarCube's HTML structure is different from its closest vanilla counterpart Sugarcane, though.  That's probably the issue. 

There's a slowly growing set of documentation that should help.  Specifically, you should look at the HTML Layout section of the basic reference docs for more info on SugarCube's HTML structure.

You could also post a snippet of the CSS that isn't working and I'll see if I can help you out.

mostly useless

I took a look at the HTML Layout section, but I'm really useless at this stuff, sorry! I'll post the CSS below, but it's probably quite messy as again, I'm useless at this stuff. Hopefully you won't have to read through it all to see what I'm doing wrong...

So I have a passage tagged "stairs", and this in a stylesheet with the same tag:

body {
background-image: [img[stairs2b]];
/*color:#000;*/
background-color:rgba(0,0,0,1);
background-repeat:no-repeat;
background-attachment:fixed;
background-position: right top;
}

This links to a passage tagged "forest", and I have a separate stylesheet with the forest tag containing this:

body {
background-image: [img[top2]], [img[newforestsmall]];
/*color:#000;*/
background-color:rgba(193,204,204,1);
background-repeat:repeat-x;
background-attachment:fixed;
background-position: center top, center bottom;
}
.passage {
background-color:rgba(255,255,255,0.8);
color:#000;
font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
}
a.internalLink, a.externalLink {
border-bottom: solid #000 1px;
color:#000;
font-weight:normal;
}
a.internalLink, a.externalLink[data-tags~=dream] {
color:grey;
}
a.internalLink:hover, a.externalLink:hover {
text-decoration:none;
border-bottom: solid #000 2px;
color:#000;
font-weight:normal;
padding-left: 0;
}

I also have an untagged stylesheet modified from one of L's with this:

html {
/* Vertical centering */
width: 100%;
height: 100%;
display: table;
}
body {
background-color:#000;
margin: 0;
height:100%;
display:table-cell;
vertical-align: middle;
}
body[data-tags~=dream] {
background-color:#FFF;
}
p {
margin:0;
line-height: 100%
}
#passages {
margin: 0;
padding: 0;
border: 0;
vertical-align:middle;
}
.passage {
width: 45%;
min-width: 26em;
height: 100%;
display: table;
font-family: Sylfaen, Helvetica, "Helvetica Neue", Arial, sans-serif;
/*letter-spacing: 0.1em;*/
padding: 1.5em;
padding-left: 2em;
font-size:1.75em;
background-color:rgba(0,0,0,0.7);
/*color:#eee;*/
margin: 0 auto;
/*border: white ridge 0.8em;*/
border-radius: 1em;
}
.passage[data-tags~=dream] {
background-color:#FFF;
color:#000;
border:none;
}
.passage[data-tags~=titledown] {
margin: 20% auto;
}
.passage[data-tags~=mint] {
border-color: MediumAquaMarine;
}
.passage[data-tags~=strawberry] {
border-color: HotPink;
}
.passage[data-tags~=banana] {
border-color: Gold;
}
.passage[data-tags~=peanut] {
border-color: Peru;
}
.passage[data-tags~=blackborder] {
border-color: Black;
}
/*.content::before {
content: '•';
position: relative;
left: -0.6em;
margin-right: -0.4em;
}*/
.little {
font-size:15px;
}
.big {
font-size:25px;
}
a.internalLink, a.externalLink {
border-bottom: solid #fff 1px;
color:#eee;
font-weight:normal;
}
a.internalLink, a.externalLink[data-tags~=dream] {
color:grey;
}
a.internalLink:hover, a.externalLink:hover {
text-decoration:none;
border-bottom: solid #fff 2px;
color:#fff;
font-weight:normal;
padding-left: 0;
}
a.internalLink:active, a.externalLink:active {
border-bottom: 0;
}
/*#sidebar {
display:none;
}*/

In Sugarcane, both passages have the CSS from the untagged stylesheet, with elements replaced by the ones in the stylesheets they are tagged to. So the "stairs" tagged passage has a black page  background with the stairs image and a transparent black passage background. When the story moves to the "forest" tagged passage, the stairs image is replaced by the two images in the "forest" stylesheet and the page and passage background colour become white and grey respectively.

In Sugarcube however both passages display the "stairs" image, and both have a black page background and a white passage background. So maybe I've messed up the ordering of the stylesheets, which doesn't matter in Sugarcane but does in Sugarcube?

Thanks so much for reading, sorry to be a nuisance!

L

mth wrote:

The word "bookmark" can mean two things:

• a bookmark in the web browser
• a passage tagged as "bookmark"

Maybe the latter could be renamed to for example "checkpoint" or "milestone" to avoid confusion?

I was planning on doing this, specifically renaming it to "rewind" on the basis that its existence enables the Rewind menu.

Also, I was intending "bookmark" to do something else: cause the Bookmark link to appear conditionally when Bookmark is off. This would enable a "limited undo" that could only send you to certain specific prior passages. (Which is basically what Rewind already does...)

TheMadExile

mostly wrote:

In Sugarcube however both passages display the "stairs" image, and both have a black page background and a white passage background. So maybe I've messed up the ordering of the stylesheets, which doesn't matter in Sugarcane but does in Sugarcube?

It's not the ordering, it's the fact that you're providing the same selectors with different rules.  Obviously, that was working for you in Sugarcane, so it seems that the vanilla headers are doing something "interesting" again (/sigh).  I'll have to look at the code to see what's going on, because what you have there isn't how you'd normally go about doing what you're trying to do.

mostly useless

Sorry, Mad! I'm very much a "if being lazy and hacking bits of code around works robustly and lets me get on with writing a game then 's cool" kinda guy. However, it's probably for the best that I take some responsibility here and write some proper CSS. So should I have everything in one stylesheet with different data-tags for different pictures etc.?

TheMadExile

Well, you don't need to put everything in one stylesheet passage, although you could.  I probably would to start with, to head off cases where ordering could be an issue.

As for as the data-tags, yes and no.  Yes, you'd need to add the tags to your CSS selectors, so that the styles only affect what they're supposed to.  However, SugarCube doesn't use the data-tags attribute itself, it flags elements directly with IDs and classes.  In particular, SugarCube adds passage tags to the <body> element as classes.

So, in the case of your "stairs" and "forest" tagged passages, for example, what you'd normally do in SugarCube is something like this:


/* STAIRS styles */
body.stairs
{
background-image: [img[stairs2b]];
/*color: #000;*/
background-color: rgba(0,0,0,1);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right top;
}

/* FOREST styles */
body.forest
{
background-image: [img[top2]], [img[newforestsmall]];
/*color:#000;*/
background-color: rgba(193,204,204,1);
background-repeat: repeat-x;
background-attachment: fixed;
background-position: center top, center bottom;
}
body.forest .passage
{
background-color: rgba(255,255,255,0.8);
color: #000;
font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
}
body.forest a.link-internal,
body.forest a.link-external
{
border-bottom: solid #000 1px;
color: #000;
font-weight: normal;
}
body.forest a.link-internal,
body.forest a.link-external[data-tags~=dream]
{
color:grey;
}
body.forest a.link-internal:hover,
body.forest a.link-external:hover
{
text-decoration: none;
border-bottom: solid #000 2px;
color: #000;
font-weight: normal;
padding-left: 0;
}


Question: Where's the "dream" data-tag on the links coming from?

mostly useless

Mad, I really appreciate this. I'll get on it straight away and report back soon.

Regarding the "dream" tag, that stylesheet was pulled out of another story that had a "dream" section and then added to. So I've left it in through sheer messiness, but it's not doing anything in this story.

mostly useless

Okay, in an attempt to approximate tidyness, I've put Mad's code into my standard stylesheet in (I hope) the right places, with the standard style for each element followed by the tagged styles. One question here, is there a difference between:

.body .passage

and simply

.passage

?

Regardless, background colours and images are changing when they should, which is awesome!

There's a few more issues, though. Firstly, the link colours aren't showing as they do in Sugarcane. I've attached a screenshot to illustrate this.

Secondly, everything is bigger in Sugarcube! By which I mean all text and the passage width and height itself. I'm guessing this is something I'm doing wrong in the CSS again.

Below is my updated stylesheet. I simplified the stairs image thing before, there's actually a few different images. Again, that's all working perfectly now. Between the html and body stuff is bits of code which I didn't know where to put, but seem to work where they are besides the hide sidebar code. Where should I put the hide sidebar code? Also, where should I put the CSS for the Sugarcube version of the revision macro? Right now I have it in a separate stylesheet.

Sorry to bombard you like this!

Stylesheet:

html {
/* Vertical centering */
width: 100%;
height: 100%;
display: table;
}

p {
margin:0;
line-height: 100%
}

#sidebar {
display:none;
}

.little {
font-size:15px;
}
.big {
font-size:25px;
}
body {
background-color:#000;
margin: 0;
height:100%;
display:table-cell;
vertical-align: middle;
}

body.stairs1
{
background-image: [img[stairsdoor]], [img[stairs1]];
/*color: #000;*/
background-color: rgba(0,0,0,1);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left top, right top;
}

body.stairs2
{
background-image: [img[stairs2]];
/*color: #000;*/
background-color: rgba(0,0,0,1);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right top;
}

body.stairs2a
{
background-image: [img[stairs2a]];
/*color: #000;*/
background-color: rgba(0,0,0,1);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right top;
}

body.stairs2b
{
background-image: [img[stairs2b]];
/*color: #000;*/
background-color: rgba(0,0,0,1);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right top;
}

body.stairs3
{
background-image: [img[stairs3]];
/*color: #000;*/
background-color: rgba(0,0,0,1);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right top;
}

body.forest
{
background-image: [img[top2]], [img[newforestsmall]];
/*color:#000;*/
background-color: rgba(193,204,204,1);
background-repeat: repeat-x;
background-attachment: fixed;
background-position: center top, center bottom;
}
#passages {
margin: 0;
padding: 0;
border: 0;
vertical-align:middle;
}
.passage {
width: 45%;
min-width: 26em;
height: 100%;
display: table;
font-family: Sylfaen, Helvetica, "Helvetica Neue", Arial, sans-serif;
/*letter-spacing: 0.1em;*/
padding: 1.5em;
padding-left: 2em;
font-size:1.75em;
background-color:rgba(0,0,0,0.7);
/*color:#eee;*/
margin: 0 auto;
/*border: white ridge 0.8em;*/
border-radius: 1em;
}
.passage[data-tags~=titledown] {
margin: 20% auto;
}
.passage[data-tags~=mint] {
border-color: MediumAquaMarine;
}
.passage[data-tags~=strawberry] {
border-color: HotPink;
}
.passage[data-tags~=banana] {
border-color: Gold;
}
.passage[data-tags~=peanut] {
border-color: Peru;
}
.passage[data-tags~=blackborder] {
border-color: Black;
}
body.forest .passage
{
background-color: rgba(255,255,255,0.8);
color: #000;
font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
}
a.internalLink, a.externalLink {
border-bottom: solid #fff 1px;
color:#eee;
font-weight:normal;
}
a.internalLink, a.externalLink[data-tags~=dream] {
color:grey;
}
a.internalLink:hover, a.externalLink:hover {
text-decoration:none;
border-bottom: solid #fff 2px;
color:#fff;
font-weight:normal;
padding-left: 0;
}
a.internalLink:active, a.externalLink:active {
border-bottom: 0;
}
body.forest a.link-internal,
body.forest a.link-external
{
border-bottom: solid #000 1px;
color: #000;
font-weight: normal;
}
body.forest a.link-internal:hover,
body.forest a.link-external:hover
{
text-decoration: none;
border-bottom: solid #000 2px;
color: #000;
font-weight: normal;
padding-left: 0;
}

TheMadExile

mostly wrote:

One question here, is there a difference between:

.body .passage

and simply .passage

?

Depends.  Were you trying to refer to the <body> element in the first one there and accidentally added a period to the front of it, which transforms it into a class named "body"?

If you actually meant to refer to the body element, then the answer is: Yes, there is a difference in specificity, but it's very minor.  So minor, in fact, that I wouldn't worry about prefacing .passage with it.

mostly wrote:

There's a few more issues, though. Firstly, the link colours aren't showing as they do in Sugarcane. I've attached a screenshot to illustrate this.

All instances of the class selectors .internalLink and .externalLink should be replaced with .link-internal and .link-external respectively.

mostly wrote:

Secondly, everything is bigger in Sugarcube! By which I mean all text and the passage width and height itself. I'm guessing this is something I'm doing wrong in the CSS again.

I believe SugarCube's base font size might be a little bigger or maybe using a slightly different font.  (Checking Sugarcane)  Yes, it looks like SugarCube base font size for the body ends up being about 2px larger.  That will need adjusted.

mostly wrote:

Between the html and body stuff is bits of code which I didn't know where to put, but seem to work where they are besides the hide sidebar code. Where should I put the hide sidebar code?

The #sidebar selector will need to be changed to #ui-bar.

mostly wrote:

Also, where should I put the CSS for the Sugarcube version of the revision macro? Right now I have it in a separate stylesheet.

A separate stylesheet tagged passage is fine for that.


Anyway, I've integrated the changes noted above into your latest CSS and I also rearranged things a bit.  You definitely have some conflicts in there, with the base link styles in particular, and I'm not sure if those flavor selectors are going to work, but this should at least be closer to what you want.

Give it a try:


html
{
/* Vertical centering */
width: 100%;
height: 100%;
display: table;
}

body {
background-color: #000;
margin: 0;
height: 100%;
display: table-cell;
vertical-align: middle;
font-size: 62.5%;
}

p
{
margin: 0;
line-height: 100%
}

#ui-bar
{
display: none;
}

.little
{
font-size: 15px;
}
.big
{
font-size: 25px;
}

#passages
{
margin: 0;
padding: 0;
border: 0;
vertical-align: middle;
}
.passage
{
width: 45%;
min-width: 26em;
height: 100%;
display: table;
font-family: Sylfaen, Helvetica, "Helvetica Neue", Arial, sans-serif;
/*letter-spacing: 0.1em;*/
padding: 1.5em;
padding-left: 2em;
font-size: 1.75em;
background-color: rgba(0,0,0,0.7);
/*color: #eee;*/
margin: 0 auto;
/*border: white ridge 0.8em;*/
border-radius: 1em;
}
.passage[data-tags~=titledown]
{
margin: 20% auto;
}
.passage[data-tags~=mint]
{
border-color: MediumAquaMarine;
}
.passage[data-tags~=strawberry]
{
border-color: HotPink;
}
.passage[data-tags~=banana]
{
border-color: Gold;
}
.passage[data-tags~=peanut]
{
border-color: Peru;
}
.passage[data-tags~=blackborder]
{
border-color: Black;
}
a.link-internal, a.link-external
{
border-bottom: solid #fff 1px;
color: #eee;
font-weight: normal;
}
a.link-internal, a.link-external[data-tags~=dream]
{
color: grey;
}
a.link-internal:hover, a.link-external:hover
{
text-decoration: none;
border-bottom: solid #fff 2px;
color: #fff;
font-weight: normal;
padding-left: 0;
}
a.link-internal:active, a.link-external:active
{
border-bottom: 0;
}

body.stairs1
{
background-image: [img[stairsdoor]], [img[stairs1]];
/*color: #000;*/
background-color: rgba(0,0,0,1);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left top, right top;
}

body.stairs2
{
background-image: [img[stairs2]];
/*color: #000;*/
background-color: rgba(0,0,0,1);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right top;
}

body.stairs2a
{
background-image: [img[stairs2a]];
/*color: #000;*/
background-color: rgba(0,0,0,1);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right top;
}

body.stairs2b
{
background-image: [img[stairs2b]];
/*color: #000;*/
background-color: rgba(0,0,0,1);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right top;
}

body.stairs3
{
background-image: [img[stairs3]];
/*color: #000;*/
background-color: rgba(0,0,0,1);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right top;
}

body.forest
{
background-image: [img[top2]], [img[newforestsmall]];
/*color:#000;*/
background-color: rgba(193,204,204,1);
background-repeat: repeat-x;
background-attachment: fixed;
background-position: center top, center bottom;
}
body.forest .passage
{
background-color: rgba(255,255,255,0.8);
color: #000;
font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
}
body.forest a.link-internal,
body.forest a.link-external
{
border-bottom: solid #000 1px;
color: #000;
font-weight: normal;
}
body.forest a.link-internal:hover,
body.forest a.link-external:hover
{
text-decoration: none;
border-bottom: solid #000 2px;
color: #000;
font-weight: normal;
padding-left: 0;
}


mostly useless

Awesome!! My story now looks just like it did before! I had to delete a bit of forest CSS to change the link colour from black to grey, so it looks like Sugarcane was ignoring that before. Not that it matters!

Oh, there is one teensy appearance difference, while font size and passage width are now identical, the line spacing is a pixel or two greater in Sugarcube. This doesn't bother me at all, just thought I'd let you know in case it was helpful.

Now, I've only found one mechanical problem so far, but it's a biggie. Variables are acting all skewy, and things are misfiring as a result. Is it at all possible there's a bug caused by the either() shim provided earlier in the thread? It seems very unlikely that it's a problem with Sugarcube itself, so I'm going to have a look at replacing eithers with arrays and see if that fixes it.

Mad, I owe you one HUGE credit, and a beverage of your choice, when this thing is done. ;D

TheMadExile

mostly wrote:

Variables are acting all skewy, and things are misfiring as a result. Is it at all possible there's a bug caused by the either() shim provided earlier in the thread?

I'd rate that as unlikely, the shim is pretty simple.  You using any scripts?  3rd-party macros?  Where are things going screwy?

mostly useless

Hmmm... no, I'm not using anything except the Sugarcube verson of L's replace macro and the shim. I'd like to send you the game so you could take a look as I'm struggling to pin down the problem, but I'm guessing the PM attachment limit is the same as the forum post limit, and the game has a bunch of images in it pushing it up to nearly a meg.

Oh yeah, dropbox! I'll PM you a link momentarily if you don't mind taking a look.

mostly useless

Right, my game is fully Cubed! For future blunderers, in addition to the earlier fixes:

Variables must be initialised in Sugarcube
You can't have a space in <<else if...>> clauses

Switching everything over was completely painless, purely thanks to TheMadExile's boundless helpfulness!

Now, on to the reason I went to Sugarcube in the first place. I want to have a save link in my game (without using the ui/sidebar). I'm sure there was a thread about this, but I can't find it now. So how can I call the save function?

Erik Temple

Here are the posts you're probably thinking about: http://twinery.org/forum/index.php/topic,765.msg1615.html#msg1615

They're in a larger thread that might also be useful.

mostly useless

Thanks Erik, not sure how I missed that. Can your code for adding a button be simply altered to make it work for a normal link in one or more specific passages?

For anyone else looking, Erik's code is this:

:: StoryInit
/% Special code that triggers at startup %/
<<script>>
$("body").append("<button id='save-sub' style='position:fixed; top:0; right:0;'>Inspect saved games</button>");
UISystem.addClickHandler("#save-sub", null, function () { UISystem.buildSaves(); });
<</script>>

TheMadExile

Create a new widget passage (a passage tagged with widget) and put something like this in it: (you'll probably want to change the text of the link; let me know if you want one that takes an argument to use as the link text)


<<widget savesMenu>><a id="saves-menu-link" class="link-internal">Open the saves menu</a><</widget>>


Create a new PassageDone special passage and put this in it:


<<script>>
UISystem.addClickHandler(".passage #saves-menu-link", null, function () { UISystem.buildSaves(); });
<</script>>


Usage is straightforward, simply add the <<savesMenu>> widget in any passage where you want to create a link to open the saves menu.  For example:


You have returned home to the Cat-Cave!
[[Check the Cat-Computer]] | [[Work on the Cat-Mobile]] | [[Cry yourself to sleep]] | <<savesMenu>>


mostly useless

That works perfectly!

I'd like to set a variable and display some text when the menu is used. Would it be possible to trigger the saves menu from inside a <<replacelink>>?

TheMadExile

mostly wrote:

I'd like to set a variable and display some text when the menu is used.

A $variable in general or the same $variable?  Same question for the text.

mostly wrote:

Would it be possible to trigger the saves menu from inside a <<replacelink>>?

I don't believe so, no.