Note: This series is a sequel to JavaScript + Ink series. It builds on the code and concepts found there.
Speaker CSS
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.
As a bridge between the Ink runtime and a user, JavaScript running in a browser can act on the contents of the string and even use CSS to style text before the user sees it.
Following the pattern setup in the last series, the Ink.js and story.js (called StoryDialogue.js in this example) are included along with a main.js file. This also follows the same setup as the Ink for Web functionality. (See JavaScript + Ink: Part 1: Ink for Web for more details.)
// Use the storyContent to create an Ink story
varstory=newinkjs.Story(storyContent);
// Save a reference to the storyContainer where text will be added
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:
Dan: I really don't know what I'm going to do with them, Susan. They are driving me crazy.
Susan: I hear you, but what, really, can you do?
Dan: I don't know. I just… I wish they would listen to me.
Susan: Dan. They are kittens. You are literally herding cats. They don't listen to anyone.
Dan: Okay. Sure. That's a valid point. But, I mean, just look! These kittens are crawling up everything in the room.
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.
Revising main.js
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.)
// Use the storyContent to create an Ink story
varstory=newinkjs.Story(storyContent);
// Save a reference to the storyContainer where text will be added