trialogue

Trialogue

Trialogue logo

Trialogue is a chat-style Twine Story Format based on Paloma, which is in turn based on Snowman.

👉 Demo story: https://phivk.github.io/trialogue/docs/trialogue-demo.html
✊ Full story powered by Trialogue: https://fillafulla.sng.sk/chat/en/
🤖 Full story repo: https://github.com/slovakNationalGallery/fillafulla.sng.sk

How to make a scripted chat experience in Twine using Trialogue

Import Trialogue into Twine

trialogue import

  1. Open the online Twine editor.
  2. Choose Formats -> Add a New Format, paste the Story Format URL (https://phivk.github.io/trialogue/dist/Twine2/Trialogue/format.js) into the input field, click Add.
  3. Under Story Formats select Trialogue.

Create your first chat story

trialogue create

  1. Create a story in the Twine editor.
  2. Edit the start passage to include:
    • Title (e.g. start)
    • Passage text (e.g. “Hi 👋”)
    • One or more links (e.g. [[What's your name?]])
    • Speaker tag (e.g. speaker-bot). This will display the speaker’s name (in this case bot) in above their passages. It also sets a data-speaker="bot" attribute on the passage’s HTML element, which can be used for styling.
  3. Edit the newly created passage(s) to include:
    • Passage text (e.g. “My name is Bot”)
    • One or more links (e.g. [[Back to start->start]])
    • Speaker tag (e.g. speaker-bot)
  4. Hit Play to test the result (should look something like this)

Editing styles

The way to edit styling is by choosing ‘Edit Story Stylesheet’ in the story menu:

C76FE0A3-8EEC-4509-9451-00DBB987E17A-1024-00005D7165D9A486

To learn more about editing styles via the Story Stylesheet, see:

Changing UI colours

Trialogue uses CSS variables to set the main colours of the app. You can add the following to your Story Stylesheet and tweak the colours to fit your needs:

:root {
    --bg-color: #C7BDB5;
    --user-color: purple;
    --speaker-color: #A00;
    --sidebar-bg-color: #FFF;
    --navbar-bg-color: #FFF;
    --passage-bg-color: #FFF;
    --passage-text-color: #000;
}

Setting speaker avatars and colours

Setting avatar image and text color of a bot speaker with the name bot (passages tagged speaker-bot):

.chat-passage-wrapper[data-speaker='bot']:before {
  background-image: url('https://placekitten.com/100/100');
}
.chat-passage-wrapper[data-speaker='bot'] .chat-passage::before {
  color: green;
}

Setting the avatar image and text color of user passages:

.chat-passage-wrapper[data-speaker='you']:after {
  background-image: url('https://placekitten.com/100/100');
}
.chat-passage-wrapper[data-speaker='you'] .chat-passage::before {
  color: red;
}

Use any valid CSS color value for the color property.

⚠️ Changes From Paloma

<%
story.showDelayed("idOrName");
%>

Example stories using Trialogue (add yours by submitting a Pull Request, or open an issue with a link):

Development Setup

A possible workflow for collaboration between a Story Author and Format Developer:

  1. Story Author works on story in Twinery GUI, with current version of published Story Format selected
  2. Story Author exports updated version of Story to .html file and shares it with Format Developer (infrequently)
  3. Format Developer decompiles the latest Story version from .html to .twee using TweeGo/Twee2 (see ‘Testing during development’)
  4. Format Developer runs TweeGo/Twee2 to compile the latest Story from .twee to .html with WIP/’in development’ version of custom Story Format (see ‘Testing during development’)
  5. Format Developer adjusts Story Format (frequently)
  6. Format Developer repeats from step 4. until happy to release a new version of Story Format
  7. Format Developer publishes Story Format as a new version (infrequently)
  8. Story Author imports the new version of the Story Format and continues working on the Story
  9. Repeat from 1. until happy with Story Format functionality
  10. 🎉

Testing during development

Building Story Format from Source

Run npm install to install dependencies. Run grunt package to create a release version for Twine under dist/. Run grunt --help to list other grunt targets.

Compiling a story using Trialogue

A way to test the result of adjustments to the Story Format, is to compile a .twee Story to .html using the Trialogue format and check the behaviour & styling in a browser.

(De)compilation can be done using either:

Decompile .html story to .twee/.tw2 using Trialogue Story Format:

tweego --decompile --output=[path/to/target.twee] [path/to/source.html] --format=Trialogue
twee2 decompile [path/to/source.html] [path/to/target.tw2]

Compile .twee/.tw2 story to .html story using Trialogue Story Format:

tweego --output=[path/to/target.html] [path/to/source.twee] --format=Trialogue
twee2 build [path/to/source.tw2] [path/to/target.html] --format=./dist/Twine2/Trialogue

Paloma

Trialogue is based on Paloma by M. C. DeMarco: a Jonah-style Story Format for Twine 1 and 2 based on Snowman by Chris Klimas.