rudism/ficdown.js
1
0
Fork 0
Code Issues 3 Pull requests Projects Releases 7 Wiki Activity

updated docs for new typescript changes

Browse source
This commit is contained in:
Rudis Muiznieks 2019-04-28 17:52:12 -05:00
parent f105d9f1d9
commit 0611c9ced5
7 changed files with 41 additions and 347 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
README.md
View file

@ -4,45 +4,39 @@ Ficdown is a system for building interactive fiction using MarkDown syntax, and
## Dependencies
Ficdown.js uses [jQuery](http://jquery.com) for DOM manipulation and [PageDown](https://code.google.com/p/pagedown/) to convert MarkDown into HTML.
The generated ficdown.js and ficdown.min.js include all dependencies ([JQuery](https://jquery.com) and [markdown-it](https://github.com/markdown-it/markdown-it)), so no additional scripts are required to play games.
## Bulding
You can compile, pack, and minify with these commands:
```
> npm install
> npm run build
> npm run pack
> npm run minify
```
You can combine all three `build`, `pack`, and `minify` steps with this command:
```
> npm run make
```
## Usage
You can obtain *ficdown.js* or *ficdown.min.js* from the latest version on the [releases](https://github.com/rudism/Ficdown.js/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:
You can obtain *ficdown.js* or *ficdown.min.js* from the latest version on the [releases](https://github.com/rudism/Ficdown.js/releases) page. See the example [test.html](https://github.com/rudism/Ficdown.js/blob/master/test.html) file for basic usage and styling. The example includes the story content in a hidden text area so it can run locally in a browser.
```html
<!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>
```javascript
var player = new Ficdown(playerOptions);
player.play();
```
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](/src/example/player.styl).
Your `playerOptions` should be an object with the following properties:
- `source`: Your story's ficdown code. Either store it right in the html document, or make an XHR to pull the story content in from an external file, and put its content here.
- `id`: The id of a div on the page to inject the game into. For example if your html is `<div id='game'/>` then you would pass `game` here.
- `scroll` (optional): Set this to `true` if you want the player's full game history to remain on the screen and automatically scroll the page down whenever a new scene is added to the bottom. By default each scene will replace the previous one and the page will be scrolled to the top.
- `html` (optional): Set this to true if your ficdown file contains raw html that you want rendered. By default html will not be rendered.
- `startText` (optional): Set this to override the link text that begins the game.
- `endMarkdown` (optional): Set this to override the "game over" content that is displayed when the player reaches a scene with no more links to follow. Include an anchor with the href set to `restart()` if you want a link that will start the story over from the beginning.

33
src/example/index.html
View file

@ -1,33 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>The Robot King</title>
<meta charset="utf-8">
<meta name="HandheldFriendly" content="True" />
<meta name="MobileOptimized" content="320" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="http://fonts.googleapis.com/css?family=Maven+Pro:400,700" rel="stylesheet">
<link rel="stylesheet" href="player.css">
</head>
<body>
<div id="container" class="container">
<div id="main">
</div>
</div>
<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>
<script src="ficdown.min.js"></script>
<script>
var story = location.search.replace('?', '');
if(!story){
story = 'story.md';
}
$.get(story, function(data){
story = parseText(data);
player = new Player(story, 'main');
player.play();
}, 'text');
</script>
</body>
</html>

39
src/example/player.styl
View file

@ -1,39 +0,0 @@
html, body
height 100%
body
font-family 'Maven Pro', sans-serif
background url('science.png') fixed repeat
html, body, h1, h2, p, ul, div
margin 0
padding 0
ul
list-style-type circle
margin-left 1.33em
#container
background-color rgba(255,255,255,0.95)
max-width 800px
margin 0 auto
height 100%
overflow-y scroll
overflow-x hidden
#main
position relative
padding 5%
p, h1, h2, ul
margin-bottom 1em
a
color #c00
text-decoration none
&.disabled
color #999
&.chosen
color #000
&:hover
color #000
&:hover
text-decoration underline
color #f00
&.disabled
text-decoration none
color #999
cursor not-allowed

BIN
src/example/science.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 149 KiB

178
src/example/story.md
View file

@ -1,178 +0,0 @@
# [The Robot King](/robot-cave)
An experiment in markdown-based interactive fiction by Rudis Muiznieks.
This story was written in [Ficdown](http://rdsm.ca/ficdown), a subset of [Markdown](http://daringfireball.net/projects/markdown/) syntax with specific conventions for creating state-aware interactive fiction.
*Release r2014-07-01*
## Robot Cave
> You wake up and emit a great robot yawn as you stretch your metallic arms. Today is the big day! You have to start your new job working for the Robot King at the Robot Palace!
You're in your cave and you can see [a peg by the door where you usually hang your raincoat|your raincoat hanging by the door](?raincoat).
Your cave only has one tiny window, and through it you can see [the sun shining through the clouds|that it's raining heavily outside](?stopped-raining).
**What do you want to do?**
- [Go outside and start walking to the palace.](/outside)
- [|Wait for it to stop raining.](?stopped-raining#stopped-raining)
- [|Put on your raincoat.](?raincoat#raincoat)
### Raincoat
You take your raincoat and put it on. It fits perfectly!
### Stopped Raining
It feels like hours, but it finally stops raining. You hope you won't be late for your new job!
## Outside
> You step through the door and feel the water flowing over your metal body. Brrr! That's cold! You start to think that maybe getting your raincoat would be a good idea. This is just the kind of rain that might turn you into a rusty robot statue if you stay in it too long.
You're standing on your front porch in the pouring rain. You need to get to the palace for your new job, but you don't want to rust!
**What will you do?**
- [Continue walking to the palace.](/rusted)
- [Go back into your cave.](/robot-cave)
## [Outside](?stopped-raining)
You step through the door and feel the early afternoon sun warming your metal body. It feels good, but you were supposed to start your new job early in the morning!
You run as fast as you can all the way to the Robot Palace, but it's already too late.
"You were supposed to be here first thing in the morning," says the palace guard. "We can't have sleepy-head robots working at the Robot Palace! Try finding a different job instead."
**You've been fired!**
## Rusted!
You start walking toward the Robot Palace in the rain. Who needs a raincoat anyway? As you move down the path, rust starts forming on your legs and knees so you have to walk slower. Eventually the rust gets so bad that you can't move anymore at all!
As your whole body rusts over, you wonder what you could have been thinking. Only a crazy robot would ever go out into the rain without a raincoat!
You will have a long time to think about your mistake while you wait for another robot to come and help scrape off all the rust so you can move again. Since you never made it to the palace for your new job, you'll probably be fired.
**You have turned into a rusty robot statue!**
## [Outside](?raincoat)
You head out the door and into the rain. It's a good thing you put on your raincoat, because it's just the kind of rain that would probably turn you into a rusty robot statue if you stayed in it for too long.
You follow the road by your house all the way through town until you reach the door to the Robot Palace.
The palace guard looks you up and down. "What do you want?" he asks.
**What will you tell him?**
- ["I'm the new janitor-bot!"](/palace-gate#new-job)
- ["I'd like a tour of the palace!"](/palace-gate)
## Palace Gate
The robot guard looks at you and [nods|frowns](?new-job). "[Oh yeah, they told me to expect you. You're supposed to be starting today right?|We don't do tours on weekdays. Hey, aren't you the new janitor-bot who's starting today?](?new-job)"
**How will you answer?**
- ["Yup!"](/palace-entrance)
- ["Nope!"](/back-to-bed)
## Back to Bed
The robot guard looks at you with a confused expression on his face, then stops paying attention to you.
I guess you decided that you don't want a new job today after all. You turn around and walk all the way back home, where you hop back into bed for a quick nap.
Without a job, you fail to earn any money and you can no longer afford fuel to power yourself.
**You run out of fuel and shut down forever!**
## Palace Entrance
> The robot guard nods and ushers you into the palace through the large front doors.
> "You'll want to report to the Master Janitor Robot downstairs. He'll give you your uniform and get you started," the guard says, then quickly leaves and shuts the doors behind him.
The palace entrance is one of the biggest rooms you've ever seen! There are statues of knight-robots and pictures of all of the old Robot Kings going back for centuries lining the walls. The picture closest to you is a picture of the current Robot King. He looks a lot like you!
There is a grand double staircase leading up to the throne room, a hallway straight ahead that leads to the living quarters, and a door to your left that says "Stairs."
**Where do you want to go?**
- [Go upstairs to the throne room.](#throne-room)
- [Go through the hall to the living quarters.](/living-quarters)
- [Go downstairs to see the Master Janitor Robot.](/palace-basement)
### Throne Room
You start to ascend the stairs, but then think better of it. You wouldn't know what to do if you ran into the Robot King up there anyway!
## Living Quarters
You walk into the hall that leads to the living quarters, and find a gate blocking your way. There is a robot scanner installed on the gate. I guess it only opens for robots who live or work here. Maybe the Master Janitor Robot will have a way for you to get through.
[Go back to the palace entrance.](/palace-entrance#tried-gate)
## Palace Basement
> You walk down three flights of stairs until you reach the basement. The staircase is dark, but the basement is even darker. It's a little scary! You hope you can get the information you need from the Master Janitor Robot and get out of here as quickly as possible.
You're standing in the basement where new employees can pick up their uniforms and learn what their jobs are for the day.
[The Master Janitor Robot is pacing back and forth here, muttering to himself.|There is a funny looking robot here pacing back and forth, muttering to himself. That must be the Master Janitor Robot. When he notices you, he stops muttering and stares at you with crazy eyes.](?talked-to-master)
**What will you do?**
- [Go back upstairs.](/palace-entrance)
- [Ask the Master Janitor Robot what he's muttering about.](#talked-to-master+muttering)
- [|Ask the Master Janitor Robot about your uniform.](?uniform#talked-to-master+uniform)
- [Ask the Master Janitor Robot about the gate upstairs.](?tried-gate#talked-to-master+about-the-gate)
- [Ask the Master Janitor Robot about your job.](?uniform#started-job)
### Muttering
"Muttering?" says the Master Janitor Robot. "Was I muttering? I hadn't noticed."
The Master Janitor Robot pauses thoughtfully for a moment, then resumes muttering.
### Uniform
The Master Janitor Robot's eyes light up a pleasant shade of blue. "Ahh, you must be the new janitor-bot starting today!" he says.
He walks to a box in the corner and pulls out a blue janitor's uniform, then hands it to you. You put it on.
### About the Gate
"Ahh, yes, the gate," says the Master Janitor Robot. "Quite a clever contraption. There's a scanner attached that looks for a special device that's sewn into the [uniform I gave you|uniform that employees here wear](?uniform). [As I said, you'll want to head up there now to start cleaning room 13.](?started-job)"
### Started Job
["Like I said before, your|"Ready to get going?" says the Master Janitor Robot. He continues before you have a chance to answer. "Good, good. Your](?started-job) first job will be to clean room 13 in the living quarters. That's where the Robot King keeps all of his spare robes and crowns. There's a janitor's closet right next to that room where you can get a mop to clean the floors, and a duster to dust off the crowns."
The Master Janitor Robot scratches his chin for a moment, then resumes pacing back and forth and muttering to himself.
## [Living Quarters](?uniform)
You head into the hallway that leads to the living quarters and come to a large gate. A scanner attached to the gate lights up and beeps a few times. After a moment, you hear a click and a soft hiss as the gate opens to let you pass. Once you walk through, the gate hisses and clicks shut behind you.
You notice with some alarm that there's no scanner on the inside of the gate. You don't know how to get back out!
[Continue...](/living-quarters-2)
## [Living Quarters 2]("Living Quarters")
That's when you realize that you never asked the Master Janitor Bot what your job here was. You just took your uniform and left!
**You have failed to perform your new job because you never found out what it was.**
## [Living Quarters 2](?started-job "Living Quarters")
That's no problem though, because you already know what your job is. You continue down the hall, looking at and passing all of the doors until you come to the one marked with a "13." Right next to it is another door labeled "Janitor's Closet."
You open the closet and grab the mop and duster. You're so excited! Your first day as a janitor working for a Robot King that looks just like you, and you are about to enter a room containing all of his spare robes and crowns. What fun!
**You have reached the end of the intro to The Robot King.**

61
src/example/testing.md
View file

@ -1,61 +0,0 @@
# [Cloak of Darkness](/foyer)
A basic IF demonstration.
Hurrying through the rainswept November night, you're glad to see the bright lights of the Opera House. It's surprising that there aren't more people about but, hey, what do you expect in a cheap demo game...?
## [Foyer]("Foyer of the Opera House")
[You](#examined-self) are standing in a spacious hall, splendidly decorated in red and gold, with glittering chandeliers overhead. The entrance from the street is to the [north](#tried-to-leave), and there are doorways [south](/bar) and [west](/cloakroom).
### Tried to Leave
[You've](#examined-self) only just arrived, and besides, the weather outside seems to be getting worse.
### Examined Self
[You aren't carrying anything.|You are wearing a handsome cloak, of velvet trimmed with satin, and slightly splattered with raindrops. Its blackness is so deep that it almost seems to suck light from the room.](?lost-cloak)
## Cloakroom
The walls of this small room were clearly once lined with hooks, though now only one remains. The exit is a door to the [east](/foyer).
[Your cloak is on the floor here.](?dropped-cloak)
[Your cloak is hanging on the hook.](?hung-cloak)
- [Examine the hook.](#examined-hook)
- [Hang your cloak on the hook.](?examined-self&!lost-cloak#lost-cloak+hung-cloak)
- [Drop your cloak on the floor.](?examined-self&!lost-cloak#lost-cloak+dropped-cloak)
### Examined Hook
It's just a small brass hook, [with your cloak hanging on it|screwed to the wall](?hung-cloak).
## [Bar]("Foyer Bar")
You walk to the bar, but it's so dark here you can't really make anything out. The foyer is back to the [north](/foyer).
- [Feel around for a light switch.](?!scuffled1#scuffled1+not-in-the-dark)
- [Sit on a bar stool.](?!scuffled2#scuffled2+not-in-the-dark)
### Not in the Dark
In the dark? You could easily disturb something.
## [Bar](?lost-cloak "Foyer Bar")
The bar, much rougher than you'd have guessed after the opulence of the foyer to the north, is completely empty. There seems to be some sort of message scrawled in the sawdust on the floor. The foyer is back to the [north](/foyer).
[Examine the message.](/message)
## [Message]("Foyer Bar")
The message, neatly marked in the sawdust, reads...
**You have won!**
## [Message](?scuffled1&scuffled2 "Foyer Bar")
The message has been carelessly trampled, making it difficult to read. You can just distinguish the words...
**You have lost.**

11
test.html
View file

@ -3,6 +3,17 @@
<head>
<meta charset='utf-8'>
<title>Ficdown.js Test</title>
<style>
a.disabled {
color: #999;
}
a.disabled.chosen {
color: #000;
}
a.disabled:hover {
cursor: not-allowed;
}
</style>
</head>
<body>
<textarea id='source' style='display: none;'>