0 votes
by (2.7k points)
I want an upgrades system for my twine game, how can I get the buttons to still display as buttons, but greyed out ones, like the "Load" button for the autosave before an auto save has occured?

1 Answer

0 votes
by (159k points)
selected by
Best answer

Please use the Question Tag feature to add the name and full version number of the Story Format you are using, as answers can vary based on that information.

Based on the facts you mentioned "autosave" & "Load" and that SugarCube is the only story format that has both of these, I will assume you are using SugarCube 2.

background: Many HTML elements (like <button>) have a disabled attribute which can be used to disabled that element. SugarCube 2 is using this attribute to make the "Autosave "feature's  "Load" unselectable.

There are a number of different ways you can use the disabled attribute with a button in SugarCube, one of them is using HTML Attributes combine with a HTML button element to create the button within your passage.

<button data-passage="Next" disabled>Go to the next passage</button>

... the above creates a disabled button that would transition the story to the "Next" passage if it could be selected.

To re-enabled that button you will need to give it a means to be identified and the simplest way to do that is to give the button element an unique ID like so.

<button id="next-button" data-passage="Next" disabled>Go to the next passage</button>

... then you could use Javascript like the following within your Passage to remove the disabled attribute from the ID'ed element.

<<link "Enable the above Next button">>
	<<run document.getElementById("next-button").removeAttribute("disabled")>>

To style your HTML button element so that it looks the same as those generated by the <<button>> macro you would assign your element the same CSS classes.

<button id="next-button" class="link-internal macro-button" data-passage="Next" disabled>Go to the next passage</button>

... these can be determined by using the Inspect feature of your web-browser's Web Development tools to inspect the CSS associated with the HTML output of a <<button>> macro.

by (2.7k points)
Works perfectly; thanks. Just one thing: is it possible to do the same thing with links? It saves a lot of if-then-else-endif conditions.