Code Monkey home page Code Monkey logo

trialogue's Introduction

Trialogue logo

Trialogue

Trialogue is a Story Format for Twine that let's you turn a branching narrative into an interactive chat story. Write a non-linear story in the Twine editor, add Trialogue as the Story Format and play back your story in the form of an interactive chat.

👉 Demo story: https://phivk.github.io/trialogue/docs/trialogue-demo.html

User Guide

A guide on how to use Trialogue to create interactive chat bot stories in Twine is available at:

https://phivk.gitbook.io/trialogue/

Example stories powered by Trialogue

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

  • Chatterpast: Explore life in Iron Age and Roman Britannia with Enica and her friends.
  • Filla Fulla Chat: Take part in an interactive conversation and explore life stories and key artworks of the iconic Czech and Slovak artists Emil Filla and Ľudovít Fulla.
  • Mother Tongue: How to learn Tagalog in just one awkward conversation with your mom a day.

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 and Dan Cox.

trialogue's People

Contributors

dependabot[bot] avatar jayden1311 avatar phivk avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

trialogue's Issues

add text input functionality

It would be nice to have a way to prompt users for text input, for example:

  • Bot says What’s your name?
  • user inserts [NAME]

and then to insert the user input as appropriate during the conversations, to make the experience more personal, e.g.:

  • What do you think, [NAME]?

undo link position is misaligned

on medium screens, the undo link in navbar gets misaligned:

image

It should sit snugly next to the back button on the left of the navbar

Compiling with newly built story format throws TypeError on marked dependency

How to reproduce

Install dependencies

npm install

build story format

grunt package

(optionally depending on your setup: move built format to Tweego storyformats directory)

compile .twee to .html

tweego --output=./docs/trialogue-demo-test.html ./docs/trialogue-demo.twee  --format=Trialogue

open restulting .html file

open ./docs/trialogue-demo-test.html

result:

⚠ TypeError: marked is not a function 

0D72222A-7352-4690-919B-BD8D06FD446D-54098-0000FF91879925DA

Things I've tried so far

  • removing node_modules/ and package-lock.json and doing a fresh npm install
  • checking out a prior state of the repo from the git history
  • making a fresh clone of the repo
  • importing marked into the browser by adding a script tag to the restuling .html file: <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

I am unsure why this was not an issue before or what has changed that introduced this error.

Curious if others can reproduce this issue?

An easy way to customize CSS stylesheet for Trialogue ?

Hello. I like your project and I would like to use it for an exhibition as a narrative tool. I would like to customize background color and other visual staff but I don't know how to do it : in the CSS stylesheet ? in the Javascript stylesheet ? I'm not a coder ; I know several things about things about Twine but excuse me for this question...

Won't load next branch

Something about some part of my text just won't continue at all. It will three dot and then not load anything.

First message scrolls out of sight on mobile if URL bar is open

First message scrolls out of sight on mobile.

I think this is being caused the interaction of two things:

  1. vh ignores whether the URL bar of the browser is minimized or not, so the page is too tall if the bar is open
  2. After each message is sent, the main section scrolls all the way to the bottom so you can see the new message

Is there a way to prevent this happening?
To see the issue in action, visit https://timduschenes.com/ChatBotv2.html on mobile

Placement of user avatar off in Safari/Webkit

The "you" avatar/circle that should appear to the right of the user's text messages overlaps with the message itself on current Safari/webkit browsers. This effectively means it shows up incorrectly on any iOS device, regardless of the browser (because Apple requires all mobile browsers to use webkit). Example:

image

It appears to be a problem with the ::after pseudoelement. I don't know CSS well enough to know how how to fix this across all devices. But, adding this webkit-specific CSS seems to fix the problem on recent versions of iOS/Safari:

_::-webkit-full-page-media, _:future, :root .chat-passage-wrapper[data-speaker="you"]::after {
  /* Safari 10.1+ */
	margin-left: 5px;
}

Having the chatbot wait for some seconds before sending the next message

I´d like my chatbot to ask the player a question. Once the player answered the chatbot makes a comment and make a pauses of several minutes before asking the next question. How can I achieve that with Trialogue?

Here´s my attempt, using following piece of code:

<%
_.delay(
function(){
story.show("Alles klar!");
},
8000
);
%>

The delay works...somehow. But there are also unwanted things happening. When the delay of 8 seconds starts, the Bot displays an empty message. When the delay ends, the written message is displayed but without having been visibly "typed" by the bot...

Whereas the goal I am trying to achieve is that the bot asks the player something, the player answers, the bot answers.... and then there is a pause of 5 minutes before the bot asks the next question.

Error using Trialogue Story Format

Hello, I've been looking at Trialogue story format in Twine, but I get the following error whenever I preview your demo project:

An error has occurred. You may be able to continue, but some parts may not work properly.
Error [tw-user-script-0]: inject_nav_back is not defined.

I see information about these "helper" functions in your documentation, but I don't know where in the file these functions are supposed to be initialized or how to troubleshoot them.

Can someone please help me?

Messages in chat deploying too fast

I have an issue with the messages. I have a couple of bots 'talking' with each other in the beginning, and the deployment of the messages is too fast. I want to adjust the delay of the next message so it seems more natural as if someone was actually writing it.

here is the code for the delay:
<%
story.showDelayed("NAMEofPASSAGE");
%>

and I tried adding the amount of delay I want at the end but it didn't help.
<%
story.showDelayed("NAMEofPASSAGE", 5000);
%>

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.