SugarCube Hide Save Button until a certain point

I’m aware I can do so with tags and CSS, but I want to do it with a variable, so no matter what passage you go to after that point, (my game is more free-form), the save button will be enabled.
Any help is appreciated.

1 Like

You can do that using a little jQuery to update the CSS based on a SugarCube variable.

First, put this in your game’s JavaScript section:

$(document).on(":passageend", function (ev) {
	if (State.variables.allowSaves && $("html").hasClass("nosave")) {
		$("html").removeClass("nosave")
	} else if (!State.variables.allowSaves && !$("html").hasClass("nosave")) {
		$("html").addClass("nosave")
	}
});

See the SugarCube :passageend event and State.variables object, plus the jQuery .on(), .hasClass(), .removeClass(), and .addClass() methods for details on those bits of code.

You’ll also need to add this to your game’s Stylesheet section:

.nosave #menu-item-saves {
    display: none;
}
.nosave #menu-core {
    border-top: 0;
}

Now, after every passage transition, the JavaScript code will check the $allowSaves variable to see if the save button should be visible. If $allowSaves has a “truthy” value, then the save button will be visible, otherwise it won’t be.

I should note that you might want to make saving available initially, so that people can load saves without having to replay through the intro, if that’s what you’re doing. To do that, just set $allowSaves to true in your StoryInit passage, and then in your first passage before the intro, set it back to false until you’re ready to enable it again.

Hope that helps! :slight_smile:

This works perfectly! Thanks a bunch.