Skip to content

Commit

Permalink
Updated documentation to reflect the changes in 0.7.0
Browse files Browse the repository at this point in the history
  • Loading branch information
Ville Talonpoika committed May 5, 2016
1 parent dacadcc commit 6fff05a
Show file tree
Hide file tree
Showing 2 changed files with 28 additions and 48 deletions.
65 changes: 23 additions & 42 deletions DOCUMENTATION.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,67 +42,48 @@

## HTML structure

Novel.js needs some HTML on the webpage to run properly. You can use this code or some variant of it:
Novel.js needs some HTML on the webpage to run properly. You can use the simple ```<novel></novel>``` tag or if you need more control you can use this code or some variant of it:
```html
<div id="novel-area">
<div class="style-area {{ novel.currentScene.style }}">
<div id="notification-wrapper">
<div id="save-notification" class="notification">
<div id="novel-style-area">
<div id="novel-notification-wrapper">
<div id="novel-save-notification" class="novel-notification">
<p>Copy and save this text:</p>
<p><textarea name="save-text" readonly></textarea></p>
<p><button type="button" onclick="UI.closeSaveNotification()">Close</button><button type="button" id="copy-button">Copy</button></p>
<p><button type="button" onclick="UI.closeSaveNotification()">Close</button><button type="button" id="novel-copy-button">Copy</button></p>
</div>
<div id="load-notification" class="notification">
<div id="novel-load-notification" class="novel-notification">
<p>Paste your save data here:</p>
<p><textarea name="load-text"></textarea></p>
<p><button type="button" onclick="UI.closeLoadNotification(false)">Close</button><button type="button" onclick="ui.closeLoadNotification(true)">Load</button></p>
<p><button type="button" onclick="UI.closeLoadNotification(false)">Close</button><button type="button" onclick="UI.closeLoadNotification(true)">Load</button></p>
</div>
</div>
<div class="text-and-choices-area">
<div class="text-area">
{{{ printedText }}}
</div>
<button v-show="textSkipEnabled()" type="button" id="skip-button" onclick="TextPrinter.complete()">Skip</button>
<button type="button" id="continue-button" onclick="TextPrinter.unpause()">Continue</button>
<div class="choices">
<ul class="choice-list">
<div v-for="choice in novel.parsedChoices">
<li v-if="requirementsFilled(choice)" class="choice">
<a href="#" v-on:click="selectChoice(choice)">{{{ choice.parsedText }}}</a>
</li>
<div v-if="choice.alwaysShow">
<li v-if="!requirementsFilled(choice)">
{{{ choice.parsedText }}}
</li>
</div>
</div>
</ul>
</div>
<div id="novel-text-area">
<div id="novel-text"></div>
<button type="button" id="novel-skip-button" onclick="TextPrinter.complete()">Skip</button>
<button type="button" id="novel-continue-button" onclick="TextPrinter.unpause()">Continue</button>
</div>
<div v-if="!inventoryHidden" class="inventory">
<div id="novel-choices-area">
<ul id="novel-choice-list"></ul>
</div>
<div id="novel-inventory-area">
<h5>Inventory:</h5>
<ul class="item-list">
<li v-for="item in novel.inventories[novel.currentInventory]" class="inventory-item" v-if="itemsOverZeroAndNotHidden(item)">
{{{ item.displayName }}} - {{{ item.value }}}
</li>
</ul>
<ul id="novel-inventory"></ul>
</div>
<div v-if="novel.settings.debugMode" class="stats">
<div id="novel-hidden-inventory-area">
<h5>Stats:</h5>
<ul class="item-list">
<li v-for="item in novel.inventories[novel.currentInventory]" class="inventory-item" v-if="itemsOverZeroAndAreHidden(item)">
{{{ item.displayName }}} - {{{ item.value }}}
</li>
</ul>
<ul id="novel-hidden-inventory"></ul>
</div>
<div v-if="novel.settings.showSaveButtons" class="save-buttons">
<button type="button" id="save-button" onclick="NovelManager.saveData()">Save</button>
<button type="button" id="load-button" onclick="UI.showLoadNotification()">Load</button>
<div id="novel-save-area">
<button type="button" id="novel-save-button" onclick="NovelManager.saveData()">Save</button>
<button type="button" id="novel-load-button" onclick="UI.showLoadNotification()">Load</button>
</div>
</div>
</div>
```

Only one Novel.js instance per webpage is supported.

## `novel.json` structure

`novel.json` is a JavaScript Object Notation file - a neat way to work with structured information. The top level of the structure contains the following attributes:
Expand Down
11 changes: 5 additions & 6 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ It is suitable for interactive fiction such as "choose your own adventure" games

Text adventures are often overlooked as something only game development beginners create, and Novel.js aims to fix this misconception. Interactive fiction combines the flexibility and possibilities that prose can offer with interactivity and reader choice – a type of entertainment I think has not yet been thoroughly explored. The popularity of visual novels demonstrates the possibilities the medium can offer!

Novel.js is written in CoffeeScript, HTML and SASS and depends only on Vue.js. It was born out of a need for a lightweight, easy-to-use but fully-featured text adventure system that could easily be embedded on a webpage. It is open source (MIT License) and free to use both commercially and non-commercially. A **[live demo](http://nanofus.github.io/novel.js/)** is available, however it covers only a small part of all functionality!
Novel.js is written in CoffeeScript, HTML and SASS and has no dependencies. It was born out of a need for a lightweight, easy-to-use but fully-featured text adventure system that could easily be embedded on a webpage. It is open source (MIT License) and free to use both commercially and non-commercially. A **[live demo](http://nanofus.github.io/novel.js/)** is available, however it covers only a small part of all functionality!

You can use [electron-noveljs-boilerplate](https://github.com/Nanofus/electron-noveljs-boilerplate) with Novel.js to create standalone desktop applications. It requires a bit more technical knowledge than Novel.js itself.

Expand Down Expand Up @@ -60,15 +60,14 @@ These features are planned or currently in development.
### Non-techy installation

1. Download the [latest release .zip](https://github.com/Nanofus/novel.js/releases/latest) and extract it.
2. Uncomment the commented `<script>` tags in `index.html`.
3. Upload the folder to a web server, such as Dropbox. (Opening `index.html` locally does not work, as the browser cannot load `json` files locally!)
4. Open the location in web browser. Check dev tools (usually F12) for logs.
5. Start working on `novel/novel.json`!
2. Upload the folder to a web server, such as Dropbox. (Opening `index.html` locally does not work, as the browser cannot load `json` files locally!)
3. Open the location in web browser. Check dev tools (usually F12) for logs.
4. Start working on `novel/novel.json`!

### Techy installation

1. `npm install novel-js`.
2. Create an `index.html` file and include the [HTML](https://github.com/Nanofus/novel.js/blob/master/DOCUMENTATION.md#html-structure) in it. Include Novel.js (`node_modules/novel-js/novel.min.js`) and Vue.js scripts.
2. Create an `index.html` file and add ```<novel></novel>``` inside the body, or include the [customizable HTML](https://github.com/Nanofus/novel.js/blob/master/DOCUMENTATION.md#html-structure) in it. Include the Novel.js (`node_modules/novel-js/novel.min.js`) script.
3. Create the folder `novel` and a `novel.json` inside it.
4. `http-server` and open `http://localhost:8080/` or use a web server of your choice.
5. Start working on `novel.json`!
Expand Down

0 comments on commit 6fff05a

Please sign in to comment.