This app is geared for designers of simple storytelling games who want to playtest online. The gist is that a designer can:
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
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:
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:
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write: if
request.auth != null;
}
}
}
{
"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:
https://PROJECT_ID.firebaseio.com
where PROJECT_ID should be the name of your project.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.
When you're testing the app on your machine, use:
npm run serve
and then go to localhost:8080 in your browser
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.
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.
npm run lint