├── .gitignore ├── LICENSE ├── README.md ├── lib ├── blotter.js ├── engine.js └── index.js ├── package-lock.json ├── package.json ├── template └── index.ejs ├── test ├── example.ink ├── example.ink.json └── style │ └── style.less ├── webpack.config.js └── webpack.config.module.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | test/build 3 | test/style/style.css 4 | build/ 5 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 Bruno Dias 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Blotter 2 | 3 | Blotter is a a front-end engine for publishing [Ink](https://github.com/inkle/ink) stories on the web. It uses [inkjs](https://github.com/y-lohse/inkjs) as its core Ink engine and sole dependency for a pure JavaScript implementation of a simple user interface. 4 | 5 | Currently, Blotter is a proof-of-concept project. See [gall](http://github.com/sequitur/gall) for a turnkey way of using Blotter in a project. 6 | 7 | ## Usage 8 | 9 | ### As a standalone js file 10 | 11 | Use Gall. This information is provided mostly for documentation purposes. 12 | 13 | If not using Gall, get the bundled Blotter file from the repository or npm and inline or include it at the end of your html page's body. The page should contain the following structure in its body: 14 | 15 | - body 16 | - div#content-container 17 | - div#story-stage 18 | - div#choices 19 | 20 | You will also need a CSS that at the very least applies certain transitions and animations to content elements, since Blotter uses CSS animations to time itself when inserting content into the page. See the Gall scaffold for a Less file with examples of how this should work. 21 | 22 | The other thing you need is to inline the compiled json from your ink story, output by inklecate, into the head of the html file. You need a ` 9 | 12 | 13 |
14 |