Javascrip parser and runner for Ficdown.
Go to file
Rudis Muiznieks 5794db26d6
support scenes with empty titles
closes #5
2017-12-28 16:21:39 -06:00
src support scenes with empty titles 2017-12-28 16:21:39 -06:00
.gitignore updated empty list item regex (fixes #1); added internal scene id to player (fixes #2) 2014-07-02 15:51:21 -05:00
Gruntfile.coffee updated empty list item regex (fixes #1); added internal scene id to player (fixes #2) 2014-07-02 15:51:21 -05:00
README.md updated readme docs 2015-07-26 14:38:27 -05:00
package-lock.json support scenes with empty titles 2017-12-28 16:21:39 -06:00
package.json support scenes with empty titles 2017-12-28 16:21:39 -06:00

README.md

Ficdown.js

Ficdown is a system for building interactive fiction using MarkDown syntax, and Ficdown.js is a Javascript library for presenting Ficdown stories interactively in a web browser. See Ficdown.com for more information.

Dependencies

Ficdown.js uses jQuery for DOM manipulation and PageDown to convert MarkDown into HTML.

Usage

You can obtain ficdown.js or ficdown.min.js from the latest version on the releases page. Assuming you've uploaded it to your web server along with a Ficdown story file named story.md, your HTML document would look something like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Ficdown Story</title>
  </head>
  <body>
    <!-- This container will be used by Ficdown.js to present the story -->
    <div id="main"></div>

    <!-- include Ficdown.js dependencies from CDNs -->
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/pagedown/1.0/Markdown.Converter.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/pagedown/1.0/Markdown.Sanitizer.min.js"></script>

    <!-- include locally hosted Ficdown.js -->
    <script src="ficdown.min.js"></script>

    <script>
      // retrieve the Ficdown source file story.md via ajax
      $.get('story.md', function(data){

        // after retrieving the file, parse it
        story = parseText(data);

        // after parsing the story, load it into the div with id='main'
        player = new Player(story, 'main');
        player.play();

      }, 'text');
    </script>
  </body>
</html>

You will probably want to do some styling to make the story look better. For an example stylesheet, see the example included in the Ficdown.js repository at /src/example/player.styl.