Disable/grey out dialog option?

+1 vote
asked Sep 9 by kiguel182 (140 points)
Hi,

I'm using Twine for the first time and I'm trying to figure out how to have some dialog options show but not do anything when you click them.

I want them to be visible but like greyed out or something similar and do nothing when clicked. Ideally they are a normal dialog option except it does nothing.

Any ideas how to do this? I'm using Twine 2 with Snowman.

2 Answers

+1 vote
answered Sep 9 by RealityDev (1,130 points)
edited Sep 9 by RealityDev

I'm using Sugarcube 2 so the implementation may be different, but the magic here will involve CSS. Here's the code I'm using to accomplish this in my game. I'm simply 'dimming' mine with opacity, but you can change colours, styling etc in any way you want that CSS allows.

.inactive {
    pointer-events: none;
    cursor: default;
    opacity: .2;
}

Then any link you want greyed out will just need to be in a <span>, <div> etc with that class applied. I'm not entirely fluent in JS, which as I understand Snowman uses, but I believe this should get you started.

if (hasHammer == true) {
    /* Regular link to "Forced Entry" passage */
} else {
    /* Wrap the link to the "Forced Entry" passage in <span class = "inactive"></span> */
}

If it helps, here's the Sugarcube 2 synax I'd use to do this.

<<if $hasHammer == true>>
    [[Break the window!|Forced Entry]]
<<else>>
    <span class = "inactive">[[Break the window!|Forced Entry]]</span>
<</if>

 

 

commented Sep 9 by greyelf (37,690 points)

The Snowman equivalent to @RealityDev SugarCube example would look something like the following.

<% if (s.hasHammer == true) { %>
[[Break the window!|Forced Entry]]
<% } else { %>
<span class="inactive">[[Break the window!|Forced Entry]]</span>
<% } %>

... and you would assign the true or false value to the hasHammer variable like so:

<% s.hasHammer = true %>

<% s.hasHammer = false %>

notes:
a. The pointer-events CSS property which this solution relies on to work is not supported by any version of Internet Explorer before 11, as can be seen in either the earlier link or on the caniuse pointer-events page. It is up to you to decide if you want to support those using earlier versions of that brand of web-browser. 

b. Generally there should not be any white space characters between a HTML element's attribute name, the equals sign, and the value being assigned to the attribute.

commented Sep 11 by kiguel182 (140 points)
This did it perfectly. Thank you very much!
+1 vote
answered Sep 10 by Deadshot (2,120 points)

I'm probably misunderstanding the question here, but it looks like the other two answers are way too overcomplicated. Here's how you have dialogue options that do nothing when you click on them:

This is a dialogue option. Try clicking me fool.

You can test it yourself, but, funny enough, clicking on text does nothing. surprise

Also, if you want it greyed out or whatever, use this:

(text-colour: 'grey')[This is a dialogue option. Try clicking me fool.]

You'll notice there's a little bit of code, but don't worry, as clicking it still won't do anything.

commented Sep 10 by RealityDev (1,130 points)
Hah, definitely might have overcomplicated that... The simplest solution can often be the best!
commented Sep 18 by Deadshot (2,120 points)
I'm sorry, but I can't tell if you're being sarcastic? I mean, I've probably got it wrong, but, I dunno...
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.
...