Page-Exploration

A library for managing progress through a nonlinear story, complete with a visual story editor for the writer. First made as a rebuilt backend for my game Keeper of the Labyrinth.

Easily manage multiple options in the editor view.

A clean reader view shows what the reader will see.

Features

• Purpose-built visual editor for traversing a nonlinear story.
• Allows the writer to edit story node text and options / links between nodes on the fly.
• Provides a fully-functional editor mode and a bare-bones reader mode.
• Save and load stories from a portable JSON format.
• Story Renderer class capable of reading JSON story files can be easily imported to other HTML-based projects and built on top of as a back-end.

How to use

To use the visual editor,

1. Use tsc to compile the project directory.
2. Make sure mainFile in main.js is set to full-editor.html.
3. The editor doesn't have a frontpage yet, so to select which story to edit or to make a new one, enter the filename and so forth into full-editor-application.ts as directed in the first block after the import statements.
4. Calling npm start will run the application through electron-forge.
5. You can also serve full-editor.html onto your own localhost node.js server if you like. (It has to be on a node server; it won't work to simply open in browser because the application will lack read/write permissions.)
6. Go write a cool nonlinear story and please let me know if this app worked for you or if you notice any bugs!

To use the renderer in your own project,

1. Copy the scripts directory somewhere into your project.
2. Make sure you have a story_data folder in your project's root directory, and your storyname.json file is in it.
3. In a script tag or file linked to your project HTML document, import prepareStoryInstance and StoryRenderer.
4. Use prepareStoryInstance to read your story from disc, and pass that story to a new StoryRenderer instance. An example of this can be seen in renderer-only-application.ts
5. The StoryRenderer will automatically render story content and options into divs with the ids story-text and story-options. Make sure these exist somewhere in your HTML structure and you're golden!
6. Let me know what project you're using my little app for, because I'd love to hear all about it!! :) Also, please credit me if you publish / distribute your work in any way (it's just good etiquette).

Long Term Project Goals

• A frontpage for the application with a menu for loading in stories and selecting editor/reader mode and dark/light mode settings (would allow it to be packaged into an executable, making it easier to run and use).
• A menu for setting "conditional story options" only shown to the reader dependent on writer-defined logic. Currently functional but waiting on front-end implementation.
• Reader state tracking and an attached event system for incrementing scores, printing images, and other functionality to be called when a reader traverses particular nodes.
• An autosave system that clears out older autosaves after a while; currently they just stack up in `story_data` endlessly.

Copyright Information

The contents of this repository are published under a Creative Commons Attribution 4.0 International License. In short:

You are free to:
Share — copy and redistribute the material in any medium or format.
Adapt — remix, transform, and build upon the material for any purpose, even commercially.

Under the following terms:
Attribution — You must give appropriate credit, provide a link to the license, and indicate if changes were made. You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use.
No additional restrictions — You may not apply legal terms or technological measures that legally restrict others from doing anything the license permits.