If your story has many Passages where you want to include this feature then you could automate the process by using Javascript like the following which checks for a known special Passage Tag ('page-click'), and each time it encounters such a Passage it automatically monitors for a click event on the #story element of the page. It then uses the Passage Name stored in a known story variable ($nextPassage) to determine which Passage to transition to.
1. The following example should be placed within your project's Story Javascript area.
/* Each time a Passage gets rendered. */
$(document).on(':passagerender.page-click', function () {
/* Check if the new current Passage has been assigned the special 'page-click' tag. */
if (tags().includes('page-click')) {
/* If so then listen for a click event on the #story element. */
$('#story').one('click', function () {
/* Once the click occurs determine the name of the next Passage to display. */
var next = State.variables.nextPassage;
/* And if the indicated next passage actually exists. */
if (Story.has(next)) {
/* Then transition to it. */
Engine.play(next);
}
})
}
});
2. Assign all the Passages you want to be able to the new "Click page to transition" feature a page-click Passage Tag, you will also need to add a <<set>> macro like the following to the same Passage to indicate the name of the Passage to transition to.
<<set $nextPassage to "Next">>
3. [optional but recommended] Assign a default (real/existing) Passage name to the $nextPassage story variable within your project's StoryInit special passage, this insures that Javascript in point 1 won't cause an error if you forget to do the <<set>> macro calls required in point 2.
/% Set the follow to the name of a Passage that actually exists in your project. %/
<<set $nextPassage to "Nowhere">>
Now comes the part that may require some customisation by you, because I don't know anything about the styling of your story.
background: The default CSS styling of a SugarCube 2 based project is setup so that the main HTML elements (html, body, #story, #passages & .passage) that make up the Main Passage area of the page use the minimum vertical (height) space as necessary.
This means that by default the clickable region of the main Passage area available to the Reader is limited to the area that the Passage's content uses. So if the content of the Passage fills the whole page then the Reader can click anywhere in the Main Passage area, but if that content is a single sentence that only takes up the first line of the area then by default that is where the Reader will need to click which isn't that acceptable.
To overcome this limitation you can use CSS within your projects Story Stylesheet area to increase the height of the #story element either:
1. only for the page-click tagged Passages like so:
html[data-tags="page-click"] #story {
height: 100vh;
}
2. for the whole project like so:
#story {
height: 100vh;
}
warning: Based on the styling requirements of your particular project, you may need to modify the value of the above height property, or even uses additional CSS rules.
