Story Synth

Realtime Storytelling App

This app is geared for designers of simple storytelling games who want to playtest online. The gist is that a designer can:

1. Create and edit content in a Google Sheet
2. Create a room in the app that links to that content
3. Share that link with players so that they can play in realtime without screen sharing

See the app live at storysynth.org

Video tour of Story Synth in action

You can use the app as a starting point for more complex or polished games. Here's the final version of a game using the "monster" template: Dawn of the Monster Invasion

Read more about the app at About Story Synth

Getting the app working locally

The app uses Vue.js as it's main framework, with Bootstrap as a visual framework. Game content is loaded via Google Sheets and game state is shared among players via Firebase.

The app is designed to be serverless, so you can use Firebase Hosting or Github Pages to run it for free.

A quick overview of the most relevant libraries in use:

• Vue.js – the framework that runs the app, including routing and views
• Firebase – the real time database that keeps data in sync among different users looking at the same page
• VueFire – the binding between Vue and Firebase; it keeps the Firebase data in sync with the app data
• Bootstrap – the css framework that makes it easy to make the app look decent
• BootstrapVue – easy access to Bootstrap's js components such as modals and tooltips
• Axios – the http libary used to pull data from Google Sheets

Project setup

Make sure you have Node.js and npm installed locally, then clone or download this project repo, navigate to the folder, and run:

npm install

NOTE: you need to have a version of Node,js that is earlier than 17, as the latest versions of Node have a bug. (I'm currently using v16.14.0)

DO NOT run npm audit fix --force as it will break dependencies.

Next, set up a free Firebase project, which will give you an API key. You can follow steps one and two of the offical guide:

1. Create a new project
2. Register your app with firebase
3. Set up Firestore Database with the below rules
4. Set up Realtime Database with the below rules
5. Enable anonymous sign-in under Authentication > Sign-in method

Firestore Rules (update these later)

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if
           request.auth != null;
    }
  }
}

Realtime Database Rules

{
  "rules": {
    ".read": "now < 4759953387000",  // 2020-11-5
    ".write": "now < 4759953387000",  // 2020-11-5
  }
}

Install the Firebase CLI tool, if you haven't yet, and log in with the same account that you created the project with.

Then, update the project with your Firebase credentials by adding them to a new file that you name ".env" and create in the root folder of Story Synth (the same folder with the file '.gitignore'. You need to add your your firebase api key, database url and project ID, replacing TODO in the following:

VUE_APP_FIREBASE_API_KEY=TODO
VUE_APP_FIREBASE_DATABASE_URL=TODO
VUE_APP_FIREBASE_PROJECT_ID=TODO

Notes:

• The Firebase Database URL should have the format of https://PROJECT_ID.firebaseio.com where PROJECT_ID should be the name of your project.
• Firebase Project ID should be the ID name (e.g. story-synth) not the number code associated with it

Finally, you'll need enable the Google Sheets API for the same API Key. Do that by going to the Google Cloud Platform Console – API Library – Google Sheets API and enable the API.

For analytics, you can optionally create a free Mixpanel account and add your account ID in the main.js file.

Run your app locally

When you're testing the app on your machine, use:

npm run serve

and then go to localhost:8080 in your browser

Compiles and minifies for production hosting

When you're ready to save the app and share it online, run:

npm run build

This will efficently compile the app into the /dist folder.

Firebase Hosting

If you're using Firebase's free hosting, you can push to their servers with:

firebase deploy --only hosting

You can build and deploy at the same time with:

npm run build && firebase deploy --only hosting

If you run into any issues, you may need to follow more of the steps in the above mentioned Firebase guide.

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.