HTML Interfaces + Ink
When using the Continue() function to get the next text block from the Ink runtime, the result is a string. While this seems very obvious, it also means that the string result can be parsed before showing it to a user.
The main.js file looks similar to other examples from the previous series. It loads the storyContents variable and saves a reference to an element with the id of “story”.
The continueStory() function is where some changes happen.
// Get ink to generate the next paragraph var paragraphText = story.Continue(); // Find the position where the colon start var dialogueTag = paragraphText.indexOf(':'); // Get the string from the beginning to the position of colon var speaker = paragraphText.substring(0, dialogueTag);
The results of the call to story.Continue() is saved. Then, the indexOf() function is used to get the position of the colon within the string. Next, it is used to get the speaker by getting a substring between the first position and the position of the colon within the string. In other words, it gets name of the speaker.
For this to make sense, consider the following Ink code:
The text of the story is broken up with a format where the speaker of the lines appear before the text they speak. It is separated by a colon.
Coming back to the main.js code, this can then be used to add a CSS class to the paragraph to mark who is speaking the lines.
The site.css file simply includes the names of the speakers as CSS classes with rules for how their text should be shown to the user. As the text is parsed as received by Continue(), these classes are applied to the paragraphs as they occur in the story.
Showing only a single block of text from the Ink runtime is not very helpful. To fix that issue, an event listener could be added to add to the code to run continueStory() each time.
Within the continueStory() code, some additional checks could be added through using canContinue to check if there is more content to show and checking if there is a speaker or not. (The text “End of Story,” for example, would not have a speaker and thus needs to be checked against somehow.)