From 6fff05a097d44f203c60c7c46b22f16a74d8408c Mon Sep 17 00:00:00 2001
From: Ville Talonpoika <talonvi@gmail.com>
Date: Thu, 5 May 2016 23:08:00 +0300
Subject: [PATCH] Updated documentation to reflect the changes in 0.7.0

---
 DOCUMENTATION.md | 65 +++++++++++++++++-------------------------------
 README.md        | 11 ++++----
 2 files changed, 28 insertions(+), 48 deletions(-)

diff --git a/DOCUMENTATION.md b/DOCUMENTATION.md
index f6eacde..beadf17 100644
--- a/DOCUMENTATION.md
+++ b/DOCUMENTATION.md
@@ -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:
diff --git a/README.md b/README.md
index 4fb2840..432789a 100644
--- a/README.md
+++ b/README.md
@@ -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.
 
@@ -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`!