Greyed-out buttons

0 votes
asked Jan 2 by SmuJamesB (2,350 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
answered Jan 2 by greyelf (73,450 points)
selected Jan 4 by SmuJamesB
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.

commented Jan 4 by SmuJamesB (2,350 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.
Welcome to Twine Q&A, where you can ask questions and receive answers from other members of the community.

You can also find hints and information on Twine on the official wiki and the old forums archive.

See a spam question? Flag it instead of downvoting. A question flagged enough times will automatically be hidden while moderators review it.