Making the entire page clickable without showing the link via css/js

Authoring Twine
1

Twine Version: 2.10.0

Hi! I’m working on a project that has absolutely no choices. I thought making the whole page clickable would make sense for that project, since the passages can get long, and it could be convenient for the user to hunt for the button every passage.

What I want to do is making the whole page clickable and hide all the passage links (not the other kinds of links) since there is only a single option in the game (which is to start a new game or load the game that I already handled with links) I have seen that some people does that with images but for this project I need to change background color at certain spots (unless I just use a completely transparent image). Right now, my way of handling this is putting (click-goto:?page,"passagename") on every single passage, which creates borders around the game that I don’t like. It also causes the cursor to be a pointing hand, so that’s another problem.

This obviously only should work when there is a passage link and shouldn’t throw an error when there is none. Because there are two pages that uses go-to links instead.

I am not a JavaScript programmer, so I don’t know how to handle this myself. Can you help me out?

2

Do what you’re doing and add this to your story’s Stylesheet:

.enchantment-clickblock {
  cursor: auto;
}

.enchantment-clickblock > :not(tw-enchantment)::after {
  box-shadow: none;
}
1 Like
3

@idklol
As you intend to remove the visual clue that lets the end-user know that the page can be selected (to progress), you may was to add a forewarning to the start of project to let the end-use know they can do that. Otherwise they might think the page doesn’t have anything to select.

4

Thank you! But, I must ask, do you really think this is the best option for this? I mean, yes it does work, but it just feels suboptimal. Of course if what I asked was impossible, this works great as well.

Ah, I put a warning at the start of the game, I don’t think that will be an issue.

5

These are the exact 2 styles and CSS selectors that Harlowe itself uses behind the scenes. It’s the most surgical “hack” you can do without making things convoluted.

I don’t think there is a way to use Harlowe’s own macros to achieve this result. (I’m not fully versed with Harlowe though.) However, even if there was a Harlowe method, it would be doing the exact same thing behind the scenes anyway.

You’re good. :+1:

2 Likes