+1 vote
by (140 points)

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
by (1.1k points)
edited by

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]]
    <span class = "inactive">[[Break the window!|Forced Entry]]</span>



by (159k 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 %>

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.

by (140 points)
This did it perfectly. Thank you very much!
+1 vote
by (6.2k 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.

by (1.1k points)
Hah, definitely might have overcomplicated that... The simplest solution can often be the best!
by (6.2k 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...